Squashed commit of the following:

commit 933ba823d5f991b9ab1f66bd94262c181e9d0267
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Mon Apr 21 20:13:37 2025 +0200

    fix : new chessjs version

commit b9376bcbc718f6eaa9a0fd9caada6b957f73b85a
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Mon Apr 21 19:34:12 2025 +0200

    chore : chessjs bump version

src/components/board/capturedPieces.tsx

@@ -1,28 +1,25 @@
 import { getCapturedPieces, getMaterialDifference } from "@/lib/chess";
 import { Color } from "@/types/enums";
 import { Grid2 as Grid, Typography } from "@mui/material";
-import { Chess } from "chess.js";
-import { PrimitiveAtom, useAtomValue } from "jotai";
 import { CSSProperties, useMemo } from "react";
 
 export interface Props {
-  gameAtom: PrimitiveAtom<Chess>;
+  fen: string;
   color: Color;
 }
 
 const PIECE_SCALE = 0.6;
 
-export default function CapturedPieces({ gameAtom, color }: Props) {
-  const game = useAtomValue(gameAtom);
+export default function CapturedPieces({ fen, color }: Props) {
   const cssProps = useMemo(() => {
-    const capturedPieces = getCapturedPieces(game.fen(), color);
+    const capturedPieces = getCapturedPieces(fen, color);
     return getCapturedPiecesCSSProps(capturedPieces, color);
-  }, [game, color]);
+  }, [fen, color]);
 
   const materialDiff = useMemo(() => {
-    const materialDiff = getMaterialDifference(game.fen());
+    const materialDiff = getMaterialDifference(fen);
     return color === Color.White ? materialDiff : -materialDiff;
-  }, [game, color]);
+  }, [fen, color]);
 
   return (
     <Grid container alignItems="end" columnGap={0.6} size="auto">

src/components/board/index.tsx

@@ -254,7 +254,7 @@ export default function Board({
           </Typography>
 
           <CapturedPieces
-            gameAtom={gameAtom}
+            fen={gameFen}
             color={boardOrientation === Color.White ? Color.Black : Color.White}
           />
         </Grid>
@@ -302,7 +302,7 @@ export default function Board({
             {boardOrientation === Color.White ? whitePlayer : blackPlayer}
           </Typography>
 
-          <CapturedPieces gameAtom={gameAtom} color={boardOrientation} />
+          <CapturedPieces fen={gameFen} color={boardOrientation} />
         </Grid>
       </Grid>
     </Grid>

src/hooks/useChessActions.ts

@@ -12,6 +12,7 @@ export interface resetGameParams {
   fen?: string;
   whiteName?: string;
   blackName?: string;
+  noHeaders?: boolean;
 }
 
 export const useChessActions = (chessAtom: PrimitiveAtom<Chess>) => {
@@ -29,7 +30,7 @@ export const useChessActions = (chessAtom: PrimitiveAtom<Chess>) => {
   const reset = useCallback(
     (params?: resetGameParams) => {
       const newGame = new Chess(params?.fen);
-      setGameHeaders(newGame, params);
+      if (!params?.noHeaders) setGameHeaders(newGame, params);
       setGame(newGame);
     },
     [setGame]
@@ -40,7 +41,10 @@ export const useChessActions = (chessAtom: PrimitiveAtom<Chess>) => {
 
     if (game.history().length === 0) {
       const pgnSplitted = game.pgn().split("]");
-      if (pgnSplitted.at(-1)?.includes("1-0")) {
+      if (
+        pgnSplitted.at(-1)?.includes("1-0") ||
+        pgnSplitted.at(-1) === "\n *"
+      ) {
         newGame.loadPgn(pgnSplitted.slice(0, -1).join("]") + "]");
         return newGame;
       }

src/hooks/usePlayerNames.ts

@@ -7,8 +7,13 @@ export const usePlayersNames = (gameAtom: PrimitiveAtom<Chess>) => {
   const { gameFromUrl } = useGameDatabase();
   const headers = game.getHeaders();
 
-  const whiteName = gameFromUrl?.white?.name || headers.White || "White";
-  const blackName = gameFromUrl?.black?.name || headers.Black || "Black";
+  const headersWhiteName =
+    headers.White && headers.White !== "?" ? headers.White : undefined;
+  const headersBlackName =
+    headers.Black && headers.Black !== "?" ? headers.Black : undefined;
+
+  const whiteName = gameFromUrl?.white?.name || headersWhiteName || "White";
+  const blackName = gameFromUrl?.black?.name || headersBlackName || "Black";
 
   const whiteElo = gameFromUrl?.white?.rating || headers.WhiteElo || undefined;
   const blackElo = gameFromUrl?.black?.rating || headers.BlackElo || undefined;

src/pages/index.tsx

@@ -19,7 +19,6 @@ import {
   useMediaQuery,
   useTheme,
 } from "@mui/material";
-import { Chess } from "chess.js";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -35,7 +34,7 @@ export default function GameReview() {
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const { reset: resetBoard } = useChessActions(boardAtom);
-  const { setPgn: setGamePgn } = useChessActions(gameAtom);
+  const { reset: resetGame } = useChessActions(gameAtom);
   const [gameEval, setGameEval] = useAtom(gameEvalAtom);
   const game = useAtomValue(gameAtom);
   const setBoardOrientation = useSetAtom(boardOrientationAtom);
@@ -48,9 +47,9 @@ export default function GameReview() {
       resetBoard();
       setGameEval(undefined);
       setBoardOrientation(true);
-      setGamePgn(new Chess().pgn());
+      resetGame({ noHeaders: true });
     }
-  }, [gameId, setGameEval, setBoardOrientation, resetBoard, setGamePgn]);
+  }, [gameId, setGameEval, setBoardOrientation, resetBoard, resetGame]);
 
   const isGameLoaded = game.history().length > 0;
 

src/sections/analysis/panelHeader/gamePanel.tsx

@@ -8,7 +8,9 @@ export default function GamePanel() {
   const game = useAtomValue(gameAtom);
   const gameHeaders = game.getHeaders();
 
-  const hasGameInfo = gameFromUrl !== undefined || !!gameHeaders.White;
+  const hasGameInfo =
+    gameFromUrl !== undefined ||
+    (!!gameHeaders.White && gameHeaders.White !== "?");
 
   if (!hasGameInfo) return null;
 

src/sections/analysis/panelHeader/loadGame.tsx

@@ -49,7 +49,10 @@ export default function LoadGame() {
     loadGame();
   }, [gameFromUrl, game, resetAndSetGamePgn, setEval]);
 
-  const isGameLoaded = gameFromUrl !== undefined || !!game.getHeaders().White;
+  const isGameLoaded =
+    gameFromUrl !== undefined ||
+    (!!game.getHeaders().White && game.getHeaders().White !== "?") ||
+    game.history().length > 0;
 
   if (evaluationProgress) return null;
 

src/sections/analysis/panelToolbar/index.tsx

@@ -17,6 +17,7 @@ export default function PanelToolBar() {
 
   const boardHistory = board.history();
   const game = useAtomValue(gameAtom);
+
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (boardHistory.length === 0) return;