From bf30b35d0c6290e6296bc09fd050794c1fa05e7d Mon Sep 17 00:00:00 2001
From: GuillaumeSD <gsd.lfny@gmail.com>
Date: Thu, 7 Mar 2024 23:18:41 +0100
Subject: [PATCH] feat : use keyboard arrows to move between moves

---
 .../analysis/reviewPanelToolbar/index.tsx        | 16 ++++++++++++++++
 .../reviewPanelToolbar/nextMoveButton.tsx        | 15 +++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/src/sections/analysis/reviewPanelToolbar/index.tsx b/src/sections/analysis/reviewPanelToolbar/index.tsx
index 7c21cbc..4e79461 100644
--- a/src/sections/analysis/reviewPanelToolbar/index.tsx
+++ b/src/sections/analysis/reviewPanelToolbar/index.tsx
@@ -7,6 +7,7 @@ import FlipBoardButton from "./flipBoardButton";
 import NextMoveButton from "./nextMoveButton";
 import GoToLastPositionButton from "./goToLastPositionButton";
 import SaveButton from "./saveButton";
+import { useEffect } from "react";
 
 export default function ReviewPanelToolBar() {
   const board = useAtomValue(boardAtom);
@@ -15,6 +16,21 @@ export default function ReviewPanelToolBar() {
 
   const boardHistory = board.history();
 
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (boardHistory.length === 0) return;
+      if (e.key === "ArrowLeft") {
+        undoBoardMove();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [undoBoardMove, boardHistory]);
+
   return (
     <Grid container item justifyContent="center" alignItems="center" xs={12}>
       <FlipBoardButton />
diff --git a/src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx b/src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx
index 7b6838d..3ffd484 100644
--- a/src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx
+++ b/src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx
@@ -3,6 +3,7 @@ import { Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
 import { useChessActions } from "@/hooks/useChessActions";
+import { useEffect } from "react";
 
 export default function NextMoveButton() {
   const { makeMove: makeBoardMove } = useChessActions(boardAtom);
@@ -31,6 +32,20 @@ export default function NextMoveButton() {
     }
   };
 
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "ArrowRight") {
+        addNextGameMoveToBoard();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [addNextGameMoveToBoard]);
+
   return (
     <Tooltip title="Go to next move">
       <Grid>