youhua

src/components/Square.js

@@ -4,8 +4,6 @@ import styles from './square.css';
 class Square extends Component {
   render() {
     const value = this.props.value;
-    // const blue = Object.assign({}, styles.blue, styles.square);
-    console.log(styles.blue)
     return <div className={`${styles.square} ${value === 'x' ?  styles.blue: value === 'o' ? styles.red : styles.default}`} onClick={this.props.onClick}><span className={styles.squareVal}>{this.props.value}</span></div>;
   }
 }

src/models/container.js

@@ -33,9 +33,31 @@ export default {
   },
 
   reducers: {
-    play(state, action) {
+    updateState(state, action) {
       return { ...state, ...action.payload };
     },
+    checkMate(state, action) {
+      return {
+        ...state,
+        winner: action.winner
+      }
+    },
+    reset(state) {
+      return {
+        ...state,
+        playerValue: 'x',// x or o
+        record: [],
+        step: 0,
+        winner: ''
+      }
+    },
+    goBack(state, action) {
+      return {
+        ...state,
+        ...action.payload
+      }
+    }
+
   },
 
 };

src/routes/Container.js

@@ -19,6 +19,21 @@ function Container({ dispatch, con }) {
     [0, 4, 8],
     [2, 4, 6]
   ]
+  const calcWinner = (item) => {
+    let rst = '';
+    array.map(items => {
+      let [a, b, c] = items;
+      if (item[a] && item[b] && item[c]) {
+        if (item[a] === item[b] && item[c] === item[b]) {
+          rst = item[a];
+          return rst;
+        }
+      }
+      return rst;
+    })
+    return rst;
+  }
+
   const mapSquare = (item, index, row) => {
     let chess = [];
     const play = (index, row) => {
@@ -27,31 +42,27 @@ function Container({ dispatch, con }) {
         let newArr = step === 0 ? new Array(9).fill(null) : Object.assign([], record[step - 1].records);//备份数组用作后续修改
         const handlerChange = (arr) => {
           dispatch({
-            type: 'con/play',
+            type: 'con/updateState',
             payload: {
               playerValue: next,
-              record: record.concat({
-                step: record.length + 1,
+              record: step === record.length ? record.concat({
+                step: step + 1,
                 coordinate: `[${row}, ${index}]`,
                 records: chess.concat(arr)
+              }) : record.slice(0, step).concat({
+                step: step + 1,
+                coordinate: `[${row}, ${index}]`,
+                records: chess.slice(0, step).concat(arr)
               }),
-              step: record.length + 1
-            }
-          })
-          array.map(items => {
-            let [a, b, c] = items;
-            if (arr[a] && arr[b] && arr[c]) {
-              if (arr[a] === arr[b] && arr[c] === arr[b]) {
-                dispatch({
-                  type: 'con/play',
-                  payload: {
-                    winner: arr[a]
-                  }
-                })
-              }
+              step: step + 1
             }
-            return winner;
           })
+          if (calcWinner(arr) !== '') {
+            dispatch({
+              type: 'con/checkMate',
+              winner: calcWinner(arr)
+            })
+          }
         }
         switch (row) {
           case 0:
@@ -94,20 +105,24 @@ function Container({ dispatch, con }) {
   }
   const reset = () => {
     dispatch({
-      type: 'con/play',
-      payload: {
-        playerValue: 'x',// x or o
-        record: [],
-        step: 0,
-        winner: ''
-      }
+      type: 'con/reset',
+      // payload: {
+      //   playerValue: 'x',// x or o
+      //   record: [],
+      //   step: 0,
+      //   winner: ''
+      // }
     })
   }
   const recall = (records, index) => {
+    let next = index % 2 === 0 ? 'o' : 'x';
+    // console.log(index)
     dispatch({
-      type: 'con/play',
+      type: 'con/goBack',
       payload: {
-        step: index + 1
+        winner: calcWinner(records.records),
+        step: index + 1,
+        playerValue: next
       }
     })
   }