pretty and visually functional stock and upgraded buttons

bun.lock

@@ -2443,7 +2443,7 @@
 
     "potpack": ["[email protected]", "", {}, "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="],
 
-    "prettier": ["[email protected].1", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="],
+    "prettier": ["[email protected].3", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw=="],
 
     "pretty-bytes": ["[email protected]", "", {}, "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ=="],
 
@@ -3247,6 +3247,8 @@
 
     "yaml-language-server/lodash": ["[email protected]", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
 
+    "yaml-language-server/prettier": ["[email protected]", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg=="],
+
     "yaml-language-server/request-light": ["[email protected]", "", {}, "sha512-3Zjgh+8b5fhRJBQZoy+zbVKpAQGLyka0MPgW3zruTF4dFFJ8Fqcfu9YsAvi/rvdcaTeWG3MkbZv4WKxAn/84Lg=="],
 
     "yaml-language-server/yaml": ["[email protected]", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ=="],

packages/website-ue/src/components/Button/index.module.css

@@ -10,12 +10,28 @@
   border: none;
 
   font-family: var(--font-family-regular);
-  font-size: var(--font-size-minor);
+  font-size: 0.75rem;
   color: var(--gray-1);
   font-weight: var(--weight-medium);
 
   cursor: pointer;
 
+  &[data-size="minor"] {
+    font-size: 0.75rem;
+  }
+
+  &[data-array="true"] {
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
   svg,
   img {
     width: 1em;
@@ -33,6 +49,7 @@
   &[data-variant="surface"],
   &[data-variant="soft"] {
     background-color: var(--accent-3);
+    color: var(--gray-12);
   }
 
   &[data-variant="inverted"] {

packages/website-ue/src/components/Button/index.tsx

@@ -7,7 +7,8 @@ export interface ButtonProps extends ComponentProps<"button"> {
   color?: Color;
   radius?: `${1 | 2 | 3}` | "max";
   variant?: "solid" | "surface" | "soft" | "inverted" | "ghost" | "outline";
-  size?: "regular";
+  size?: "regular" | "minor";
+  array?: boolean;
 }
 
 export const LIGHT_TEXT_COLORS = new Set<Color>([
@@ -32,6 +33,7 @@ export function Button({
   style,
   radius = "max",
   size = "regular",
+  array = false,
   ...props
 }: ButtonProps) {
   return (
@@ -42,6 +44,7 @@ export function Button({
       data-light-text={variant === "solid"}
       data-radius={radius}
       data-size={size}
+      data-array={array}
       {...props}
     />
   );

packages/website-ue/src/components/IconButton/index.module.css

@@ -2,6 +2,4 @@
   padding: var(--space-3);
 
   aspect-ratio: 1 / 1;
-
-  font-size: var(--font-size-major);
 }

packages/website-ue/src/components/TankopediaLoadout/index.module.css

@@ -6,7 +6,11 @@
   .header {
     display: flex;
     align-items: center;
-    gap: var(--space-3);
+    gap: var(--space-4);
+
+    .upgrade-buttons {
+      display: flex;
+    }
   }
 
   .equipment {
@@ -33,16 +37,6 @@
 
             font-size: var(--space-5);
 
-            &:first-child {
-              border-top-right-radius: 0;
-              border-bottom-right-radius: 0;
-            }
-
-            &:last-child {
-              border-top-left-radius: 0;
-              border-bottom-left-radius: 0;
-            }
-
             &[data-selected="true"] {
               z-index: 1;
             }

packages/website-ue/src/components/TankopediaLoadout/index.tsx

@@ -33,6 +33,8 @@ import { Price } from "../Price";
 import { Section } from "../Section";
 import { Text } from "../Text";
 import styles from "./index.module.css";
+import { IconButton } from "../IconButton";
+import { Tank } from "@protos/tank";
 
 export function TankopediaLoadout() {
   const tank = useProtagonist();
@@ -164,6 +166,7 @@ function EquipmentOption({
       variant={isSelected ? "surface" : "soft"}
       data-selected={isSelected}
       radius="1"
+      array
       className={styles.slot}
       onClick={() => {
         Tankopedia.mutate((draft) => {
@@ -183,45 +186,72 @@ function EquipmentOption({
 function Modules() {
   const strings = useStrings();
   const tank = useProtagonist();
+  const upgrades = Tankopedia.use((state) => state.protagonist.upgrades);
+  const alternates = Tankopedia.use((state) => state.protagonist.alternates);
+  const isStock = useMemo(() => {
+    return tank.tank!.upgrade_lines.every((line) => {
+      if (isAlternativeLine(line.name)) return true;
+      return upgrades[line.name] === 0;
+    });
+  }, [upgrades]);
+  const isUpgraded = useMemo(() => {
+    return tank.tank!.upgrade_lines.every((line) => {
+      if (isAlternativeLine(line.name)) return true;
+
+      return (
+        upgrades[line.name] === line.stages.length - 1 ||
+        (line.name in alternates && alternates[line.name])
+      );
+    });
+  }, [upgrades]);
 
   return (
     <div className={styles.section}>
       <div className={styles.header}>
         <Heading size="4">{strings.tanks.loadout.modules}</Heading>
 
-        <Link
-          onClick={() => {
-            Tankopedia.mutate((draft) => {
-              for (const line of tank.tank!.upgrade_lines) {
-                if (isAlternativeLine(line.name)) continue;
+        <div className={styles["upgrade-buttons"]}>
+          <IconButton
+            variant={isStock ? "solid" : "soft"}
+            size="minor"
+            array
+            onClick={() => {
+              Tankopedia.mutate((draft) => {
+                for (const line of tank.tank!.upgrade_lines) {
+                  if (isAlternativeLine(line.name)) continue;
 
-                draft.protagonist.upgrades[line.name] = 0;
-                draft.protagonist.alternates[line.name] = false;
-              }
-            });
-          }}
-          color="gray"
-        >
-          <DoubleArrowLeftIcon />
-        </Link>
-
-        <Link
-          onClick={() => {
-            Tankopedia.mutate((draft) => {
-              for (const line of tank.tank!.upgrade_lines) {
-                draft.protagonist.upgrades[line.name] = line.stages.length - 1;
-
-                if (isAlternativeLine(line.name)) {
-                  const original = originalLineName(line.name)!;
-                  draft.protagonist.alternates[original] = true;
+                  draft.protagonist.upgrades[line.name] = 0;
+                  draft.protagonist.alternates[line.name] = false;
                 }
-              }
-            });
-          }}
-          color="gray"
-        >
-          <DoubleArrowRightIcon />
-        </Link>
+              });
+            }}
+            color="gray"
+          >
+            <DoubleArrowLeftIcon />
+          </IconButton>
+
+          <IconButton
+            variant={isUpgraded ? "solid" : "soft"}
+            size="minor"
+            array
+            onClick={() => {
+              Tankopedia.mutate((draft) => {
+                for (const line of tank.tank!.upgrade_lines) {
+                  draft.protagonist.upgrades[line.name] =
+                    line.stages.length - 1;
+
+                  if (isAlternativeLine(line.name)) {
+                    const original = originalLineName(line.name)!;
+                    draft.protagonist.alternates[original] = true;
+                  }
+                }
+              });
+            }}
+            color="gray"
+          >
+            <DoubleArrowRightIcon />
+          </IconButton>
+        </div>
       </div>
 
       <div className={styles.lines}>