diff --git a/src/views/Play/CustomGames.styl b/src/views/Play/CustomGames.styl index 7a143e7df0..f866a90286 100644 --- a/src/views/Play/CustomGames.styl +++ b/src/views/Play/CustomGames.styl @@ -22,6 +22,54 @@ 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; + } + } + } + + + .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; diff --git a/src/views/Play/CustomGames.tsx b/src/views/Play/CustomGames.tsx index 4672aadb5d..82f0d02505 100644 --- a/src/views/Play/CustomGames.tsx +++ b/src/views/Play/CustomGames.tsx @@ -74,6 +74,12 @@ export function CustomGames(): JSX.Element { const canvas: HTMLCanvasElement = React.useMemo(() => allocateCanvasOrError(), []); const seekgraph = React.useRef(); + const [seekGraphVisible, setSeekGraphVisible] = React.useState(true); + + const toggleSeekGraph = () => { + setSeekGraphVisible((prev) => !prev); + }; + // 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 +469,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", + )} + +
+
-
+