stock/upgrade buttons

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

@@ -14,7 +14,9 @@
   color: var(--gray-1);
   font-weight: var(--weight-medium);
 
-  .svg {
+  cursor: pointer;
+
+  svg {
     width: 1em;
     height: 1em;
   }
@@ -32,6 +34,18 @@
     background-color: var(--accent-3);
   }
 
+  &[data-variant="inverted"] {
+    background-color: var(--accent-12);
+    color: var(--accent-1);
+  }
+
+  &[data-variant="ghost"] {
+    background: none;
+    color: var(--accent-11);
+
+    padding: 0;
+  }
+
   &[data-variant="surface"] {
     outline: var(--space-1) solid var(--accent-6);
   }

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

@@ -6,7 +6,8 @@ import styles from "./index.module.css";
 export interface ButtonProps extends ComponentProps<"button"> {
   color?: Color;
   radius?: `${1 | 2 | 3}` | "max";
-  variant?: "solid" | "surface" | "soft";
+  variant?: "solid" | "surface" | "soft" | "inverted" | "ghost";
+  size?: "regular";
 }
 
 export const LIGHT_TEXT_COLORS = new Set<Color>([
@@ -30,6 +31,7 @@ export function Button({
   variant = "solid",
   style,
   radius = "max",
+  size = "regular",
   ...props
 }: ButtonProps) {
   return (
@@ -39,6 +41,7 @@ export function Button({
       data-variant={variant}
       data-light-text={variant === "solid"}
       data-radius={radius}
+      data-size={size}
       {...props}
     />
   );

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

@@ -3,5 +3,5 @@
 
   aspect-ratio: 1 / 1;
 
-  font-size: 2em;
+  font-size: var(--font-size-regular);
 }

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

@@ -1,42 +1,54 @@
-.lines {
+.section {
   display: flex;
   flex-direction: column;
+  gap: var(--space-4);
 
-  gap: var(--space-3);
-
-  .line {
+  .header {
     display: flex;
     align-items: center;
+    gap: var(--space-3);
+  }
+
+  .lines {
+    display: flex;
+    flex-direction: column;
 
     gap: var(--space-3);
 
-    .stage {
-      position: relative;
+    .line {
+      display: flex;
+      align-items: center;
 
-      padding: var(--space-3);
+      gap: var(--space-3);
 
-      font-size: 2em;
+      .stage {
+        position: relative;
 
-      .icon {
-        width: 1em;
-        height: 1em;
+        padding: var(--space-3);
 
-        padding: var(--space-3) 0;
+        font-size: 2em;
 
-        transform: translate(var(--space-1), calc(-1 * var(--space-1)));
-      }
+        .icon {
+          width: 1em;
+          height: 1em;
 
-      .tier {
-        position: absolute;
-        left: var(--space-2);
-        top: var(--space-2);
-      }
+          padding: var(--space-3) 0;
 
-      .price {
-        position: absolute;
-        left: 50%;
-        bottom: var(--space-2);
-        transform: translateX(-50%);
+          transform: translate(var(--space-1), calc(-1 * var(--space-1)));
+        }
+
+        .tier {
+          position: absolute;
+          left: var(--space-2);
+          top: var(--space-2);
+        }
+
+        .price {
+          position: absolute;
+          left: 50%;
+          bottom: var(--space-2);
+          transform: translateX(-50%);
+        }
       }
     }
   }

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

@@ -3,6 +3,7 @@ import { Grade } from "@protos/game/proto/legacy/blitz_static_standard_grades_en
 import type { StandardPrice } from "@protos/game/proto/legacy/blitz_static_standard_price";
 import type { UpgradeLine } from "@protos/game/proto/legacy/blitz_static_tank_upgrade_line";
 import type { StageParameters } from "@protos/game/proto/legacy/blitz_static_tank_upgrade_single_stage";
+import { DoubleArrowDownIcon, DoubleArrowUpIcon } from "@radix-ui/react-icons";
 import { useMemo } from "react";
 import {
   alternativeLines,
@@ -15,19 +16,65 @@ import { useUpgradePreset } from "../../hooks/useUpgradePreset";
 import { Tankopedia } from "../../stores/tankopedia";
 import { Button } from "../Button";
 import { Heading } from "../Heading";
+import { IconButton } from "../IconButton";
 import { Price } from "../Price";
 import { Section } from "../Section";
 import { Text } from "../Text";
 import styles from "./index.module.css";
 
 export function TankopediaLoadout() {
-  const strings = useStrings();
+  return (
+    <Section>
+      <Modules />
+    </Section>
+  );
+}
 
+function Modules() {
+  const strings = useStrings();
   const tank = useProtagonist();
 
   return (
-    <Section>
-      <Heading size="3">{strings.tanks.loadout.modules}</Heading>
+    <div className={styles.section}>
+      <div className={styles.header}>
+        <Heading size="4">{strings.tanks.loadout.modules}</Heading>
+
+        <IconButton
+          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="tomato"
+          variant="ghost"
+        >
+          <DoubleArrowDownIcon />
+        </IconButton>
+
+        <IconButton
+          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="jade"
+          variant="ghost"
+        >
+          <DoubleArrowUpIcon />
+        </IconButton>
+      </div>
 
       <div className={styles.lines}>
         {tank.tank!.upgrade_lines.map((line) => (
@@ -38,7 +85,7 @@ export function TankopediaLoadout() {
           />
         ))}
       </div>
-    </Section>
+    </div>
   );
 }
 

packages/website-ue/src/pages/[...locale]/tanks/[slug]/index.astro

@@ -2,6 +2,7 @@
 import "@radix-ui/colors/violet-dark.css";
 import { api } from "../../../../api/dynamic";
 import { mixStaticPaths } from "../../../../astro/mixStaticPaths";
+import ColorScale from "../../../../components/ColorScale.astro";
 import BaseLayout from "../../../../layouts/BaseLayout.astro";
 import { getStaticPaths as _getStaticPaths } from "../index.astro";
 import { Page } from "./_index";
@@ -19,5 +20,8 @@ const { id, locale } = Astro.props;
 ---
 
 <BaseLayout {locale} accent="violet">
+  <ColorScale color="tomato" />
+  <ColorScale color="jade" />
+
   <Page {locale} {id} client:load />
 </BaseLayout>