haha characteristics render!

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

@@ -21,20 +21,20 @@
     padding: var(--space-2) var(--space-3);
   }
 
-  &[data-list-child="true"] {
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+  &[data-list-child="true"]:not(:first-child),
+  *:not(:first-child) > &[data-parent-list-child="true"] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 
-      border-left-width: var(--space-0);
-    }
+    border-left-width: var(--space-0);
+  }
 
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+  &[data-list-child="true"]:not(:last-child),
+  *:not(:last-child) > &[data-parent-list-child="true"] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
 
-      border-right-width: var(--space-0);
-    }
+    border-right-width: var(--space-0);
   }
 
   svg,
@@ -74,6 +74,6 @@
 
   &[data-variant="surface"],
   &[data-variant="outline"] {
-    border: var(--space-1) solid var(--accent-6);
+    outline: var(--space-1) solid var(--accent-6);
   }
 }

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

@@ -8,8 +8,10 @@ export interface ButtonProps extends ComponentProps<"button"> {
   radius?: `${1 | 2 | 3}` | "max";
   variant?: "solid" | "surface" | "soft" | "inverted" | "ghost" | "outline";
   size?: "regular" | "minor";
-  listChild?: boolean;
   highContrast?: boolean; // TODO: add high contrast
+
+  listChild?: boolean;
+  parentListChild?: boolean;
 }
 
 export const LIGHT_TEXT_COLORS = new Set<Color>([
@@ -34,7 +36,9 @@ export function Button({
   style,
   radius = "max",
   size = "regular",
+
   listChild,
+  parentListChild,
   ...props
 }: ButtonProps) {
   return (
@@ -46,6 +50,7 @@ export function Button({
       data-radius={radius}
       data-size={size}
       data-list-child={listChild}
+      data-parent-list-child={parentListChild}
       {...props}
     />
   );

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

@@ -2,4 +2,10 @@
   padding: var(--space-3);
 
   aspect-ratio: 1 / 1;
+
+  img,
+  svg {
+    width: 0.75em;
+    height: 0.75em;
+  }
 }

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

@@ -23,7 +23,7 @@ export function TankopediaCharacteristics({
       <div className={styles.characteristics}>
         {characteristicsGroups.map((group) => {
           const items = group.order.filter(
-            (item) => "name" in item && item.name in characteristics,
+            (item) => "name" in item && characteristics.has(item.name),
           ).length;
           const shouldRender = items > 0;
 
@@ -51,7 +51,7 @@ function Group({ group, characteristics }: GroupProps) {
   const strings = useStrings();
   const toys = group.order.filter((item) => "toy" in item).length;
   const items = group.order.filter(
-    (item) => "name" in item && characteristics[item.name] !== null,
+    (item) => "name" in item && characteristics.has(item.name),
   ).length;
   const groupSpan = `calc(${toys} * var(--group-span) + ${items} + 2)`;
   const contentSpan = `calc(${toys} * var(--group-span) + ${items})`;
@@ -88,8 +88,8 @@ function Group({ group, characteristics }: GroupProps) {
         {group.order.map((item) => (
           <>
             {"toy" in item && <Toy {...item} />}
-            {"name" in item && characteristics[item.name] !== null && (
-              <Item config={item} value={characteristics[item.name]!} />
+            {"name" in item && characteristics.get(item.name) && (
+              <Item config={item} value={characteristics.get(item.name)!} />
             )}
           </>
         ))}

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

@@ -1,3 +1,4 @@
+import { alias } from "@blitzkit/core";
 import type { Consumable, EquipmentSlot } from "@blitzkit/protos";
 import { ClockIcon, ResetIcon, TrashIcon } from "@radix-ui/react-icons";
 import { chunk } from "lodash-es";
@@ -196,7 +197,7 @@ function ConsumableEntry({ id, consumable }: ConsumableProps) {
             });
           }}
         >
-          <img src={`/media/consumables/${id}.webp`} />
+          <img src={alias("api", `/icons/consumables/${consumable.id}.webp`)} />
           <div className={styles.info}>
             <Text lowContrast size="minor">
               <div className={styles.entry}>
@@ -336,12 +337,12 @@ function EquipmentOption({
 
   return (
     <Tooltip tooltip={unwrap(specificEquipment.name)}>
-      <Button
+      <IconButton
         color={isSelected ? undefined : "gray"}
         variant={isSelected ? "surface" : "soft"}
         data-selected={isSelected}
         radius="1"
-        listChild
+        parentListChild
         className={styles.slot}
         onClick={() => {
           Tankopedia.mutate((draft) => {
@@ -353,8 +354,12 @@ function EquipmentOption({
           });
         }}
       >
-        <img src={`/media/equipment/${id}.webp`} />
-      </Button>
+        <img
+          className={styles.icon}
+          alt={unwrap(specificEquipment.name)}
+          src={alias("api", `/icons/equipment/${id}.webp`)}
+        />
+      </IconButton>
     </Tooltip>
   );
 }

packages/website/src/config/characteristics.ts

@@ -26,12 +26,12 @@ export const characteristics = {
 
   damage: {
     type: CharacteristicType.Number,
-    compute({ characteristic, gun, shell, equalizer, assault_distance }) {
+    compute({ characteristic, gun, shell, environment }) {
       let coefficient = 1;
 
       if (gun.assault_ranges && gun.assault_ranges.types.includes(shell.type)) {
         const match = gun.assault_ranges.ranges.find(
-          ({ distance }) => distance >= assault_distance,
+          ({ distance }) => distance >= environment.assault_distance,
         );
 
         if (match !== undefined) {
@@ -39,7 +39,7 @@ export const characteristics = {
         }
       }
 
-      coefficient *= equalizer.damage;
+      // coefficient *= equalizer.damage;
 
       return coefficient * shell.armor_damage;
     },

packages/website/src/hooks/useCharacteristics.ts

@@ -0,0 +1,72 @@
+import { api } from "../api/dynamic";
+import { characteristics } from "../config/characteristics";
+import { Tankopedia, type TankEnvironment } from "../stores/tankopedia";
+import type { TankState } from "../tankopedia/tankState";
+import type {
+  CharacteristicContext,
+  CharacteristicName,
+  ComputedCharacteristics,
+} from "../types/characteristics";
+import type { DuelSide } from "./useEquipment";
+
+const tanks = await api.tanks();
+
+export function useCharacteristics(side: DuelSide) {
+  const state = Tankopedia.use((state) => state[side]);
+  const environment = Tankopedia.use((state) => state.environment);
+
+  return computeCharacteristics(state, environment);
+}
+
+export function computeCharacteristics(
+  state: TankState,
+  environment: TankEnvironment,
+) {
+  const computed: ComputedCharacteristics = new Map();
+
+  const tank = tanks.tanks[state.tank];
+  const engine = tank.engines.find((engine) => engine.id === state.engine)!;
+  const track = tank.tracks.find((track) => track.id === state.track)!;
+  const turret = tank.turrets.find((turret) => turret.id === state.turret)!;
+  const gun = turret.guns.find((gun) => gun.id === state.gun)!;
+  const shell = gun.shells.find((shell) => shell.id === state.shell)!;
+
+  function characteristic(name: CharacteristicName) {
+    if (!computed.has(name)) {
+      throw new Error(`Characteristic ${name} not computed yet`);
+    }
+
+    return computed.get(name)!;
+  }
+
+  const context = {
+    state,
+    environment,
+
+    tank,
+    engine,
+    track,
+    turret,
+    gun,
+    shell,
+
+    characteristic,
+  } satisfies CharacteristicContext;
+
+  for (const name in characteristics) {
+    const characteristic = characteristics[name as CharacteristicName];
+    let shouldRender = true;
+
+    if ("should_render" in characteristic) {
+      shouldRender = characteristic.should_render(context);
+    }
+
+    if (!shouldRender) continue;
+
+    const value = characteristic.compute(context);
+
+    computed.set(name as CharacteristicName, value);
+  }
+
+  return computed;
+}

packages/website/src/layouts/BaseLayout.astro

@@ -43,14 +43,14 @@ const { accent, locale } = Astro.props;
         color: var(--gray-12);
         font-family: var(--font-family-regular);
 
-        .app {
+        main {
           display: flex;
           flex: 1;
           flex-direction: column;
 
           background-color: var(--gray-1);
 
-          padding: var(--space-4);
+          /* padding: var(--space-4); */
           gap: var(--space-6);
         }
       }
@@ -75,9 +75,9 @@ const { accent, locale } = Astro.props;
   <body>
     <slot name="pre-app" />
 
-    <div class="app">
+    <main>
       <slot />
-    </div>
+    </main>
 
     <!-- <Footer {locale} /> -->
   </body>

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

@@ -8,8 +8,8 @@ import { defaultEqualizer } from "../../../../../config/equalizer";
 import { withErrorWrapper } from "../../../../../hocs/withErrorWrapper";
 import { withLocale } from "../../../../../hocs/withLocale";
 import { useAwait } from "../../../../../hooks/useAwait";
+import { useCharacteristics } from "../../../../../hooks/useCharacteristics";
 import { Tankopedia } from "../../../../../stores/tankopedia";
-import { computeCharacteristics } from "../../../../../tankopedia/computeCharacteristics";
 import type { MaybeSkeletonComponentProps } from "../../../../../types/maybeSkeletonComponentProps";
 import styles from "./_index.module.css";
 
@@ -26,14 +26,10 @@ export const Page = withErrorWrapper(
     Tankopedia.useInitialization(protagonistTank);
 
     const protagonist = Tankopedia.use((state) => state.protagonist);
-    // const protagonistEquipment = useEquipment("protagonist", protagonistTank.tank!);
+    const equalize = Tankopedia.use((state) => state.environment.equalize);
 
-    const characteristics = useMemo(
-      () => computeCharacteristics(),
-      [protagonist],
-    );
+    const characteristics = useCharacteristics("protagonist");
 
-    const equalize = Tankopedia.use((state) => state.equalize);
     const thicknessRange = useMemo(() => {
       const entries = Object.values(tanks.tanks);
       const filtered = entries.filter(

packages/website/src/stores/tankopedia.ts

@@ -75,14 +75,18 @@ export enum TankopediaRelativeAgainst {
   All,
 }
 
+export interface TankEnvironment {
+  equalize: boolean;
+  assault_distance: number;
+}
+
 interface Tankopedia {
   disturbed: boolean;
   revealed: boolean;
 
   protagonist: TankState;
   antagonist: TankState;
-
-  equalize: boolean;
+  environment: TankEnvironment;
 
   shot?: Shot;
   skills: Record<string, number>;
@@ -121,7 +125,7 @@ export const Tankopedia = new Soapstone<Tankopedia, [TankDefinition]>(
     antagonist: createTankState(tank),
     model: models.models[tank.id],
 
-    equalize: false,
+    environment: { equalize: false, assault_distance: 0 },
 
     relativeAgainst: TankopediaRelativeAgainst.Class,
     editStatic: false,

packages/website/src/tankopedia/computeCharacteristics.ts

@@ -1,7 +0,0 @@
-import type { ComputedCharacteristics } from "../types/characteristics";
-
-export function computeCharacteristics() {
-  const characteristics: Partial<ComputedCharacteristics> = {};
-
-  return characteristics as ComputedCharacteristics;
-}

packages/website/src/tankopedia/createTankState.ts

@@ -27,7 +27,10 @@ export function createTankState(tank: TankDefinition) {
     shell: gun.shells[0].id,
     track: tank.tracks.at(-1)!.id,
 
-    assault_distance: (gun.assault_ranges?.ranges[0].distance ?? 0) / 2,
+    environment: {
+      assault_distance: (gun.assault_ranges?.ranges[0].distance ?? 0) / 2,
+    },
+
     speed: 0,
 
     equipment: {},

packages/website/src/tankopedia/tankState.ts

@@ -9,7 +9,6 @@ export interface TankState {
   shell: number;
   track: number;
 
-  assault_distance: number;
   speed: number;
 
   equipment: Record<number, number>;

packages/website/src/types/characteristics.ts

@@ -1,11 +1,16 @@
 import type { Strings } from "@blitzkit/i18n";
 import type {
-  Equalizer,
+  EngineDefinition,
   GunDefinition,
   ShellDefinition,
+  TankDefinition,
+  TrackDefinition,
+  TurretDefinition,
 } from "@blitzkit/protos";
 import type { ReactNode } from "react";
 import { characteristics } from "../config/characteristics";
+import type { TankEnvironment } from "../stores/tankopedia";
+import type { TankState } from "../tankopedia/tankState";
 
 export type Characteristic = {
   should_render?(context: CharacteristicContext): boolean;
@@ -20,14 +25,17 @@ export type Characteristic = {
     }
 );
 
-interface CharacteristicContext {
+export interface CharacteristicContext {
+  state: TankState;
+  environment: TankEnvironment;
+
+  tank: TankDefinition;
+  engine: EngineDefinition;
+  track: TrackDefinition;
+  turret: TurretDefinition;
   gun: GunDefinition;
   shell: ShellDefinition;
 
-  equalizer: Equalizer;
-
-  assault_distance: number;
-
   characteristic(
     name: CharacteristicName,
   ): ReturnType<Characteristic["compute"]>;
@@ -41,8 +49,9 @@ export enum CharacteristicType {
 export type CharacteristicName = keyof typeof characteristics;
 export type CharacteristicReturnType = ReturnType<Characteristic["compute"]>;
 
-export type ComputedCharacteristics = Partial<
-  Record<CharacteristicName, CharacteristicReturnType>
+export type ComputedCharacteristics = Map<
+  CharacteristicName,
+  CharacteristicReturnType
 >;
 
 export interface CharacteristicRenderConfig {