feat : add live position evaluation

src/sections/analysis/lineEvaluation.tsx

@@ -1,11 +1,15 @@
 import { LineEval } from "@/types/eval";
-import { ListItem, ListItemText, Typography } from "@mui/material";
+import { ListItem, Skeleton, Typography } from "@mui/material";
+import { useAtomValue } from "jotai";
+import { boardAtom } from "./states";
+import { moveLineUciToSan } from "@/lib/chess";
 
 interface Props {
   line: LineEval;
 }
 
 export default function LineEvaluation({ line }: Props) {
+  const board = useAtomValue(boardAtom);
   const lineLabel =
     line.cp !== undefined
       ? `${line.cp / 100}`
@@ -13,10 +17,32 @@ export default function LineEvaluation({ line }: Props) {
       ? `Mate in ${Math.abs(line.mate)}`
       : "?";
 
+  const showSkeleton = line.depth === 0;
+
   return (
     <ListItem disablePadding>
-      <ListItemText primary={lineLabel} sx={{ marginRight: 2 }} />
-      <Typography>{line.pv.slice(0, 7).join(", ")}</Typography>
+      <Typography marginRight={2} marginY={0.5}>
+        {showSkeleton ? (
+          <Skeleton
+            width={"2em"}
+            variant="rounded"
+            animation="wave"
+            sx={{ color: "transparent" }}
+          >
+            placeholder
+          </Skeleton>
+        ) : (
+          lineLabel
+        )}
+      </Typography>
+
+      <Typography>
+        {showSkeleton ? (
+          <Skeleton width={"30em"} variant="rounded" animation="wave" />
+        ) : (
+          line.pv.slice(0, 10).map(moveLineUciToSan(board.fen())).join(", ")
+        )}
+      </Typography>
     </ListItem>
   );
 }

src/sections/analysis/reviewPanelBody.tsx

@@ -1,11 +1,13 @@
 import { Icon } from "@iconify/react";
 import { Divider, Grid, List, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
-import { boardAtom, gameAtom } from "./states";
+import { boardAtom, engineMultiPvAtom, gameAtom } from "./states";
 import LineEvaluation from "./lineEvaluation";
 import { useCurrentMove } from "@/hooks/useCurrentMove";
+import { LineEval } from "@/types/eval";
 
 export default function ReviewPanelBody() {
+  const linesNumber = useAtomValue(engineMultiPvAtom);
   const move = useCurrentMove();
   const game = useAtomValue(gameAtom);
   const board = useAtomValue(boardAtom);
@@ -17,6 +19,14 @@ export default function ReviewPanelBody() {
   const isGameOver =
     gameHistory.length > 0 && boardHistory.join() === gameHistory.join();
 
+  const linesSkeleton: LineEval[] = Array.from({ length: linesNumber }).map(
+    (_, i) => ({ pv: [`${i}`], depth: 0, multiPv: i + 1 })
+  );
+
+  const engineLines = move?.eval?.lines.length
+    ? move.eval.lines
+    : linesSkeleton;
+
   return (
     <>
       <Divider sx={{ width: "90%", marginY: 3 }} />
@@ -57,8 +67,8 @@ export default function ReviewPanelBody() {
 
       <Grid item container xs={12} justifyContent="center" alignItems="center">
         <List>
-          {move?.eval?.lines.map((line) => (
-            <LineEvaluation key={line.pv[0]} line={line} />
+          {engineLines.map((line) => (
+            <LineEvaluation key={line.multiPv} line={line} />
           ))}
         </List>
       </Grid>

src/sections/analysis/reviewPanelToolbar/arrowOptions.tsx

@@ -0,0 +1,47 @@
+import { Checkbox, FormControlLabel, Grid } from "@mui/material";
+import { useAtom, useAtomValue } from "jotai";
+import {
+  gameEvalAtom,
+  showBestMoveArrowAtom,
+  showPlayerMoveArrowAtom,
+} from "../states";
+
+export default function ArrowOptions() {
+  const gameEval = useAtomValue(gameEvalAtom);
+  const [showBestMove, setShowBestMove] = useAtom(showBestMoveArrowAtom);
+  const [showPlayerMove, setShowPlayerMove] = useAtom(showPlayerMoveArrowAtom);
+
+  return (
+    <Grid
+      container
+      item
+      justifyContent="space-evenly"
+      alignItems="center"
+      xs={12}
+      marginY={3}
+      gap={3}
+    >
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={showBestMove}
+            onChange={(_, checked) => setShowBestMove(checked)}
+            disabled={!gameEval}
+          />
+        }
+        label="Show best move green arrow"
+        sx={{ marginX: 0 }}
+      />
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={showPlayerMove}
+            onChange={(_, checked) => setShowPlayerMove(checked)}
+          />
+        }
+        label="Show player move yellow arrow"
+        sx={{ marginX: 0 }}
+      />
+    </Grid>
+  );
+}

src/sections/analysis/reviewPanelToolbar/index.tsx

@@ -1,27 +1,15 @@
-import {
-  Checkbox,
-  Divider,
-  FormControlLabel,
-  Grid,
-  IconButton,
-  Tooltip,
-} from "@mui/material";
+import { Divider, Grid, IconButton, Tooltip } from "@mui/material";
 import { Icon } from "@iconify/react";
-import { useAtom, useAtomValue } from "jotai";
-import {
-  boardAtom,
-  showBestMoveArrowAtom,
-  showPlayerMoveArrowAtom,
-} from "../states";
+import { useAtomValue } from "jotai";
+import { boardAtom } from "../states";
 import { useChessActions } from "@/hooks/useChess";
 import FlipBoardButton from "./flipBoardButton";
 import NextMoveButton from "./nextMoveButton";
 import GoToLastPositionButton from "./goToLastPositionButton";
 import SaveButton from "./saveButton";
+import ArrowOptions from "./arrowOptions";
 
 export default function ReviewPanelToolBar() {
-  const [showBestMove, setShowBestMove] = useAtom(showBestMoveArrowAtom);
-  const [showPlayerMove, setShowPlayerMove] = useAtom(showPlayerMoveArrowAtom);
   const board = useAtomValue(boardAtom);
   const boardActions = useChessActions(boardAtom);
 
@@ -63,36 +51,7 @@ export default function ReviewPanelToolBar() {
         <SaveButton />
       </Grid>
 
-      <Grid
-        container
-        item
-        justifyContent="space-evenly"
-        alignItems="center"
-        xs={12}
-        marginY={3}
-        gap={3}
-      >
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={showBestMove}
-              onChange={(_, checked) => setShowBestMove(checked)}
-            />
-          }
-          label="Show best move green arrow"
-          sx={{ marginX: 0 }}
-        />
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={showPlayerMove}
-              onChange={(_, checked) => setShowPlayerMove(checked)}
-            />
-          }
-          label="Show player move yellow arrow"
-          sx={{ marginX: 0 }}
-        />
-      </Grid>
+      <ArrowOptions />
     </>
   );
 }