feat : open played game in analysis

src/sections/analysis/reviewPanelHeader/loadGame.tsx

@@ -26,7 +26,7 @@ export default function LoadGame() {
 
   const resetAndSetGamePgn = useCallback(
     (pgn: string) => {
-      resetBoard(getStartingFen(pgn));
+      resetBoard({ fen: getStartingFen({ pgn }) });
       setEval(undefined);
       setBoardOrientation(true);
       setGamePgn(pgn);

src/sections/analysis/reviewPanelToolbar/index.tsx

@@ -39,7 +39,7 @@ export default function ReviewPanelToolBar() {
       <Tooltip title="Reset board">
         <Grid>
           <IconButton
-            onClick={() => resetBoard(getStartingFen(board.pgn()))}
+            onClick={() => resetBoard({ fen: getStartingFen({ game: board }) })}
             disabled={boardHistory.length === 0}
           >
             <Icon icon="ri:skip-back-line" />

src/sections/play/board/index.tsx

@@ -69,7 +69,7 @@ export default function Board() {
     target: Square,
     piece: string
   ): boolean => {
-    if (!piece || piece[0] !== playerColor) return false;
+    if (!piece || piece[0] !== playerColor || !isGameInProgress) return false;
     try {
       const result = makeGameMove({
         from: source,

src/sections/play/gameRecap.tsx

@@ -1,14 +1,25 @@
 import { useAtomValue } from "jotai";
-import { gameAtom, isGameInProgressAtom, playerColorAtom } from "./states";
-import { Grid, Typography } from "@mui/material";
+import {
+  gameAtom,
+  gameDataAtom,
+  isGameInProgressAtom,
+  playerColorAtom,
+} from "./states";
+import { Button, Grid, Typography } from "@mui/material";
 import { Color } from "@/types/enums";
+import { setGameHeaders } from "@/lib/chess";
+import { useGameDatabase } from "@/hooks/useGameDatabase";
+import { useRouter } from "next/router";
 
 export default function GameRecap() {
   const game = useAtomValue(gameAtom);
+  const gameData = useAtomValue(gameDataAtom);
   const playerColor = useAtomValue(playerColorAtom);
   const isGameInProgress = useAtomValue(isGameInProgressAtom);
+  const { addGame } = useGameDatabase();
+  const router = useRouter();
 
-  if (isGameInProgress) return null;
+  if (isGameInProgress || !gameData.history.length) return null;
 
   const getResultLabel = () => {
     if (game.isCheckmate()) {
@@ -16,15 +27,23 @@ export default function GameRecap() {
       const winnerLabel = winnerColor === playerColor ? "You" : "Stockfish";
       return `${winnerLabel} won by checkmate !`;
     }
-    if (game.isDraw()) {
-      if (game.isInsufficientMaterial()) return "Draw by insufficient material";
-      if (game.isStalemate()) return "Draw by stalemate";
-      if (game.isThreefoldRepetition()) return "Draw by threefold repetition";
-      return "Draw by fifty-move rule";
-    }
+    if (game.isInsufficientMaterial()) return "Draw by insufficient material";
+    if (game.isStalemate()) return "Draw by stalemate";
+    if (game.isThreefoldRepetition()) return "Draw by threefold repetition";
+    if (game.isDraw()) "Draw by fifty-move rule";
+
     return "You resigned";
   };
 
+  const handleOpenGameAnalysis = async () => {
+    const gameToAnalysis = setGameHeaders(game, {
+      resigned: !game.isGameOver() ? playerColor : undefined,
+    });
+    const gameId = await addGame(gameToAnalysis);
+
+    router.push({ pathname: "/", query: { gameId } });
+  };
+
   return (
     <Grid
       item
@@ -32,9 +51,15 @@ export default function GameRecap() {
       xs={12}
       justifyContent="center"
       alignItems="center"
-      gap={1}
+      gap={2}
     >
-      <Typography>{getResultLabel()}</Typography>
+      <Grid item container xs={12} justifyContent="center">
+        <Typography>{getResultLabel()}</Typography>
+      </Grid>
+
+      <Button variant="outlined" onClick={handleOpenGameAnalysis}>
+        Open game analysis
+      </Button>
     </Grid>
   );
 }

src/sections/play/gameSettings/gameSettingsButton.tsx

@@ -1,14 +1,17 @@
 import { Button } from "@mui/material";
 import { useState } from "react";
 import GameSettingsDialog from "./gameSettingsDialog";
+import { useAtomValue } from "jotai";
+import { gameDataAtom } from "../states";
 
 export default function GameSettingsButton() {
   const [openDialog, setOpenDialog] = useState(false);
+  const gameData = useAtomValue(gameDataAtom);
 
   return (
     <>
       <Button variant="contained" onClick={() => setOpenDialog(true)}>
-        Start game
+        {gameData.history.length ? "Start new game" : "Start game"}
       </Button>
 
       <GameSettingsDialog

src/sections/play/gameSettings/gameSettingsDialog.tsx

@@ -43,7 +43,12 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
 
   const handleGameStart = () => {
     onClose();
-    resetGame();
+    resetGame({
+      whiteName:
+        playerColor === Color.White ? "You" : `Stockfish level ${skillLevel}`,
+      blackName:
+        playerColor === Color.Black ? "You" : `Stockfish level ${skillLevel}`,
+    });
     setIsGameInProgress(true);
   };