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 7a143e7df0..6450686b4f 100644 --- a/src/views/Play/CustomGames.styl +++ b/src/views/Play/CustomGames.styl @@ -22,12 +22,62 @@ align-items: stretch; justify-content: center; box-sizing: border-box; + + .header-container { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5em 0; + border-bottom: 1px solid #ccc; + + .header-title { + margin: 0; + font-size: 1.5em; + flex-grow: 1; + } + + .toggle-container { + cursor: pointer; + display: flex; + align-items: center; + gap: 0.2em; + .toggle-indicator{ + background: none; + border: none; + font-size: 0.8em; + padding: 0; + line-height: 1; + } + + .toggle-label { + font-size: 0.9em; + color: #666; + } + } + } + + + // 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 */ + } + + .seek-graph-container.visible { + .seek-graph-container.visible { + clip-path: none; /* Restore visibility */ + 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 4672aadb5d..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,6 +75,12 @@ export function CustomGames(): JSX.Element { const canvas: HTMLCanvasElement = React.useMemo(() => allocateCanvasOrError(), []); const seekgraph = React.useRef(); + const [seekGraphVisible, setSeekGraphVisible] = usePreference("show-seek-graph"); + + const toggleSeekGraph = () => { + setSeekGraphVisible(!seekGraphVisible); + }; + // Used to not change the challenge list while they are trying to point the mouse at it const [freeze_challenge_list, setFreezeChallengeList] = React.useState(false); @@ -463,9 +470,32 @@ export function CustomGames(): JSX.Element { )}
-

{pgettext("Games available to accept", "Available Games")}

+
+

+ {pgettext("Games available to accept", "Available Games")} +

+
+
{seekGraphVisible ? "▼" : "▶"}
+ + {seekGraphVisible + ? pgettext( + "label for button to hide the graph of available challenges vs rank", + "Hide plot", + ) + : pgettext( + "label for button to show the graph of available challenges vs rank", + "Show plot", + )} + +
+
-
+