feat : show eval

src/sections/index/board.tsx

@@ -1,21 +1,26 @@
 import { drawBoard } from "@/lib/board";
 import { drawEvaluationBar } from "@/lib/evalBar";
+import { useAtomValue } from "jotai";
 import { useEffect, useRef } from "react";
+import { boardPgnAtom } from "./index.state";
+import { getLastFen } from "@/lib/chess";
 
 export default function Board() {
   const boardRef = useRef<HTMLCanvasElement>(null);
   const evalBarRef = useRef<HTMLCanvasElement>(null);
+  const boardPgn = useAtomValue(boardPgnAtom);
+  const boardFen = getLastFen(boardPgn);
 
   useEffect(() => {
     const ctx = boardRef.current?.getContext("2d");
     if (!ctx) return;
 
-    drawBoard(ctx);
+    drawBoard(ctx, boardFen);
 
     const evalCtx = evalBarRef.current?.getContext("2d");
     if (!evalCtx) return;
     drawEvaluationBar(evalCtx);
-  }, []);
+  }, [boardFen]);
 
   return (
     <div id="board-outer-container" className="center">

src/sections/index/index.state.ts

@@ -1,4 +1,7 @@
+import { initPgn } from "@/lib/chess";
 import { GameEval } from "@/types/eval";
 import { atom } from "jotai";
 
-export const gameReviewAtom = atom<GameEval | undefined>(undefined);
+export const gameEvalAtom = atom<GameEval | undefined>(undefined);
+export const gamePgnAtom = atom(initPgn);
+export const boardPgnAtom = atom(initPgn);

src/sections/index/reviewPanelBody.tsx

@@ -3,29 +3,32 @@ import ReviewResult from "./reviewResult";
 import SelectDepth from "./selectDepth";
 import SelectGameOrigin from "./selectGame/selectGameOrigin";
 import { Stockfish } from "@/lib/engine/stockfish";
-import { useAtomValue } from "jotai";
-import { gameFensAtom } from "./selectGame/gameOrigin.state";
+import { useAtomValue, useSetAtom } from "jotai";
+import { boardPgnAtom, gameEvalAtom, gamePgnAtom } from "./index.state";
+import { getGameFens, initPgn } from "@/lib/chess";
 
 export default function ReviewPanelBody() {
   const [engine, setEngine] = useState<Stockfish | null>(null);
-  const gameFens = useAtomValue(gameFensAtom);
+  const setGameEval = useSetAtom(gameEvalAtom);
+  const setBoardPgn = useSetAtom(boardPgnAtom);
+  const gamePgn = useAtomValue(gamePgnAtom);
 
   useEffect(() => {
     const engine = new Stockfish();
-    engine.init().then(() => {
-      console.log("Engine initialized");
-    });
+    engine.init();
     setEngine(engine);
 
     return () => {
       engine.shutdown();
-      console.log("Engine shutdown");
     };
   }, []);
 
-  const handleAnalyse = () => {
-    if (engine?.isReady() && gameFens) {
-      engine.evaluateGame(gameFens);
+  const handleAnalyse = async () => {
+    setBoardPgn(initPgn);
+    const gameFens = getGameFens(gamePgn);
+    if (engine?.isReady() && gameFens.length) {
+      const newGameEval = await engine.evaluateGame(gameFens);
+      setGameEval(newGameEval);
     }
   };
 
@@ -50,7 +53,7 @@ export default function ReviewPanelBody() {
 
       <b id="secondary-message" className="white" />
 
-      {false && <ReviewResult />}
+      <ReviewResult />
     </div>
   );
 }

src/sections/index/reviewPanelToolbar.tsx

@@ -1,4 +1,11 @@
+import { useAtom, useAtomValue } from "jotai";
+import { boardPgnAtom, gamePgnAtom } from "./index.state";
+import { addNextMove, initPgn, undoLastMove } from "@/lib/chess";
+
 export default function ReviewPanelToolBar() {
+  const [boardPgn, setBoardPgn] = useAtom(boardPgnAtom);
+  const gamePgn = useAtomValue(gamePgnAtom);
+
   return (
     <div id="review-panel-toolbar">
       <div id="review-panel-toolbar-buttons" className="center">
@@ -13,9 +20,27 @@ export default function ReviewPanelToolBar() {
           src="back_to_start.png"
           alt="Back to start"
           title="Back to start"
+          onClick={() => setBoardPgn(initPgn)}
+        />
+        <img
+          id="back-move-button"
+          src="back.png"
+          alt="Back"
+          title="Back"
+          onClick={() => {
+            setBoardPgn(undoLastMove(boardPgn));
+          }}
+        />
+        <img
+          id="next-move-button"
+          src="next.png"
+          alt="Next"
+          title="Next"
+          onClick={() => {
+            const nextBoardPgn = addNextMove(boardPgn, gamePgn);
+            setBoardPgn(nextBoardPgn);
+          }}
         />
-        <img id="back-move-button" src="back.png" alt="Back" title="Back" />
-        <img id="next-move-button" src="next.png" alt="Next" title="Next" />
         <img
           id="go-end-move-button"
           src="go_to_end.png"

src/sections/index/reviewResult.tsx

@@ -1,12 +1,23 @@
+import { useAtomValue } from "jotai";
+import { boardPgnAtom, gameEvalAtom } from "./index.state";
+import { getNextMoveIndex } from "@/lib/chess";
+
 export default function ReviewResult() {
+  const boardPgn = useAtomValue(boardPgnAtom);
+  const gameEval = useAtomValue(gameEvalAtom);
+  if (!gameEval) return null;
+
+  const evalIndex = getNextMoveIndex(boardPgn);
+  const moveEval = gameEval.moves[evalIndex];
+
   return (
     <div id="report-cards">
       <h2 id="accuracies-title" className="white">
         Accuracies
       </h2>
       <div id="accuracies">
-        <b id="white-accuracy">0%</b>
-        <b id="black-accuracy">0%</b>
+        <b id="white-accuracy">{gameEval.whiteAccuracy}%</b>
+        <b id="black-accuracy">{gameEval.blackAccuracy}%</b>
       </div>
 
       <div id="classification-message-container">
@@ -14,12 +25,22 @@ export default function ReviewResult() {
         <b id="classification-message" />
       </div>
 
-      <b id="top-alternative-message">Qxf2+ was best</b>
+      <b id="top-alternative-message">
+        {moveEval ? `${moveEval.bestMove} is best` : "Game is over"}
+      </b>
 
       <div id="engine-suggestions">
         <h2 id="engine-suggestions-title" className="white">
           Engine
         </h2>
+        {moveEval?.lines.map((line) => (
+          <div key={line.pv[0]} style={{ color: "white" }}>
+            <span style={{ marginRight: "2em" }}>
+              {line.cp ? line.cp / 100 : `Mate in ${line.mate}`}
+            </span>
+            <span>{line.pv.slice(0, 7).join(", ")}</span>
+          </div>
+        ))}
       </div>
 
       <span id="opening-name" className="white" />

src/sections/index/selectGame/gameOrigin.state.ts

@@ -1,3 +0,0 @@
-import { atom } from "jotai";
-
-export const gameFensAtom = atom<string[]>([]);

src/sections/index/selectGame/inputGame.tsx

@@ -1,8 +1,6 @@
 import { GameOrigin } from "@/types/enums";
-import { useSetAtom } from "jotai";
-import { gameFensAtom } from "./gameOrigin.state";
-import { useEffect, useState } from "react";
-import { Chess } from "chess.js";
+import { useAtom } from "jotai";
+import { gamePgnAtom } from "../index.state";
 
 interface Props {
   gameOrigin: GameOrigin;
@@ -10,17 +8,7 @@ interface Props {
 }
 
 export default function InputGame({ placeholder }: Props) {
-  const [gamePgn, setGamePgn] = useState("");
-  const setGameFens = useSetAtom(gameFensAtom);
-
-  useEffect(() => {
-    const chess = new Chess();
-    chess.loadPgn(gamePgn);
-    const fens = chess.history({ verbose: true }).map((move) => {
-      return move.after;
-    });
-    setGameFens(fens);
-  }, [gamePgn]);
+  const [gamePgn, setGamePgn] = useAtom(gamePgnAtom);
 
   return (
     <textarea
@@ -31,7 +19,9 @@ export default function InputGame({ placeholder }: Props) {
       spellCheck="false"
       placeholder={placeholder}
       value={gamePgn}
-      onChange={(e) => setGamePgn(e.target.value)}
+      onChange={(e) => {
+        setGamePgn(e.target.value);
+      }}
     />
   );
 }