refacto : global refacto

src/sections/analysis/analyzeButton.tsx

@@ -0,0 +1,47 @@
+import { Stockfish } from "@/lib/engine/stockfish";
+import { Icon } from "@iconify/react";
+import { Button, Grid } from "@mui/material";
+import { useEffect, useState } from "react";
+import { gameAtom, gameEvalAtom } from "./states";
+import { useAtomValue, useSetAtom } from "jotai";
+import { getFens } from "@/lib/chess";
+
+export default function AnalyzeButton() {
+  const [engine, setEngine] = useState<Stockfish | null>(null);
+  const setEval = useSetAtom(gameEvalAtom);
+  const game = useAtomValue(gameAtom);
+
+  useEffect(() => {
+    const engine = new Stockfish();
+    engine.init();
+    setEngine(engine);
+
+    return () => {
+      engine.shutdown();
+    };
+  }, []);
+
+  const readyToAnalyse = engine?.isReady() && game.history().length > 0;
+
+  const handleAnalyze = async () => {
+    const gameFens = getFens(game);
+    if (engine?.isReady() && gameFens.length) {
+      const newGameEval = await engine.evaluateGame(gameFens);
+      setEval(newGameEval);
+    }
+  };
+
+  return (
+    <Grid item container xs={12} justifyContent="center" alignItems="center">
+      <Button
+        variant="contained"
+        size="large"
+        startIcon={<Icon icon="streamline:magnifying-glass-solid" />}
+        onClick={handleAnalyze}
+        disabled={!readyToAnalyse}
+      >
+        Analyse
+      </Button>
+    </Grid>
+  );
+}

src/sections/analysis/board.tsx

@@ -19,7 +19,9 @@ export default function Board() {
       <Typography variant="h4" align="center">
         White Player (?)
       </Typography>
+
       <Chessboard id="BasicBoard" position={board.fen()} />
+
       <Typography variant="h4" align="center">
         Black Player (?)
       </Typography>

src/sections/analysis/lineEvaluation.tsx

@@ -0,0 +1,22 @@
+import { LineEval } from "@/types/eval";
+import { ListItem, ListItemText, Typography } from "@mui/material";
+
+interface Props {
+  line: LineEval;
+}
+
+export default function LineEvaluation({ line }: Props) {
+  const lineLabel =
+    line.cp !== undefined
+      ? `${line.cp / 100}`
+      : line.mate
+      ? `Mate in ${Math.abs(line.mate)}`
+      : "?";
+
+  return (
+    <ListItem disablePadding>
+      <ListItemText primary={lineLabel} sx={{ marginRight: 2 }} />
+      <Typography>{line.pv.slice(0, 7).join(", ")}</Typography>
+    </ListItem>
+  );
+}

src/sections/analysis/loadGame.tsx

@@ -0,0 +1,42 @@
+import { Grid } from "@mui/material";
+import LoadGameButton from "../loadGame/loadGameButton";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useChessActions } from "@/hooks/useChess";
+import { boardAtom, gameAtom } from "./states";
+import { useGameDatabase } from "@/hooks/useGameDatabase";
+
+export default function LoadGame() {
+  const router = useRouter();
+  const { gameId } = router.query;
+  const gameActions = useChessActions(gameAtom);
+  const boardActions = useChessActions(boardAtom);
+  const { getGame } = useGameDatabase();
+
+  useEffect(() => {
+    const loadGame = async () => {
+      if (typeof gameId !== "string") return;
+
+      const game = await getGame(parseInt(gameId));
+      if (!game) return;
+
+      boardActions.reset();
+      gameActions.setPgn(game.pgn);
+    };
+
+    loadGame();
+  }, [gameId]);
+
+  if (!router.isReady || gameId) return null;
+
+  return (
+    <Grid item container xs={12} justifyContent="center" alignItems="center">
+      <LoadGameButton
+        setGame={(game) => {
+          boardActions.reset();
+          gameActions.setPgn(game.pgn());
+        }}
+      />
+    </Grid>
+  );
+}

src/sections/analysis/reviewPanelBody.tsx

@@ -1,20 +1,14 @@
 import { Icon } from "@iconify/react";
-import {
-  Divider,
-  Grid,
-  List,
-  ListItem,
-  ListItemText,
-  Typography,
-} from "@mui/material";
+import { Divider, Grid, List, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameEvalAtom } from "./states";
+import LineEvaluation from "./lineEvaluation";
 
 export default function ReviewPanelBody() {
-  const board = useAtomValue(boardAtom);
   const gameEval = useAtomValue(gameEvalAtom);
   if (!gameEval) return null;
 
+  const board = useAtomValue(boardAtom);
   const evalIndex = board.history().length;
   const moveEval = gameEval.moves[evalIndex];
 
@@ -36,7 +30,7 @@ export default function ReviewPanelBody() {
           height={30}
         />
         <Typography variant="h5" align="center">
-          Bilan de la partie
+          Game Review
         </Typography>
       </Grid>
 
@@ -47,17 +41,7 @@ export default function ReviewPanelBody() {
       <Grid item container xs={12} justifyContent="center" alignItems="center">
         <List>
           {moveEval?.lines.map((line) => (
-            <ListItem disablePadding key={line.pv[0]}>
-              <ListItemText
-                primary={
-                  line.cp !== undefined
-                    ? line.cp / 100
-                    : `Mate in ${Math.abs(line.mate ?? 0)}`
-                }
-                sx={{ marginRight: 2 }}
-              />
-              <Typography>{line.pv.slice(0, 7).join(", ")}</Typography>
-            </ListItem>
+            <LineEvaluation key={line.pv[0]} line={line} />
           ))}
         </List>
       </Grid>

src/sections/analysis/reviewPanelHeader.tsx

@@ -0,0 +1,35 @@
+import { Icon } from "@iconify/react";
+import { Grid, Typography } from "@mui/material";
+import LoadGame from "./loadGame";
+import AnalyzeButton from "./analyzeButton";
+
+export default function ReviewPanelHeader() {
+  return (
+    <Grid
+      item
+      container
+      justifyContent="center"
+      alignItems="center"
+      xs={12}
+      gap={3}
+    >
+      <Grid
+        item
+        container
+        xs={12}
+        justifyContent="center"
+        alignItems="center"
+        columnGap={1}
+      >
+        <Icon icon="ph:file-magnifying-glass-fill" height={40} />
+        <Typography variant="h4" align="center">
+          Game Report
+        </Typography>
+      </Grid>
+
+      <LoadGame />
+
+      <AnalyzeButton />
+    </Grid>
+  );
+}

src/sections/analysis/states.ts

@@ -1,4 +1,4 @@
-import { GameEval } from "@/types/game";
+import { GameEval } from "@/types/eval";
 import { Chess } from "chess.js";
 import { atom } from "jotai";
 

src/sections/gameReport/reviewPanelHeader.tsx

@@ -1,58 +0,0 @@
-import { useEffect, useState } from "react";
-import SelectGameOrigin from "./selectGame/selectGameOrigin";
-import { Stockfish } from "@/lib/engine/stockfish";
-import { Icon } from "@iconify/react";
-import { Button, Typography } from "@mui/material";
-import { useAtomValue, useSetAtom } from "jotai";
-import { boardAtom, gameAtom, gameEvalAtom } from "./states";
-import { useChessActions } from "@/hooks/useChess";
-import { gameInputPgnAtom } from "./selectGame/gameInput.states";
-import { pgnToFens } from "@/lib/chess";
-
-export default function ReviewPanelHeader() {
-  const [engine, setEngine] = useState<Stockfish | null>(null);
-  const setEval = useSetAtom(gameEvalAtom);
-  const boardActions = useChessActions(boardAtom);
-  const gameActions = useChessActions(gameAtom);
-  const pgnInput = useAtomValue(gameInputPgnAtom);
-
-  useEffect(() => {
-    const engine = new Stockfish();
-    engine.init();
-    setEngine(engine);
-
-    return () => {
-      engine.shutdown();
-    };
-  }, []);
-
-  const handleAnalyse = async () => {
-    boardActions.reset();
-    gameActions.setPgn(pgnInput);
-    const gameFens = pgnToFens(pgnInput);
-    if (engine?.isReady() && gameFens.length) {
-      const newGameEval = await engine.evaluateGame(gameFens);
-      setEval(newGameEval);
-    }
-  };
-
-  return (
-    <>
-      <Icon icon="ph:file-magnifying-glass-fill" height={40} />
-      <Typography variant="h4" align="center">
-        Game Report
-      </Typography>
-
-      <SelectGameOrigin />
-
-      <Button
-        variant="contained"
-        size="large"
-        startIcon={<Icon icon="streamline:magnifying-glass-solid" />}
-        onClick={handleAnalyse}
-      >
-        Analyse
-      </Button>
-    </>
-  );
-}

src/sections/gameReport/selectGame/gameInput.states.ts

@@ -1,3 +0,0 @@
-import { atom } from "jotai";
-
-export const gameInputPgnAtom = atom("");

src/sections/gameReport/selectGame/inputGame.tsx

@@ -1,19 +0,0 @@
-import { TextField } from "@mui/material";
-import { useAtom } from "jotai";
-import { gameInputPgnAtom } from "./gameInput.states";
-
-export default function InputGame() {
-  const [pgn, setPgn] = useAtom(gameInputPgnAtom);
-
-  return (
-    <TextField
-      fullWidth
-      label="Enter PGN here..."
-      sx={{ marginX: 4 }}
-      value={pgn}
-      onChange={(e) => {
-        setPgn(e.target.value);
-      }}
-    />
-  );
-}

src/sections/gameReport/selectGame/selectGameOrigin.tsx

@@ -1,45 +0,0 @@
-import { GameOrigin } from "@/types/enums";
-import { FormControl, Grid, InputLabel, MenuItem, Select } from "@mui/material";
-import InputGame from "./inputGame";
-import { useState } from "react";
-
-export default function SelectGameOrigin() {
-  const [gameOrigin, setGameOrigin] = useState<GameOrigin>(GameOrigin.Pgn);
-
-  return (
-    <Grid
-      item
-      container
-      xs={12}
-      justifyContent="center"
-      alignItems="center"
-      rowGap={1}
-    >
-      <FormControl sx={{ m: 1, minWidth: 150 }}>
-        <InputLabel id="game-origin-select-label">Game Origin</InputLabel>
-        <Select
-          labelId="game-origin-select-label"
-          id="game-origin-select"
-          label="Game Origin"
-          autoWidth
-          value={gameOrigin}
-          onChange={(e) => setGameOrigin(e.target.value as GameOrigin)}
-        >
-          {Object.values(GameOrigin).map((origin) => (
-            <MenuItem key={origin} value={origin}>
-              {gameOriginLabel[origin]}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-
-      <InputGame />
-    </Grid>
-  );
-}
-
-const gameOriginLabel: Record<GameOrigin, string> = {
-  [GameOrigin.Pgn]: "PGN",
-  [GameOrigin.ChessCom]: "Chess.com",
-  [GameOrigin.Lichess]: "Lichess",
-};

src/sections/layout/NavBar.tsx

@@ -26,7 +26,10 @@ export default function NavBar({ darkMode, switchDarkMode }: Props) {
     <Box sx={{ flexGrow: 1, display: "flex" }}>
       <AppBar
         position="static"
-        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        sx={{
+          zIndex: (theme) => theme.zIndex.drawer + 1,
+          backgroundColor: "primary.main",
+        }}
       >
         <Toolbar>
           <IconButton

src/sections/layout/NavMenu.tsx

@@ -12,11 +12,11 @@ import {
 } from "@mui/material";
 
 const MenuOptions = [
-  { text: "Game Report", icon: "streamline:magnifying-glass-solid", href: "/" },
+  { text: "Analysis", icon: "streamline:magnifying-glass-solid", href: "/" },
   {
-    text: "Game Database",
+    text: "Database",
     icon: "streamline:database-solid",
-    href: "/game-database",
+    href: "/database",
   },
 ];
 
@@ -32,7 +32,7 @@ export default function NavMenu({ open, onClose }: Props) {
       <Box sx={{ width: 250 }}>
         <List>
           {MenuOptions.map(({ text, icon, href }) => (
-            <ListItem key={text} disablePadding>
+            <ListItem key={text} disablePadding sx={{ margin: 0.7 }}>
               <NavLink href={href}>
                 <ListItemButton onClick={onClose}>
                   <ListItemIcon style={{ paddingLeft: "0.5em" }}>

src/sections/loadGame/loadGameButton.tsx

@@ -1,17 +1,26 @@
 import { Button } from "@mui/material";
 import { useState } from "react";
 import NewGameDialog from "./loadGameDialog";
+import { Chess } from "chess.js";
 
-export default function LoadGameButton() {
+interface Props {
+  setGame?: (game: Chess) => void;
+}
+
+export default function LoadGameButton({ setGame }: Props) {
   const [openDialog, setOpenDialog] = useState(false);
 
   return (
     <>
       <Button variant="contained" onClick={() => setOpenDialog(true)}>
-        Add a game
+        Add game
       </Button>
 
-      <NewGameDialog open={openDialog} onClose={() => setOpenDialog(false)} />
+      <NewGameDialog
+        open={openDialog}
+        onClose={() => setOpenDialog(false)}
+        setGame={setGame}
+      />
     </>
   );
 }

src/sections/loadGame/loadGameDialog.tsx

@@ -16,14 +16,16 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
+import { Chess } from "chess.js";
 import { useState } from "react";
 
 interface Props {
   open: boolean;
   onClose: () => void;
+  setGame?: (game: Chess) => void;
 }
 
-export default function NewGameDialog({ open, onClose }: Props) {
+export default function NewGameDialog({ open, onClose, setGame }: Props) {
   const [pgn, setPgn] = useState("");
   const [parsingError, setParsingError] = useState("");
   const { addGame } = useGameDatabase();
@@ -34,7 +36,13 @@ export default function NewGameDialog({ open, onClose }: Props) {
 
     try {
       const gameToAdd = getGameFromPgn(pgn);
-      addGame(gameToAdd);
+
+      if (setGame) {
+        setGame(gameToAdd);
+      } else {
+        addGame(gameToAdd);
+      }
+
       handleClose();
     } catch (error) {
       console.error(error);