From 909add7293d3921604b8c50ae02f0cee668a91ea Mon Sep 17 00:00:00 2001
From: GreenAsJade <github@gregories.net>
Date: Sun, 24 Nov 2024 12:54:45 +1030
Subject: [PATCH] Save their preference about showing the seek graph

---
 src/lib/preferences.ts          | 1 +
 src/views/Play/CustomGames.styl | 6 ++++--
 src/views/Play/CustomGames.tsx  | 5 +++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/lib/preferences.ts b/src/lib/preferences.ts
index 57352e132b..956fe6b3bb 100644
--- a/src/lib/preferences.ts
+++ b/src/lib/preferences.ts
@@ -109,6 +109,7 @@ export const defaults = {
     "show-move-numbers": true,
     "show-offline-friends": true,
     "show-ratings-in-rating-grid": false,
+    "show-seek-graph": false,
 
     "show-tournament-indicator": true, // implicitly on desktop
     "show-tournament-indicator-on-mobile": false,
diff --git a/src/views/Play/CustomGames.styl b/src/views/Play/CustomGames.styl
index f866a90286..6450686b4f 100644
--- a/src/views/Play/CustomGames.styl
+++ b/src/views/Play/CustomGames.styl
@@ -59,6 +59,8 @@
     }
 
 
+    // This shenanigans is needed to ensure that the canvas of the seek graph
+    // remains rendered, so we don't loose the reference we have to it.
     .seek-graph-container.hidden {
             clip-path: inset(0 100% 100% 0); /* Clip the entire element */
             position: absolute; /* Remove it from the layout */
@@ -70,12 +72,12 @@
             position: static; /* Return to normal layout */
         }
     }
-    
+
     .Modal {
         border: none;
         box-shadow: none;
     }
-    
+
     .ChallengeModal {
         width: 100%;
         max-height: unset;
diff --git a/src/views/Play/CustomGames.tsx b/src/views/Play/CustomGames.tsx
index 431ed6153e..a31a69525d 100644
--- a/src/views/Play/CustomGames.tsx
+++ b/src/views/Play/CustomGames.tsx
@@ -20,6 +20,7 @@ import * as preferences from "@/lib/preferences";
 import * as player_cache from "@/lib/player_cache";
 import * as rengo_utils from "@/lib/rengo_utils";
 
+import { usePreference } from "@/lib/preferences";
 import { del } from "@/lib/requests";
 import { alert } from "@/lib/swal_config";
 import { OgsResizeDetector } from "@/components/OgsResizeDetector";
@@ -74,10 +75,10 @@ export function CustomGames(): JSX.Element {
     const canvas: HTMLCanvasElement = React.useMemo(() => allocateCanvasOrError(), []);
     const seekgraph = React.useRef<SeekGraph>();
 
-    const [seekGraphVisible, setSeekGraphVisible] = React.useState(false);
+    const [seekGraphVisible, setSeekGraphVisible] = usePreference("show-seek-graph");
 
     const toggleSeekGraph = () => {
-        setSeekGraphVisible((prev) => !prev);
+        setSeekGraphVisible(!seekGraphVisible);
     };
 
     // Used to not change the challenge list while they are trying to point the mouse at it