Merge 7165310 into 12f8c62

.eslintrc.json

@@ -8,7 +8,7 @@
   "extends": ["standard"],
   "parser": "babel-eslint",
   "rules": {
-    "max-len": ["error", { "code": 100 }],
+    "max-len": ["error", { "code": 90 }],
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
     "react/react-in-jsx-scope": 2,

README.md

@@ -12,8 +12,7 @@ Programs must be written for people to read, and only incidentally for machines
 # Following
 
 - Functional programming
-- SMACSS
-- Test driven development
+- CSS Module (SMACSS, PostCSS)
 
 ## Demo
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chess",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Chess game",
   "main": "index.js",
   "private": true,
@@ -26,64 +26,64 @@
   "author": "Tony Jin <jsveron23@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.1.6",
-    "@babel/plugin-proposal-class-properties": "^7.2.3",
-    "@babel/plugin-proposal-decorators": "^7.2.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/core": "^7.4.3",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-proposal-decorators": "^7.4.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-async-to-generator": "^7.2.0",
+    "@babel/plugin-transform-async-to-generator": "^7.4.0",
     "@babel/plugin-transform-react-jsx-source": "^7.2.0",
-    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.1.0",
+    "babel-jest": "^24.7.1",
     "babel-loader": "^8.0.4",
     "colors": "^1.3.3",
     "coveralls": "^3.0.3",
-    "css-loader": "^2.1.0",
+    "css-loader": "^2.1.1",
     "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-adapter-react-16": "^1.12.1",
     "enzyme-to-json": "^3.3.5",
     "eslint": "^5.16.0",
     "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-import": "^2.17.2",
     "eslint-plugin-node": "^8.0.1",
-    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-promise": "^4.1.1",
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-react-hooks": "^1.6.0",
     "eslint-plugin-standard": "^4.0.0",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^24.1.0",
-    "mini-css-extract-plugin": "^0.5.0",
+    "jest": "^24.7.1",
+    "mini-css-extract-plugin": "^0.6.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.5.0",
-    "prettier": "^1.16.4",
+    "postcss-preset-env": "^6.6.0",
+    "prettier": "^1.17.0",
     "prettier-eslint": "^8.8.2",
-    "react-hot-loader": "^4.7.1",
+    "react-hot-loader": "^4.8.4",
     "redux-devtools-extension": "^2.13.7",
     "rimraf": "^2.6.2",
     "style-loader": "^0.23.1",
     "svg-react-loader": "^0.4.6",
     "terser-webpack-plugin": "^1.2.3",
     "url-loader": "^1.1.2",
-    "webpack": "^4.26.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.2.0"
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.1"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.4.0",
+    "@babel/polyfill": "^7.4.3",
     "@hot-loader/react-dom": "^16.8.6",
     "classnames": "^2.2.6",
-    "memoize-one": "^5.0.2",
+    "memoize-one": "^5.0.4",
     "prop-types": "^15.7.2",
     "ramda": "^0.26.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-redux": "^6.0.1",
-    "react-spring": "^8.0.18",
+    "react-redux": "^7.0.2",
+    "react-spring": "^8.0.19",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "redux-undo": "^1.0.0-beta9-9-7",

src/actions/index.js

@@ -5,11 +5,11 @@
  */
 
 export const SET_TS = 'SET_TS'
-export const TOGGLE_MATCH_STATUS = 'TOGGLE_MATCH_STATUS'
-export const RESTART_GAME = 'RESTART_GAME'
-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'
 export const SET_MOVABLE_AXIS = 'SET_MOVABLE_AXIS'
+export const RESTART_GAME = 'RESTART_GAME'
+export const TOGGLE_TURN = 'TOGGLE_TURN'
+export const TOGGLE_MATCH_STATUS = 'TOGGLE_MATCH_STATUS'

src/actions/ingame.js

@@ -1,18 +1,22 @@
 import * as R from 'ramda'
 import * as types from '~/actions'
-import { OPPONENT } from '~/chess/constants'
-import { getNextMovable, getNextSnapshot, findCheckCode, applySpecialActions } from '~/chess/core'
 import {
-  createTimeline,
+  getNextMovable,
+  getNextSnapshot,
+  findCheckCode,
+  applySpecialActions
+} from '~/chess/core'
+import {
   getSpecial,
-  parseSelected,
+  getOpponentTurn,
+  getPrevSnapshots,
+  createTimeline,
+  findCodeByTile,
+  parseCode,
   replaceSnapshot,
-  createSelected,
-  getPrevSnapshotList,
-  diffSnapshot,
-  parseCode
+  diffSnapshot
 } from '~/chess/helpers'
-import { isEmpty, lazy, merge } from '~/utils'
+import { isEmpty, lazy, merge, createTxt } from '~/utils'
 
 export function setTs (ts = +new Date()) {
   return {
@@ -21,10 +25,10 @@ export function setTs (ts = +new Date()) {
   }
 }
 
-export function setSelected (piece = '') {
+export function setSelected (code = '') {
   return {
     type: types.SET_SELECTED,
-    payload: piece
+    payload: code
   }
 }
 
@@ -38,11 +42,11 @@ export function setMovableAxis (movable = []) {
 export function toggleTurn () {
   return (dispatch, getState) => {
     const { ingame } = getState()
-    const { turn } = ingame.present
+    const { present } = ingame
 
     dispatch({
       type: types.TOGGLE_TURN,
-      payload: OPPONENT[turn]
+      payload: getOpponentTurn(present.turn)
     })
   }
 }
@@ -93,7 +97,7 @@ export function setNext (snapshot) {
       parseCode,
       diffSnapshot(snapshot),
       R.prop(0),
-      getPrevSnapshotList
+      getPrevSnapshots
     )(past)
 
     dispatch(setCheckTo(checkTo))
@@ -105,8 +109,9 @@ export function setNextMovableAxis (tile) {
   return (dispatch, getState) => {
     const { ingame } = getState()
     const { present } = ingame
-    const { turn, snapshot } = present
-    const nextSelected = createSelected(tile, turn)
+    const { snapshot } = present
+    const { side, piece } = findCodeByTile(snapshot, tile)
+    const nextSelected = createTxt(side, piece, tile)
 
     const nextMovableAxis = R.compose(
       getNextMovable('axis'),
@@ -123,7 +128,7 @@ export function setNextSnapshot (tile) {
     const { ingame } = getState()
     const { present, past } = ingame
     const { selected, snapshot } = present
-    const { piece, side } = parseSelected(snapshot, selected)
+    const { piece, side } = parseCode(selected)
     const special = getSpecial(piece)
 
     const getSpecialActionsFn = R.compose(

src/chess/constants.js

@@ -33,6 +33,17 @@ export const OPPONENT = {
   b: 'white'
 }
 
+/**
+ * Turn
+ * @type {Object}
+ */
+export const TURN = {
+  white: 'white',
+  black: 'black',
+  w: 'white',
+  b: 'black'
+}
+
 /**
  * Side
  * @type {Object}

src/chess/core/findCheckCode.js

@@ -1,5 +1,5 @@
 import * as R from 'ramda'
-import { lazy, merge } from '~/utils'
+import { lazy, merge, createTxt } from '~/utils'
 import getMovableAxis from './getMovableAxis'
 import getNextMovable from './getNextMovable'
 import { getSpecial, findCodeByTile } from '../helpers'
@@ -29,7 +29,7 @@ function createReduceCb (side, snapshot, checkBy) {
 
     return {
       checkBy,
-      checkTo: `${mtSide}${mtPiece}${mt}`
+      checkTo: createTxt(mtSide, mtPiece, mt)
     }
   }
 }
@@ -41,7 +41,7 @@ function createReduceCb (side, snapshot, checkBy) {
  */
 function findCheckCode (getFlatArgs) {
   const { turn, snapshot, side, piece, tile } = getFlatArgs()
-  const checkCode = `${side}${piece}${tile}`
+  const checkCode = createTxt(side, piece, tile)
   const reduceCb = createReduceCb(side, snapshot, checkCode)
   const initial = { side, tile }
 

src/chess/core/getCodeChanges.js

@@ -1,5 +1,5 @@
 import * as R from 'ramda'
-import { isEmpty } from '~/utils'
+import { isEmpty, createTxt } from '~/utils'
 import {
   findCode,
   parseCode,
@@ -43,11 +43,16 @@ function getCodeChanges (snapshot, prevSnapshot) {
     })
 
     const prevTile = R.compose(
-      R.find((tile) => findCode(prevSnapshot, `${side}${piece}${tile}`)),
+      R.find((tile) =>
+        R.compose(
+          findCode(prevSnapshot),
+          createTxt
+        )(side, piece, tile)
+      ),
       R.reject(isEmpty)
     )(prevMovableTiles)
 
-    prevCode = `${side}${piece}${prevTile}`
+    prevCode = createTxt(side, piece, prevTile)
   }
 
   return { nextCode, prevCode }

src/chess/core/getMovableTilesGroup.js

@@ -0,0 +1,56 @@
+import * as R from 'ramda'
+import { lazy } from '~/utils'
+import getFiniteMovableTiles from './getFiniteMovableTiles'
+import getNextMovable from './getNextMovable'
+import getMovableAxis from './getMovableAxis'
+import { getSide, reduceSnapshotBySide, parseCode, getSpecial } from '../helpers'
+
+function createReduceCb ({ checkTo, checkBy, turn, side, timeline }) {
+  const awaitGetFiniteMovableTiles = getFiniteMovableTiles(checkTo, checkBy)
+
+  return (acc, code) => {
+    const { piece, tile } = parseCode(code)
+    const special = getSpecial(piece)
+    const preMovableAxis = getMovableAxis(tile, turn, piece)
+    const preMovableTiles = R.compose(
+      awaitGetFiniteMovableTiles(piece),
+      getNextMovable('tiles'),
+      lazy
+    )({
+      checkBy,
+      timeline,
+      turn,
+      side,
+      tile,
+      special,
+      movableAxis: preMovableAxis
+    })
+
+    return {
+      ...acc,
+      [code]: preMovableTiles
+    }
+  }
+}
+
+/**
+ * Get finite movable tiles group
+ * TODO: code works but only King return movable tiles not properly
+ * @param  {String} turn
+ * @param  {String} checkTo
+ * @param  {String} checkBy
+ * @param  {Array}  timeline
+ * @return {Object}
+ */
+function getFiniteMovableTilesGroup (turn, checkTo, checkBy, timeline) {
+  const side = getSide(turn)
+  const reduceCb = createReduceCb({ checkTo, checkBy, turn, side, timeline })
+
+  return R.compose(
+    R.reduce(reduceCb, {}),
+    reduceSnapshotBySide(side),
+    R.nth(0)
+  )(timeline)
+}
+
+export default R.curry(getFiniteMovableTilesGroup)

src/chess/core/getNextSnapshot.js

@@ -1,22 +1,19 @@
 import * as R from 'ramda'
-import { parseCode, parseSelected, createTile } from '../helpers'
+import { createTxt } from '~/utils'
+import { parseCode } from '../helpers'
 
 /**
  * Get next snapshot
- * @param  {String} selected
- * @param  {String} tile
- * @param  {Array}  snapshot
+ * @param  {String} selected prev
+ * @param  {String} tile     next
+ * @param  {Array}  snapshot prev
  * @return {Array}
  */
 function getNextSnapshot (selected, tile, snapshot) {
-  const { file, rank } = parseSelected(snapshot, selected)
-  const selectedTile = createTile(file, rank)
+  const { side, piece } = parseCode(selected)
   const mapCb = R.ifElse(
-    R.includes(selectedTile),
-    R.compose(
-      ({ side, piece }) => `${side}${piece}${tile}`,
-      parseCode
-    ),
+    R.equals(selected),
+    () => createTxt(side, piece, tile),
     R.identity
   )
 

src/chess/core/index.js

@@ -12,3 +12,4 @@ export { default as createNotation } from './createNotation'
 export { default as createScoreSheet } from './createScoreSheet'
 export { default as findCheckCode } from './findCheckCode'
 export { default as mesurePosition } from './mesurePosition'
+export { default as getMovableTilesGroup } from './getMovableTilesGroup'

src/chess/core/internal/_applyEnPassant.js

@@ -1,5 +1,5 @@
 import * as R from 'ramda'
-import { isExist } from '~/utils'
+import { isExist, createTxt } from '~/utils'
 import {
   findCodeByAxis,
   convertTileToAxis,
@@ -74,7 +74,8 @@ function _changeSnapshot (side, tile, timeline) {
   const isEnPassant = file !== beforeMovedFile
 
   if (isEnPassant) {
-    const capturedTile = `${file}${y + (side === 'w' ? -1 : 1)}`
+    const nextRank = y + (side === 'w' ? -1 : 1)
+    const capturedTile = createTxt(file, nextRank)
 
     return capturedTile
   }