添加胜利颜色

src/component/box.js

 import styled from 'styled-components';
-
+import WinImg from './winImg';
 const Box = styled.div `
   background: #fff;
   border: 1px solid #999;
@@ -16,7 +16,7 @@ const Box = styled.div `
 function BoxMaster(props) {
   const handelClick = (value) => {
     // 判断游戏是否有胜利者
-    if (props.winer) return
+    if (props.winner) return
     // 判断是否重复点击
     if (!reClick(value)) {
       // 更新整体
@@ -48,8 +48,13 @@ function BoxMaster(props) {
 
 
   return (
-    <Box onClick = { () => handelClick(props)} style={{background:props.color}}>
-      { props.flag }
+    <Box onClick={ () => handelClick(props)} style={{background:props.winner && props.value ===  props.winner.value ?"":props.color}}>
+      {
+        props.winner && props.value ===  props.winner.value ? (
+          <WinImg flag={props.flag} />
+        ) : (<span>{props.flag}</span>)
+
+      }
     </Box>
   )
 }

src/component/winImg.css

+.winCss {
+  font-size: 14px;
+  animation: winAnimation 2s infinite ;
+  -moz-animation: winAnimation 2s infinite ;	/* Firefox */
+  -webkit-animation: winAnimation 2s infinite ;	/* Safari 和 Chrome */
+  -o-animation: winAnimation 2s infinite ;	/* Opera */
+}
+
+@keyframes winAnimation
+{
+  0%   {background: red;}
+  25%  {background: yellow;}
+  50%  {background: blue;}
+  75%  {background: green;}
+  100% {background: white;}
+}
+
+@-moz-keyframes winAnimation /* Firefox */
+{
+  0%   {background: red;}
+  25%  {background: yellow;}
+  50%  {background: blue;}
+  75%  {background: green;}
+  100% {background: white;}
+}
+
+@-webkit-keyframes winAnimation /* Safari 和 Chrome */
+{
+  0%   {background: red;}
+  25%  {background: yellow;}
+  50%  {background: blue;}
+  75%  {background: green;}
+  100% {background: white;}
+}
+
+@-o-keyframes winAnimation /* Opera */
+{
+  0%   {background: red;}
+  25%  {background: yellow;}
+  50%  {background: blue;}
+  75%  {background: green;}
+  100% {background: white;}
+}

src/component/winImg.js

+import React,{Component} from 'react';
+import style from './winImg.css';
+
+export default class WinImg extends Component {
+
+  constructor(props) {
+    super(props)
+
+  }
+
+  render(){
+    const {flag} = this.props
+    return (
+        <div className={style.winCss}>
+            <span>winner is {flag} </span>
+        </div>
+    )
+  }
+}

src/global.css

@@ -6,4 +6,3 @@ html, body, #root {
 body {
   margin: 0;
 }
-

src/models/g.js

 export default {
   namespace: 'main',
   state: {
-    nowflag: "X",
+    nowFlag: "X",
     list: [{
       value: 1,
       flag: null,
@@ -31,7 +31,7 @@ export default {
       flag: null,
     }],
     actionData: [],
-    winer: null,
+    winner: null,
     goBackKey: null
   },
   reducers: {
@@ -39,7 +39,7 @@ export default {
       const { tempFlag } = action.payload
       return {
         ...state,
-        nowflag: tempFlag,
+        nowFlag: tempFlag,
       }
     },
     updateSelectOne(state, action) {
@@ -63,15 +63,15 @@ export default {
         ...state,
         list: tempData,
         actionData: tempActionData,
-        nowflag: tempNowFlag,
+        nowFlag: tempNowFlag,
         goBackKey: goBackKey
       }
     },
-    updateWiner(state, action) {
-      const { winer } = action.payload
+    updateWinner(state, action) {
+      const { winner } = action.payload
       return {
         ...state,
-        winer: winer,
+        winner: winner,
         goBackKey: null
       }
     }
@@ -137,7 +137,7 @@ export default {
     },
     // 回退操作
     * updateRenderDataFn({
-      flag,
+      booleanFlag,
       key,
       actionData,
     }, {
@@ -146,12 +146,13 @@ export default {
       select
     }) {
       const tempList = yield select(state=> state.main.list)
-      let tempNowFlag = yield select(state=> state.main.nowflag)
+      let tempNowFlag = yield select(state=> state.main.nowFlag)
       let tempActionDataList = JSON.parse(JSON.stringify(actionData))
       let tempData = []
       let tempActionData = []
       let goBackKey = null
-      if (!flag) {
+      // 如果点击的不是重玩
+      if (!booleanFlag) {
         let index = tempActionDataList.findIndex((item, index) => {
           return item.key === key
         })
@@ -177,16 +178,16 @@ export default {
       })
     },
     // 更新获胜者
-    * updateWinerFn({
-      winer
+    * updateWinnerFn({
+      winner
     }, {
       call,
       put,
       select
     }) {
       yield put({
-        type: "updateWiner",
-        payload:{ winer }
+        type: "updateWinner",
+        payload:{ winner }
       })
     }
   },

src/pages/index.js

@@ -10,21 +10,22 @@ import {
 function Main({
   dispatch,
   list,
-  nowflag,
+  nowFlag,
   actionData,
-  winer
+  winner
 }) {
 
 
   useEffect(() => {
-    if (winer) return // 如果有胜利者就不执行判断胜负方法
+    if (winner) return // 如果有胜利者就不执行判断胜负方法
     let twoDArry = renderArry(list)
     if (!twoDArry) return
     let reData = checkWin(twoDArry)
+    console.log("reData",reData)
     if (reData && reData.status === 'win') {
       dispatch({
-        type: "main/updateWinerFn",
-        winer: reData.winer
+        type: "main/updateWinnerFn",
+        winner: reData.winner
       })
     }
 
@@ -48,110 +49,111 @@ function Main({
     if (twoDArry[0][0].flag != null && twoDArry[0][1].flag != null && twoDArry[0][2].flag != null && twoDArry[0][0].flag === twoDArry[0][1].flag && twoDArry[0][1].flag === twoDArry[0][2].flag) {
       return {
         status: 'win',
-        winer: twoDArry[0][0]
+        winner: twoDArry[0][0]
       }
     }
     // 判断第二行
     if (twoDArry[1][0].flag != null && twoDArry[1][1].flag != null && twoDArry[1][2].flag != null && twoDArry[1][0].flag === twoDArry[1][1].flag && twoDArry[1][1].flag === twoDArry[1][2].flag) {
       return {
         status: 'win',
-        winer: twoDArry[1][0]
+        winner: twoDArry[1][0]
       }
     }
     // 判断第三行
     if (twoDArry[2][0].flag != null && twoDArry[2][1].flag != null && twoDArry[2][2].flag != null && twoDArry[2][0].flag === twoDArry[2][1].flag && twoDArry[2][1].flag === twoDArry[2][2].flag) {
       return {
         status: 'win',
-        winer: twoDArry[2][0]
+        winner: twoDArry[2][0]
       }
     }
     // 判断第一列
     if (twoDArry[0][0].flag != null && twoDArry[1][0].flag != null && twoDArry[2][0].flag != null && twoDArry[0][0].flag === twoDArry[1][0].flag && twoDArry[1][0].flag === twoDArry[2][0].flag) {
       return {
         status: 'win',
-        winer: twoDArry[0][0]
+        winner: twoDArry[0][0]
       }
     }
     // 判断第二列
     if (twoDArry[0][1].flag != null && twoDArry[1][1].flag != null && twoDArry[2][1].flag != null && twoDArry[0][1].flag === twoDArry[1][1].flag && twoDArry[1][1].flag === twoDArry[2][1].flag) {
       return {
         status: 'win',
-        winer: twoDArry[0][1]
+        winner: twoDArry[0][1]
       }
     }
     // 判断第三列
     if (twoDArry[0][2].flag != null && twoDArry[1][2].flag != null && twoDArry[2][2].flag != null && twoDArry[0][2].flag === twoDArry[1][2].flag && twoDArry[1][2].flag === twoDArry[2][2].flag) {
       return {
         status: 'win',
-        winer: twoDArry[0][2]
+        winner: twoDArry[0][2]
       }
     }
     // 判断交叉左上角到右下角
     if (twoDArry[0][0].flag != null && twoDArry[1][1].flag != null && twoDArry[2][2].flag != null && twoDArry[0][0].flag === twoDArry[1][1].flag && twoDArry[1][1].flag === twoDArry[2][2].flag) {
       return {
         status: 'win',
-        winer: twoDArry[0][0]
+        winner: twoDArry[0][0]
       }
     }
     // 判断交叉右上角到左下角
     if (twoDArry[0][2].flag != null && twoDArry[1][1].flag != null && twoDArry[2][0].flag != null && twoDArry[0][2].flag === twoDArry[1][1].flag && twoDArry[1][1].flag === twoDArry[2][0].flag) {
       return {
         status: 'win',
-        winer: twoDArry[0][2]
+        winner: twoDArry[0][2]
       }
     }
   }
 
 
-  function handleChangeData(flag, key, actionData ) {
+  function handleChangeData(booleanFlag, key, actionData ) {
     dispatch({
-      type: 'main/updateWinerFn',
-      winer: null
+      type: 'main/updateWinnerFn',
+      winner: null
     })
     dispatch({
       type: 'main/updateRenderDataFn',
       key: key,
       actionData: actionData,
-      flag: flag,
+      booleanFlag: booleanFlag,
     })
   }
 
   return (
-    <div >
-      <div className = {styles.content} >
+    <div>
+      <div className={styles.content}>
         {
           list.map((item, index) => {
             let colorStr = item.flag === 'X'?'blue':item.flag==='O'?'red':''
             return (
-            <Box key = {item.value}
-            value = {item.value}
-            nowFliage = {nowflag}
-            dispatch = {dispatch}
-            datasource = {list}
-            flag = {item.flag}
-            actionData = {actionData}
-            winer = {winer}
-            color = {colorStr}
+              <Box
+              key={item.value}
+              value={item.value}
+              nowFliage={nowFlag}
+              dispatch={dispatch}
+              datasource={list}
+              flag={item.flag}
+              actionData={actionData}
+              winner={winner}
+              color={colorStr}
               />
             )
           })
         }
       </div>
-      <div className = {styles.rightBox} >
+      <div className={styles.rightBox}>
         {
-          winer ? < p > Winer is {winer.flag} < /p> : <p> Next player: {nowflag }</p>
+          winner ? <p> winner is {winner.flag} </p> : <p> Next player: {nowFlag}</p>
         }
         <ul>
           <li>
-          <button onClick = {() => handleChangeData(true, false, false)} > Go to Game Start < /button>
+            <button onClick = {() => handleChangeData(true, false, false)} > Go to Game Start </button>
           </li>
           {
             actionData.map((item, index) => {
               return (
-              <li key = {item.key} value = {item.key} >
-                <button className = {styles.numLi}
-                  onClick = {() => handleChangeData(false, item.key, actionData)} > Go to move# {index+1}
-                < /button>
+                <li key={item.key} value={item.key}>
+                  <button className={styles.numLi}
+                    onClick={() => handleChangeData(false, item.key, actionData)}> Go to move# {index+1}
+                  </button>
                 </li>
               )
             })
@@ -164,16 +166,16 @@ function Main({
 
 function mapStateToProps(state) {
   const {
-    nowflag,
+    nowFlag,
     list,
     actionData,
-    winer
+    winner
   } = state.main;
   return {
-    nowflag,
+    nowFlag,
     list,
     actionData,
-    winer
+    winner
   };
 }