refacto : board player header

src/sections/analysis/board/index.tsx

@@ -11,14 +11,13 @@ import { useMemo } from "react";
 import { useScreenSize } from "@/hooks/useScreenSize";
 import { Color } from "@/types/enums";
 import Board from "@/components/board";
-import { usePlayersNames } from "@/hooks/usePlayerNames";
+import { usePlayersData } from "@/hooks/usePlayerNames";
 
 export default function BoardContainer() {
   const screenSize = useScreenSize();
   const boardOrientation = useAtomValue(boardOrientationAtom);
   const showBestMoveArrow = useAtomValue(showBestMoveArrowAtom);
-  const { whiteName, whiteElo, blackName, blackElo, whiteAvatar, blackAvatar } =
-    usePlayersNames(gameAtom);
+  const { white, black } = usePlayersData(gameAtom);
 
   const boardSize = useMemo(() => {
     const width = screenSize.width;
@@ -38,10 +37,8 @@ export default function BoardContainer() {
       boardSize={boardSize}
       canPlay={true}
       gameAtom={boardAtom}
-      whitePlayer={whiteElo ? `${whiteName} (${whiteElo})` : whiteName}
-      blackPlayer={blackElo ? `${blackName} (${blackElo})` : blackName}
-      whiteAvatar={whiteAvatar}
-      blackAvatar={blackAvatar}
+      whitePlayer={white}
+      blackPlayer={black}
       boardOrientation={boardOrientation ? Color.White : Color.Black}
       currentPositionAtom={currentPositionAtom}
       showBestMoveArrow={showBestMoveArrow}

src/sections/analysis/panelBody/classificationTab/movesClassificationsRecap/index.tsx

@@ -1,4 +1,4 @@
-import { usePlayersNames } from "@/hooks/usePlayerNames";
+import { usePlayersData } from "@/hooks/usePlayerNames";
 import { Grid2 as Grid, Typography } from "@mui/material";
 import { gameAtom, gameEvalAtom } from "../../../states";
 import { MoveClassification } from "@/types/enums";
@@ -6,7 +6,7 @@ import ClassificationRow from "./classificationRow";
 import { useAtomValue } from "jotai";
 
 export default function MovesClassificationsRecap() {
-  const { whiteName, blackName } = usePlayersNames(gameAtom);
+  const { white, black } = usePlayersData(gameAtom);
   const gameEval = useAtomValue(gameEvalAtom);
 
   if (!gameEval?.positions.length) return null;
@@ -29,13 +29,13 @@ export default function MovesClassificationsRecap() {
         size={12}
       >
         <Typography width="12rem" align="center" noWrap fontSize="0.9rem">
-          {whiteName}
+          {white.name}
         </Typography>
 
         <Typography width="7rem" />
 
         <Typography width="12rem" align="center" noWrap fontSize="0.9rem">
-          {blackName}
+          {black.name}
         </Typography>
       </Grid>
 

src/sections/engineSettings/engineSettingsDialog.tsx

@@ -92,7 +92,7 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
                     value={engine}
                     disabled={!isEngineSupported(engine)}
                   >
-                    {engineLabel[engine]}
+                    {engineLabel[engine].full}
                   </MenuItem>
                 ))}
               </Select>
@@ -129,12 +129,34 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
   );
 }
 
-const engineLabel: Record<EngineName, string> = {
-  [EngineName.Stockfish17]: "Stockfish 17 (75MB)",
-  [EngineName.Stockfish17Lite]: "Stockfish 17 Lite (6MB)",
-  [EngineName.Stockfish16_1]: "Stockfish 16.1 (64MB)",
-  [EngineName.Stockfish16_1Lite]: "Stockfish 16.1 Lite (6MB)",
-  [EngineName.Stockfish16NNUE]: "Stockfish 16 (40MB)",
-  [EngineName.Stockfish16]: "Stockfish 16 Lite (HCE)",
-  [EngineName.Stockfish11]: "Stockfish 11",
-};
+export const engineLabel: Record<EngineName, { small: string; full: string }> =
+  {
+    [EngineName.Stockfish17]: {
+      full: "Stockfish 17 (75MB)",
+      small: "Stockfish 17",
+    },
+    [EngineName.Stockfish17Lite]: {
+      full: "Stockfish 17 Lite (6MB)",
+      small: "Stockfish 17 Lite",
+    },
+    [EngineName.Stockfish16_1]: {
+      full: "Stockfish 16.1 (64MB)",
+      small: "Stockfish 16.1",
+    },
+    [EngineName.Stockfish16_1Lite]: {
+      full: "Stockfish 16.1 Lite (6MB)",
+      small: "Stockfish 16.1 Lite",
+    },
+    [EngineName.Stockfish16NNUE]: {
+      full: "Stockfish 16 (40MB)",
+      small: "Stockfish 16",
+    },
+    [EngineName.Stockfish16]: {
+      full: "Stockfish 16 Lite (HCE)",
+      small: "Stockfish 16 Lite",
+    },
+    [EngineName.Stockfish11]: {
+      full: "Stockfish 11 (HCE)",
+      small: "Stockfish 11",
+    },
+  };

src/sections/play/board.tsx

@@ -10,17 +10,18 @@ import {
 import { useChessActions } from "@/hooks/useChessActions";
 import { useEffect, useMemo } from "react";
 import { useScreenSize } from "@/hooks/useScreenSize";
-import { Color } from "@/types/enums";
 import { useEngine } from "@/hooks/useEngine";
 import { uciMoveParams } from "@/lib/chess";
 import Board from "@/components/board";
 import { useGameData } from "@/hooks/useGameData";
+import { usePlayersData } from "@/hooks/usePlayerNames";
 
 export default function BoardContainer() {
   const screenSize = useScreenSize();
   const engineName = useAtomValue(enginePlayNameAtom);
   const engine = useEngine(engineName, 1);
   const game = useAtomValue(gameAtom);
+  const { white, black } = usePlayersData(gameAtom);
   const playerColor = useAtomValue(playerColorAtom);
   const { makeMove: makeGameMove } = useChessActions(gameAtom);
   const engineSkillLevel = useAtomValue(engineSkillLevelAtom);
@@ -72,16 +73,8 @@ export default function BoardContainer() {
       canPlay={isGameInProgress ? playerColor : false}
       gameAtom={gameAtom}
       boardSize={boardSize}
-      whitePlayer={
-        playerColor === Color.White
-          ? "You 🧠"
-          : `Stockfish level ${engineSkillLevel} 🤖`
-      }
-      blackPlayer={
-        playerColor === Color.Black
-          ? "You 🧠"
-          : `Stockfish level ${engineSkillLevel} 🤖`
-      }
+      whitePlayer={white}
+      blackPlayer={black}
       boardOrientation={playerColor}
       currentPositionAtom={gameDataAtom}
     />

src/sections/play/gameSettings/gameSettingsDialog.tsx

@@ -32,6 +32,7 @@ import { logAnalyticsEvent } from "@/lib/firebase";
 import { useEffect } from "react";
 import { isEngineSupported } from "@/lib/engine/shared";
 import { Stockfish16_1 } from "@/lib/engine/stockfish16_1";
+import { engineLabel } from "@/sections/engineSettings/engineSettingsDialog";
 
 interface Props {
   open: boolean;
@@ -55,9 +56,13 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
     onClose();
     resetGame({
       whiteName:
-        playerColor === Color.White ? "You" : `Stockfish level ${skillLevel}`,
+        playerColor === Color.White
+          ? "You"
+          : `${engineLabel[engineName].small} level ${skillLevel}`,
       blackName:
-        playerColor === Color.Black ? "You" : `Stockfish level ${skillLevel}`,
+        playerColor === Color.Black
+          ? "You"
+          : `${engineLabel[engineName].small} level ${skillLevel}`,
     });
     playGameStartSound();
     setIsGameInProgress(true);
@@ -117,7 +122,7 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
                     value={engine}
                     disabled={!isEngineSupported(engine)}
                   >
-                    {engineLabel[engine]}
+                    {engineLabel[engine].full}
                   </MenuItem>
                 ))}
               </Select>
@@ -166,13 +171,3 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
     </Dialog>
   );
 }
-
-const engineLabel: Record<EngineName, string> = {
-  [EngineName.Stockfish17]: "Stockfish 17 (75MB)",
-  [EngineName.Stockfish17Lite]: "Stockfish 17 Lite (6MB)",
-  [EngineName.Stockfish16_1]: "Stockfish 16.1 (64MB)",
-  [EngineName.Stockfish16_1Lite]: "Stockfish 16.1 Lite (6MB)",
-  [EngineName.Stockfish16NNUE]: "Stockfish 16 (40MB)",
-  [EngineName.Stockfish16]: "Stockfish 16 Lite (HCE)",
-  [EngineName.Stockfish11]: "Stockfish 11",
-};