feat : add games database

src/sections/gameReport/selectGame/selectGameOrigin.tsx

@@ -42,5 +42,4 @@ const gameOriginLabel: Record<GameOrigin, string> = {
   [GameOrigin.Pgn]: "PGN",
   [GameOrigin.ChessCom]: "Chess.com",
   [GameOrigin.Lichess]: "Lichess",
-  [GameOrigin.Json]: "JSON",
 };

src/sections/gameReport/states.ts

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

src/sections/layout/NavMenu.tsx

@@ -13,6 +13,11 @@ import {
 
 const MenuOptions = [
   { text: "Game Report", icon: "streamline:magnifying-glass-solid", href: "/" },
+  {
+    text: "Game Database",
+    icon: "streamline:database-solid",
+    href: "/game-database",
+  },
 ];
 
 interface Props {

src/sections/layout/index.tsx

@@ -15,14 +15,19 @@ export default function Layout({ children }: PropsWithChildren) {
           error: {
             main: red[400],
           },
+          primary: {
+            main: "#5d9948",
+          },
           secondary: {
-            main: useDarkMode ? "#424242" : "#90caf9",
+            main: useDarkMode ? "#424242" : "#ffffff",
           },
         },
       }),
     [useDarkMode]
   );
 
+  if (useDarkMode === null) return null;
+
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />

src/sections/loadGame/loadGameButton.tsx

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

src/sections/loadGame/loadGameDialog.tsx

@@ -0,0 +1,118 @@
+import { useGameDatabase } from "@/hooks/useGameDatabase";
+import { getGameFromPgn } from "@/lib/chess";
+import { GameOrigin } from "@/types/enums";
+import {
+  MenuItem,
+  Select,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  Box,
+  FormControl,
+  InputLabel,
+  OutlinedInput,
+  DialogActions,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useState } from "react";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function NewGameDialog({ open, onClose }: Props) {
+  const [pgn, setPgn] = useState("");
+  const [parsingError, setParsingError] = useState("");
+  const { addGame } = useGameDatabase();
+
+  const handleAddGame = () => {
+    if (!pgn) return;
+    setParsingError("");
+
+    try {
+      const gameToAdd = getGameFromPgn(pgn);
+      addGame(gameToAdd);
+      handleClose();
+    } catch (error) {
+      console.error(error);
+      setParsingError(
+        error instanceof Error
+          ? `${error.message} !`
+          : "Unknown error while parsing PGN !"
+      );
+    }
+  };
+
+  const handleClose = () => {
+    setPgn("");
+    setParsingError("");
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
+      <DialogTitle marginY={1} variant="h5">
+        Add a game to your database
+      </DialogTitle>
+      <DialogContent>
+        <Typography>Only PGN input is supported at the moment</Typography>
+        <Box sx={{ display: "flex", flexWrap: "wrap" }} marginTop={4}>
+          <FormControl sx={{ m: 1, width: 150 }}>
+            <InputLabel id="dialog-select-label">Game origin</InputLabel>
+            <Select
+              labelId="dialog-select-label"
+              id="dialog-select"
+              displayEmpty
+              input={<OutlinedInput label="Game origin" />}
+              value={GameOrigin.Pgn}
+              disabled={true}
+            >
+              {Object.values(GameOrigin).map((origin) => (
+                <MenuItem key={origin} value={origin}>
+                  {gameOriginLabel[origin]}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <FormControl sx={{ m: 1, width: 600 }}>
+            <TextField
+              label="Enter PGN here..."
+              variant="outlined"
+              multiline
+              value={pgn}
+              onChange={(e) => setPgn(e.target.value)}
+            />
+          </FormControl>
+          {parsingError && (
+            <FormControl fullWidth>
+              <Typography color="red" textAlign="center" marginTop={1}>
+                {parsingError}
+              </Typography>
+            </FormControl>
+          )}
+        </Box>
+      </DialogContent>
+      <DialogActions sx={{ m: 2 }}>
+        <Button
+          variant="outlined"
+          sx={{ marginRight: 2 }}
+          onClick={handleClose}
+        >
+          Cancel
+        </Button>
+        <Button variant="contained" onClick={handleAddGame}>
+          Add
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+const gameOriginLabel: Record<GameOrigin, string> = {
+  [GameOrigin.Pgn]: "PGN",
+  [GameOrigin.ChessCom]: "Chess.com",
+  [GameOrigin.Lichess]: "Lichess",
+};