style : fix gap & margin & padding

src/components/slider.tsx

@@ -28,12 +28,7 @@ export default function Slider({
       justifyContent="center"
       alignItems="center"
     >
-      <Typography
-        id={`input-${label}`}
-        gutterBottom
-        textAlign="left"
-        width="100%"
-      >
+      <Typography id={`input-${label}`} textAlign="left" width="100%">
         {label}
       </Typography>
 

src/hooks/useCurrentMove.ts

@@ -1,24 +1,19 @@
 import {
   boardAtom,
+  currentMoveAtom,
   engineDepthAtom,
   engineMultiPvAtom,
   gameAtom,
   gameEvalAtom,
 } from "@/sections/analysis/states";
-import { MoveEval } from "@/types/eval";
-import { Move } from "chess.js";
-import { useAtomValue } from "jotai";
-import { useEffect, useState } from "react";
+import { CurrentMove, MoveEval } from "@/types/eval";
+import { useAtom, useAtomValue } from "jotai";
+import { useEffect } from "react";
 import { useEngine } from "./useEngine";
 import { EngineName } from "@/types/enums";
 
-export type CurrentMove = Partial<Move> & {
-  eval?: MoveEval;
-  lastEval?: MoveEval;
-};
-
 export const useCurrentMove = (engineName?: EngineName) => {
-  const [currentMove, setCurrentMove] = useState<CurrentMove>({});
+  const [currentMove, setCurrentMove] = useAtom(currentMoveAtom);
   const engine = useEngine(engineName);
   const gameEval = useAtomValue(gameEvalAtom);
   const game = useAtomValue(gameAtom);

src/lib/chess.ts

@@ -97,11 +97,12 @@ export const getEvaluationBarValue = (
   const cp = bestLine.cp;
   const whiteBarPercentage = Math.min(50 + cp / 20, 98);
 
-  const label = (cp / 100).toFixed(1);
+  const pEval = Math.abs(cp) / 100;
+  const label = pEval.toFixed(1);
 
   if (label.toString().length > 3) {
-    return { whiteBarPercentage, label: (cp / 100).toFixed(0) };
+    return { whiteBarPercentage, label: pEval.toFixed(0) };
   }
 
-  return { whiteBarPercentage, label: (cp / 100).toFixed(1) };
+  return { whiteBarPercentage, label: pEval.toFixed(1) };
 };

src/pages/index.tsx

@@ -2,14 +2,16 @@ import { useChessActions } from "@/hooks/useChess";
 import Board from "@/sections/analysis/board";
 import ReviewPanelBody from "@/sections/analysis/reviewPanelBody";
 import ReviewPanelHeader from "@/sections/analysis/reviewPanelHeader";
+import AnalyzePanel from "@/sections/analysis/reviewPanelHeader/analyzePanel";
 import ReviewPanelToolBar from "@/sections/analysis/reviewPanelToolbar";
+import ArrowOptions from "@/sections/analysis/reviewPanelToolbar/arrowOptions";
 import {
   boardAtom,
   boardOrientationAtom,
   gameAtom,
   gameEvalAtom,
 } from "@/sections/analysis/states";
-import { Grid } from "@mui/material";
+import { Divider, Grid } from "@mui/material";
 import { Chess } from "chess.js";
 import { useSetAtom } from "jotai";
 import { useRouter } from "next/router";
@@ -35,9 +37,9 @@ export default function GameReport() {
   return (
     <Grid
       container
-      rowGap={2}
+      rowGap={6}
       justifyContent="center"
-      alignItems="center"
+      alignItems="start"
       marginTop={1}
     >
       <Grid
@@ -46,7 +48,8 @@ export default function GameReport() {
         justifyContent="center"
         alignItems="center"
         xs={12}
-        md={6}
+        md={9}
+        lg={6}
       >
         <Board />
       </Grid>
@@ -54,7 +57,6 @@ export default function GameReport() {
       <Grid
         item
         container
-        rowGap={2}
         paddingLeft={{ xs: 0, lg: 6 }}
         justifyContent="center"
         alignItems="center"
@@ -64,8 +66,6 @@ export default function GameReport() {
         <Grid
           container
           item
-          rowGap={3}
-          columnGap={1}
           justifyContent="center"
           alignItems="center"
           borderRadius={2}
@@ -74,17 +74,27 @@ export default function GameReport() {
           xs={12}
           sx={{
             backgroundColor: "secondary.main",
-            borderRadius: 2,
             borderColor: "primary.main",
             borderWidth: 2,
           }}
-          paddingY={3}
+          padding={3}
+          gap={4}
         >
           <ReviewPanelHeader />
 
+          <Divider sx={{ width: "90%" }} />
+
+          <AnalyzePanel />
+
+          <Divider sx={{ width: "90%" }} />
+
           <ReviewPanelBody />
 
+          <Divider sx={{ width: "90%" }} />
+
           <ReviewPanelToolBar />
+
+          <ArrowOptions />
         </Grid>
       </Grid>
     </Grid>

src/sections/analysis/board/evaluationBar.tsx

@@ -1,12 +1,11 @@
 import { Box, Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
-import { boardAtom, boardOrientationAtom } from "../states";
+import { boardAtom, boardOrientationAtom, currentMoveAtom } from "../states";
 import { getEvaluationBarValue } from "@/lib/chess";
-import { useCurrentMove } from "@/hooks/useCurrentMove";
 
 interface Props {
-  height?: number;
+  height: number;
 }
 
 export default function EvaluationBar({ height }: Props) {
@@ -16,7 +15,7 @@ export default function EvaluationBar({ height }: Props) {
   });
   const board = useAtomValue(boardAtom);
   const boardOrientation = useAtomValue(boardOrientationAtom);
-  const currentMove = useCurrentMove();
+  const currentMove = useAtomValue(currentMoveAtom);
 
   useEffect(() => {
     const bestLine = currentMove?.eval?.lines[0];
@@ -32,12 +31,11 @@ export default function EvaluationBar({ height }: Props) {
       container
       justifyContent="center"
       alignItems="center"
-      xs={1}
+      width="2rem"
       height={height}
-      paddingX={3}
     >
       <Box
-        sx={{ backgroundColor: boardOrientation ? "black" : "white" }}
+        sx={{ backgroundColor: boardOrientation ? "secondary.main" : "white" }}
         height={`${
           boardOrientation
             ? 100 - evalBar.whiteBarPercentage
@@ -59,7 +57,7 @@ export default function EvaluationBar({ height }: Props) {
       </Box>
 
       <Box
-        sx={{ backgroundColor: boardOrientation ? "white" : "black" }}
+        sx={{ backgroundColor: boardOrientation ? "white" : "secondary.main" }}
         height={`${
           boardOrientation
             ? evalBar.whiteBarPercentage

src/sections/analysis/board/index.tsx

@@ -4,12 +4,12 @@ import { useAtomValue } from "jotai";
 import {
   boardAtom,
   boardOrientationAtom,
+  currentMoveAtom,
   showBestMoveArrowAtom,
   showPlayerMoveArrowAtom,
 } from "../states";
 import { Arrow, Square } from "react-chessboard/dist/chessboard/types";
 import { useChessActions } from "@/hooks/useChess";
-import { useCurrentMove } from "@/hooks/useCurrentMove";
 import { useMemo, useRef } from "react";
 import PlayerInfo from "./playerInfo";
 import EvaluationBar from "./evaluationBar";
@@ -21,7 +21,7 @@ export default function Board() {
   const showBestMoveArrow = useAtomValue(showBestMoveArrowAtom);
   const showPlayerMoveArrow = useAtomValue(showPlayerMoveArrowAtom);
   const boardActions = useChessActions(boardAtom);
-  const currentMove = useCurrentMove();
+  const currentMove = useAtomValue(currentMoveAtom);
 
   const onPieceDrop = (source: Square, target: Square): boolean => {
     try {
@@ -71,16 +71,24 @@ export default function Board() {
   }, [currentMove, showBestMoveArrow, showPlayerMoveArrow]);
 
   return (
-    <Grid item container justifyContent="center" alignItems="center" xs={12}>
-      <EvaluationBar height={boardRef?.current?.offsetWidth} />
+    <Grid
+      item
+      container
+      justifyContent="center"
+      alignItems="center"
+      xs={12}
+      wrap="nowrap"
+    >
+      <EvaluationBar height={boardRef?.current?.offsetHeight || 800} />
 
       <Grid
         item
         container
-        rowGap={2}
+        rowGap={1}
         justifyContent="center"
         alignItems="center"
-        xs={11}
+        paddingLeft={2}
+        xs
       >
         <PlayerInfo color={boardOrientation ? "black" : "white"} />
 
@@ -90,6 +98,7 @@ export default function Board() {
           justifyContent="center"
           alignItems="center"
           ref={boardRef}
+          xs={12}
         >
           <Chessboard
             id="AnalysisBoard"

src/sections/analysis/board/playerInfo.tsx

@@ -16,15 +16,8 @@ export default function PlayerInfo({ color }: Props) {
     game.header()[color === "white" ? "White" : "Black"];
 
   return (
-    <Grid
-      item
-      container
-      xs={12}
-      justifyContent="center"
-      alignItems="center"
-      gap={1}
-    >
-      <Typography variant="h4">
+    <Grid item container xs={12} justifyContent="center" alignItems="center">
+      <Typography variant="h5">
         {playerName || (color === "white" ? "White" : "Black")}
       </Typography>
     </Grid>

src/sections/analysis/reviewPanelBody.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@iconify/react";
-import { Divider, Grid, List, Typography } from "@mui/material";
+import { Grid, List, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, engineMultiPvAtom, gameAtom } from "./states";
 import LineEvaluation from "./lineEvaluation";
@@ -29,9 +29,14 @@ export default function ReviewPanelBody() {
     : linesSkeleton;
 
   return (
-    <>
-      <Divider sx={{ width: "90%", marginY: 3 }} />
-
+    <Grid
+      item
+      container
+      xs={12}
+      justifyContent="center"
+      alignItems="center"
+      gap={2}
+    >
       <Grid
         item
         container
@@ -73,6 +78,6 @@ export default function ReviewPanelBody() {
           ))}
         </List>
       </Grid>
-    </>
+    </Grid>
   );
 }

src/sections/analysis/reviewPanelHeader/analyzePanel.tsx

@@ -57,7 +57,7 @@ export default function AnalyzePanel() {
       xs={12}
       justifyContent="center"
       alignItems="center"
-      rowGap={4}
+      rowGap={3}
     >
       <Slider
         label="Maximum depth"
@@ -75,14 +75,7 @@ export default function AnalyzePanel() {
         xs={6}
       />
 
-      <Grid
-        item
-        container
-        xs={12}
-        justifyContent="center"
-        alignItems="center"
-        marginTop={1}
-      >
+      <Grid item container xs={12} justifyContent="center" alignItems="center">
         <LoadingButton
           variant="contained"
           size="large"

src/sections/analysis/reviewPanelHeader/gamePanel/index.tsx

@@ -12,14 +12,7 @@ export default function GamePanel() {
 
   if (!hasGameInfo) {
     return (
-      <Grid
-        item
-        container
-        xs={12}
-        justifyContent="center"
-        alignItems="center"
-        marginY={1}
-      >
+      <Grid item container xs={12} justifyContent="center" alignItems="center">
         <Typography variant="h6">No game loaded</Typography>
       </Grid>
     );
@@ -32,8 +25,7 @@ export default function GamePanel() {
       xs={12}
       justifyContent="center"
       alignItems="center"
-      gap={3}
-      marginY={1}
+      gap={2}
     >
       <Grid item container xs={12} justifyContent="center" alignItems="center">
         <PlayerInfo color="white" />
@@ -51,7 +43,7 @@ export default function GamePanel() {
         xs={10}
         justifyContent="space-evenly"
         alignItems="center"
-        gap={3}
+        gap={2}
       >
         <Typography>
           Site : {gameFromUrl?.site || game.header().Site || "?"}

src/sections/analysis/reviewPanelHeader/index.tsx

@@ -1,6 +1,5 @@
 import { Icon } from "@iconify/react";
-import { Divider, Grid, Typography } from "@mui/material";
-import AnalyzePanel from "./analyzePanel";
+import { Grid, Typography } from "@mui/material";
 import GamePanel from "./gamePanel";
 import LoadGame from "./loadGame";
 
@@ -34,15 +33,11 @@ export default function ReviewPanelHeader() {
         xs={12}
         justifyContent="center"
         alignItems="center"
-        gap={4}
+        gap={3}
       >
         <GamePanel />
         <LoadGame />
       </Grid>
-
-      <Divider sx={{ width: "90%", marginY: 3 }} />
-
-      <AnalyzePanel />
     </Grid>
   );
 }

src/sections/analysis/reviewPanelToolbar/arrowOptions.tsx

@@ -18,7 +18,6 @@ export default function ArrowOptions() {
       justifyContent="space-evenly"
       alignItems="center"
       xs={12}
-      marginY={3}
       gap={3}
     >
       <FormControlLabel

src/sections/analysis/reviewPanelToolbar/index.tsx

@@ -1,4 +1,4 @@
-import { Divider, Grid, IconButton, Tooltip } from "@mui/material";
+import { Grid, IconButton, Tooltip } from "@mui/material";
 import { Icon } from "@iconify/react";
 import { useAtomValue } from "jotai";
 import { boardAtom } from "../states";
@@ -7,7 +7,6 @@ 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 board = useAtomValue(boardAtom);
@@ -16,42 +15,36 @@ export default function ReviewPanelToolBar() {
   const boardHistory = board.history();
 
   return (
-    <>
-      <Divider sx={{ width: "90%", marginY: 3 }} />
+    <Grid container item justifyContent="center" alignItems="center" xs={12}>
+      <FlipBoardButton />
 
-      <Grid container item justifyContent="center" alignItems="center" xs={12}>
-        <FlipBoardButton />
+      <Tooltip title="Reset board">
+        <Grid>
+          <IconButton
+            onClick={() => boardActions.reset()}
+            disabled={boardHistory.length === 0}
+          >
+            <Icon icon="ri:skip-back-line" />
+          </IconButton>
+        </Grid>
+      </Tooltip>
 
-        <Tooltip title="Reset board">
-          <Grid>
-            <IconButton
-              onClick={() => boardActions.reset()}
-              disabled={boardHistory.length === 0}
-            >
-              <Icon icon="ri:skip-back-line" />
-            </IconButton>
-          </Grid>
-        </Tooltip>
+      <Tooltip title="Go to previous move">
+        <Grid>
+          <IconButton
+            onClick={() => boardActions.undo()}
+            disabled={boardHistory.length === 0}
+          >
+            <Icon icon="ri:arrow-left-s-line" height={30} />
+          </IconButton>
+        </Grid>
+      </Tooltip>
 
-        <Tooltip title="Go to previous move">
-          <Grid>
-            <IconButton
-              onClick={() => boardActions.undo()}
-              disabled={boardHistory.length === 0}
-            >
-              <Icon icon="ri:arrow-left-s-line" height={30} />
-            </IconButton>
-          </Grid>
-        </Tooltip>
+      <NextMoveButton />
 
-        <NextMoveButton />
+      <GoToLastPositionButton />
 
-        <GoToLastPositionButton />
-
-        <SaveButton />
-      </Grid>
-
-      <ArrowOptions />
-    </>
+      <SaveButton />
+    </Grid>
   );
 }

src/sections/analysis/states.ts

@@ -1,10 +1,11 @@
-import { GameEval } from "@/types/eval";
+import { CurrentMove, GameEval } from "@/types/eval";
 import { Chess } from "chess.js";
 import { atom } from "jotai";
 
 export const gameEvalAtom = atom<GameEval | undefined>(undefined);
 export const gameAtom = atom(new Chess());
 export const boardAtom = atom(new Chess());
+export const currentMoveAtom = atom<CurrentMove>({});
 
 export const boardOrientationAtom = atom(true);
 export const showBestMoveArrowAtom = atom(true);

src/types/eval.ts

@@ -1,3 +1,4 @@
+import { Move } from "chess.js";
 import { EngineName } from "./enums";
 
 export interface MoveEval {
@@ -37,3 +38,8 @@ export interface EvaluatePositionWithUpdateParams {
   multiPv?: number;
   setPartialEval: (moveEval: MoveEval) => void;
 }
+
+export type CurrentMove = Partial<Move> & {
+  eval?: MoveEval;
+  lastEval?: MoveEval;
+};