history bug fix

lochungtin · Jun 1, 2021 · 39440da · 39440da
1 parent 1767a0a
commit 39440da
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 35 deletions.
diff --git a/src/components/Board/index.tsx b/src/components/Board/index.tsx
@@ -10,15 +10,15 @@ import { BoardStyles } from './styles';
 
 import Board from '../../game/board';
 import { store } from '../../redux/store';
-import { updateGame, updateHistory, updateRecords, } from '../../redux/action';
+import { clearHistory, updateGame, updateHistory, updateRecords, } from '../../redux/action';
+import { compare } from '../../utils/array';
 import { keygen } from '../../utils/keygen';
 import { Direction } from '../../utils/enums';
-import { ColorSchemeType, GameConfig, RecordType, } from '../../utils/types';
-import { compare } from '../../utils/array';
+import { ColorSchemeType, GameConfig, HistoryType, RecordType, } from '../../utils/types';
 
 interface ReduxProps {
     colortheme: ColorSchemeType,
-    history: GameConfig,
+    history: HistoryType,
     game: GameConfig,
     records: Array<RecordType>,
 }
@@ -41,7 +41,7 @@ class BoardView extends React.Component<ReduxProps> {
 
     onNewGame = () => {
         store.dispatch(updateGame({ ...new Board(4) }));
-        store.dispatch(updateHistory(null));
+        store.dispatch(clearHistory());
         this.setState({ open: false });
     }
 
@@ -51,25 +51,27 @@ class BoardView extends React.Component<ReduxProps> {
 
         store.dispatch(updateRecords(records));
         store.dispatch(updateGame({ ...new Board(4) }));
-        store.dispatch(updateHistory(null));
+        store.dispatch(clearHistory());
         this.setState({ open: false });
     }
 
     swipe = (direction: Direction): void => {
-        let temp = { ...this.props.game };
-
-        // update history
-        store.dispatch(updateHistory({ ...temp }));
+        let temp: GameConfig = { ...this.props.game };
+        let newFrame: GameConfig = { ...this.props.game };
 
         // perform swipe
-        Board.swipe(temp, direction);
+        Board.swipe(newFrame, direction);
 
         // validate board
-        if (!Board.validate(temp))
+        if (!Board.validate(newFrame))
             this.setState({ open: true });
 
         // save game config
-        store.dispatch(updateGame(temp));
+        store.dispatch(updateGame(newFrame));
+
+        // update history
+        if (!this.props.history.prev || !compare(temp.board, newFrame.board))
+            store.dispatch(updateHistory({ curr: newFrame, prev: temp }));
     }
 
     render() {

diff --git a/src/redux/action.ts b/src/redux/action.ts
@@ -1,12 +1,17 @@
-import { ActionType, ColorSchemeType, GameConfig, RecordType, } from '../utils/types';
+import { ActionType, ColorSchemeType, GameConfig, HistoryType, RecordType, } from '../utils/types';
 
 export enum ActionName {
+    CLEAR_HISTORY,
     SAVE_COLOR_CONFIG,
     SAVE_GAME_STATE,
     SAVE_HISTORY,
     SAVE_RECORDS,
 }
 
+export const clearHistory = (): ActionType => ({
+    type: ActionName.CLEAR_HISTORY,
+});
+
 export const updateColors = (payload: ColorSchemeType): ActionType => ({
     type: ActionName.SAVE_COLOR_CONFIG,
     payload,
@@ -17,7 +22,7 @@ export const updateGame = (payload: GameConfig): ActionType => ({
     payload,
 });
 
-export const updateHistory = (payload: GameConfig): ActionType => ({
+export const updateHistory = (payload: HistoryType): ActionType => ({
     type: ActionName.SAVE_HISTORY,
     payload,
 });

diff --git a/src/redux/reducer.ts b/src/redux/reducer.ts
@@ -1,19 +1,29 @@
 import { combineReducers } from 'redux';
 
+import Board from '../game/board';
 import { ActionName } from './action';
 
 import { darktheme } from '../data/color';
 
-import { ActionType, ColorSchemeType, GameConfig, RecordType, } from '../utils/types';
+import { ActionType, ColorSchemeType, GameConfig, HistoryType, RecordType, } from '../utils/types';
 
-const saveColors = (theme: ColorSchemeType = darktheme, action: ActionType) => 
+const saveColors = (theme: ColorSchemeType = darktheme, action: ActionType) =>
     action.type === ActionName.SAVE_COLOR_CONFIG ? action.payload : theme;
 
-const saveGame = (board: GameConfig = null, action: ActionType) => 
+const saveGame = (board: GameConfig = new Board(4), action: ActionType) =>
     action.type === ActionName.SAVE_GAME_STATE ? action.payload : board;
 
-const saveHistory = (board: GameConfig = null, action: ActionType) => 
-    action.type === ActionName.SAVE_HISTORY ? action.payload : board;
+const emptyHistory = { curr: undefined, prev: undefined };
+const saveHistory = (board: HistoryType = emptyHistory, action: ActionType) => {
+    switch (action.type) {
+        case ActionName.CLEAR_HISTORY:
+            return emptyHistory;
+        case ActionName.SAVE_HISTORY:
+            return action.payload;
+        default:
+            return board;
+    }
+}
 
 const saveRecords = (records: Array<RecordType> = [], action: ActionType) =>
     action.type === ActionName.SAVE_RECORDS ? action.payload : records;

diff --git a/src/screens/main.tsx b/src/screens/main.tsx
@@ -10,9 +10,9 @@ import { darktheme, lighttheme, } from '../data/color';
 import { MainStyles, ScreenStyles, } from './styles';
 
 import Board from '../game/board';
-import { updateColors, updateGame, updateHistory, } from '../redux/action';
+import { clearHistory, updateColors, updateGame, updateHistory, } from '../redux/action';
 import { store } from '../redux/store';
-import { ColorSchemeType, GameConfig, RecordType, } from '../utils/types';
+import { ColorSchemeType, GameConfig, HistoryType, RecordType, } from '../utils/types';
 
 interface NavProps {
     navigation: StackNavigationProp<any, any>,
@@ -21,30 +21,23 @@ interface NavProps {
 interface ReduxProps {
     colortheme: ColorSchemeType,
     game: GameConfig,
-    history: GameConfig,
+    history: HistoryType,
     records: Array<RecordType>,
 }
 
 class Screen extends React.Component<NavProps & ReduxProps> {
-
-    constructor(props) {
-        super(props);
-
-        if (props.game === null)
-            store.dispatch(updateGame({ ...new Board(4) }));
-    }
-
     back = () => {
         if (this.props.history !== null) {
-            let curGame = { ...this.props.game };
-            store.dispatch(updateGame(this.props.history));
-            store.dispatch(updateHistory(curGame));
+            let curr = { ...this.props.game };
+            let prev = { ...this.props.history.prev };
+            store.dispatch(updateGame(prev));
+            store.dispatch(updateHistory({ curr: prev, prev: curr, }));
         }
     }
 
     newGame = () => {
         store.dispatch(updateGame({ ...new Board(4) }));
-        store.dispatch(updateHistory(null));
+        store.dispatch(clearHistory());
     }
 
     toggleTheme = () => store.dispatch(updateColors(this.props.colortheme.name === 'dark' ? lighttheme : darktheme));

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -52,3 +52,9 @@ export interface RecordType {
     highestTile: number,
     score: number,
 }
+
+// history types
+export interface HistoryType {
+    curr: GameConfig,
+    prev: GameConfig,
+}