Merge pull request #2933 from GreenAsJade/rank_range_selector_headers

Put Weaker/Stronger headers on the QuickMatch rank range selectors
online-go · Jan 29, 2025 · 368d1fd · 368d1fd
2 parents 2aa5bbf + 39ec945
commit 368d1fd
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 11 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,8 @@
 {
     "stylusSupremacy.ignoreFiles": ["src/ogs.styl"],
     "stylusSupremacy.tabStopChar": "    ",
-    "stylusSupremacy.alwaysUseExtends": true
+    "stylusSupremacy.alwaysUseExtends": true,
+    "[stylus]": {
+        "editor.formatOnSave": false
+    }
 }
diff --git a/src/ogs.styl b/src/ogs.styl
@@ -469,6 +469,8 @@ accessible.quickmatch-player-waiting          = accessible.indicate-online
     --success: light.success;
     --info: light.info;
     --reject: light.reject;
+    --select-header-bg: light.shade5;
+    --select-header-fg: light.fg;
 }
 
 body.accessible {
@@ -477,13 +479,19 @@ body.accessible {
     --success: accessible.success;
     --info: accessible.info;
     --reject: accessible.reject;
+    --select-header-bg: accessible.shade4;
+    --select-header-fg: accessible.shade1;
 }
 body.dark {
     --primary: dark.primary;
     --danger: dark.danger;
     --success: dark.success;
     --info: dark.info;
     --reject: dark.reject;
+    --bg: dark.bg;
+    --fg: dark.fg;
+    --select-header-bg: dark.shade4;
+    --select-header-fg: dark.shade1;
 }
 
 

diff --git a/src/views/Play/QuickMatch.tsx b/src/views/Play/QuickMatch.tsx
@@ -40,7 +40,7 @@ import { LoadingButton } from "@/components/LoadingButton";
 import { challengeComputer, ChallengeModalConfig } from "@/components/ChallengeModal";
 import { socket } from "@/lib/sockets";
 import { Link } from "react-router-dom";
-import Select from "react-select";
+import Select, { CSSObjectWithLabel, GroupBase, StylesConfig } from "react-select";
 import { SPEED_OPTIONS } from "./SPEED_OPTIONS";
 import { useHaveActiveGameSearch } from "./hooks";
 import { openPlayPageHelp } from "./PlayPageHelp";
@@ -136,6 +136,21 @@ const select_styles = {
         ...css,
         width: "20rem",
     }),
+    groupHeading: (base: CSSObjectWithLabel) => ({
+        ...base,
+        // ...it's not perfect: there's a small gap at the top where we see
+        // the numbers scroll past.
+        color: "var(--select-header-fg)",
+        backgroundColor: "var(--select-header-bg)",
+        fontSize: "0.9rem",
+        fontStyle: "italic",
+        padding: "0.2rem",
+        position: "sticky",
+        top: 0,
+        margin: "0rem 0rem 0.1rem 0rem",
+        // This is disguising the gap at the top
+        boxShadow: "0px -5px 20px 10px var(--select-header-bg)",
+    }),
 };
 
 export function QuickMatch(): React.ReactElement {
@@ -754,7 +769,19 @@ export function QuickMatch(): React.ReactElement {
                         </span>
                         <Select
                             classNamePrefix="ogs-react-select"
-                            styles={select_styles}
+                            styles={
+                                {
+                                    ...select_styles,
+                                    menu: (base) => ({
+                                        ...base,
+                                        width: "120",
+                                    }),
+                                } as StylesConfig<
+                                    OptionWithDescription,
+                                    false,
+                                    GroupBase<OptionWithDescription>
+                                >
+                            }
                             isSearchable={false}
                             value={game_clock_options.find((o) => o.value === game_clock)}
                             menuPlacement="auto"
@@ -767,7 +794,9 @@ export function QuickMatch(): React.ReactElement {
                                 }
                             }}
                             options={game_clock_options}
-                            components={{ Option: RenderOptionWithDescription }}
+                            components={{
+                                Option: RenderOptionWithDescription,
+                            }}
                         />
                     </div>
                     <div className="speed-options">
@@ -910,7 +939,19 @@ export function QuickMatch(): React.ReactElement {
                         <span>{_("Handicap")}</span>
                         <Select
                             classNamePrefix="ogs-react-select"
-                            styles={select_styles}
+                            styles={
+                                {
+                                    ...select_styles,
+                                    menu: (base) => ({
+                                        ...base,
+                                        width: "120",
+                                    }),
+                                } as StylesConfig<
+                                    OptionWithDescription,
+                                    false,
+                                    GroupBase<OptionWithDescription>
+                                >
+                            }
                             value={handicap_options.find((o) => o.value === handicaps)}
                             isSearchable={false}
                             minMenuHeight={400}
@@ -947,12 +988,19 @@ export function QuickMatch(): React.ReactElement {
                                 value={lower_rank_diff_options.find(
                                     (o) => o.value === lower_rank_diff.toString(),
                                 )}
-                                styles={{
-                                    menu: (base) => ({
-                                        ...base,
-                                        width: "120",
-                                    }),
-                                }}
+                                styles={
+                                    {
+                                        ...select_styles,
+                                        menu: (base) => ({
+                                            ...base,
+                                            width: "120",
+                                        }),
+                                    } as StylesConfig<
+                                        OptionWithDescription,
+                                        false,
+                                        GroupBase<OptionWithDescription>
+                                    >
+                                }
                                 isSearchable={false}
                                 isDisabled={automatch_search_active}
                                 menuPlacement="auto"
@@ -963,6 +1011,10 @@ export function QuickMatch(): React.ReactElement {
                                 }}
                                 options={[
                                     {
+                                        label: pgettext(
+                                            "A word that means this is a list of ranks that are weaker than the player's rank",
+                                            "Weaker",
+                                        ),
                                         options: lower_rank_diff_options,
                                     },
                                 ]}
@@ -978,6 +1030,19 @@ export function QuickMatch(): React.ReactElement {
                                 value={upper_rank_diff_options.find(
                                     (o) => o.value === upper_rank_diff.toString(),
                                 )}
+                                styles={
+                                    {
+                                        ...select_styles,
+                                        menu: (base) => ({
+                                            ...base,
+                                            width: "120",
+                                        }),
+                                    } as StylesConfig<
+                                        OptionWithDescription,
+                                        false,
+                                        GroupBase<OptionWithDescription>
+                                    >
+                                }
                                 isSearchable={false}
                                 isDisabled={automatch_search_active}
                                 menuPlacement="auto"
@@ -988,6 +1053,10 @@ export function QuickMatch(): React.ReactElement {
                                 }}
                                 options={[
                                     {
+                                        label: pgettext(
+                                            "A word that means this is a list of ranks that are stronger than the player's rank",
+                                            "Stronger",
+                                        ),
                                         options: upper_rank_diff_options,
                                     },
                                 ]}