feat : arrow up/down to go to end/start position
This commit is contained in:
@@ -3,6 +3,7 @@ import { Grid, IconButton, Tooltip } from "@mui/material";
|
|||||||
import { useAtomValue } from "jotai";
|
import { useAtomValue } from "jotai";
|
||||||
import { boardAtom, gameAtom } from "../states";
|
import { boardAtom, gameAtom } from "../states";
|
||||||
import { useChessActions } from "@/hooks/useChessActions";
|
import { useChessActions } from "@/hooks/useChessActions";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
export default function GoToLastPositionButton() {
|
export default function GoToLastPositionButton() {
|
||||||
const { setPgn: setBoardPgn } = useChessActions(boardAtom);
|
const { setPgn: setBoardPgn } = useChessActions(boardAtom);
|
||||||
@@ -14,6 +15,21 @@ export default function GoToLastPositionButton() {
|
|||||||
|
|
||||||
const isButtonDisabled = boardHistory >= gameHistory;
|
const isButtonDisabled = boardHistory >= gameHistory;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onKeyDown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === "ArrowUp") {
|
||||||
|
if (isButtonDisabled) return;
|
||||||
|
setBoardPgn(game.pgn());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("keydown", onKeyDown);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("keydown", onKeyDown);
|
||||||
|
};
|
||||||
|
}, [isButtonDisabled, setBoardPgn, game]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip title="Go to final position">
|
<Tooltip title="Go to final position">
|
||||||
<Grid>
|
<Grid>
|
||||||
|
|||||||
@@ -22,6 +22,8 @@ export default function ReviewPanelToolBar() {
|
|||||||
if (boardHistory.length === 0) return;
|
if (boardHistory.length === 0) return;
|
||||||
if (e.key === "ArrowLeft") {
|
if (e.key === "ArrowLeft") {
|
||||||
undoBoardMove();
|
undoBoardMove();
|
||||||
|
} else if (e.key === "ArrowDown") {
|
||||||
|
resetBoard({ fen: getStartingFen({ game: board }) });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -30,7 +32,7 @@ export default function ReviewPanelToolBar() {
|
|||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener("keydown", onKeyDown);
|
window.removeEventListener("keydown", onKeyDown);
|
||||||
};
|
};
|
||||||
}, [undoBoardMove, boardHistory]);
|
}, [undoBoardMove, boardHistory, resetBoard, board]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid container item justifyContent="center" alignItems="center" xs={12}>
|
<Grid container item justifyContent="center" alignItems="center" xs={12}>
|
||||||
|
|||||||
@@ -10,8 +10,6 @@ export const currentPositionAtom = atom<CurrentPosition>({});
|
|||||||
export const boardOrientationAtom = atom(true);
|
export const boardOrientationAtom = atom(true);
|
||||||
export const showBestMoveArrowAtom = atom(true);
|
export const showBestMoveArrowAtom = atom(true);
|
||||||
export const showPlayerMoveIconAtom = atom(true);
|
export const showPlayerMoveIconAtom = atom(true);
|
||||||
export const clickedSquaresAtom = atom<string[]>([]);
|
|
||||||
export const playableSquaresAtom = atom<string[]>([]);
|
|
||||||
|
|
||||||
export const engineDepthAtom = atom(16);
|
export const engineDepthAtom = atom(16);
|
||||||
export const engineMultiPvAtom = atom(3);
|
export const engineMultiPvAtom = atom(3);
|
||||||
|
|||||||
Reference in New Issue
Block a user