add scroll to navigate functionality

GreenAsJade · Oct 20, 2024 · 9805df9 · 9805df9
1 parent 632e239
commit 9805df9
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/src/components/GobanContainer/GobanContainer.tsx b/src/components/GobanContainer/GobanContainer.tsx
@@ -29,6 +29,8 @@ interface GobanContainerProps {
     goban?: GobanRenderer;
     /** callback that is called when the goban detects a resize. */
     onResize?: () => void;
+    /** callback that is called when user scrolls on goban container. */
+    onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
     /** Additional props to pass to the PersistentElement that wraps the goban_div */
     extra_props?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 }
@@ -39,6 +41,7 @@ interface GobanContainerProps {
 export function GobanContainer({
     goban,
     onResize: onResizeCb,
+    onWheel,
     extra_props,
 }: GobanContainerProps): JSX.Element {
     const ref_goban_container = React.useRef<HTMLDivElement>(null);
@@ -119,7 +122,7 @@ export function GobanContainer({
     }
 
     return (
-        <div ref={ref_goban_container} className="goban-container">
+        <div ref={ref_goban_container} className="goban-container" onWheel={onWheel}>
             <OgsResizeDetector onResize={onResize} targetRef={ref_goban_container} />
             <PersistentElement className="Goban" elt={goban_div} extra_props={extra_props} />
         </div>

diff --git a/src/lib/preferences.ts b/src/lib/preferences.ts
@@ -132,6 +132,7 @@ export const defaults = {
     "unicode-filter": false,
     "variations-in-chat-enabled": true,
     "start-in-zen-mode": false,
+    "scroll-to-navigate": false,
     "show-empty-chat-notification": true,
     "chat-subscribe-group-chat-unread": true,
     "chat-subscribe-group-mentions": true,

diff --git a/src/views/Game/Game.tsx b/src/views/Game/Game.tsx
@@ -137,6 +137,9 @@ export function Game(): JSX.Element | null {
     const [ai_review_enabled, set_ai_review_enabled] = React.useState(
         preferences.get("ai-review-enabled"),
     );
+    const [scroll_to_navigate, _setScrollToNavigate] = React.useState(
+        preferences.get("scroll-to-navigate"),
+    );
     const [phase, set_phase] = React.useState<GobanEnginePhase>();
     const [selected_ai_review_uuid, set_selected_ai_review_uuid] = React.useState<string | null>(
         null,
@@ -408,6 +411,22 @@ export function Game(): JSX.Element | null {
         },
         [set_squashed, set_view_mode, squashed, view_mode],
     );
+
+    const onWheel: React.WheelEventHandler<HTMLDivElement> = React.useCallback(
+        (event) => {
+            if (!scroll_to_navigate) {
+                return;
+            }
+
+            if (event.deltaY > 0) {
+                nav_next();
+            } else if (event.deltaY < 0) {
+                nav_prev();
+            }
+        },
+        [scroll_to_navigate],
+    );
+
     const setAnalyzeTool = (tool: AnalysisTool | "erase", subtool: string) => {
         if (!goban.current) {
             return false;
@@ -1720,7 +1739,11 @@ export function Game(): JSX.Element | null {
                                 {frag_rengo_header()}
                             </div>
                         )}
-                        <GobanContainer goban={goban.current} onResize={onResize} />
+                        <GobanContainer
+                            goban={goban.current}
+                            onResize={onResize}
+                            onWheel={onWheel}
+                        />
 
                         {frag_below_board_controls()}
 

diff --git a/src/views/Settings/GamePreferences.tsx b/src/views/Settings/GamePreferences.tsx
@@ -55,6 +55,7 @@ export function GamePreferences(): JSX.Element {
     );
     const [variation_move_count, _setVariationMoveCount] = usePreference("variation-move-count");
     const [zen_mode_by_default, _setZenModeByDefault] = usePreference("start-in-zen-mode");
+    const [scroll_to_navigate, setScrollToNavigate] = usePreference("scroll-to-navigate");
 
     function setDockDelay(ev: React.ChangeEvent<HTMLInputElement>) {
         const new_delay = parseFloat(ev.target.value);
@@ -281,6 +282,13 @@ export function GamePreferences(): JSX.Element {
                           })}
                 </span>
             </PreferenceLine>
+
+            <PreferenceLine
+                title={_("Scroll to navigate")}
+                description={_("Scroll mousewheel to navigate moves on the game page")}
+            >
+                <Toggle checked={scroll_to_navigate} onChange={setScrollToNavigate} />
+            </PreferenceLine>
         </div>
     );
 }