search feature

package.json

@@ -6,6 +6,8 @@
   "dependencies": {
     "@babel/cli": "^7.13.10",
     "@davidwu226/file-api": "^0.11.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
     "@fortawesome/free-brands-svg-icons": "^5.13.0",
     "@fortawesome/free-regular-svg-icons": "^5.13.0",
@@ -14,6 +16,9 @@
     "@material-ui/core": "^4.9.3",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.45",
+    "@mui/material": "^5.2.6",
+    "@mui/utils": "^5.2.3",
+    "@mui/x-data-grid": "^5.2.1",
     "@svgr/webpack": "4.3.3",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
@@ -66,12 +71,13 @@
     "postcss-safe-parser": "4.0.1",
     "react": "^16.12.0",
     "react-app-polyfill": "^1.0.6",
-    "react-chessground": "^1.0.0",
+    "react-chessground": "^1.5.0",
     "react-datepicker": "^3.5.0",
     "react-dev-utils": "^11.0.4",
     "react-dom": "^16.12.0",
     "react-faq-component": "^1.2.1",
     "react-ga": "^2.7.0",
+    "react-is": "^17.0.2",
     "react-lazy-load-image-component": "^1.4.3",
     "react-select-search": "0.10.2",
     "react-step-progress-bar": "^1.0.3",
@@ -95,7 +101,8 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "test": "export NODE_ENV=test; npx babel ./src --out-dir dist && cucumber-js tests/functionalTests $REPORT -t 'not @skipTests' $EXTRAS",
+    "jest" : "export NODE_ENV=test; jest",
+    "test": "export NODE_ENV=test; jest && npx babel ./src --out-dir dist && cucumber-js tests/functionalTests $REPORT -t 'not @skipTests' $EXTRAS",
     "testUI": "cucumber-js tests/uiTests $REPORT $EXTRAS",
     "testciUI": "cucumber-js tests/uiTests -t 'not @skipci' $REPORT $EXTRAS"
   },
@@ -168,7 +175,8 @@
     "extends": "react-app"
   },
   "resolutions": {
-    "**/@babel/runtime": "7.13.10"
+    "**/@babel/runtime": "7.13.10",
+    "**/chessground": "7.7.2"
   },
   "devDependencies": {
     "@babel/runtime": "^7.13.10",

public/css/customv620.css

@@ -202,6 +202,21 @@
 .fenDiv {
     padding-top:10px;
 }
+
+.searchSettingsIcon {
+    cursor: pointer;
+    margin-left: 10px;
+}
+
+.searchGridDiv {
+    /* XXX: ideally we'd make this responsive based on the grid layout */
+    height: 400px;
+}
+
+.searchResultPositionCell {
+    font-size: 13px;
+}
+
 .errorCard {
     margin-top:10px;
 }
@@ -430,6 +445,9 @@ body.dark-theme .dropdown-menu,
 body.dark-theme .MuiCheckbox-colorPrimary.Mui-checked,
 body.dark-theme .MuiSlider-thumb,
 body.dark-theme .MuiSlider-markLabel,
+body.dark-theme .MuiDataGrid-root,
+body.dark-theme .searchSettingsIcon,
+body.dark-theme .searchResultLink,
 body.dark-theme .performanceRatingRow,
 body.dark-theme .list-group-item, 
 body.dark-theme .card-body {
@@ -445,6 +463,10 @@ body.dark-theme input[type="search"] {
     color: #333;
 }
 
+body.dark-theme button:disabled span {
+    color: #777;
+}
+
 body.dark-theme .MuiButton-containedPrimary {
     background-color: #3f51b5;
 }
@@ -488,4 +510,15 @@ body.dark-theme input.select-search-box__search::placeholder{
 
 body.dark-theme span.MuiChip-label{
     color:#DDD
-}
+}
+
+body.dark-theme .MuiDataGrid-overlay {
+    background-color: #333;
+}
+
+body.dark-theme .MuiDataGrid-columnHeader:focus,
+body.dark-theme .MuiDataGrid-cell:focus,
+body.dark-theme .MuiDataGrid-columnHeader:focus-within,
+body.dark-theme .MuiDataGrid-cell:focus-within {
+    outline: none;
+}

src/app/GameState.js

@@ -0,0 +1,63 @@
+import ChessEcoCodes from 'chess-eco-codes'
+import {chessLogic, rootFen} from '../app/chess/ChessLogic'
+
+export default class GameState {
+    constructor(variant, fen, headers) {
+        this.variant = variant
+        this.initialFen = fen !== undefined ? fen : rootFen(variant)
+        this.headers = headers
+        this.opening = undefined
+        this.chess = chessLogic(this.variant, this.initialFen)
+        this.moves = []
+        this.ply = 0
+    }
+
+    getFen() {
+        return this.chess.fen()
+    }
+
+    getPly() {
+        return this.ply
+    }
+
+    getTurn() {
+        return this.chess.turn()
+    }
+
+    getMoves() {
+        return this.moves.slice()
+    }
+
+    getOpening() {
+        return this.opening
+    }
+
+    makeMove(move) {
+        while (this.moves.length > 0 &&
+               this.ply !== this.moves[this.moves.length - 1].ply) {
+            this.moves.pop()
+        }
+        move = this.chess.move(move)
+        if (move !== null) {
+            move.ply = this.ply = this.ply + 1
+            this.moves.push(move)
+            let opening = ChessEcoCodes(this.chess.fen())
+            if (opening) {
+                this.opening = opening
+            }
+        }
+        return move
+    }
+
+    navigateToMove(ply) {
+        this.ply = 0
+        this.chess = chessLogic(this.variant, this.initialFen)
+        this.moves.forEach((move) => {
+            if (move.ply > ply) {
+                return
+            }
+            this.chess.move(move)
+            this.ply = move.ply
+        })
+    }
+}

src/app/GameState.test.js

@@ -0,0 +1,27 @@
+import GameState from './GameState'
+
+test('make move', () => {
+  let game = new GameState()
+  expect(game.getOpening()).toBe(undefined)
+  expect(game.makeMove('e4')).not.toBeNull()
+  expect(game.makeMove('e5')).not.toBeNull()
+  expect(game.makeMove('Nf3')).not.toBeNull()
+  expect(game.getPly()).toBe(3)
+  expect(game.getTurn()).toBe('b')
+  expect(game.getMoves().map((move) => move.san)).toEqual(['e4', 'e5', 'Nf3'])
+  expect(game.getOpening().code).toBe('C40')
+})
+
+test('overwrite move', () => {
+  let game = new GameState()
+  expect(game.getOpening()).toBe(undefined)
+  game.makeMove('e4')
+  let move = game.makeMove('e5')
+  game.makeMove('Nf3')
+  game.navigateToMove(move.ply)
+  expect(game.makeMove('Bc4')).not.toBeNull()
+  expect(game.getPly()).toBe(3)
+  expect(game.getTurn()).toBe('b')
+  expect(game.getMoves().map((move) => move.san)).toEqual(['e4', 'e5', 'Bc4'])
+  expect(game.getOpening().code).toBe('C23')
+})

src/app/OpeningGraph.js

@@ -1,20 +1,47 @@
+import ChessEcoCodes from 'chess-eco-codes'
 import {simplifiedFen, isDateMoreRecentThan} from './util'
 import * as Constants from './Constants'
 import {chessLogic, rootFen} from '../app/chess/ChessLogic'
 
+class Game {
+    constructor(headers, moves) {
+        this.headers = headers
+        this.moves = moves
+        this.opening = undefined
+    }
+
+    getOpening() {
+        if (this.opening === undefined) {
+            for (var ply = 1; ply < this.moves.length; ply++) {
+                let opening = ChessEcoCodes(this.moves[ply].sourceFen)
+                if (!opening) {
+                    break
+                }
+                this.opening = opening
+            }
+        }
+        return this.opening
+    }
+}
+
 export default class OpeningGraph {
     constructor(variant) {
-        this.graph=new Graph()
+        this.graph = new Graph()
+        this.games = []
         this.hasMoves = false
         this.variant = variant
     }
+
     setEntries(arrayEntries, pgnStats){
-        this.graph=new Graph(arrayEntries, pgnStats)
+        this.graph = new Graph(arrayEntries, pgnStats)
+        // .tree files don't preserve game history
+        this.games = undefined
         this.hasMoves = true
     }
 
     clear() {
         this.graph = new Graph()
+        this.games = []
         this.hasMoves = false
     }
 
@@ -24,10 +51,11 @@ export default class OpeningGraph {
         this.graph.playerColor = playerColor
         this.hasMoves = true
         parsedMoves.forEach(parsedMove => {
-            this.addMoveForFen(parsedMove.sourceFen, parsedMove.targetFen, parsedMove.moveSan, pgnStats)
+            this.addMoveForFen(parsedMove.sourceFen, parsedMove.targetFen, parsedMove.move.san, pgnStats)
         })
         this.addGameResultOnFen(lastFen, pgnStats.index)
         this.addStatsToRoot(pgnStats, this.variant)
+        this.games.push(new Game(pgnStats.headers, parsedMoves))
     }
 
     addGameResultOnFen(fullFen, resultIndex) {

src/app/PGNReader.js

@@ -95,7 +95,7 @@ export default class PGNReader {
                 parsedMoves.push({
                     sourceFen:sourceFen,
                     targetFen:targetFen,
-                    moveSan:move.san
+                    move:move,
                 })
             })
             if(pgnParseFailed) {
@@ -124,10 +124,6 @@ export default class PGNReader {
         } else if(site === Constants.SITE_LICHESS || site === Constants.SITE_ONLINE_TOURNAMENTS) {
             url = pgn.headers.Site
         }
-        let headers=null
-        if(!url) {
-            headers = pgn.headers
-        }
         return {
             result:pgn.result,
             white:pgn.headers.White,
@@ -136,10 +132,10 @@ export default class PGNReader {
             blackElo:pgn.headers.BlackElo,
             url:url,
             date:pgn.headers.Date,
-            headers:headers,
+            headers:pgn.headers,
             numberOfPlys:pgn.moves.length
         }
     }
 }
 
-expose(PGNReader)
+expose(PGNReader)