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 }}
-        />
-      )}
-      <Typography>
-        {player.rating ? `${player.name} (${player.rating})` : player.name}
-      </Typography>
+          sx={{
+            width: 40,
+            height: 40,
+            backgroundColor: color === Color.White ? "white" : "black",
+            color: color === Color.White ? "black" : "white",
+            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,
+  };
+};