refacto : global refacto

src/hooks/useGameDatabase.ts

@@ -1,4 +1,7 @@
-import { Game, GameEval } from "@/types/game";
+import { formatGameToDatabase } from "@/lib/chess";
+import { GameEval } from "@/types/eval";
+import { Game } from "@/types/game";
+import { Chess } from "chess.js";
 import { openDB, DBSchema, IDBPDatabase } from "idb";
 import { atom, useAtom } from "jotai";
 import { useCallback, useEffect, useState } from "react";
@@ -48,10 +51,11 @@ export const useGameDatabase = (shouldFetchGames?: boolean) => {
     loadGames();
   }, [loadGames]);
 
-  const addGame = async (game: Omit<Game, "id">) => {
+  const addGame = async (game: Chess) => {
     if (!db) throw new Error("Database not initialized");
 
-    await db.add("games", game as Game);
+    const gameToAdd = formatGameToDatabase(game);
+    await db.add("games", gameToAdd as Game);
 
     loadGames();
   };

src/hooks/useLocalStorage.ts

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 type SetValue<T> = Dispatch<SetStateAction<T>>;
 
-export function useLocalStorage<T>(
+export function useLocalStorage<T = string | number | boolean | undefined>(
   key: string,
   initialValue: T
 ): [T | null, SetValue<T>] {
@@ -15,7 +15,7 @@ export function useLocalStorage<T>(
     } else {
       setStoredValue(initialValue);
     }
-  }, [key]);
+  }, [key, initialValue]);
 
   const setValue: SetValue<T> = (value) => {
     if (storedValue === null)

src/lib/chess.ts

@@ -1,20 +1,22 @@
 import { Game } from "@/types/game";
 import { Chess } from "chess.js";
 
-export const pgnToFens = (pgn: string): string[] => {
-  const game = new Chess();
-  game.loadPgn(pgn);
+export const getFens = (game: Chess): string[] => {
   return game.history({ verbose: true }).map((move) => move.before);
 };
 
-export const getGameFromPgn = (pgn: string): Omit<Game, "id"> => {
+export const getGameFromPgn = (pgn: string): Chess => {
   const game = new Chess();
   game.loadPgn(pgn);
 
+  return game;
+};
+
+export const formatGameToDatabase = (game: Chess): Omit<Game, "id"> => {
   const headers: Record<string, string | undefined> = game.header();
 
   return {
-    pgn,
+    pgn: game.pgn(),
     event: headers.Event,
     site: headers.Site,
     date: headers.Date,

src/lib/engine/stockfish.ts

@@ -1,4 +1,4 @@
-import { GameEval, LineEval, MoveEval } from "@/types/game";
+import { GameEval, LineEval, MoveEval } from "@/types/eval";
 
 export class Stockfish {
   private worker: Worker;
@@ -80,7 +80,7 @@ export class Stockfish {
     this.ready = true;
     console.log("Game evaluated");
     console.log(moves);
-    return { moves, whiteAccuracy: 82.34, blackAccuracy: 67.49 };
+    return { moves, accuracy: { white: 82.34, black: 67.49 } }; // TODO: Calculate accuracy
   }
 
   public async evaluatePosition(fen: string, depth = 16): Promise<MoveEval> {

src/pages/database.tsx

@@ -114,12 +114,14 @@ export default function GameDatabase() {
           <LoadGameButton />
         </Grid>
       </Grid>
+
       <Grid item container xs={12} justifyContent="center" alignItems="center">
         <Typography variant="subtitle2">
           You have {0} games in your database
         </Typography>
       </Grid>
-      <Grid item maxWidth="100%" sx={{ minWidth: "50px" }}>
+
+      <Grid item maxWidth="100%" minWidth="50px">
         <DataGrid
           aria-label="Games list"
           rows={games}

src/pages/index.tsx

@@ -1,7 +1,7 @@
-import Board from "@/sections/gameReport/board";
-import ReviewPanelBody from "@/sections/gameReport/reviewPanelBody";
-import ReviewPanelHeader from "@/sections/gameReport/reviewPanelHeader";
-import ReviewPanelToolBar from "@/sections/gameReport/reviewPanelToolbar";
+import Board from "@/sections/analysis/board";
+import ReviewPanelBody from "@/sections/analysis/reviewPanelBody";
+import ReviewPanelHeader from "@/sections/analysis/reviewPanelHeader";
+import ReviewPanelToolBar from "@/sections/analysis/reviewPanelToolbar";
 import { Grid } from "@mui/material";
 
 export default function GameReport() {

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);

src/types/eval.ts

@@ -0,0 +1,20 @@
+export interface MoveEval {
+  bestMove: string;
+  lines: LineEval[];
+}
+
+export interface LineEval {
+  pv: string[];
+  cp?: number;
+  mate?: number;
+}
+
+export interface Accuracy {
+  white: number;
+  black: number;
+}
+
+export interface GameEval {
+  moves: MoveEval[];
+  accuracy: Accuracy;
+}

src/types/game.ts

@@ -1,19 +1,4 @@
-export interface MoveEval {
-  bestMove: string;
-  lines: LineEval[];
-}
-
-export interface LineEval {
-  pv: string[];
-  cp?: number;
-  mate?: number;
-}
-
-export interface GameEval {
-  moves: MoveEval[];
-  whiteAccuracy: number;
-  blackAccuracy: number;
-}
+import { GameEval } from "./eval";
 
 export interface Game {
   id: number;