refacto : board player header

src/components/board/index.tsx

@@ -1,4 +1,4 @@
-import { Grid2 as Grid, Typography } from "@mui/material";
+import { Grid2 as Grid } from "@mui/material";
 import { Chessboard } from "react-chessboard";
 import { PrimitiveAtom, atom, useAtomValue, useSetAtom } from "jotai";
 import {
@@ -14,19 +14,17 @@ import { Chess } from "chess.js";
 import { getSquareRenderer } from "./squareRenderer";
 import { CurrentPosition } from "@/types/eval";
 import EvaluationBar from "./evaluationBar";
-import CapturedPieces from "./capturedPieces";
 import { moveClassificationColors } from "@/lib/chess";
-import Avatar from "@mui/material/Avatar";
+import { Player } from "@/types/game";
+import PlayerHeader from "./playerHeader";
 
 export interface Props {
   id: string;
   canPlay?: Color | boolean;
   gameAtom: PrimitiveAtom<Chess>;
   boardSize?: number;
-  whitePlayer?: string;
-  blackPlayer?: string;
-  whiteAvatar?: string;
-  blackAvatar?: string;
+  whitePlayer: Player;
+  blackPlayer: Player;
   boardOrientation?: Color;
   currentPositionAtom?: PrimitiveAtom<CurrentPosition>;
   showBestMoveArrow?: boolean;
@@ -41,8 +39,6 @@ export default function Board({
   boardSize,
   whitePlayer,
   blackPlayer,
-  whiteAvatar,
-  blackAvatar,
   boardOrientation = Color.White,
   currentPositionAtom = atom({}),
   showBestMoveArrow = false,
@@ -247,30 +243,11 @@ export default function Board({
         paddingLeft={showEvaluationBar ? 2 : 0}
         size="grow"
       >
-        <Grid
-          container
-          justifyContent="center"
-          alignItems="center"
-          columnGap={2}
-          size={12}
-        >
-          {/* Player avatar, only render if URL is available */}
-          {(boardOrientation === Color.White ? blackAvatar : whiteAvatar) && (
-            <Avatar
-              src={boardOrientation === Color.White ? blackAvatar : whiteAvatar}
-              variant="circular"
-              sx={{ width: 24, height: 24 }}
-            />
-          ) }
-          <Typography>
-            {boardOrientation === Color.White ? blackPlayer : whitePlayer}
-          </Typography>
-
-          <CapturedPieces
-            fen={gameFen}
-            color={boardOrientation === Color.White ? Color.Black : Color.White}
-          />
-        </Grid>
+        <PlayerHeader
+          color={boardOrientation === Color.White ? Color.Black : Color.White}
+          fen={gameFen}
+          player={boardOrientation === Color.White ? blackPlayer : whitePlayer}
+        />
 
         <Grid
           container
@@ -304,27 +281,11 @@ export default function Board({
           />
         </Grid>
 
-        <Grid
-          container
-          justifyContent="center"
-          alignItems="center"
-          columnGap={2}
-          size={12}
-        >
-          {/* Player avatar, only render if URL is available */}
-          { (boardOrientation === Color.White ? whiteAvatar : blackAvatar) && (
-            <Avatar
-              src={boardOrientation === Color.White ? whiteAvatar : blackAvatar}
-              variant="circular"
-              sx={{ width: 24, height: 24 }}
-            />
-          ) }
-          <Typography>
-            {boardOrientation === Color.White ? whitePlayer : blackPlayer}
-          </Typography>
-
-          <CapturedPieces fen={gameFen} color={boardOrientation} />
-        </Grid>
+        <PlayerHeader
+          color={boardOrientation}
+          fen={gameFen}
+          player={boardOrientation === Color.White ? whitePlayer : blackPlayer}
+        />
       </Grid>
     </Grid>
   );

src/components/board/playerHeader.tsx

@@ -0,0 +1,35 @@
+import { Color } from "@/types/enums";
+import { Player } from "@/types/game";
+import { Avatar, Grid2 as Grid, Typography } from "@mui/material";
+import CapturedPieces from "./capturedPieces";
+
+export interface Props {
+  player: Player;
+  color: Color;
+  fen: string;
+}
+
+export default function PlayerHeader({ color, player, fen }: Props) {
+  return (
+    <Grid
+      container
+      justifyContent="center"
+      alignItems="center"
+      columnGap={2}
+      size={12}
+    >
+      {player.avatarUrl && (
+        <Avatar
+          src={player.avatarUrl}
+          variant="circular"
+          sx={{ width: 24, height: 24 }}
+        />
+      )}
+      <Typography>
+        {player.rating ? `${player.name} (${player.rating})` : player.name}
+      </Typography>
+
+      <CapturedPieces fen={fen} color={color} />
+    </Grid>
+  );
+}