From 56b267762e26d08ef60a348486ecc544240f0c97 Mon Sep 17 00:00:00 2001
From: GuillaumeSD <gsd.lfny@gmail.com>
Date: Fri, 12 Apr 2024 03:31:52 +0200
Subject: [PATCH] design : mobile review panel UI rework

---
 src/components/board/capturedPieces.tsx       |  1 -
 src/pages/index.tsx                           | 36 ++++++++++++++-----
 .../analysis/reviewPanelBody/index.tsx        |  4 ++-
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/board/capturedPieces.tsx b/src/components/board/capturedPieces.tsx
index 137b510..32662fe 100644
--- a/src/components/board/capturedPieces.tsx
+++ b/src/components/board/capturedPieces.tsx
@@ -16,7 +16,6 @@ export default function CapturedPieces({ gameAtom, color }: Props) {
   const game = useAtomValue(gameAtom);
   const cssProps = useMemo(() => {
     const capturedPieces = getCapturedPieces(game.fen(), color);
-    console.log(capturedPieces, color);
     return getCapturedPiecesCSSProps(capturedPieces, color);
   }, [game, color]);
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8186eb8..b2b3dbf 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -11,7 +11,7 @@ import {
 } from "@/sections/analysis/states";
 import { Divider, Grid, useMediaQuery, useTheme } from "@mui/material";
 import { Chess } from "chess.js";
-import { useSetAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import ClassificationPanel from "@/sections/analysis/reviewPanelBody/classificationPanel";
@@ -22,7 +22,7 @@ export default function GameReport() {
 
   const { reset: resetBoard } = useChessActions(boardAtom);
   const { setPgn: setGamePgn } = useChessActions(gameAtom);
-  const setGameEval = useSetAtom(gameEvalAtom);
+  const [gameEval, setGameEval] = useAtom(gameEvalAtom);
   const setBoardOrientation = useSetAtom(boardOrientationAtom);
 
   const router = useRouter();
@@ -72,17 +72,37 @@ export default function GameReport() {
           display="grid"
           gridTemplateRows="repeat(4, auto) fit-content(100%)"
         >
-          {isLgOrGreater ? <ReviewPanelHeader /> : <ReviewPanelToolBar />}
+          {isLgOrGreater ? (
+            <>
+              <ReviewPanelHeader key="analysis-panel-header" />
 
-          <Divider sx={{ marginX: "5%" }} />
+              <Divider sx={{ marginX: "5%" }} />
 
-          <ReviewPanelBody />
+              <ReviewPanelBody key="review-panel-body" />
 
-          <ClassificationPanel />
+              <ClassificationPanel key="review-panel-class" />
 
-          <Divider sx={{ marginX: "5%" }} />
+              <Divider sx={{ marginX: "5%" }} />
 
-          {isLgOrGreater ? <ReviewPanelToolBar /> : <ReviewPanelHeader />}
+              <ReviewPanelToolBar key="review-panel-toolbar" />
+            </>
+          ) : (
+            <>
+              <ReviewPanelToolBar key="review-panel-toolbar" />
+
+              <Divider sx={{ marginX: "5%" }} />
+
+              {!gameEval && <ReviewPanelHeader key="analysis-panel-header" />}
+              {!gameEval && <Divider sx={{ marginX: "5%" }} />}
+
+              <ReviewPanelBody key="review-panel-body" />
+
+              <ClassificationPanel key="review-panel-class" />
+
+              {gameEval && <Divider sx={{ marginX: "5%" }} />}
+              {gameEval && <ReviewPanelHeader key="analysis-panel-header" />}
+            </>
+          )}
         </Grid>
       </Grid>
     </Grid>
diff --git a/src/sections/analysis/reviewPanelBody/index.tsx b/src/sections/analysis/reviewPanelBody/index.tsx
index 849b71b..404c113 100644
--- a/src/sections/analysis/reviewPanelBody/index.tsx
+++ b/src/sections/analysis/reviewPanelBody/index.tsx
@@ -83,7 +83,9 @@ export default function ReviewPanelBody() {
 
       {isGameOver && (
         <Grid item xs={12}>
-          <Typography align="center">Game is over</Typography>
+          <Typography align="center" fontSize="0.9rem">
+            Game is over
+          </Typography>
         </Grid>
       )}