62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { Grid } from "@mui/material";
|
|
import LoadGameButton from "../loadGame/loadGameButton";
|
|
import { useRouter } from "next/router";
|
|
import { useCallback, useEffect } from "react";
|
|
import { useChessActions } from "@/hooks/useChess";
|
|
import {
|
|
boardAtom,
|
|
boardOrientationAtom,
|
|
gameAtom,
|
|
gameEvalAtom,
|
|
} from "./states";
|
|
import { useGameDatabase } from "@/hooks/useGameDatabase";
|
|
import { useAtomValue, useSetAtom } from "jotai";
|
|
import { Chess } from "chess.js";
|
|
|
|
export default function LoadGame() {
|
|
const router = useRouter();
|
|
const { gameId } = router.query;
|
|
const game = useAtomValue(gameAtom);
|
|
const gameActions = useChessActions(gameAtom);
|
|
const boardActions = useChessActions(boardAtom);
|
|
const { getGame } = useGameDatabase();
|
|
const setEval = useSetAtom(gameEvalAtom);
|
|
const setBoardOrientation = useSetAtom(boardOrientationAtom);
|
|
|
|
const resetAndSetGamePgn = useCallback(
|
|
(pgn: string) => {
|
|
boardActions.reset();
|
|
setEval(undefined);
|
|
setBoardOrientation(true);
|
|
gameActions.setPgn(pgn);
|
|
},
|
|
[boardActions, gameActions, setEval, setBoardOrientation]
|
|
);
|
|
|
|
useEffect(() => {
|
|
const loadGame = async () => {
|
|
if (typeof gameId !== "string") return;
|
|
|
|
const gamefromDb = await getGame(parseInt(gameId));
|
|
if (!gamefromDb) return;
|
|
|
|
const gamefromDbChess = new Chess();
|
|
gamefromDbChess.loadPgn(gamefromDb.pgn);
|
|
if (game.history().join() === gamefromDbChess.history().join()) return;
|
|
|
|
resetAndSetGamePgn(gamefromDb.pgn);
|
|
setEval(gamefromDb.eval);
|
|
};
|
|
|
|
loadGame();
|
|
}, [gameId, getGame, game, resetAndSetGamePgn, setEval]);
|
|
|
|
if (!router.isReady || gameId) return null;
|
|
|
|
return (
|
|
<Grid item container xs={12} justifyContent="center" alignItems="center">
|
|
<LoadGameButton setGame={(game) => resetAndSetGamePgn(game.pgn())} />
|
|
</Grid>
|
|
);
|
|
}
|