From 0dedf45552d0f6fe30daef8f55f06e41080c88d3 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 17 Mar 2022 01:25:35 +0200
Subject: [PATCH] Unify ranked/scrim LFGGroupSelector buttons

---
 app/components/play/GroupCard.tsx        |  2 +-
 app/components/play/LFGGroupSelector.tsx | 56 ++++++++++++++++++++----
 app/core/play/utils.ts                   |  8 ++--
 app/routes/play/index.tsx                |  2 +-
 app/styles/global.css                    |  4 ++
 app/styles/play.css                      | 28 +++++++++++-
 6 files changed, 82 insertions(+), 18 deletions(-)

diff --git a/app/components/play/GroupCard.tsx b/app/components/play/GroupCard.tsx
index 1366e4804..6edb7e8f4 100644
--- a/app/components/play/GroupCard.tsx
+++ b/app/components/play/GroupCard.tsx
@@ -60,7 +60,7 @@ export function GroupCard({
       <div className="play__card">
         {typeof ranked === "boolean" && (
           <div className={clsx("play__card__ranked-text", { ranked })}>
-            {ranked ? "Ranked" : "Unranked"}
+            {ranked ? "Ranked" : "Scrim"}
           </div>
         )}
         <GroupMembers members={group.members} />
diff --git a/app/components/play/LFGGroupSelector.tsx b/app/components/play/LFGGroupSelector.tsx
index 893110d5e..3be582e80 100644
--- a/app/components/play/LFGGroupSelector.tsx
+++ b/app/components/play/LFGGroupSelector.tsx
@@ -10,13 +10,13 @@ const OPTIONS = [
     type: "VERSUS-RANKED",
     image: "rotations",
     text: "Versus",
-    explanation: "Private Battle (ranked)",
+    explanation: "Ranked",
   },
   {
     type: "VERSUS-UNRANKED",
     image: "rotations",
     text: "Versus",
-    explanation: "Private Battle (unranked)",
+    explanation: "Scrim",
   },
   {
     type: "TWIN",
@@ -32,27 +32,51 @@ const OPTIONS = [
   },
 ] as const;
 
+type Type = "VERSUS-RANKED" | "VERSUS-UNRANKED" | "TWIN" | "QUAD";
+
 export function LFGGroupSelector({
   counts,
 }: {
   counts: PlayFrontPageLoader["counts"];
 }) {
-  const [type, setType] = React.useState("VERSUS-RANKED");
+  const [selectedType, setSelectedType] = React.useState<Type>("VERSUS-RANKED");
+
+  const count = (
+    type: "VERSUS-RANKED" | "VERSUS-UNRANKED" | "TWIN" | "QUAD"
+  ) => {
+    switch (type) {
+      case "VERSUS-RANKED":
+      case "VERSUS-UNRANKED":
+        return counts["VERSUS"];
+      case "QUAD":
+        return counts["QUAD"];
+      case "TWIN":
+        return counts["TWIN"];
+    }
+  };
 
   return (
     <>
-      <input type="hidden" name="type" value={type} />
+      <input type="hidden" name="type" value={selectedType} />
       <RadioGroup
         className="play__type-radio-group"
-        value={type}
-        onChange={setType}
+        value={selectedType}
+        onChange={setSelectedType}
       >
         {OPTIONS.map((option, i) => {
           return (
-            <RadioGroup.Option key={i} value={option.type}>
+            <RadioGroup.Option
+              key={i}
+              className={clsx({ "mt-3": i > 1 })}
+              value={option.type}
+            >
               {({ checked }) => (
                 <div
-                  className={clsx("play__type-radio-group__item", { checked })}
+                  className={clsx("play__type-radio-group__item", {
+                    checked,
+                    "top-half": i === 0,
+                    "bottom-half": i === 1,
+                  })}
                 >
                   <label className="play__type-radio-group__label">
                     {option.text}
@@ -67,12 +91,26 @@ export function LFGGroupSelector({
                     <span
                       className={clsx("play__type-radio-group__label__count", {
                         checked,
+                        "scooted-over": i === 0,
+                        invisible: i === 1,
                       })}
                     >
                       <UsersIcon className="play__type-radio-group__label__icon" />
-                      {counts[option.type]}
+                      <span
+                        className={clsx("z-10", {
+                          "play__forced-black-number":
+                            option.type === "VERSUS-RANKED" &&
+                            selectedType === "VERSUS-UNRANKED",
+                          "play__forced-white-number":
+                            option.type === "VERSUS-RANKED" &&
+                            selectedType === "VERSUS-RANKED",
+                        })}
+                      >
+                        {count(option.type)}
+                      </span>
                     </span>
                   </label>
+                  {/* TODO: remove */}
                   <img
                     className={clsx("play__type-radio-group__image", {
                       checked,
diff --git a/app/core/play/utils.ts b/app/core/play/utils.ts
index 129c442c7..380c3bd2f 100644
--- a/app/core/play/utils.ts
+++ b/app/core/play/utils.ts
@@ -271,15 +271,13 @@ export function countGroups(
         acc.QUAD += memberCount;
       } else if (group.type === "TWIN" && memberCount !== 2) {
         acc.TWIN += memberCount;
-      } else if (group.type === "VERSUS" && group.ranked) {
-        acc["VERSUS-RANKED"] += memberCount;
-      } else if (group.type === "VERSUS" && !group.ranked) {
-        acc["VERSUS-UNRANKED"] += memberCount;
+      } else if (group.type === "VERSUS") {
+        acc["VERSUS"] += memberCount;
       }
 
       return acc;
     },
-    { TWIN: 0, QUAD: 0, "VERSUS-RANKED": 0, "VERSUS-UNRANKED": 0 }
+    { TWIN: 0, QUAD: 0, VERSUS: 0 }
   );
 }
 
diff --git a/app/routes/play/index.tsx b/app/routes/play/index.tsx
index 801631180..9e056d6f9 100644
--- a/app/routes/play/index.tsx
+++ b/app/routes/play/index.tsx
@@ -95,7 +95,7 @@ export const action: ActionFunction = async ({ request, context }) => {
 };
 
 export interface PlayFrontPageLoader {
-  counts: Record<"TWIN" | "QUAD" | "VERSUS-RANKED" | "VERSUS-UNRANKED", number>;
+  counts: Record<"TWIN" | "QUAD" | "VERSUS", number>;
   ownMMR?: {
     value: number;
     topX?: number;
diff --git a/app/styles/global.css b/app/styles/global.css
index 5ab8a1007..d4e5ed7c8 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -651,3 +651,7 @@ hr {
 .rounded {
   border-radius: var(--rounded);
 }
+
+.z-10 {
+  z-index: 10;
+}
diff --git a/app/styles/play.css b/app/styles/play.css
index ebd6b78bd..715869902 100644
--- a/app/styles/play.css
+++ b/app/styles/play.css
@@ -19,7 +19,6 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: var(--s-3);
 }
 
 .play__type-radio-group__item {
@@ -30,9 +29,22 @@
   margin: 0 auto;
   background-color: var(--bg-lighter-transparent);
   border-radius: var(--rounded);
-  cursor: pointer;
 }
 
+.play__type-radio-group__item.top-half {
+  border-radius: 0;
+  border-start-end-radius: var(--rounded);
+  border-start-start-radius: var(--rounded);
+}
+
+/* stylelint-disable */
+.play__type-radio-group__item.bottom-half {
+  border-radius: 0;
+  border-end-end-radius: var(--rounded);
+  border-end-start-radius: var(--rounded);
+}
+/* stylelint-enable */
+
 .play__type-radio-group__item:hover {
   background-color: var(--theme-transparent);
 }
@@ -75,6 +87,10 @@
   margin-inline-start: auto;
 }
 
+.play__type-radio-group__label__count.scooted-over {
+  margin-block-end: -30px;
+}
+
 .play__type-radio-group__label__count.checked {
   color: var(--button-text-transparent);
 }
@@ -83,6 +99,14 @@
   width: 1rem;
 }
 
+.play__forced-black-number {
+  color: var(--button-text-transparent);
+}
+
+.play__forced-white-number {
+  color: var(--text-lighter);
+}
+
 .play__type-radio-group__image {
   width: 2rem;
   height: 2rem;