feat : add move classification

src/lib/chess.ts

@@ -1,13 +1,18 @@
-import { LineEval } from "@/types/eval";
+import { EvaluateGameParams, LineEval } from "@/types/eval";
 import { Game } from "@/types/game";
 import { Chess } from "chess.js";
 
-export const getFens = (game: Chess): string[] => {
+export const getEvaluateGameParams = (game: Chess): EvaluateGameParams => {
   const history = game.history({ verbose: true });
+
   const fens = history.map((move) => move.before);
   fens.push(history[history.length - 1].after);
 
-  return fens;
+  const uciMoves = history.map(
+    (move) => move.from + move.to + (move.promotion || "")
+  );
+
+  return { fens, uciMoves };
 };
 
 export const getGameFromPgn = (pgn: string): Chess => {

src/lib/engine/helpers/accuracy.ts

@@ -5,6 +5,7 @@ import {
   getWeightedMean,
 } from "@/lib/helpers";
 import { Accuracy, MoveEval } from "@/types/eval";
+import { getPositionWinPercentage } from "./winPercentage";
 
 export const computeAccuracy = (moves: MoveEval[]): Accuracy => {
   const movesWinPercentage = moves.map(getPositionWinPercentage);
@@ -85,27 +86,3 @@ const getMovesAccuracy = (movesWinPercentage: number[]): number[] =>
 
     return Math.min(100, Math.max(0, rawAccuracy + 1));
   });
-
-const getPositionWinPercentage = (move: MoveEval): number => {
-  if (move.lines[0].cp !== undefined) {
-    return getWinPercentageFromCp(move.lines[0].cp);
-  }
-
-  if (move.lines[0].mate !== undefined) {
-    return getWinPercentageFromMate(move.lines[0].mate);
-  }
-
-  throw new Error("No cp or mate in move");
-};
-
-const getWinPercentageFromMate = (mate: number): number => {
-  const mateInf = mate * Infinity;
-  return getWinPercentageFromCp(mateInf);
-};
-
-const getWinPercentageFromCp = (cp: number): number => {
-  const cpCeiled = ceilsNumber(cp, -1000, 1000);
-  const MULTIPLIER = -0.00368208;
-  const winChances = 2 / (1 + Math.exp(MULTIPLIER * cpCeiled)) - 1;
-  return 50 + 50 * winChances;
-};

src/lib/engine/helpers/moveClassification.ts

@@ -0,0 +1,72 @@
+import { MoveEval } from "@/types/eval";
+import { getPositionWinPercentage } from "./winPercentage";
+import { MoveClassification } from "@/types/enums";
+import { openings } from "@/data/openings";
+
+export const getMovesClassification = (
+  rawMoves: MoveEval[],
+  uciMoves: string[],
+  fens: string[]
+): MoveEval[] => {
+  const positionsWinPercentage = rawMoves.map(getPositionWinPercentage);
+  let currentOpening: string | undefined = undefined;
+
+  const moves = rawMoves.map((rawMove, index) => {
+    if (index === 0) return rawMove;
+
+    const currentFen = fens[index].split(" ")[0];
+    const opening = openings.find((opening) => opening.fen === currentFen);
+    if (opening) {
+      currentOpening = opening.name;
+      return {
+        ...rawMove,
+        opening: opening.name,
+        moveClassification: MoveClassification.Book,
+      };
+    }
+
+    const uciMove = uciMoves[index - 1];
+    const bestMove = rawMoves[index - 1].bestMove;
+    if (uciMove === bestMove) {
+      return {
+        ...rawMove,
+        opening: currentOpening,
+        moveClassification: MoveClassification.Best,
+      };
+    }
+
+    const lastPositionWinPercentage = positionsWinPercentage[index - 1];
+    const positionWinPercentage = positionsWinPercentage[index];
+    const isWhiteMove = index % 2 === 1;
+
+    const moveClassification = getMoveClassification(
+      lastPositionWinPercentage,
+      positionWinPercentage,
+      isWhiteMove
+    );
+
+    return {
+      ...rawMove,
+      opening: currentOpening,
+      moveClassification,
+    };
+  });
+
+  return moves;
+};
+
+const getMoveClassification = (
+  lastPositionWinPercentage: number,
+  positionWinPercentage: number,
+  isWhiteMove: boolean
+): MoveClassification => {
+  const winPercentageDiff =
+    (positionWinPercentage - lastPositionWinPercentage) *
+    (isWhiteMove ? 1 : -1);
+
+  if (winPercentageDiff < -15) return MoveClassification.Blunder;
+  if (winPercentageDiff < -10) return MoveClassification.Mistake;
+  if (winPercentageDiff < -5) return MoveClassification.Inaccuracy;
+  if (winPercentageDiff < 0) return MoveClassification.Good;
+  return MoveClassification.Excellent;
+};

src/lib/engine/helpers/parseResults.ts

@@ -5,7 +5,6 @@ export const parseEvaluationResults = (
   whiteToPlay: boolean
 ): MoveEval => {
   const parsedResults: MoveEval = {
-    bestMove: "",
     lines: [],
   };
   const tempResults: Record<string, LineEval> = {};

src/lib/engine/helpers/winPercentage.ts

@@ -0,0 +1,26 @@
+import { ceilsNumber } from "@/lib/helpers";
+import { MoveEval } from "@/types/eval";
+
+export const getPositionWinPercentage = (move: MoveEval): number => {
+  if (move.lines[0].cp !== undefined) {
+    return getWinPercentageFromCp(move.lines[0].cp);
+  }
+
+  if (move.lines[0].mate !== undefined) {
+    return getWinPercentageFromMate(move.lines[0].mate);
+  }
+
+  throw new Error("No cp or mate in move");
+};
+
+const getWinPercentageFromMate = (mate: number): number => {
+  const mateInf = mate * Infinity;
+  return getWinPercentageFromCp(mateInf);
+};
+
+const getWinPercentageFromCp = (cp: number): number => {
+  const cpCeiled = ceilsNumber(cp, -1000, 1000);
+  const MULTIPLIER = -0.00368208;
+  const winChances = 2 / (1 + Math.exp(MULTIPLIER * cpCeiled)) - 1;
+  return 50 + 50 * winChances;
+};

src/lib/engine/uciEngine.ts

@@ -1,5 +1,6 @@
 import { EngineName } from "@/types/enums";
 import {
+  EvaluateGameParams,
   EvaluatePositionWithUpdateParams,
   GameEval,
   MoveEval,
@@ -8,6 +9,7 @@ import { parseEvaluationResults } from "./helpers/parseResults";
 import { computeAccuracy } from "./helpers/accuracy";
 import { getWhoIsCheckmated } from "../chess";
 import { getLichessEval } from "../lichess";
+import { getMovesClassification } from "./helpers/moveClassification";
 
 export abstract class UciEngine {
   private worker: Worker;
@@ -93,11 +95,12 @@ export abstract class UciEngine {
     });
   }
 
-  public async evaluateGame(
-    fens: string[],
+  public async evaluateGame({
+    fens,
+    uciMoves,
     depth = 16,
-    multiPv = this.multiPv
-  ): Promise<GameEval> {
+    multiPv = this.multiPv,
+  }: EvaluateGameParams): Promise<GameEval> {
     this.throwErrorIfNotReady();
     await this.setMultiPv(multiPv);
     this.ready = false;
@@ -110,7 +113,6 @@ export abstract class UciEngine {
       const whoIsCheckmated = getWhoIsCheckmated(fen);
       if (whoIsCheckmated) {
         moves.push({
-          bestMove: "",
           lines: [
             {
               pv: [],
@@ -126,11 +128,16 @@ export abstract class UciEngine {
       moves.push(result);
     }
 
+    const movesWithClassification = getMovesClassification(
+      moves,
+      uciMoves,
+      fens
+    );
     const accuracy = computeAccuracy(moves);
 
     this.ready = true;
     return {
-      moves: moves.slice(0, -1),
+      moves: movesWithClassification,
       accuracy,
       settings: {
         engine: this.engineName,

src/lib/lichess.ts

@@ -37,9 +37,25 @@ export const getLichessEval = async (
 
     lines.sort(sortLines);
 
+    const bestMove = lines[0].pv[0];
+    const linesToKeep = lines.slice(0, multiPv);
+
+    const isWhiteToPlay = fen.split(" ")[1] === "w";
+
+    if (!isWhiteToPlay) {
+      return {
+        bestMove,
+        lines: linesToKeep.map((line) => ({
+          ...line,
+          cp: line.cp ? -line.cp : line.cp,
+          mate: line.mate ? -line.mate : line.mate,
+        })),
+      };
+    }
+
     return {
-      bestMove: lines[0].pv[0],
-      lines: lines.slice(0, multiPv),
+      bestMove,
+      lines: linesToKeep,
     };
   } catch (error) {
     console.error(error);

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { useChessActions } from "@/hooks/useChess";
+import { useChessActions } from "@/hooks/useChessActions";
 import Board from "@/sections/analysis/board";
 import ReviewPanelBody from "@/sections/analysis/reviewPanelBody";
 import ReviewPanelHeader from "@/sections/analysis/reviewPanelHeader";
@@ -55,6 +55,7 @@ export default function GameReport() {
           backgroundColor: "secondary.main",
           borderColor: "primary.main",
           borderWidth: 2,
+          boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
         }}
         padding={3}
         rowGap={3}

src/sections/analysis/board/index.tsx

@@ -9,7 +9,7 @@ import {
   showPlayerMoveArrowAtom,
 } from "../states";
 import { Arrow, Square } from "react-chessboard/dist/chessboard/types";
-import { useChessActions } from "@/hooks/useChess";
+import { useChessActions } from "@/hooks/useChessActions";
 import { useMemo, useRef } from "react";
 import PlayerInfo from "./playerInfo";
 import EvaluationBar from "./evaluationBar";
@@ -25,12 +25,16 @@ export default function Board() {
   const { makeMove: makeBoardMove } = useChessActions(boardAtom);
   const currentMove = useAtomValue(currentMoveAtom);
 
-  const onPieceDrop = (source: Square, target: Square): boolean => {
+  const onPieceDrop = (
+    source: Square,
+    target: Square,
+    piece: string
+  ): boolean => {
     try {
       const result = makeBoardMove({
         from: source,
         to: target,
-        promotion: "q", // TODO: Let the user choose the promotion
+        promotion: piece[1]?.toLowerCase() ?? "q",
       });
 
       return !!result;
@@ -42,7 +46,7 @@ export default function Board() {
   const customArrows: Arrow[] = useMemo(() => {
     const arrows: Arrow[] = [];
 
-    if (currentMove?.lastEval && showBestMoveArrow) {
+    if (currentMove?.lastEval?.bestMove && showBestMoveArrow) {
       const bestMoveArrow = [
         currentMove.lastEval.bestMove.slice(0, 2),
         currentMove.lastEval.bestMove.slice(2, 4),
@@ -108,7 +112,10 @@ export default function Board() {
             onPieceDrop={onPieceDrop}
             boardOrientation={boardOrientation ? "white" : "black"}
             customArrows={customArrows}
-            customBoardStyle={{ borderRadius: "5px" }}
+            customBoardStyle={{
+              borderRadius: "5px",
+              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
+            }}
           />
         </Grid>
 

src/sections/analysis/reviewPanelBody/bestMove.tsx

@@ -1,30 +0,0 @@
-import { useCurrentMove } from "@/hooks/useCurrentMove";
-import { Grid, Typography } from "@mui/material";
-import { useAtomValue } from "jotai";
-import { boardAtom } from "../states";
-import { useMemo } from "react";
-import { moveLineUciToSan } from "@/lib/chess";
-
-export default function BestMove() {
-  const move = useCurrentMove();
-  const board = useAtomValue(boardAtom);
-
-  const bestMove = move?.lastEval?.bestMove;
-
-  const bestMoveSan = useMemo(() => {
-    if (!bestMove) return undefined;
-
-    const lastPosition = board.history({ verbose: true }).at(-1)?.before;
-    if (!lastPosition) return undefined;
-
-    return moveLineUciToSan(lastPosition)(bestMove);
-  }, [bestMove, board]);
-
-  if (!bestMoveSan) return null;
-
-  return (
-    <Grid item xs={12}>
-      <Typography align="center">{`${bestMoveSan} was the best move`}</Typography>
-    </Grid>
-  );
-}

src/sections/analysis/reviewPanelBody/index.tsx

@@ -8,7 +8,8 @@ import { LineEval } from "@/types/eval";
 import { EngineName } from "@/types/enums";
 import EngineSettingsButton from "@/sections/engineSettings/engineSettingsButton";
 import Accuracies from "./accuracies";
-import BestMove from "./bestMove";
+import MoveInfo from "./moveInfo";
+import Opening from "./opening";
 
 export default function ReviewPanelBody() {
   const linesNumber = useAtomValue(engineMultiPvAtom);
@@ -20,7 +21,10 @@ export default function ReviewPanelBody() {
   const gameHistory = game.history();
 
   const isGameOver =
-    gameHistory.length > 0 && boardHistory.join() === gameHistory.join();
+    boardHistory.length > 0 &&
+    (board.isCheckmate() ||
+      board.isDraw() ||
+      boardHistory.join() === gameHistory.join());
 
   const linesSkeleton: LineEval[] = Array.from({ length: linesNumber }).map(
     (_, i) => ({ pv: [`${i}`], depth: 0, multiPv: i + 1 })
@@ -73,7 +77,9 @@ export default function ReviewPanelBody() {
 
       <Accuracies />
 
-      <BestMove />
+      <MoveInfo />
+
+      <Opening />
 
       {isGameOver && (
         <Grid item xs={12}>

src/sections/analysis/reviewPanelBody/moveInfo.tsx

@@ -0,0 +1,53 @@
+import { useCurrentMove } from "@/hooks/useCurrentMove";
+import { Grid, Typography } from "@mui/material";
+import { useAtomValue } from "jotai";
+import { boardAtom } from "../states";
+import { useMemo } from "react";
+import { moveLineUciToSan } from "@/lib/chess";
+import { MoveClassification } from "@/types/enums";
+
+export default function MoveInfo() {
+  const move = useCurrentMove();
+  const board = useAtomValue(boardAtom);
+
+  const bestMove = move?.lastEval?.bestMove;
+
+  const bestMoveSan = useMemo(() => {
+    if (!bestMove) return undefined;
+
+    const lastPosition = board.history({ verbose: true }).at(-1)?.before;
+    if (!lastPosition) return undefined;
+
+    return moveLineUciToSan(lastPosition)(bestMove);
+  }, [bestMove, board]);
+
+  if (!bestMoveSan) return null;
+
+  const moveClassification = move.eval?.moveClassification;
+  const moveLabel = moveClassification
+    ? `${move.san} is ${moveClassificationLabels[moveClassification]}`
+    : null;
+
+  const bestMoveLabel =
+    moveClassification === MoveClassification.Best ||
+    moveClassification === MoveClassification.Book
+      ? null
+      : `${bestMoveSan} was the best move`;
+
+  return (
+    <Grid item container columnGap={5} xs={12} justifyContent="center">
+      {moveLabel && <Typography align="center">{moveLabel}</Typography>}
+      {bestMoveLabel && <Typography align="center">{bestMoveLabel}</Typography>}
+    </Grid>
+  );
+}
+
+const moveClassificationLabels: Record<MoveClassification, string> = {
+  [MoveClassification.Blunder]: "a blunder",
+  [MoveClassification.Mistake]: "a mistake",
+  [MoveClassification.Inaccuracy]: "an inaccuracy",
+  [MoveClassification.Good]: "good",
+  [MoveClassification.Excellent]: "excellent",
+  [MoveClassification.Best]: "the best move",
+  [MoveClassification.Book]: "an opening move",
+};

src/sections/analysis/reviewPanelBody/opening.tsx

@@ -0,0 +1,15 @@
+import { useCurrentMove } from "@/hooks/useCurrentMove";
+import { Grid, Typography } from "@mui/material";
+
+export default function Opening() {
+  const move = useCurrentMove();
+
+  const opening = move?.eval?.opening;
+  if (!opening) return null;
+
+  return (
+    <Grid item xs={12}>
+      <Typography align="center">{opening}</Typography>
+    </Grid>
+  );
+}

src/sections/analysis/reviewPanelHeader/analyzeButton.tsx

@@ -7,7 +7,7 @@ import {
   gameEvalAtom,
 } from "../states";
 import { useAtomValue, useSetAtom } from "jotai";
-import { getFens } from "@/lib/chess";
+import { getEvaluateGameParams } from "@/lib/chess";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { LoadingButton } from "@mui/lab";
 import { useEngine } from "@/hooks/useEngine";
@@ -27,18 +27,22 @@ export default function AnalyzeButton() {
     engine?.isReady() && game.history().length > 0 && !evaluationInProgress;
 
   const handleAnalyze = async () => {
-    const gameFens = getFens(game);
-    if (!engine?.isReady() || gameFens.length === 0 || evaluationInProgress) {
+    const params = getEvaluateGameParams(game);
+    if (
+      !engine?.isReady() ||
+      params.fens.length === 0 ||
+      evaluationInProgress
+    ) {
       return;
     }
 
     setEvaluationInProgress(true);
 
-    const newGameEval = await engine.evaluateGame(
-      gameFens,
-      engineDepth,
-      engineMultiPv
-    );
+    const newGameEval = await engine.evaluateGame({
+      ...params,
+      depth: engineDepth,
+      multiPv: engineMultiPv,
+    });
 
     setEval(newGameEval);
     setEvaluationInProgress(false);

src/sections/analysis/reviewPanelHeader/loadGame.tsx

@@ -1,6 +1,6 @@
 import LoadGameButton from "../../loadGame/loadGameButton";
 import { useCallback, useEffect } from "react";
-import { useChessActions } from "@/hooks/useChess";
+import { useChessActions } from "@/hooks/useChessActions";
 import {
   boardAtom,
   boardOrientationAtom,

src/sections/analysis/reviewPanelToolbar/goToLastPositionButton.tsx

@@ -2,7 +2,7 @@ import { Icon } from "@iconify/react";
 import { Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
-import { useChessActions } from "@/hooks/useChess";
+import { useChessActions } from "@/hooks/useChessActions";
 
 export default function GoToLastPositionButton() {
   const { setPgn: setBoardPgn } = useChessActions(boardAtom);

src/sections/analysis/reviewPanelToolbar/index.tsx

@@ -2,7 +2,7 @@ import { Grid, IconButton, Tooltip } from "@mui/material";
 import { Icon } from "@iconify/react";
 import { useAtomValue } from "jotai";
 import { boardAtom } from "../states";
-import { useChessActions } from "@/hooks/useChess";
+import { useChessActions } from "@/hooks/useChessActions";
 import FlipBoardButton from "./flipBoardButton";
 import NextMoveButton from "./nextMoveButton";
 import GoToLastPositionButton from "./goToLastPositionButton";

src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx

@@ -2,7 +2,7 @@ import { Icon } from "@iconify/react";
 import { Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
-import { useChessActions } from "@/hooks/useChess";
+import { useChessActions } from "@/hooks/useChessActions";
 
 export default function NextMoveButton() {
   const { makeMove: makeBoardMove } = useChessActions(boardAtom);

src/types/enums.ts

@@ -6,3 +6,13 @@ export enum GameOrigin {
 export enum EngineName {
   Stockfish16 = "stockfish_16",
 }
+
+export enum MoveClassification {
+  Blunder = "blunder",
+  Mistake = "mistake",
+  Inaccuracy = "inaccuracy",
+  Good = "good",
+  Excellent = "excellent",
+  Best = "best",
+  Book = "book",
+}

src/types/eval.ts

@@ -1,8 +1,10 @@
 import { Move } from "chess.js";
-import { EngineName } from "./enums";
+import { EngineName, MoveClassification } from "./enums";
 
 export interface MoveEval {
-  bestMove: string;
+  bestMove?: string;
+  moveClassification?: MoveClassification;
+  opening?: string;
   lines: LineEval[];
 }
 
@@ -43,3 +45,10 @@ export type CurrentMove = Partial<Move> & {
   eval?: MoveEval;
   lastEval?: MoveEval;
 };
+
+export interface EvaluateGameParams {
+  fens: string[];
+  uciMoves: string[];
+  depth?: number;
+  multiPv?: number;
+}