Merge a64f184 into ec0a402

src/actions/index.js

@@ -6,6 +6,7 @@
 
 export const TOGGLE_MATCH_STATUS = 'TOGGLE_MATCH_STATUS'
 export const TOGGLE_TURN = 'TOGGLE_TURN'
+export const SET_CHECK_TO = 'SET_CHECK_TO'
 export const SET_CHECK_BY = 'SET_CHECK_BY'
 export const SET_SNAPSHOT = 'SET_SNAPSHOT'
 export const SET_SELECTED = 'SET_SELECTED'

src/actions/ingame.js

@@ -44,6 +44,13 @@ export function toggleTurn () {
   }
 }
 
+export function setCheckTo (tile) {
+  return {
+    type: types.SET_CHECK_TO,
+    payload: tile
+  }
+}
+
 export function setCheckBy (code) {
   return {
     type: types.SET_CHECK_BY,
@@ -69,7 +76,7 @@ export function setNext (snapshot) {
     const { present, past } = ingame
     const { turn } = present
 
-    const checkBy = findCheckCode(() => {
+    const { checkTo, checkBy } = findCheckCode(() => {
       const { side, piece, file, rank } = compose(
         diffSnapshot(snapshot),
         getPrevSnapshot
@@ -78,6 +85,7 @@ export function setNext (snapshot) {
       return { turn, snapshot, side, piece, file, rank }
     })
 
+    dispatch(setCheckTo(checkTo))
     dispatch(setCheckBy(checkBy))
   }
 }

src/chess/core/findCheckCode.js

@@ -1,25 +1,34 @@
-import { compose, ifElse, find } from 'ramda'
+import { compose, reduce } from 'ramda'
 import { getMovableAxis, getNextMovable } from '~/chess/core'
 import { getSpecial, createTile, findCodeByTile } from '~/chess/helpers'
-import { isExist, lazy } from '~/utils'
 
 /**
- * @param  {Array}    snapshot
  * @param  {string}   side
+ * @param  {srring}   checkBy
+ * @param  {Array}    snapshot
  * @return {Function}
  */
-function createFindCb (snapshot, side) {
+function createReduceCb (side, snapshot, checkBy) {
   const parseTile = findCodeByTile(snapshot)
 
   /**
    * @callback
+   * @param  {Obhect}  acc
    * @param  {string}  mt
    * @return {boolean}
    */
-  return (mt) => {
+  return (acc, mt) => {
     const { piece: mtPiece, side: mtSide } = parseTile(mt)
+    const isCheckTo = mtPiece === 'K' && side !== mtSide // King
+
+    if (!isCheckTo) {
+      return acc
+    }
 
-    return mtPiece === 'K' && side !== mtSide
+    return {
+      checkBy,
+      checkTo: mt
+    }
   }
 }
 
@@ -30,14 +39,12 @@ function createFindCb (snapshot, side) {
  */
 function findCheckCode (getFlatArgs) {
   const { turn, snapshot, side, piece, file, rank } = getFlatArgs()
-
-  const mapCb = createFindCb(snapshot, side)
   const tile = createTile(file, rank)
   const checkCode = `${side}${piece}${tile}`
+  const reduceCb = createReduceCb(side, snapshot, checkCode)
 
   return compose(
-    ifElse(isExist, lazy(checkCode), lazy('')),
-    find(mapCb),
+    reduce(reduceCb, {}),
     getNextMovable('tiles')
   )(() => {
     const nextMovableAxis = getMovableAxis(tile, turn, piece)

src/chess/enhancePiece.js

@@ -28,6 +28,7 @@ function enhancePiece (WrappedComponent, staticKey, staticTurn) {
       selectedSide: PropTypes.string,
       selectedFile: PropTypes.string,
       selectedRank: PropTypes.string,
+      checkTo: PropTypes.string,
       isMovable: PropTypes.bool,
       setNextMovableAxis: PropTypes.func,
       setNextCapturedSnapshot: PropTypes.func
@@ -77,19 +78,30 @@ function enhancePiece (WrappedComponent, staticKey, staticTurn) {
     }
 
     render () {
-      const { turn, tile, selectedFile, selectedRank, isMovable } = this.props
+      const {
+        turn,
+        tile,
+        selectedFile,
+        selectedRank,
+        checkTo,
+        isMovable
+      } = this.props
       const selectedTile = this.getSelectedTile(selectedFile, selectedRank)
       const isTurn = getSide(staticTurn) === turn
       const isCapturable = isMovable && !isTurn
       const cls = cx({
         'is-turn': isTurn,
         'is-capturable': isCapturable,
-        'is-selected': selectedTile === tile
+        'is-selected': selectedTile === tile,
+        'is-check-tile': checkTo === tile
       })
 
       return (
         <div className={cls} onClick={this.handleClick}>
-          <WrappedComponent key={`${staticKey}-${tile}`} />
+          <WrappedComponent
+            key={`${staticKey}-${tile}`}
+            className={cx({ 'is-check-piece': checkTo === tile })}
+          />
         </div>
       )
     }

src/components/Diagram/index.js

@@ -13,6 +13,7 @@ const Diagram = (props) => {
     selectedSide,
     selectedFile,
     selectedRank,
+    checkTo,
     ranks,
     files,
     movableTiles,
@@ -37,6 +38,7 @@ const Diagram = (props) => {
             selectedSide={selectedSide}
             selectedFile={selectedFile}
             selectedRank={selectedRank}
+            checkTo={checkTo}
             files={files}
             rankName={rankName}
             movableTiles={movableTiles}
@@ -60,6 +62,7 @@ Diagram.propTypes = {
   selectedSide: PropTypes.string,
   selectedFile: PropTypes.string,
   selectedRank: PropTypes.string,
+  checkTo: PropTypes.string,
   movableTiles: PropTypes.array,
   setNextCapturedSnapshot: PropTypes.func,
   setNextMovableAxis: PropTypes.func,

src/components/File/index.js

@@ -22,6 +22,7 @@ class File extends Component {
     selectedSide: PropTypes.string,
     selectedFile: PropTypes.string,
     selectedRank: PropTypes.string,
+    checkTo: PropTypes.string,
     movableTiles: PropTypes.array,
     children: PropTypes.func,
     setNextCapturedSnapshot: PropTypes.func,
@@ -63,6 +64,7 @@ class File extends Component {
       selectedSide,
       selectedFile,
       selectedRank,
+      checkTo,
       movableTiles,
       setNextCapturedSnapshot,
       setNextMovableAxis
@@ -76,6 +78,7 @@ class File extends Component {
       selectedSide,
       selectedFile,
       selectedRank,
+      checkTo,
       tile,
       isMovable,
       setNextCapturedSnapshot,

src/components/Rank/index.js

@@ -17,6 +17,7 @@ const Rank = (props) => {
     selectedSide,
     selectedFile,
     selectedRank,
+    checkTo,
     movableTiles,
     setNextCapturedSnapshot,
     setNextMovableAxis,
@@ -41,6 +42,7 @@ const Rank = (props) => {
             selectedSide={selectedSide}
             selectedFile={selectedFile}
             selectedRank={selectedRank}
+            checkTo={checkTo}
             movableTiles={movableTiles}
             setNextCapturedSnapshot={setNextCapturedSnapshot}
             setNextMovableAxis={setNextMovableAxis}
@@ -63,6 +65,7 @@ Rank.propTypes = {
   selectedSide: PropTypes.string,
   selectedFile: PropTypes.string,
   selectedRank: PropTypes.string,
+  checkTo: PropTypes.string,
   movableTiles: PropTypes.array,
   setNextCapturedSnapshot: PropTypes.func,
   setNextMovableAxis: PropTypes.func,

src/containers/DiagramContainer.js

@@ -46,7 +46,7 @@ function createGetFlatArgs (present, past) {
 function mapStateToProps ({ general, ingame }) {
   const { isDoingMatch } = general
   const { present, past } = ingame
-  const { turn, snapshot, selected } = present
+  const { turn, snapshot, selected, checkTo } = present
   const { piece, side, file, rank } = memoizeParseSelected(snapshot, selected)
   const nextMovableTiles = compose(
     getNextMovable('tiles'),
@@ -56,6 +56,7 @@ function mapStateToProps ({ general, ingame }) {
   return {
     isDoingMatch,
     turn,
+    checkTo,
     snapshot,
     ranks: RANKS,
     files: FILES,

src/reducers/ingame.js

@@ -11,6 +11,7 @@ const initialState = {
     'wPa2', 'wPb2', 'wPc2', 'wPd2', 'wPe2', 'wPf2', 'wPg2', 'wPh2',
     'wRa1', 'wNb1', 'wBc1', 'wQd1', 'wKe1', 'wBf1', 'wNg1', 'wRh1'
   ],
+  checkTo: '',
   checkBy: ''
 }
 
@@ -46,6 +47,20 @@ function reducer (state = initialState, action) {
       }
     }
 
+    case types.SET_CHECK_TO: {
+      return {
+        ...state,
+        checkTo: payload
+      }
+    }
+
+    case types.SET_CHECK_BY: {
+      return {
+        ...state,
+        checkBy: payload
+      }
+    }
+
     default: {
       return state
     }

src/styles/state.css

@@ -30,3 +30,38 @@
   cursor: pointer;
   border: 2px dotted red;
 }
+
+:global(.is-check-tile) {
+  background-color: rgba(212, 60, 56, 0.3);
+}
+
+:global(.is-check-piece) {
+  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+  animation-iteration-count: infinite;
+}
+
+@keyframes shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}

tests/chess/core/findCheckCode.spec.js

@@ -21,6 +21,9 @@ describe('#findCheckCode', () => {
       }
     }
 
-    expect(findCheckCode(getFlatArgs)).toEqual('bQa5')
+    expect(findCheckCode(getFlatArgs)).toEqual({
+      checkTo: 'e1',
+      checkBy: 'bQa5'
+    })
   })
 })