Squashed commit of the following:

commit d9209a78cff1c05be3e6a87e27cd1a5a4d5f91c5 Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Wed Jul 24 11:55:35 2024 +0200 style : UI analysis panel adjustment commit 3c2e19bdb9d97f3bb7e8ceaefd630aad64d755c4 Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Wed Jul 24 11:10:07 2024 +0200 feat : graph dot color match move classification commit 4a99ccb2fe19d3806ff320370ebc55af984d719a Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Wed Jul 24 11:09:35 2024 +0200 fix : load pgn with no moves commit 9eeb0e7f2869e544700b7da963b74f707fa6ea2f Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Wed Jul 24 00:09:03 2024 +0200 feat : add current move reference line in graph commit febb9962a0b366aeac1dc266e0470b75bd619e68 Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Tue Jul 23 23:08:17 2024 +0200 fix : handle tab change on new game commit a105239a728dc05211a0ae99d8fd56f179108a0e Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Tue Jul 23 03:46:49 2024 +0200 style : small chart UI tweaks commit 4878ebf87b4ddbac75db70619fe452a3a317ca09 Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Tue Jul 23 03:38:40 2024 +0200 feat : add eval graph commit 29c5a001da03ee288d2a2c133426b1d2ca435930 Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Tue Jul 23 00:30:25 2024 +0200 refacto : analysis directory commit a8b966cc07152bb117b8c68f54af3498ca2a5d2f Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Tue Jul 23 00:07:07 2024 +0200 style : add settings floating button commit 7edc54f09ce7d4b4c4beb310a9c7f985363ff5ee Author: GuillaumeSD <47183782+GuillaumeSD@users.noreply.github.com> Date: Sun Jul 21 22:29:48 2024 +0200 feat : tab analysis panel
2024-07-24 11:58:42 +02:00
parent 9d5b088ae9
commit 2baf9b76ad
35 changed files with 754 additions and 156 deletions
--- a/src/sections/analysis/panelToolbar/index.tsx
+++ b/src/sections/analysis/panelToolbar/index.tsx
@@ -0,0 +1,72 @@
+import { Grid, IconButton, Tooltip } from "@mui/material";
+import { Icon } from "@iconify/react";
+import { useAtomValue } from "jotai";
+import { boardAtom } from "../states";
+import { useChessActions } from "@/hooks/useChessActions";
+import FlipBoardButton from "./flipBoardButton";
+import NextMoveButton from "./nextMoveButton";
+import GoToLastPositionButton from "./goToLastPositionButton";
+import SaveButton from "./saveButton";
+import { useEffect } from "react";
+import { getStartingFen } from "@/lib/chess";
+
+export default function PanelToolBar() {
+  const board = useAtomValue(boardAtom);
+  const { reset: resetBoard, undoMove: undoBoardMove } =
+    useChessActions(boardAtom);
+
+  const boardHistory = board.history();
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (boardHistory.length === 0) return;
+      if (e.key === "ArrowLeft") {
+        undoBoardMove();
+      } else if (e.key === "ArrowDown") {
+        resetBoard({ fen: getStartingFen({ game: board }) });
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [undoBoardMove, boardHistory, resetBoard, board]);
+
+  return (
+    <Grid container item justifyContent="center" alignItems="center" xs={12}>
+      <FlipBoardButton />
+
+      <Tooltip title="Reset board">
+        <Grid>
+          <IconButton
+            onClick={() => resetBoard({ fen: getStartingFen({ game: board }) })}
+            disabled={boardHistory.length === 0}
+            sx={{ paddingX: 1.2, paddingY: 0.5 }}
+          >
+            <Icon icon="ri:skip-back-line" />
+          </IconButton>
+        </Grid>
+      </Tooltip>
+
+      <Tooltip title="Go to previous move">
+        <Grid>
+          <IconButton
+            onClick={() => undoBoardMove()}
+            disabled={boardHistory.length === 0}
+            sx={{ paddingX: 1.2, paddingY: 0.5 }}
+          >
+            <Icon icon="ri:arrow-left-s-line" height={30} />
+          </IconButton>
+        </Grid>
+      </Tooltip>
+
+      <NextMoveButton />
+
+      <GoToLastPositionButton />
+
+      <SaveButton />
+    </Grid>
+  );
+}