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>