Squashed commit of the following:

commit dfc79cf287823383a25a650d5788ee5250b1c316
Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com>
Date:   Sun May 11 01:32:35 2025 +0200

    fix : style

commit bccfa5a3358302c2f037cc2dcfbd0a1df5e2974e
Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com>
Date:   Sun May 11 01:01:12 2025 +0200

    feat : players clocks v1

commit 5f65009f200686433904710d5f9ceb1ba166fa9d
Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com>
Date:   Sat May 10 21:58:02 2025 +0200

    fix : merge issues

commit f93dc6104e2d3fbb60088f578c2d1f13bf6519e9
Merge: a9f3728 fea1f3f
Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com>
Date:   Sat May 10 21:53:11 2025 +0200

    Merge branch 'main' into feat/add-players-clocks

commit a9f372808ef403dfb823c4cf93c837412cc55c53
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Mon Jan 6 23:10:28 2025 +0100

    fix : rename

commit aedf9c252023bebe4da4327b7526371fa75b7b3e
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Sun Jan 5 17:30:27 2025 +0100

    feat : add players clocks

src/components/board/capturedPieces.tsx

@@ -8,7 +8,7 @@ export interface Props {
   color: Color;
 }
 
-const PIECE_SCALE = 0.6;
+const PIECE_SCALE = 0.55;
 
 export default function CapturedPieces({ fen, color }: Props) {
   const cssProps = useMemo(() => {
@@ -22,7 +22,7 @@ export default function CapturedPieces({ fen, color }: Props) {
   }, [fen, color]);
 
   return (
-    <Grid container alignItems="end" columnGap={0.6} size="auto">
+    <Grid container alignItems="end" columnGap={0.5} size="auto">
       {cssProps.map((cssProp, i) => (
         <span
           key={i}

src/components/board/index.tsx

@@ -270,7 +270,7 @@ export default function Board({
 
       <Grid
         container
-        rowGap={1}
+        rowGap={1.5}
         justifyContent="center"
         alignItems="center"
         paddingLeft={showEvaluationBar ? 2 : 0}
@@ -278,7 +278,7 @@ export default function Board({
       >
         <PlayerHeader
           color={boardOrientation === Color.White ? Color.Black : Color.White}
-          fen={gameFen}
+          gameAtom={gameAtom}
           player={boardOrientation === Color.White ? blackPlayer : whitePlayer}
         />
 
@@ -318,7 +318,7 @@ export default function Board({
 
         <PlayerHeader
           color={boardOrientation}
-          fen={gameFen}
+          gameAtom={gameAtom}
           player={boardOrientation === Color.White ? whitePlayer : blackPlayer}
         />
       </Grid>

src/components/board/playerHeader.tsx

@@ -1,35 +1,113 @@
 import { Color } from "@/types/enums";
 import { Player } from "@/types/game";
-import { Avatar, Grid2 as Grid, Typography } from "@mui/material";
+import { Avatar, Grid2 as Grid, Stack, Typography } from "@mui/material";
 import CapturedPieces from "./capturedPieces";
+import { PrimitiveAtom, useAtomValue } from "jotai";
+import { Chess } from "chess.js";
+import { useMemo } from "react";
+import { getPaddedNumber } from "@/lib/helpers";
 
 export interface Props {
   player: Player;
   color: Color;
-  fen: string;
+  gameAtom: PrimitiveAtom<Chess>;
 }
 
-export default function PlayerHeader({ color, player, fen }: Props) {
+export default function PlayerHeader({ color, player, gameAtom }: Props) {
+  const game = useAtomValue(gameAtom);
+
+  const gameFen = game.fen();
+
+  const clock = useMemo(() => {
+    const turn = game.turn();
+
+    if (turn === color) {
+      const history = game.history({ verbose: true });
+      const previousFen = history.at(-1)?.before;
+
+      const comment = game
+        .getComments()
+        .find(({ fen }) => fen === previousFen)?.comment;
+
+      return getClock(comment);
+    }
+
+    const comment = game.getComment();
+    return getClock(comment);
+  }, [game, color]);
+
   return (
     <Grid
       container
-      justifyContent="center"
+      justifyContent="space-between"
       alignItems="center"
-      columnGap={2}
       size={12}
     >
-      {player.avatarUrl && (
+      <Stack direction="row">
         <Avatar
           src={player.avatarUrl}
+          alt={player.name}
           variant="circular"
-          sx={{ width: 24, height: 24 }}
+          sx={{
-        />
+            width: 40,
-      )}
+            height: 40,
-      <Typography>
+            backgroundColor: color === Color.White ? "white" : "black",
-        {player.rating ? `${player.name} (${player.rating})` : player.name}
+            color: color === Color.White ? "black" : "white",
-      </Typography>
+            border: "1px solid black",
+          }}
+        >
+          {player.name[0].toUpperCase()}
+        </Avatar>
 
-      <CapturedPieces fen={fen} color={color} />
+        <Stack marginLeft={1}>
+          <Stack direction="row">
+            <Typography fontSize="0.9rem">{player.name}</Typography>
+
+            {player.rating && (
+              <Typography marginLeft={0.5} fontSize="0.9rem" fontWeight="200">
+                ({player.rating})
+              </Typography>
+            )}
+          </Stack>
+
+          <CapturedPieces fen={gameFen} color={color} />
+        </Stack>
+      </Stack>
+
+      {clock && (
+        <Typography
+          align="center"
+          sx={{
+            backgroundColor: color === Color.White ? "white" : "black",
+            color: color === Color.White ? "black" : "white",
+          }}
+          borderRadius="5px"
+          padding={0.8}
+          border="1px solid #424242"
+          width="5rem"
+          textAlign="right"
+        >
+          {clock.hours ? `${clock.hours}:` : ""}
+          {getPaddedNumber(clock.minutes)}:{getPaddedNumber(clock.seconds)}
+          {clock.hours || clock.minutes || clock.seconds > 20
+            ? ""
+            : `.${clock.tenths}`}
+        </Typography>
+      )}
     </Grid>
   );
 }
+
+const getClock = (comment: string | undefined) => {
+  if (!comment) return undefined;
+
+  const match = comment.match(/\[%clk (\d+):(\d+):(\d+)(?:\.(\d*))?\]/);
+  if (!match) return undefined;
+
+  return {
+    hours: parseInt(match[1]),
+    minutes: parseInt(match[2]),
+    seconds: parseInt(match[3]),
+    tenths: match[4] ? parseInt(match[4]) : 0,
+  };
+};

src/hooks/useChessActions.ts

@@ -1,11 +1,11 @@
-import { setGameHeaders } from "@/lib/chess";
+import { getGameFromPgn, setGameHeaders } from "@/lib/chess";
 import {
   playGameEndSound,
   playIllegalMoveSound,
   playSoundFromMove,
 } from "@/lib/sounds";
 import { Player } from "@/types/game";
-import { Chess, Move } from "chess.js";
+import { Chess, Move, DEFAULT_POSITION } from "chess.js";
 import { PrimitiveAtom, useAtom } from "jotai";
 import { useCallback } from "react";
 
@@ -43,8 +43,9 @@ export const useChessActions = (chessAtom: PrimitiveAtom<Chess>) => {
     if (game.history().length === 0) {
       const pgnSplitted = game.pgn().split("]");
       if (
-        pgnSplitted.at(-1)?.includes("1-0") ||
+        ["1-0", "0-1", "1/2-1/2", "*"].includes(
-        pgnSplitted.at(-1) === "\n *"
+          pgnSplitted.at(-1)?.trim() ?? ""
+        )
       ) {
         newGame.loadPgn(pgnSplitted.slice(0, -1).join("]") + "]");
         return newGame;
@@ -55,11 +56,31 @@ export const useChessActions = (chessAtom: PrimitiveAtom<Chess>) => {
     return newGame;
   }, [game]);
 
+  const resetToStartingPosition = useCallback(
+    (pgn?: string) => {
+      const newGame = pgn ? getGameFromPgn(pgn) : copyGame();
+      newGame.load(newGame.getHeaders().FEN || DEFAULT_POSITION, {
+        preserveHeaders: true,
+      });
+      setGame(newGame);
+    },
+    [copyGame, setGame]
+  );
+
   const makeMove = useCallback(
-    (move: { from: string; to: string; promotion?: string }): Move | null => {
+    (params: {
+      from: string;
+      to: string;
+      promotion?: string;
+      comment?: string;
+    }): Move | null => {
       const newGame = copyGame();
+
       try {
+        const { comment, ...move } = params;
         const result = newGame.move(move);
+        if (comment) newGame.setComment(comment);
+
         setGame(newGame);
         playSoundFromMove(result);
         return result;
@@ -103,5 +124,12 @@ export const useChessActions = (chessAtom: PrimitiveAtom<Chess>) => {
     [setGame]
   );
 
-  return { setPgn, reset, makeMove, undoMove, goToMove };
+  return {
+    setPgn,
+    reset,
+    makeMove,
+    undoMove,
+    goToMove,
+    resetToStartingPosition,
+  };
 };

src/lib/chess.ts

@@ -280,17 +280,6 @@ const getPieceValue = (piece: PieceSymbol): number => {
   }
 };
 
-export const getStartingFen = (
-  params: { pgn: string } | { game: Chess }
-): string => {
-  const game = "game" in params ? params.game : getGameFromPgn(params.pgn);
-
-  const history = game.history({ verbose: true });
-  if (!history.length) return game.fen();
-
-  return history[0].before;
-};
-
 export const isCheck = (fen: string): boolean => {
   const game = new Chess(fen);
   return game.inCheck();

src/lib/chessCom.ts

@@ -1,5 +1,5 @@
 import { ChessComGame } from "@/types/chessCom";
-import { getPaddedMonth } from "./helpers";
+import { getPaddedNumber } from "./helpers";
 
 export const getChessComUserRecentGames = async (
   username: string
@@ -7,7 +7,7 @@ export const getChessComUserRecentGames = async (
   const date = new Date();
   const year = date.getUTCFullYear();
   const month = date.getUTCMonth() + 1;
-  const paddedMonth = getPaddedMonth(month);
+  const paddedMonth = getPaddedNumber(month);
 
   const res = await fetch(
     `https://api.chess.com/pub/player/${username}/games/${year}/${paddedMonth}`
@@ -21,7 +21,7 @@ export const getChessComUserRecentGames = async (
 
   if (games.length < 50) {
     const previousMonth = month === 1 ? 12 : month - 1;
-    const previousPaddedMonth = getPaddedMonth(previousMonth);
+    const previousPaddedMonth = getPaddedNumber(previousMonth);
     const yearToFetch = previousMonth === 12 ? year - 1 : year;
 
     const resPreviousMonth = await fetch(

src/lib/helpers.ts

@@ -1,4 +1,4 @@
-export const getPaddedMonth = (month: number) => {
+export const getPaddedNumber = (month: number) => {
   return month < 10 ? `0${month}` : month;
 };
 

src/lib/lichess.ts

@@ -58,7 +58,7 @@ export const getLichessUserRecentGames = async (
   username: string
 ): Promise<LichessGame[]> => {
   const res = await fetch(
-    `https://lichess.org/api/games/user/${username}?until=${Date.now()}&max=50&pgnInJson=true&sort=dateDesc`,
+    `https://lichess.org/api/games/user/${username}?until=${Date.now()}&max=50&pgnInJson=true&sort=dateDesc&clocks=true`,
     { method: "GET", headers: { accept: "application/x-ndjson" } }
   );
 

src/pages/index.tsx

@@ -81,7 +81,7 @@ export default function GameReview() {
           maxWidth: "1200px",
         }}
         rowGap={2}
-        maxHeight={{ lg: "calc(95vh - 130px)", xs: "900px" }}
+        maxHeight={{ lg: "calc(95vh - 80px)", xs: "900px" }}
         display="grid"
         gridTemplateRows="repeat(3, auto) fit-content(100%)"
         marginTop={isLgOrGreater && window.innerHeight > 780 ? 4 : 0}

src/sections/analysis/board/index.tsx

@@ -28,7 +28,7 @@ export default function BoardContainer() {
       return Math.min(width, height - 150);
     }
 
-    return Math.min(width - 700, height * 0.95);
+    return Math.min(width - 700, height * 0.92);
   }, [screenSize]);
 
   return (

src/sections/analysis/hooks/useCurrentPosition.ts

@@ -42,9 +42,20 @@ export const useCurrentPosition = (engineName?: EngineName) => {
       if (gameEval) {
         const evalIndex = boardHistory.length;
 
-        position.eval = gameEval.positions[evalIndex];
+        position.eval = {
+          ...gameEval.positions[evalIndex],
+          lines: gameEval.positions[evalIndex].lines.slice(0, multiPv),
+        };
         position.lastEval =
-          evalIndex > 0 ? gameEval.positions[evalIndex - 1] : undefined;
+          evalIndex > 0
+            ? {
+                ...gameEval.positions[evalIndex - 1],
+                lines: gameEval.positions[evalIndex - 1].lines.slice(
+                  0,
+                  multiPv
+                ),
+              }
+            : undefined;
       }
     }
 
@@ -70,11 +81,12 @@ export const useCurrentPosition = (engineName?: EngineName) => {
           (savedEval.lines?.length ?? 0) >= multiPv &&
           (savedEval.lines[0].depth ?? 0) >= depth
         ) {
-          setPartialEval?.({
+          const positionEval: PositionEval = {
             ...savedEval,
             lines: savedEval.lines.slice(0, multiPv),
-          });
+          };
-          return savedEval;
+          setPartialEval?.(positionEval);
+          return positionEval;
         }
 
         const rawPositionEval = await engine.evaluatePositionWithUpdate({

src/sections/analysis/panelBody/analysisTab/opening.tsx

@@ -12,7 +12,10 @@ export default function Opening() {
   }
   if (!lastMove) return null;
 
-  const opening = position?.eval?.opening || lastOpening;
+  const opening =
+    position?.eval?.opening && !position?.eval?.opening.includes("Unknown")
+      ? position.eval.opening
+      : lastOpening;
   if (opening && opening !== lastOpening) {
     setLastOpening(opening);
   }

src/sections/analysis/panelHeader/loadGame.tsx

@@ -12,13 +12,12 @@ import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { useAtomValue, useSetAtom } from "jotai";
 import { Chess } from "chess.js";
 import { useRouter } from "next/router";
-import { getStartingFen } from "@/lib/chess";
 
 export default function LoadGame() {
   const router = useRouter();
   const game = useAtomValue(gameAtom);
   const { setPgn: setGamePgn } = useChessActions(gameAtom);
-  const { reset: resetBoard } = useChessActions(boardAtom);
+  const { resetToStartingPosition: resetBoard } = useChessActions(boardAtom);
   const { gameFromUrl } = useGameDatabase();
   const setEval = useSetAtom(gameEvalAtom);
   const setBoardOrientation = useSetAtom(boardOrientationAtom);
@@ -26,7 +25,7 @@ export default function LoadGame() {
 
   const resetAndSetGamePgn = useCallback(
     (pgn: string) => {
-      resetBoard({ fen: getStartingFen({ pgn }) });
+      resetBoard(pgn);
       setEval(undefined);
       setGamePgn(pgn);
     },

src/sections/analysis/panelToolbar/index.tsx

@@ -8,11 +8,10 @@ import NextMoveButton from "./nextMoveButton";
 import GoToLastPositionButton from "./goToLastPositionButton";
 import SaveButton from "./saveButton";
 import { useEffect } from "react";
-import { getStartingFen } from "@/lib/chess";
 
 export default function PanelToolBar() {
   const board = useAtomValue(boardAtom);
-  const { reset: resetBoard, undoMove: undoBoardMove } =
+  const { resetToStartingPosition: resetBoard, undoMove: undoBoardMove } =
     useChessActions(boardAtom);
 
   const boardHistory = board.history();
@@ -24,7 +23,7 @@ export default function PanelToolBar() {
       if (e.key === "ArrowLeft") {
         undoBoardMove();
       } else if (e.key === "ArrowDown") {
-        resetBoard({ fen: getStartingFen({ game: board }) });
+        resetBoard();
       }
     };
 
@@ -42,7 +41,7 @@ export default function PanelToolBar() {
       <Tooltip title="Reset board">
         <Grid>
           <IconButton
-            onClick={() => resetBoard({ fen: getStartingFen({ game: board }) })}
+            onClick={() => resetBoard()}
             disabled={boardHistory.length === 0}
             sx={{ paddingX: 1.2, paddingY: 0.5 }}
           >

src/sections/analysis/panelToolbar/nextMoveButton.tsx

@@ -22,12 +22,16 @@ export default function NextMoveButton() {
 
     const nextMoveIndex = boardHistory.length;
     const nextMove = game.history({ verbose: true })[nextMoveIndex];
+    const comment = game
+      .getComments()
+      .find((c) => c.fen === nextMove.after)?.comment;
 
     if (nextMove) {
       makeBoardMove({
         from: nextMove.from,
         to: nextMove.to,
         promotion: nextMove.promotion,
+        comment,
       });
     }
   }, [isButtonEnabled, boardHistory, game, makeBoardMove]);

src/sections/layout/index.tsx

@@ -35,7 +35,7 @@ export default function Layout({ children }: PropsWithChildren) {
         darkMode={useDarkMode}
         switchDarkMode={() => setDarkMode((val) => !val)}
       />
-      <main style={{ margin: "2em 2vw" }}>{children}</main>
+      <main style={{ margin: "3vh 2vw" }}>{children}</main>
     </ThemeProvider>
   );
 }

src/sections/play/board.tsx

@@ -59,7 +59,7 @@ export default function BoardContainer() {
       return Math.min(width, height - 150);
     }
 
-    return Math.min(width - 300, height * 0.85);
+    return Math.min(width - 300, height * 0.83);
   }, [screenSize]);
 
   useGameData(gameAtom, gameDataAtom);