haunter/chesskit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : add arrow opt out options

Browse Source
This commit is contained in:
GuillaumeSD
2024-02-24 18:20:48 +01:00
parent 035591208f
commit 7b328d3159
16 changed files with 228 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/sections/analysis/board/index.tsx
View File

@@ -1,7 +1,12 @@
import { Grid } from "@mui/material";
import { Chessboard } from "react-chessboard";
import { useAtomValue } from "jotai";
import { boardAtom, boardOrientationAtom } from "../states";
import {
boardAtom,
boardOrientationAtom,
showBestMoveArrowAtom,
showPlayerMoveArrowAtom,
} from "../states";
import { Arrow, Square } from "react-chessboard/dist/chessboard/types";
import { useChessActions } from "@/hooks/useChess";
import { useCurrentMove } from "@/hooks/useCurrentMove";
@@ -11,6 +16,8 @@ import PlayerInfo from "./playerInfo";
export default function Board() {
const board = useAtomValue(boardAtom);
const boardOrientation = useAtomValue(boardOrientationAtom);
const showBestMoveArrow = useAtomValue(showBestMoveArrowAtom);
const showPlayerMoveArrow = useAtomValue(showPlayerMoveArrowAtom);
const boardActions = useChessActions(boardAtom);
const currentMove = useCurrentMove();
@@ -29,25 +36,37 @@ export default function Board() {
};
const customArrows: Arrow[] = useMemo(() => {
if (!currentMove?.lastEval) return [];
const arrows: Arrow[] = [];
const bestMoveArrow = [
currentMove.lastEval.bestMove.slice(0, 2),
currentMove.lastEval.bestMove.slice(2, 4),
"#3aab18",
] as Arrow;
if (currentMove?.lastEval && showBestMoveArrow) {
const bestMoveArrow = [
currentMove.lastEval.bestMove.slice(0, 2),
currentMove.lastEval.bestMove.slice(2, 4),
"#3aab18",
] as Arrow;
if (
!currentMove.from ||
!currentMove.to ||
(currentMove.from === bestMoveArrow[0] &&
currentMove.to === bestMoveArrow[1])
) {
return [bestMoveArrow];
arrows.push(bestMoveArrow);
}
return [[currentMove.from, currentMove.to, "#ffaa00"], bestMoveArrow];
}, [currentMove]);
if (currentMove.from && currentMove.to && showPlayerMoveArrow) {
const playerMoveArrow: Arrow = [
currentMove.from,
currentMove.to,
"#ffaa00",
];
if (
arrows.every(
(arrow) =>
arrow[0] !== playerMoveArrow[0] || arrow[1] !== playerMoveArrow[1]
)
) {
arrows.push(playerMoveArrow);
}
}
return arrows;
}, [currentMove, showBestMoveArrow, showPlayerMoveArrow]);
return (
<Grid
@@ -69,7 +88,7 @@ export default function Board() {
maxWidth={"80vh"}
>
<Chessboard
id="BasicBoard"
id="AnalysisBoard"
position={board.fen()}
onPieceDrop={onPieceDrop}
boardOrientation={boardOrientation ? "white" : "black"}

1
src/sections/analysis/reviewPanelHeader/analyzePanel.tsx
View File

@@ -40,6 +40,7 @@ export default function AnalyzePanel() {
engineDepth,
engineMultiPv
);
console.log(newGameEval);
setEval(newGameEval);
setEvaluationInProgress(false);

11
src/sections/analysis/reviewPanelHeader/gamePanel.tsx → src/sections/analysis/reviewPanelHeader/gamePanel/index.tsx
View File

@@ -1,7 +1,7 @@
import { Grid, Typography } from "@mui/material";
import { useGameDatabase } from "@/hooks/useGameDatabase";
import { useAtomValue } from "jotai";
import { gameAtom } from "../states";
import { gameAtom } from "../../states";
import PlayerInfo from "./playerInfo";
export default function GamePanel() {
@@ -12,7 +12,14 @@ export default function GamePanel() {
if (!hasGameInfo) {
return (
<Grid item container xs={12} justifyContent="center" alignItems="center">
<Grid
item
container
xs={12}
justifyContent="center"
alignItems="center"
marginY={1}
>
<Typography variant="h6">No game loaded</Typography>
</Grid>
);

2
src/sections/analysis/reviewPanelHeader/playerInfo.tsx → src/sections/analysis/reviewPanelHeader/gamePanel/playerInfo.tsx
View File

@@ -1,7 +1,7 @@
import { useGameDatabase } from "@/hooks/useGameDatabase";
import { Grid, Typography } from "@mui/material";
import { useAtomValue } from "jotai";
import { gameAtom } from "../states";
import { gameAtom } from "../../states";
interface Props {
color: "white" | "black";

2
src/sections/analysis/reviewPanelHeader/loadGame.tsx
View File

@@ -54,7 +54,7 @@ export default function LoadGame() {
<LoadGameButton
label={isGameLoaded ? "Load another game" : "Load game"}
setGame={async (game) => {
await router.push("");
await router.push("/");
resetAndSetGamePgn(game.pgn());
}}
/>

10
src/sections/analysis/reviewPanelToolbar/flipBoardButton.tsx
View File

@@ -1,14 +1,16 @@
import { useSetAtom } from "jotai";
import { boardOrientationAtom } from "../states";
import { IconButton } from "@mui/material";
import { IconButton, Tooltip } from "@mui/material";
import { Icon } from "@iconify/react";
export default function FlipBoardButton() {
const setBoardOrientation = useSetAtom(boardOrientationAtom);
return (
<IconButton onClick={() => setBoardOrientation((prev) => !prev)}>
<Icon icon="eva:flip-fill" />
</IconButton>
<Tooltip title="Flip board">
<IconButton onClick={() => setBoardOrientation((prev) => !prev)}>
<Icon icon="eva:flip-fill" />
</IconButton>
</Tooltip>
);
}

24
src/sections/analysis/reviewPanelToolbar/goToLastPositionButton.tsx
View File

@@ -1,5 +1,5 @@
import { Icon } from "@iconify/react";
import { IconButton } from "@mui/material";
import { Grid, IconButton, Tooltip } from "@mui/material";
import { useAtomValue } from "jotai";
import { boardAtom, gameAtom } from "../states";
import { useChessActions } from "@/hooks/useChess";
@@ -15,14 +15,18 @@ export default function GoToLastPositionButton() {
const isButtonDisabled = boardHistory >= gameHistory;
return (
<IconButton
onClick={() => {
if (isButtonDisabled) return;
boardActions.setPgn(game.pgn());
}}
disabled={isButtonDisabled}
>
<Icon icon="ri:skip-forward-line" />
</IconButton>
<Tooltip title="Go to final position">
<Grid>
<IconButton
onClick={() => {
if (isButtonDisabled) return;
boardActions.setPgn(game.pgn());
}}
disabled={isButtonDisabled}
>
<Icon icon="ri:skip-forward-line" />
</IconButton>
</Grid>
</Tooltip>
);
}

82
src/sections/analysis/reviewPanelToolbar/index.tsx
View File

@@ -1,7 +1,18 @@
import { Divider, Grid, IconButton } from "@mui/material";
import {
Checkbox,
Divider,
FormControlLabel,
Grid,
IconButton,
Tooltip,
} from "@mui/material";
import { Icon } from "@iconify/react";
import { useAtomValue } from "jotai";
import { boardAtom } from "../states";
import { useAtom, useAtomValue } from "jotai";
import {
boardAtom,
showBestMoveArrowAtom,
showPlayerMoveArrowAtom,
} from "../states";
import { useChessActions } from "@/hooks/useChess";
import FlipBoardButton from "./flipBoardButton";
import NextMoveButton from "./nextMoveButton";
@@ -9,6 +20,8 @@ import GoToLastPositionButton from "./goToLastPositionButton";
import SaveButton from "./saveButton";
export default function ReviewPanelToolBar() {
const [showBestMove, setShowBestMove] = useAtom(showBestMoveArrowAtom);
const [showPlayerMove, setShowPlayerMove] = useAtom(showPlayerMoveArrowAtom);
const board = useAtomValue(boardAtom);
const boardActions = useChessActions(boardAtom);
@@ -21,19 +34,27 @@ export default function ReviewPanelToolBar() {
<Grid container item justifyContent="center" alignItems="center" xs={12}>
<FlipBoardButton />
<IconButton
onClick={() => boardActions.reset()}
disabled={boardHistory.length === 0}
>
<Icon icon="ri:skip-back-line" />
</IconButton>
<Tooltip title="Reset board">
<Grid>
<IconButton
onClick={() => boardActions.reset()}
disabled={boardHistory.length === 0}
>
<Icon icon="ri:skip-back-line" />
</IconButton>
</Grid>
</Tooltip>
<IconButton
onClick={() => boardActions.undo()}
disabled={boardHistory.length === 0}
>
<Icon icon="ri:arrow-left-s-line" height={30} />
</IconButton>
<Tooltip title="Go to previous move">
<Grid>
<IconButton
onClick={() => boardActions.undo()}
disabled={boardHistory.length === 0}
>
<Icon icon="ri:arrow-left-s-line" height={30} />
</IconButton>
</Grid>
</Tooltip>
<NextMoveButton />
@@ -41,6 +62,37 @@ export default function ReviewPanelToolBar() {
<SaveButton />
</Grid>
<Grid
container
item
justifyContent="space-evenly"
alignItems="center"
xs={12}
marginY={3}
gap={3}
>
<FormControlLabel
control={
<Checkbox
checked={showBestMove}
onChange={(_, checked) => setShowBestMove(checked)}
/>
}
label="Show best move green arrow"
sx={{ marginX: 0 }}
/>
<FormControlLabel
control={
<Checkbox
checked={showPlayerMove}
onChange={(_, checked) => setShowPlayerMove(checked)}
/>
}
label="Show player move yellow arrow"
sx={{ marginX: 0 }}
/>
</Grid>
</>
);
}

18
src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx
View File

@@ -1,5 +1,5 @@
import { Icon } from "@iconify/react";
import { IconButton } from "@mui/material";
import { Grid, IconButton, Tooltip } from "@mui/material";
import { useAtomValue } from "jotai";
import { boardAtom, gameAtom } from "../states";
import { useChessActions } from "@/hooks/useChess";
@@ -32,11 +32,15 @@ export default function NextMoveButton() {
};
return (
<IconButton
onClick={() => addNextGameMoveToBoard()}
disabled={!isButtonEnabled}
>
<Icon icon="ri:arrow-right-s-line" height={30} />
</IconButton>
<Tooltip title="Go to next move">
<Grid>
<IconButton
onClick={() => addNextGameMoveToBoard()}
disabled={!isButtonEnabled}
>
<Icon icon="ri:arrow-right-s-line" height={30} />
</IconButton>
</Grid>
</Tooltip>
);
}

22
src/sections/analysis/reviewPanelToolbar/saveButton.tsx
View File

@@ -1,6 +1,6 @@
import { useGameDatabase } from "@/hooks/useGameDatabase";
import { Icon } from "@iconify/react";
import { IconButton } from "@mui/material";
import { Grid, IconButton, Tooltip } from "@mui/material";
import { useAtomValue } from "jotai";
import { useRouter } from "next/router";
import { boardAtom, gameAtom, gameEvalAtom } from "../states";
@@ -39,13 +39,21 @@ export default function SaveButton() {
return (
<>
{gameFromUrl ? (
<IconButton disabled={true}>
<Icon icon="ri:folder-check-line" />
</IconButton>
<Tooltip title="Game saved in database">
<Grid>
<IconButton disabled={true}>
<Icon icon="ri:folder-check-line" />
</IconButton>
</Grid>
</Tooltip>
) : (
<IconButton onClick={handleSave} disabled={!enableSave}>
<Icon icon="ri:save-3-line" />
</IconButton>
<Tooltip title="Save game">
<Grid>
<IconButton onClick={handleSave} disabled={!enableSave}>
<Icon icon="ri:save-3-line" />
</IconButton>
</Grid>
</Tooltip>
)}
</>
);

3
src/sections/analysis/states.ts
View File

@@ -5,7 +5,10 @@ import { atom } from "jotai";
export const gameEvalAtom = atom<GameEval | undefined>(undefined);
export const gameAtom = atom(new Chess());
export const boardAtom = atom(new Chess());
export const boardOrientationAtom = atom(true);
export const showBestMoveArrowAtom = atom(true);
export const showPlayerMoveArrowAtom = atom(true);
export const engineDepthAtom = atom(16);
export const engineMultiPvAtom = atom(3);