diff --git a/src/components/board/capturedPieces.tsx b/src/components/board/capturedPieces.tsx index fa9fcfc..6773389 100644 --- a/src/components/board/capturedPieces.tsx +++ b/src/components/board/capturedPieces.tsx @@ -1,28 +1,25 @@ import { getCapturedPieces, getMaterialDifference } from "@/lib/chess"; import { Color } from "@/types/enums"; import { Grid2 as Grid, Typography } from "@mui/material"; -import { Chess } from "chess.js"; -import { PrimitiveAtom, useAtomValue } from "jotai"; import { CSSProperties, useMemo } from "react"; export interface Props { - gameAtom: PrimitiveAtom; + fen: string; color: Color; } const PIECE_SCALE = 0.6; -export default function CapturedPieces({ gameAtom, color }: Props) { - const game = useAtomValue(gameAtom); +export default function CapturedPieces({ fen, color }: Props) { const cssProps = useMemo(() => { - const capturedPieces = getCapturedPieces(game.fen(), color); + const capturedPieces = getCapturedPieces(fen, color); return getCapturedPiecesCSSProps(capturedPieces, color); - }, [game, color]); + }, [fen, color]); const materialDiff = useMemo(() => { - const materialDiff = getMaterialDifference(game.fen()); + const materialDiff = getMaterialDifference(fen); return color === Color.White ? materialDiff : -materialDiff; - }, [game, color]); + }, [fen, color]); return ( diff --git a/src/components/board/index.tsx b/src/components/board/index.tsx index fa2b50c..9364c99 100644 --- a/src/components/board/index.tsx +++ b/src/components/board/index.tsx @@ -254,7 +254,7 @@ export default function Board({ @@ -302,7 +302,7 @@ export default function Board({ {boardOrientation === Color.White ? whitePlayer : blackPlayer} - + diff --git a/src/hooks/useChessActions.ts b/src/hooks/useChessActions.ts index 702e34c..6c0156c 100644 --- a/src/hooks/useChessActions.ts +++ b/src/hooks/useChessActions.ts @@ -12,6 +12,7 @@ export interface resetGameParams { fen?: string; whiteName?: string; blackName?: string; + noHeaders?: boolean; } export const useChessActions = (chessAtom: PrimitiveAtom) => { @@ -29,7 +30,7 @@ export const useChessActions = (chessAtom: PrimitiveAtom) => { const reset = useCallback( (params?: resetGameParams) => { const newGame = new Chess(params?.fen); - setGameHeaders(newGame, params); + if (!params?.noHeaders) setGameHeaders(newGame, params); setGame(newGame); }, [setGame] @@ -40,7 +41,10 @@ export const useChessActions = (chessAtom: PrimitiveAtom) => { if (game.history().length === 0) { const pgnSplitted = game.pgn().split("]"); - if (pgnSplitted.at(-1)?.includes("1-0")) { + if ( + pgnSplitted.at(-1)?.includes("1-0") || + pgnSplitted.at(-1) === "\n *" + ) { newGame.loadPgn(pgnSplitted.slice(0, -1).join("]") + "]"); return newGame; } diff --git a/src/hooks/usePlayerNames.ts b/src/hooks/usePlayerNames.ts index 3b33250..916fcbf 100644 --- a/src/hooks/usePlayerNames.ts +++ b/src/hooks/usePlayerNames.ts @@ -7,8 +7,13 @@ export const usePlayersNames = (gameAtom: PrimitiveAtom) => { const { gameFromUrl } = useGameDatabase(); const headers = game.getHeaders(); - const whiteName = gameFromUrl?.white?.name || headers.White || "White"; - const blackName = gameFromUrl?.black?.name || headers.Black || "Black"; + const headersWhiteName = + headers.White && headers.White !== "?" ? headers.White : undefined; + const headersBlackName = + headers.Black && headers.Black !== "?" ? headers.Black : undefined; + + const whiteName = gameFromUrl?.white?.name || headersWhiteName || "White"; + const blackName = gameFromUrl?.black?.name || headersBlackName || "Black"; const whiteElo = gameFromUrl?.white?.rating || headers.WhiteElo || undefined; const blackElo = gameFromUrl?.black?.rating || headers.BlackElo || undefined; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 88fe981..91867b5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -19,7 +19,6 @@ import { useMediaQuery, useTheme, } from "@mui/material"; -import { Chess } from "chess.js"; import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; @@ -35,7 +34,7 @@ export default function GameReview() { const isMobile = useMediaQuery(theme.breakpoints.down("sm")); const { reset: resetBoard } = useChessActions(boardAtom); - const { setPgn: setGamePgn } = useChessActions(gameAtom); + const { reset: resetGame } = useChessActions(gameAtom); const [gameEval, setGameEval] = useAtom(gameEvalAtom); const game = useAtomValue(gameAtom); const setBoardOrientation = useSetAtom(boardOrientationAtom); @@ -48,9 +47,9 @@ export default function GameReview() { resetBoard(); setGameEval(undefined); setBoardOrientation(true); - setGamePgn(new Chess().pgn()); + resetGame({ noHeaders: true }); } - }, [gameId, setGameEval, setBoardOrientation, resetBoard, setGamePgn]); + }, [gameId, setGameEval, setBoardOrientation, resetBoard, resetGame]); const isGameLoaded = game.history().length > 0; diff --git a/src/sections/analysis/panelHeader/gamePanel.tsx b/src/sections/analysis/panelHeader/gamePanel.tsx index c2f94e0..c493b7c 100644 --- a/src/sections/analysis/panelHeader/gamePanel.tsx +++ b/src/sections/analysis/panelHeader/gamePanel.tsx @@ -8,7 +8,9 @@ export default function GamePanel() { const game = useAtomValue(gameAtom); const gameHeaders = game.getHeaders(); - const hasGameInfo = gameFromUrl !== undefined || !!gameHeaders.White; + const hasGameInfo = + gameFromUrl !== undefined || + (!!gameHeaders.White && gameHeaders.White !== "?"); if (!hasGameInfo) return null; diff --git a/src/sections/analysis/panelHeader/loadGame.tsx b/src/sections/analysis/panelHeader/loadGame.tsx index fd5d93e..623c3fa 100644 --- a/src/sections/analysis/panelHeader/loadGame.tsx +++ b/src/sections/analysis/panelHeader/loadGame.tsx @@ -49,7 +49,10 @@ export default function LoadGame() { loadGame(); }, [gameFromUrl, game, resetAndSetGamePgn, setEval]); - const isGameLoaded = gameFromUrl !== undefined || !!game.getHeaders().White; + const isGameLoaded = + gameFromUrl !== undefined || + (!!game.getHeaders().White && game.getHeaders().White !== "?") || + game.history().length > 0; if (evaluationProgress) return null; diff --git a/src/sections/analysis/panelToolbar/index.tsx b/src/sections/analysis/panelToolbar/index.tsx index 74e4969..f49b758 100644 --- a/src/sections/analysis/panelToolbar/index.tsx +++ b/src/sections/analysis/panelToolbar/index.tsx @@ -17,6 +17,7 @@ export default function PanelToolBar() { const boardHistory = board.history(); const game = useAtomValue(gameAtom); + useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (boardHistory.length === 0) return;