feat : add chessCom games import

src/components/slider.tsx

@@ -1,8 +1,8 @@
 import { Grid, Slider as MuiSlider, Typography } from "@mui/material";
-import { PrimitiveAtom, useAtom } from "jotai";
 
 interface Props {
-  atom: PrimitiveAtom<number>;
+  value: number;
+  setValue: (value: number) => void;
   min: number;
   max: number;
   label: string;
@@ -14,12 +14,11 @@ export default function Slider({
   min,
   max,
   label,
-  atom,
+  value,
+  setValue,
   xs,
   marksFilter = 1,
 }: Props) {
-  const [value, setValue] = useAtom(atom);
-
   return (
     <Grid
       item

src/hooks/useAtomLocalStorage.ts

@@ -0,0 +1,29 @@
+import { PrimitiveAtom, SetStateAction, useAtom } from "jotai";
+import { useEffect, useState } from "react";
+
+export function useAtomLocalStorage<T>(
+  key: string,
+  atom: PrimitiveAtom<T>
+): [T, (value: SetStateAction<T>) => void] {
+  const [keyTemp, setKeyTemp] = useState("");
+  const [storedValue, setStoredValue] = useAtom(atom);
+
+  useEffect(() => {
+    const item = window.localStorage.getItem(key);
+    if (item) {
+      setStoredValue(parseJSON<T>(item));
+    }
+    setKeyTemp(key);
+  }, [key, setStoredValue]);
+
+  useEffect(() => {
+    if (keyTemp !== key) return;
+    window.localStorage.setItem(key, JSON.stringify(storedValue));
+  }, [key, keyTemp, storedValue]);
+
+  return [storedValue, setStoredValue];
+}
+
+function parseJSON<T>(value: string): T {
+  return value === "undefined" ? undefined : JSON.parse(value);
+}

src/lib/chess.ts

@@ -21,7 +21,7 @@ export const formatGameToDatabase = (game: Chess): Omit<Game, "id"> => {
     event: headers.Event,
     site: headers.Site,
     date: headers.Date,
-    round: headers.Round,
+    round: headers.Round ?? "?",
     white: {
       name: headers.White,
       rating: headers.WhiteElo ? Number(headers.WhiteElo) : undefined,

src/lib/chessCom.ts

@@ -0,0 +1,41 @@
+import { ChessComGame } from "@/types/chessCom";
+import { getPaddedMonth } from "./helpers";
+
+export const getUserRecentGames = async (
+  username: string
+): Promise<ChessComGame[]> => {
+  const date = new Date();
+  const year = date.getUTCFullYear();
+  const month = date.getUTCMonth() + 1;
+  const paddedMonth = getPaddedMonth(month);
+
+  const res = await fetch(
+    `https://api.chess.com/pub/player/${username}/games/${year}/${paddedMonth}`
+  );
+
+  if (res.status === 404) return [];
+
+  const data = await res.json();
+
+  const games: ChessComGame[] = data?.games ?? [];
+
+  if (games.length < 20) {
+    const previousMonth = month === 1 ? 12 : month - 1;
+    const previousPaddedMonth = getPaddedMonth(previousMonth);
+    const yearToFetch = previousMonth === 12 ? year - 1 : year;
+
+    const resPreviousMonth = await fetch(
+      `https://api.chess.com/pub/player/${username}/games/${yearToFetch}/${previousPaddedMonth}`
+    );
+
+    const dataPreviousMonth = await resPreviousMonth.json();
+
+    games.push(...(dataPreviousMonth?.games ?? []));
+  }
+
+  games.sort((a, b) => {
+    return b.end_time - a.end_time;
+  });
+
+  return games;
+};

src/lib/helpers.ts

@@ -0,0 +1,7 @@
+export const getPaddedMonth = (month: number) => {
+  return month < 10 ? `0${month}` : month;
+};
+
+export const capitalize = (s: string) => {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+};

src/pages/database.tsx

@@ -170,6 +170,16 @@ export default function GameDatabase() {
           hideFooter={true}
           autoHeight={true}
           localeText={gridLocaleText}
+          initialState={{
+            sorting: {
+              sortModel: [
+                {
+                  field: "date",
+                  sort: "desc",
+                },
+              ],
+            },
+          }}
         />
       </Grid>
     </Grid>

src/sections/engineSettings/arrowOptions.tsx

@@ -1,13 +1,19 @@
 import { Checkbox, FormControlLabel, Grid } from "@mui/material";
-import { useAtom } from "jotai";
 import {
   showBestMoveArrowAtom,
   showPlayerMoveArrowAtom,
 } from "../analysis/states";
+import { useAtomLocalStorage } from "@/hooks/useAtomLocalStorage";
 
 export default function ArrowOptions() {
-  const [showBestMove, setShowBestMove] = useAtom(showBestMoveArrowAtom);
-  const [showPlayerMove, setShowPlayerMove] = useAtom(showPlayerMoveArrowAtom);
+  const [showBestMove, setShowBestMove] = useAtomLocalStorage(
+    "show-arrow-best-move",
+    showBestMoveArrowAtom
+  );
+  const [showPlayerMove, setShowPlayerMove] = useAtomLocalStorage(
+    "show-arrow-player-move",
+    showPlayerMoveArrowAtom
+  );
 
   return (
     <Grid

src/sections/engineSettings/engineSettingsDialog.tsx

@@ -16,6 +16,7 @@ import {
 } from "@mui/material";
 import { engineDepthAtom, engineMultiPvAtom } from "../analysis/states";
 import ArrowOptions from "./arrowOptions";
+import { useAtomLocalStorage } from "@/hooks/useAtomLocalStorage";
 
 interface Props {
   open: boolean;
@@ -23,6 +24,15 @@ interface Props {
 }
 
 export default function EngineSettingsDialog({ open, onClose }: Props) {
+  const [depth, setDepth] = useAtomLocalStorage(
+    "engine-depth",
+    engineDepthAtom
+  );
+  const [multiPv, setMultiPv] = useAtomLocalStorage(
+    "engine-multi-pv",
+    engineMultiPvAtom
+  );
+
   return (
     <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
       <DialogTitle marginY={1} variant="h5">
@@ -65,7 +75,8 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
 
           <Slider
             label="Maximum depth"
-            atom={engineDepthAtom}
+            value={depth}
+            setValue={setDepth}
             min={10}
             max={30}
             marksFilter={2}
@@ -73,7 +84,8 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
 
           <Slider
             label="Number of lines"
-            atom={engineMultiPvAtom}
+            value={multiPv}
+            setValue={setMultiPv}
             min={1}
             max={6}
             xs={6}

src/sections/loadGame/chessComInput.tsx

@@ -0,0 +1,93 @@
+import { useLocalStorage } from "@/hooks/useLocalStorage";
+import { getUserRecentGames } from "@/lib/chessCom";
+import { capitalize } from "@/lib/helpers";
+import { ChessComGame } from "@/types/chessCom";
+import {
+  FormControl,
+  Grid,
+  ListItemButton,
+  ListItemText,
+  TextField,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+
+interface Props {
+  pgn: string;
+  setPgn: (pgn: string) => void;
+}
+
+export default function ChessComInput({ pgn, setPgn }: Props) {
+  const [requestCount, setRequestCount] = useState(0);
+  const [chessComUsername, setChessComUsername] = useLocalStorage(
+    "chesscom-username",
+    ""
+  );
+  const [games, setGames] = useState<ChessComGame[]>([]);
+
+  useEffect(() => {
+    if (!chessComUsername) {
+      setGames([]);
+      return;
+    }
+
+    const timeout = setTimeout(
+      async () => {
+        const games = await getUserRecentGames(chessComUsername);
+        setGames(games);
+      },
+      requestCount === 0 ? 0 : 500
+    );
+
+    setRequestCount((prev) => prev + 1);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [chessComUsername]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <>
+      <FormControl sx={{ m: 1, width: 300 }}>
+        <TextField
+          label="Enter your Chess.com username..."
+          variant="outlined"
+          value={chessComUsername ?? ""}
+          onChange={(e) => setChessComUsername(e.target.value)}
+        />
+      </FormControl>
+
+      <Grid
+        container
+        item
+        xs={12}
+        gap={2}
+        justifyContent="center"
+        alignContent="center"
+      >
+        {games.map((game) => (
+          <ListItemButton
+            onClick={() => setPgn(game.pgn)}
+            selected={pgn === game.pgn}
+            style={{ width: 350, maxWidth: 350 }}
+            key={game.uuid}
+          >
+            <ListItemText
+              primary={`${capitalize(game.white.username) || "White"} (${
+                game.white.rating || "?"
+              }) vs ${capitalize(game.black.username) || "Black"} (${
+                game.black.rating || "?"
+              })`}
+              secondary={`${capitalize(game.time_class)} played at ${new Date(
+                game.end_time * 1000
+              )
+                .toLocaleString()
+                .slice(0, -3)}`}
+              primaryTypographyProps={{ noWrap: true }}
+              secondaryTypographyProps={{ noWrap: true }}
+            />
+          </ListItemButton>
+        ))}
+      </Grid>
+    </>
+  );
+}

src/sections/loadGame/gamePgnInput.tsx

@@ -0,0 +1,20 @@
+import { FormControl, TextField } from "@mui/material";
+
+interface Props {
+  pgn: string;
+  setPgn: (pgn: string) => void;
+}
+
+export default function GamePgnInput({ pgn, setPgn }: Props) {
+  return (
+    <FormControl sx={{ m: 1, width: 600 }}>
+      <TextField
+        label="Enter PGN here..."
+        variant="outlined"
+        multiline
+        value={pgn}
+        onChange={(e) => setPgn(e.target.value)}
+      />
+    </FormControl>
+  );
+}

src/sections/loadGame/loadGameDialog.tsx

@@ -8,16 +8,18 @@ import {
   Dialog,
   DialogTitle,
   DialogContent,
-  Box,
   FormControl,
   InputLabel,
   OutlinedInput,
   DialogActions,
-  TextField,
   Typography,
+  Grid,
 } from "@mui/material";
 import { Chess } from "chess.js";
 import { useState } from "react";
+import GamePgnInput from "./gamePgnInput";
+import ChessComInput from "./chessComInput";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
 
 interface Props {
   open: boolean;
@@ -27,6 +29,10 @@ interface Props {
 
 export default function NewGameDialog({ open, onClose, setGame }: Props) {
   const [pgn, setPgn] = useState("");
+  const [gameOrigin, setGameOrigin] = useLocalStorage(
+    "preferred-game-origin",
+    GameOrigin.Pgn
+  );
   const [parsingError, setParsingError] = useState("");
   const { addGame } = useGameDatabase();
 
@@ -63,11 +69,16 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
   return (
     <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
       <DialogTitle marginY={1} variant="h5">
-        Add a game to your database
+        {setGame ? "Load a game" : "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}>
+        <Grid
+          container
+          marginTop={1}
+          alignItems="center"
+          justifyContent="start"
+          rowGap={2}
+        >
           <FormControl sx={{ m: 1, width: 150 }}>
             <InputLabel id="dialog-select-label">Game origin</InputLabel>
             <Select
@@ -75,8 +86,8 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
               id="dialog-select"
               displayEmpty
               input={<OutlinedInput label="Game origin" />}
-              value={GameOrigin.Pgn}
-              disabled={true}
+              value={gameOrigin ?? ""}
+              onChange={(e) => setGameOrigin(e.target.value as GameOrigin)}
             >
               {Object.values(GameOrigin).map((origin) => (
                 <MenuItem key={origin} value={origin}>
@@ -85,15 +96,15 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
               ))}
             </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>
+
+          {gameOrigin === GameOrigin.Pgn && (
+            <GamePgnInput pgn={pgn} setPgn={setPgn} />
+          )}
+
+          {gameOrigin === GameOrigin.ChessCom && (
+            <ChessComInput pgn={pgn} setPgn={setPgn} />
+          )}
+
           {parsingError && (
             <FormControl fullWidth>
               <Typography color="red" textAlign="center" marginTop={1}>
@@ -101,7 +112,7 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
               </Typography>
             </FormControl>
           )}
-        </Box>
+        </Grid>
       </DialogContent>
       <DialogActions sx={{ m: 2 }}>
         <Button
@@ -122,5 +133,4 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
 const gameOriginLabel: Record<GameOrigin, string> = {
   [GameOrigin.Pgn]: "PGN",
   [GameOrigin.ChessCom]: "Chess.com",
-  [GameOrigin.Lichess]: "Lichess",
 };

src/types/chessCom.ts

@@ -0,0 +1,14 @@
+export interface ChessComGame {
+  uuid: string;
+  white: ChessComUser;
+  black: ChessComUser;
+  end_time: number;
+  pgn: string;
+  time_class: string;
+}
+
+export interface ChessComUser {
+  username: string;
+  rating: number;
+  ["@id"]: string;
+}

src/types/enums.ts

@@ -1,7 +1,6 @@
 export enum GameOrigin {
   Pgn = "pgn",
   ChessCom = "chesscom",
-  Lichess = "lichess",
 }
 
 export enum EngineName {