ui shit

packages/core/src/blitzkit/createDefaultSkills.ts

@@ -1,12 +1,13 @@
-import { SkillDefinitions } from "..";
+import { SkillDefinitions } from "@blitzkit/protos";
 import { permanentSkills } from "../blitz/permanentSkills";
+import { MAX_SKILL_LEVEL } from "../config/skills";
 
 export function createDefaultSkills(skillDefinitions: SkillDefinitions) {
   const skills: Record<string, number> = {};
 
   Object.values(skillDefinitions.classes).forEach((tankSkills) => {
     tankSkills.skills.forEach((skill) => {
-      skills[skill] = permanentSkills.includes(skill) ? 7 : 0;
+      skills[skill] = permanentSkills.includes(skill) ? MAX_SKILL_LEVEL : 0;
     });
   });
 

packages/core/src/blitzkit/tankDefinitions/constants.ts

@@ -43,19 +43,6 @@ export const TANK_ICONS_COLLECTOR: Record<TankClass, string> = {
   [TankClass.TANK_CLASS_HEAVY]: "https://i.imgur.com/8xRf3nc.png",
 };
 export const TIERS = times(10, (index) => index + 1);
-export const TIER_ROMAN_NUMERALS: Record<number, string> = {
-  1: "I",
-  2: "II",
-  3: "III",
-  4: "IV",
-  5: "V",
-  6: "VI",
-  7: "VII",
-  8: "VIII",
-  9: "IX",
-  10: "X",
-  11: "XI",
-};
 
 export const flags: Record<string, string> = {
   ussr: "<:ussr:1218421042033197197>",

packages/core/src/config/index.ts

@@ -1,3 +1,4 @@
 export * from "./gunTypeOrder";
+export * from "./skills";
 export * from "./tankClassOrder";
 export * from "./treeTypeOrder";

packages/core/src/config/skills.ts

@@ -0,0 +1 @@
+export const MAX_SKILL_LEVEL = 7;

packages/i18n/strings/en.json

@@ -143,6 +143,9 @@
       "modules": "Modules",
       "equipment": "Equipment",
       "shells": "Shells",
+      "clear": "Clear",
+      "maximize": "Maximize",
+      "skills": "Crew skills",
       "alternative": "Alt"
     },
 

packages/website/src/components/Compare/CompareTable.tsx

@@ -1,4 +1,9 @@
-import { alias, availableProvisions, permanentSkills } from "@blitzkit/core";
+import {
+  alias,
+  availableProvisions,
+  MAX_SKILL_LEVEL,
+  permanentSkills,
+} from "@blitzkit/core";
 import { checkConsumableProvisionInclusivity } from "@blitzkit/core/src/blitzkit/checkConsumableProvisionInclusivity";
 import { ComponentPlaceholderIcon } from "@radix-ui/react-icons";
 import {
@@ -153,7 +158,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                       onClick={() => {
                         CompareEphemeral.mutate((draft) => {
                           Object.keys(draft.crewSkills).forEach((skill) => {
-                            draft.crewSkills[skill] = 7;
+                            draft.crewSkills[skill] = MAX_SKILL_LEVEL;
                           });
                         });
                       }}

packages/website/src/components/CrewSkillManager.tsx

@@ -1,4 +1,9 @@
-import { alias, permanentSkills, romanize } from "@blitzkit/core";
+import {
+  alias,
+  MAX_SKILL_LEVEL,
+  permanentSkills,
+  romanize,
+} from "@blitzkit/core";
 import { Flex } from "@radix-ui/themes";
 import { api } from "../api/dynamic";
 import { GenericTankComponentButton } from "./ModuleButtons/GenericTankComponentButton";
@@ -34,10 +39,10 @@ export function CrewSkillManager({
                   const draft = { ...skillLevels };
 
                   if (event.shiftKey) {
-                    draft[skill] = draft[skill] === 0 ? 7 : 0;
+                    draft[skill] = draft[skill] === 0 ? MAX_SKILL_LEVEL : 0;
                   } else {
                     draft[skill] = level - 1;
-                    if (draft[skill] < 0) draft[skill] = 7;
+                    if (draft[skill] < 0) draft[skill] = MAX_SKILL_LEVEL;
                   }
 
                   onChange(draft);

packages/website/src/components/Guesser.tsx

@@ -1,4 +1,4 @@
-import { alias, SEARCH_KEYS, TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { alias, romanize, SEARCH_KEYS } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n";
 import { TankDefinition } from "@blitzkit/protos";
 import {
@@ -163,7 +163,7 @@ export function Guesser() {
                           justify="center"
                         >
                           <Icon width="1em" height="1em" />
-                          {TIER_ROMAN_NUMERALS[result.tier]}
+                          {romanize(result.tier)}
                         </Flex>
                       }
                     />
@@ -215,7 +215,7 @@ export function Guesser() {
                   }}
                 >
                   {literals(strings.website.tools.guess.tier, {
-                    tier: TIER_ROMAN_NUMERALS[tier],
+                    tier: romanize(tier),
                   })}
                 </DropdownMenu.CheckboxItem>
               );

packages/website/src/components/ModuleManager.tsx

@@ -1,4 +1,4 @@
-import { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { romanize } from "@blitzkit/core";
 import type {
   EngineDefinition,
   GunDefinition,
@@ -42,7 +42,7 @@ export function ModuleManager({
     <Flex gap="1" wrap="wrap">
       <ModuleButton
         module="turret"
-        discriminator={TIER_ROMAN_NUMERALS[modules.turret.tier]}
+        discriminator={romanize(modules.turret.tier)}
         onClick={() => setTurretMenuOpen(true)}
       />
 
@@ -71,7 +71,7 @@ export function ModuleManager({
                   <ModuleButton
                     variant="ghost"
                     module="turret"
-                    discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
+                    discriminator={romanize(turret.tier)}
                   />{" "}
                   {unwrap(turret.name!)}
                 </DropdownMenu.RadioItem>
@@ -83,7 +83,7 @@ export function ModuleManager({
 
       <ModuleButton
         module="gun"
-        discriminator={TIER_ROMAN_NUMERALS[modules.gun.tier]}
+        discriminator={romanize(modules.gun.tier)}
         onClick={() => setGunMenuOpen(true)}
       />
 
@@ -111,7 +111,7 @@ export function ModuleManager({
                   <ModuleButton
                     variant="ghost"
                     module="gun"
-                    discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                    discriminator={romanize(gun.tier)}
                   />{" "}
                   {unwrap(gun.name!)}
                 </DropdownMenu.RadioItem>
@@ -123,7 +123,7 @@ export function ModuleManager({
 
       <ModuleButton
         module="engine"
-        discriminator={TIER_ROMAN_NUMERALS[modules.engine.tier]}
+        discriminator={romanize(modules.engine.tier)}
         onClick={() => setEngineMenuOpen(true)}
       />
 
@@ -150,7 +150,7 @@ export function ModuleManager({
                   <ModuleButton
                     variant="ghost"
                     module="engine"
-                    discriminator={TIER_ROMAN_NUMERALS[engine.tier]}
+                    discriminator={romanize(engine.tier)}
                   />{" "}
                   {unwrap(engine.name!)}
                 </DropdownMenu.RadioItem>
@@ -162,7 +162,7 @@ export function ModuleManager({
 
       <ModuleButton
         module="chassis"
-        discriminator={TIER_ROMAN_NUMERALS[modules.track.tier]}
+        discriminator={romanize(modules.track.tier)}
         onClick={() => setTrackMenuOpen(true)}
       />
 
@@ -189,7 +189,7 @@ export function ModuleManager({
                   <ModuleButton
                     variant="ghost"
                     module="chassis"
-                    discriminator={TIER_ROMAN_NUMERALS[track.tier]}
+                    discriminator={romanize(track.tier)}
                   />{" "}
                   {unwrap(track.name!)}
                 </DropdownMenu.RadioItem>

packages/website/src/components/Scroller/index.module.css

@@ -0,0 +1,102 @@
+.scroller {
+  --scroller-curtain-color: var(--gray-1);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+
+  position: relative;
+
+  .content {
+    overflow: auto;
+
+    padding-bottom: var(--space-4);
+
+    transition: scrollbar-color var(--duration-brief);
+    scrollbar-color: transparent transparent;
+
+    &:hover {
+      scrollbar-color: var(--gray-7) var(--gray-3);
+    }
+  }
+
+  &:hover,
+  &:focus-within {
+    .bar-wrapper {
+      opacity: 1;
+    }
+  }
+
+  &[data-orientation="horizontal"] {
+    .curtain {
+      width: min(25%, var(--space-7));
+      height: calc(100% - var(--space-3) - 2 * var(--space-1));
+
+      position: absolute;
+      top: 0;
+
+      &[data-side="start"] {
+        left: 0;
+        background: linear-gradient(
+          90deg,
+          var(--scroller-curtain-color),
+          transparent
+        );
+      }
+
+      &[data-side="end"] {
+        right: 0;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          var(--scroller-curtain-color)
+        );
+      }
+    }
+  }
+
+  &[data-orientation="vertical"] {
+    min-height: 0;
+
+    .content {
+      flex: 1 1 auto;
+      min-height: 0;
+
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      padding-bottom: 0;
+    }
+
+    .curtain {
+      width: calc(100% - var(--space-3) - 2 * var(--space-1));
+      height: min(25%, var(--space-7));
+
+      position: absolute;
+      left: 0;
+
+      &[data-side="start"] {
+        top: 0;
+        background: linear-gradient(
+          180deg,
+          var(--scroller-curtain-color),
+          transparent
+        );
+      }
+
+      &[data-side="end"] {
+        bottom: 0;
+        background: linear-gradient(
+          180deg,
+          transparent,
+          var(--scroller-curtain-color)
+        );
+      }
+    }
+  }
+
+  .curtain {
+    opacity: 0;
+    pointer-events: none;
+  }
+}

packages/website/src/components/Scroller/index.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useRef, type ComponentProps } from "react";
+import { clamp } from "three/src/math/MathUtils.js";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+interface ScrollerProps extends ComponentProps<"div"> {
+  orientation?: "horizontal" | "vertical";
+}
+
+export function Scroller({
+  children,
+  className,
+  orientation = "horizontal",
+  ...props
+}: ScrollerProps) {
+  const content = useRef<HTMLDivElement>(null!);
+  const curtainStart = useRef<HTMLDivElement>(null!);
+  const curtainEnd = useRef<HTMLDivElement>(null!);
+
+  const isHorizontal = orientation === "horizontal";
+
+  useEffect(() => {
+    function syncCurtains() {
+      const maxScroll = isHorizontal
+        ? content.current.scrollWidth - content.current.clientWidth
+        : content.current.scrollHeight - content.current.clientHeight;
+      const scrollPosition = isHorizontal
+        ? content.current.scrollLeft
+        : content.current.scrollTop;
+
+      if (maxScroll <= 0) {
+        curtainStart.current.style.opacity = "0";
+        curtainEnd.current.style.opacity = "0";
+
+        return;
+      }
+
+      const dimension = isHorizontal
+        ? content.current.clientWidth
+        : content.current.clientHeight;
+      const fadeDistance = Math.min(60, dimension * 0.15);
+      const startOpacity = clamp(scrollPosition / fadeDistance, 0, 1);
+      const endOpacity = clamp(
+        (maxScroll - scrollPosition) / fadeDistance,
+        0,
+        1,
+      );
+
+      curtainStart.current.style.opacity = `${startOpacity}`;
+      curtainEnd.current.style.opacity = `${endOpacity}`;
+    }
+
+    syncCurtains();
+
+    window.addEventListener("resize", syncCurtains);
+    content.current.addEventListener("scroll", syncCurtains);
+
+    return () => {
+      window.removeEventListener("resize", syncCurtains);
+      content.current.removeEventListener("scroll", syncCurtains);
+    };
+  }, [orientation]);
+
+  return (
+    <div
+      className={classNames(styles.scroller, className)}
+      {...props}
+      data-orientation={orientation}
+    >
+      <div className={styles.content} ref={content}>
+        {children}
+      </div>
+
+      <div ref={curtainStart} data-side="start" className={styles.curtain} />
+      <div ref={curtainEnd} data-side="end" className={styles.curtain} />
+    </div>
+  );
+}

packages/website/src/components/Section/index.module.css

@@ -1,4 +1,6 @@
 .section {
+  padding: var(--space-5);
+
   display: flex;
   justify-content: center;
 

packages/website/src/components/TankSearch/components/TierFilter.tsx

@@ -1,4 +1,4 @@
-import { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { romanize } from "@blitzkit/core";
 import { Flex, IconButton, Text } from "@radix-ui/themes";
 import { memo } from "react";
 import { awaitableTiers } from "../../../core/awaitables/tiers";
@@ -41,7 +41,7 @@ export const TierFilter = memo(() => {
                 });
               }}
             >
-              <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
+              <Text size="2">{romanize(tier)}</Text>
             </IconButton>
           );
         })}

packages/website/src/components/TankSearch/index.tsx

@@ -1,7 +1,6 @@
 import {
   metaSortTank,
   normalizeBoundingBox,
-  resolveDpm,
   SEARCH_KEYS,
   unionBoundingBox,
 } from "@blitzkit/core";
@@ -44,6 +43,10 @@ export type TankSearchProps = MaybeSkeletonComponentProps & {
   onSelectAll?: (tanks: TankDefinition[]) => void;
 };
 
+function resolveDpm(a: any, b: any) {
+  return 0;
+}
+
 const [gameDefinitions, modelDefinitions, tankDefinitions, tankNames] =
   await Promise.all([
     api.game(),

packages/website/src/components/TankSearchFilters/index.tsx

@@ -1,9 +1,4 @@
-import {
+import { alias, gunTypeOrder, romanize, treeTypeOrder } from "@blitzkit/core";
-  alias,
-  gunTypeOrder,
-  TIER_ROMAN_NUMERALS,
-  treeTypeOrder,
-} from "@blitzkit/core";
 import { tankClassOrder } from "@blitzkit/core/src/config/tankClassOrder";
 import { literals } from "@blitzkit/i18n";
 import locales from "@blitzkit/i18n/locales.json";
@@ -203,7 +198,7 @@ function TiersFilter() {
           <Flex gap="1">
             {tiers.slice(0, MAX_ICONS).map((tier) => (
               <Text size="minor" key={tier}>
-                {TIER_ROMAN_NUMERALS[tier]}
+                {romanize(tier)}
               </Text>
             ))}
 
@@ -239,7 +234,7 @@ function TiersFilter() {
               key={tier}
             >
               {literals(strings.website.common.tank_search.tier, {
-                tier: TIER_ROMAN_NUMERALS[tier],
+                tier: romanize(tier),
               })}
             </DropdownMenu.CheckboxItem>
           );
@@ -620,13 +615,7 @@ function IndividualShellFilter({
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <IconButton
+        <IconButton listChild size="minor" variant="surface" color="gray">
-          listChild
-          size="minor"
-          variant="surface"
-          color="gray"
-          highContrast
-        >
           {shells[index] === null && (
             <Text lowContrast className={styles["shell-icon"]}>
               <MissingShellIcon width="1em" height="1em" />
@@ -739,10 +728,10 @@ function OwnershipFilterInternal() {
           borderTopRightRadius: 0,
           borderBottomRightRadius: 0,
         }}
+        listChild
         disabled={!wargaming}
         variant={showOwned ? "solid" : "surface"}
         color={showOwned ? undefined : "gray"}
-        highContrast
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showOwned = !draft.showOwned;
@@ -759,10 +748,10 @@ function OwnershipFilterInternal() {
           borderBottomLeftRadius: 0,
           marginLeft: "-1px",
         }}
+        listChild
         disabled={!wargaming}
         variant={showUnowned ? "solid" : "surface"}
         color={showUnowned ? undefined : "gray"}
-        highContrast
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showUnowned = !draft.showUnowned;
@@ -789,7 +778,7 @@ function TestFilter() {
         }}
         variant={showNonTesting ? "solid" : "surface"}
         color={showNonTesting ? undefined : "gray"}
-        highContrast
+        listChild
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showNonTesting = !draft.showNonTesting;
@@ -810,7 +799,7 @@ function TestFilter() {
         }}
         variant={showTesting ? "solid" : "surface"}
         color={showTesting ? undefined : "gray"}
-        highContrast
+        listChild
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showTesting = !draft.showTesting;

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Modules.tsx

@@ -2,7 +2,7 @@ import {
   alias,
   formatCompact,
   tankIcon,
-  TIER_ROMAN_NUMERALS,
+  romanize,
 } from "@blitzkit/core";
 import {
   EngineDefinition,
@@ -93,7 +93,7 @@ function ModuleButton({
           top: isTank ? 8 : 4,
         }}
       >
-        {TIER_ROMAN_NUMERALS[tier]}
+        {romanize(tier)}
       </Text>
 
       {unlock.cost!.value > 0 && (

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Skills.tsx

@@ -1,3 +1,4 @@
+import { MAX_SKILL_LEVEL } from "@blitzkit/core";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
 import {
   Button,
@@ -59,7 +60,7 @@ export function Skills() {
           onClick={() => {
             Tankopedia.mutate((draft) => {
               Object.keys(draft.skills).forEach((skill) => {
-                draft.skills[skill] = 7;
+                draft.skills[skill] = MAX_SKILL_LEVEL;
               });
             });
           }}

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -1,7 +1,7 @@
 import {
   alias,
   resolvePenetrationCoefficient,
-  TIER_ROMAN_NUMERALS,
+  romanize,
   uniqueGuns,
 } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
@@ -137,7 +137,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                   mr="2"
                   mb="1"
                 >
-                  {TIER_ROMAN_NUMERALS[antagonistGun.tier]}
+                  {romanize(antagonistGun.tier)}
                 </Text>
 
                 <img
@@ -166,7 +166,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                       })
                     }
                     selected={gun.id === antagonistGun.id}
-                    discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                    discriminator={romanize(gun.tier)}
                     secondaryDiscriminator={
                       <Text style={{ fontSize: "0.75em" }}>
                         {literals(strings.common.units.mm, {

packages/website/src/components/Tankopedia/MetaSection/index.tsx

@@ -1,4 +1,4 @@
-import { alias, TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { alias, romanize } from "@blitzkit/core";
 import { TankPriceType, TankType } from "@blitzkit/protos";
 import { Box, Flex } from "@radix-ui/themes";
 import { Var } from "../../../core/radix/var";
@@ -80,7 +80,7 @@ export function MetaSection() {
                     </Flex>
                   </Listing>
                   <Listing label={strings.website.tools.tankopedia.meta.tier}>
-                    {TIER_ROMAN_NUMERALS[protagonist.tier]}
+                    {romanize(protagonist.tier)}
                   </Listing>
                   <Listing
                     label={strings.website.tools.tankopedia.meta.type}

packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx

@@ -1,4 +1,4 @@
-import { alias, formatCompact, TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { alias, formatCompact, romanize } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
 import { Box, Flex, Skeleton, Text } from "@radix-ui/themes";
 import { api } from "../../../../api/dynamic";
@@ -90,7 +90,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
           <Flex direction="column" align="center">
             <Flex gap="2" align="center">
               <Text color="gray" size="1">
-                {TIER_ROMAN_NUMERALS[tank.tier]}
+                {romanize(tank.tier)}
               </Text>
               <Text wrap="nowrap">{unwrap(tank.name!)}</Text>
             </Flex>

packages/website/src/components/TankopediaCharacteristics/index.tsx

@@ -1,4 +1,4 @@
-import { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { romanize } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
 import { useRef } from "react";
 import { characteristicsGroups } from "../../config/characteristicsGroups";
@@ -201,7 +201,7 @@ function CompareOptions() {
       value: `${TankopediaRelativeAgainst.ClassAndTier}`,
       relativeAgainst: TankopediaRelativeAgainst.ClassAndTier,
       label: literals(strings.tanks.characteristics.compare.class, {
-        tier: TIER_ROMAN_NUMERALS[tank.tier],
+        tier: romanize(tank.tier),
         class: strings.common.tank_class_short_plural_lowercase[tank.class],
       }),
     },
@@ -209,7 +209,7 @@ function CompareOptions() {
       value: `${TankopediaRelativeAgainst.Tier}`,
       relativeAgainst: TankopediaRelativeAgainst.Tier,
       label: literals(strings.tanks.characteristics.compare.tier, {
-        tier: TIER_ROMAN_NUMERALS[tank.tier],
+        tier: romanize(tank.tier),
       }),
     },
     {

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

@@ -1,6 +1,4 @@
 .section {
-  max-width: 21rem;
-
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -13,6 +11,31 @@
 
     .upgrade-buttons {
       display: flex;
+      gap: var(--space-2);
+    }
+  }
+
+  .crew-skills {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+
+    .row {
+      display: flex;
+      gap: inherit;
+    }
+
+    .skill {
+      position: relative;
+
+      .level {
+        position: absolute;
+
+        right: var(--space-1);
+        bottom: var(--space-1);
+
+        font-size: var(--font-size-minor);
+      }
     }
   }
 
@@ -55,8 +78,8 @@
   }
 
   .consumables {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(3, max-content);
     gap: var(--space-3);
 
     .consumable-wrapper {

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

@@ -1,6 +1,16 @@
-import { alias } from "@blitzkit/core";
+import {
+  alias,
+  MAX_SKILL_LEVEL,
+  permanentSkills,
+  romanize,
+} from "@blitzkit/core";
 import type { Consumable, EquipmentSlot, Provision } from "@blitzkit/protos";
-import { ClockIcon, ResetIcon, TrashIcon } from "@radix-ui/react-icons";
+import {
+  ClockIcon,
+  DoubleArrowUpIcon,
+  ResetIcon,
+  TrashIcon,
+} from "@radix-ui/react-icons";
 import { chunk } from "lodash-es";
 import { api } from "../../api/dynamic";
 import { equipmentColumns } from "../../config/equipment";
@@ -23,13 +33,14 @@ import styles from "./index.module.css";
 const equipment = await api.equipment();
 const provisions = await api.provisions();
 const consumables = await api.consumables();
+const skills = await api.skills();
 
 interface TankopediaLoadoutProps {
   characteristics: ComputedCharacteristics;
 }
 
 export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
-  const tank = useDuel("protagonist", DuelModule.Tank);
+  // const tank = useDuel("protagonist", DuelModule.Tank);
   // const showModules = hasUpgrades(tank);
 
   return (
@@ -39,12 +50,103 @@ export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
       <Equipment />
       <Provisions />
       <Consumables characteristics={characteristics} />
+      <CrewSkills />
       <State />
       <Status />
     </>
   );
 }
 
+function CrewSkills() {
+  const strings = useStrings();
+  const selectedSkills = Tankopedia.use((state) => state.environment.skills);
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.header}>
+        <Heading size="4">{strings.tanks.loadout.skills}</Heading>
+
+        <div className={styles["upgrade-buttons"]}>
+          <IconButton
+            color="red"
+            aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.skills}`}
+            onClick={() => {
+              Tankopedia.mutate((draft) => {
+                Object.keys(draft.environment.skills).forEach((skill) => {
+                  draft.environment.skills[skill] = 0;
+                });
+              });
+            }}
+          >
+            <TrashIcon />
+          </IconButton>
+
+          <IconButton
+            color="gray"
+            highContrast
+            aria-label={`${strings.tanks.loadout.maximize} ${strings.tanks.loadout.skills}`}
+            onClick={() => {
+              Tankopedia.mutate((draft) => {
+                Object.keys(draft.environment.skills).forEach((skill) => {
+                  draft.environment.skills[skill] = MAX_SKILL_LEVEL;
+                });
+              });
+            }}
+          >
+            <DoubleArrowUpIcon />
+          </IconButton>
+        </div>
+      </div>
+
+      <div className={styles["crew-skills"]}>
+        {Object.entries(skills.classes).map(([tankClass, group]) => (
+          <div key={tankClass} className={styles.row}>
+            {group.skills.map((skill) => (
+              <CrewSkillEntry
+                key={skill}
+                id={skill}
+                level={selectedSkills[skill]}
+                permanent={permanentSkills.includes(skill)}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface CrewSkillEntryProps {
+  id: string;
+  level: number;
+  permanent: boolean;
+}
+
+function CrewSkillEntry({ id, level, permanent }: CrewSkillEntryProps) {
+  return (
+    <IconButton
+      size="major"
+      radius="1"
+      className={styles.skill}
+      color={level === 0 ? "gray" : permanent ? undefined : "amber"}
+      variant={level === 0 ? "soft" : "surface"}
+      onClick={(event) => {
+        Tankopedia.mutate((draft) => {
+          if (event.shiftKey) {
+            draft.environment.skills[id] = level === 0 ? MAX_SKILL_LEVEL : 0;
+          } else {
+            draft.environment.skills[id] =
+              level === 0 ? MAX_SKILL_LEVEL : level - 1;
+          }
+        });
+      }}
+    >
+      <img src={alias("api", `/icons/skills/${id}.webp`)} />
+      {level > 0 && <span className={styles.level}>{romanize(level)}</span>}
+    </IconButton>
+  );
+}
+
 function State() {
   const strings = useStrings();
 
@@ -58,6 +160,7 @@ function State() {
 
         <IconButton
           color="red"
+          aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.consumables}`}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               draft.protagonist.consumables = [];
@@ -87,6 +190,7 @@ function Status() {
 
         <IconButton
           color="red"
+          aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.status}`}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               draft.protagonist.consumables = [];
@@ -103,6 +207,8 @@ function Status() {
             {group.map((key) => (
               <IconButton
                 key={key}
+                aria-label={key.replaceAll("_", " ")}
+                aria-pressed={status[key]}
                 radius="1"
                 className={styles.state}
                 color={status[key] ? "amber" : "gray"}
@@ -183,6 +289,7 @@ function Provisions() {
 
         <IconButton
           color="red"
+          aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.provisions}`}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               draft.protagonist.provisions = [];
@@ -230,6 +337,7 @@ function ProvisionEntry({ id, provision }: ProvisionEntryProps) {
   return (
     <Tooltip tooltip={unwrap(provision.name)}>
       <IconButton
+        aria-label={unwrap(provision.name)}
         size="major"
         radius="1"
         variant={isSelected ? "surface" : "soft"}
@@ -275,6 +383,7 @@ function Consumables({ characteristics }: ConsumablesProps) {
 
         <IconButton
           color="red"
+          aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.consumables}`}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               draft.protagonist.consumables = [];
@@ -325,6 +434,7 @@ function ConsumableEntry({ id, consumable }: ConsumableProps) {
     <div className={styles["consumable-wrapper"]}>
       <Tooltip tooltip={unwrap(consumable.name)}>
         <Button
+          aria-label={unwrap(consumable.name)}
           radius="1"
           variant={isSelected ? "surface" : "soft"}
           color={isSelected ? undefined : "gray"}
@@ -384,6 +494,7 @@ function Equipment() {
 
         <IconButton
           color="red"
+          aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.equipment}`}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               for (const key in draft.protagonist.equipment) {
@@ -489,6 +600,7 @@ function EquipmentOption({
   return (
     <Tooltip tooltip={unwrap(specificEquipment.name)}>
       <IconButton
+        aria-label={unwrap(specificEquipment.name)}
         size="major"
         color={isSelected ? undefined : "gray"}
         variant={isSelected ? "surface" : "soft"}

packages/website/src/components/TankopediaSandbox/index.tsx

@@ -1,10 +1,4 @@
-import {
+import { Suspense, useEffect, useRef } from "react";
-  forwardRef,
-  Suspense,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from "react";
 import { applyPitchYawLimits } from "../../core/blitz/applyPitchYawLimits";
 import { modelTransformEvent } from "../../core/blitzkit/modelTransform";
 import { Pose, poseEvent } from "../../core/blitzkit/pose";
@@ -14,6 +8,7 @@ import { useModel } from "../../hooks/useModel";
 import { Tankopedia } from "../../stores/tankopedia";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { TankopediaDisplay } from "../../stores/tankopediaPersistent/constants";
+import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { ArmorPlateDisplay } from "../ArmorPlateDisplay";
 import { CanvasAutoClear } from "../CanvasAutoClear";
 import { CanvasControl } from "../CanvasControl";
@@ -27,19 +22,18 @@ import { StaticArmor, type ThicknessRange } from "../StaticArmor";
 import { TankModel } from "../TankModel";
 import styles from "./index.module.css";
 
-interface TankSandboxProps {
+type TankSandboxProps = MaybeSkeletonComponentProps & {
   thicknessRange: ThicknessRange;
-}
+};
 
-export const TankopediaSandbox = forwardRef<
+export function TankopediaSandbox({
-  HTMLCanvasElement,
+  skeleton,
-  TankSandboxProps
+  thicknessRange,
->(({ thicknessRange }, ref) => {
+}: TankSandboxProps) {
   const canvas = useRef<HTMLCanvasElement>(null);
   const hasImprovedVerticalStabilizer = useEquipment("protagonist", 122);
   const hasDownImprovedVerticalStabilizer = useEquipment("protagonist", 124);
 
-  const tank = useDuel("protagonist", DuelModule.Tank);
   const gun = useDuel("protagonist", DuelModule.Gun);
   const turret = useDuel("protagonist", DuelModule.Turret);
 
@@ -47,13 +41,6 @@ export const TankopediaSandbox = forwardRef<
   const turretModelDefinition = model.turrets[turret.id];
   const gunModelDefinition = turretModelDefinition.guns[gun.id];
   const display = Tankopedia.use((state) => state.display);
-  const hideTankModelUnderArmor = TankopediaPersistent.use(
-    (state) => state.hideTankModelUnderArmor,
-  );
-
-  const { hasPbr } = useModel(tank.id);
-
-  useImperativeHandle(ref, () => canvas.current!, []);
 
   function handlePointerDown() {
     window.addEventListener("pointermove", handlePointerMove);
@@ -169,29 +156,47 @@ export const TankopediaSandbox = forwardRef<
           });
         }}
       >
-        <Lighting hasPbr={hasPbr} />
+        {!skeleton && <Content thicknessRange={thicknessRange} />}
-
-        <SceneProps />
-        {(display === TankopediaDisplay.Model ||
-          (display === TankopediaDisplay.DynamicArmor &&
-            !hideTankModelUnderArmor)) && <TankModel />}
-
-        <ShotDisplay />
-        <ArmorPlateDisplay />
-        <CanvasAutoClear />
-
-        <Suspense>
-          {/* Controls within Suspense to allow for frame-perfect start of camera auto-rotate */}
-          <CanvasControl />
-
-          {display === TankopediaDisplay.DynamicArmor && <DynamicArmor />}
-          {display === TankopediaDisplay.StaticArmor && (
-            <StaticArmor thicknessRange={thicknessRange} />
-          )}
-        </Suspense>
-
-        <InitialCameraAligner />
       </SmartCanvas>
     </div>
   );
-});
+}
+
+function Content({ thicknessRange }: { thicknessRange: ThicknessRange }) {
+  const display = Tankopedia.use((state) => state.display);
+  const tank = useDuel("protagonist", DuelModule.Tank);
+
+  const { hasPbr } = useModel(tank.id);
+
+  const hideTankModelUnderArmor = TankopediaPersistent.use(
+    (state) => state.hideTankModelUnderArmor,
+  );
+
+  return (
+    <>
+      <Lighting hasPbr={hasPbr} />
+
+      <SceneProps />
+
+      {(display === TankopediaDisplay.Model ||
+        (display === TankopediaDisplay.DynamicArmor &&
+          !hideTankModelUnderArmor)) && <TankModel />}
+
+      <ShotDisplay />
+      <ArmorPlateDisplay />
+      <CanvasAutoClear />
+
+      <Suspense>
+        {/* Controls within Suspense to allow for frame-perfect start of camera auto-rotate */}
+        <CanvasControl />
+
+        {display === TankopediaDisplay.DynamicArmor && <DynamicArmor />}
+        {display === TankopediaDisplay.StaticArmor && (
+          <StaticArmor thicknessRange={thicknessRange} />
+        )}
+      </Suspense>
+
+      <InitialCameraAligner />
+    </>
+  );
+}

packages/website/src/pages/[...chunk_default]/[...locale]/mixer/_index.tsx

@@ -1,6 +1,6 @@
 import {
   alias,
-  TIER_ROMAN_NUMERALS,
+  romanize,
 } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n";
 import {
@@ -161,7 +161,7 @@ function ModuleChooser({
                       }
                       key={turret.id}
                       module="turret"
-                      discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
+                      discriminator={romanize(turret.tier)}
                       onClick={() => {
                         onSelect?.(tankDefinition, turret);
                       }}
@@ -179,7 +179,7 @@ function ModuleChooser({
                       }
                       key={gun.id}
                       module="gun"
-                      discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                      discriminator={romanize(gun.tier)}
                       secondaryDiscriminator={
                         <Text style={{ fontSize: "0.75em" }}>
                           {literals(strings.common.units.mm, {

packages/website/src/pages/[...chunk_default]/[...locale]/tanks/[slug]/_index.module.css

@@ -13,11 +13,14 @@
     display: flex;
     flex-direction: column;
 
-    gap: var(--space-5);
-    padding: var(--space-5);
-
-    overflow-y: auto;
-
     background-color: var(--gray-2);
+
+    .content {
+      padding: var(--space-5);
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-5);
+    }
   }
 }

packages/website/src/pages/[...chunk_default]/[...locale]/tanks/[slug]/_index.tsx

@@ -1,9 +1,11 @@
 import { useMemo } from "react";
 import { api } from "../../../../../api/dynamic";
+import { Scroller } from "../../../../../components/Scroller";
 import type { ThicknessRange } from "../../../../../components/StaticArmor";
 import { TankopediaCharacteristics } from "../../../../../components/TankopediaCharacteristics";
 import { TankopediaGameModeAbilities } from "../../../../../components/TankopediaGameModeAbilities";
 import { TankopediaLoadout } from "../../../../../components/TankopediaLoadout";
+import { TankopediaSandbox } from "../../../../../components/TankopediaSandbox";
 import { defaultEqualizer } from "../../../../../config/equalizer";
 import { withErrorWrapper } from "../../../../../hocs/withErrorWrapper";
 import { withLocale } from "../../../../../hocs/withLocale";
@@ -52,12 +54,17 @@ export const Page = withErrorWrapper(
 
     return (
       <div className={styles.page}>
-        <div className={styles.loadout}>
+        <Scroller className={styles.loadout} orientation="vertical">
-          <TankopediaLoadout characteristics={characteristics} />
+          <div className={styles.content}>
-        </div>
+            <TankopediaLoadout characteristics={characteristics} />
+          </div>
+        </Scroller>
 
         <div className={styles.sandbox}>
-          {/* {!skeleton && <TankopediaSandbox thicknessRange={thicknessRange} />} */}
+          <TankopediaSandbox
+            skeleton={skeleton}
+            thicknessRange={thicknessRange}
+          />
           <TankopediaCharacteristics characteristics={characteristics} />
           <TankopediaGameModeAbilities />
         </div>