oh shit i forgot to commit... uhh i added state icons

cspell.json

@@ -7,6 +7,7 @@
     "oodle",
     "blitzkit",
     "webp",
-    "hocs"
+    "hocs",
+    "cooldown"
   ]
 }

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

@@ -41,8 +41,8 @@
     }
 
     .content {
-      --cell-width: 3rem;
-      --toy-span: 5;
+      --cell-width: 2rem;
+      --toy-span: 6;
 
       display: grid;
       grid-auto-rows: var(--cell-width);
@@ -71,14 +71,14 @@
 
           .bar-wrapper {
             flex: 1;
-            height: var(--space-2);
+            height: var(--space-1);
 
             background-color: var(--gray-3);
             border-radius: var(--radius-max);
             overflow: hidden;
 
             .bar {
-              background-color: green;
+              background-color: var(--jade-9);
               width: 75%;
               height: 100%;
             }

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

@@ -13,13 +13,25 @@
     }
   }
 
-  .state {
+  .states {
     display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-3);
+    flex-direction: column;
+    gap: var(--space-2);
 
-    .toggle {
-      font-size: 2em;
+    .group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-2);
+
+      .state {
+        font-size: 1.25em;
+
+        &[data-selected="true"] {
+          img {
+            filter: sepia(1) saturate(10);
+          }
+        }
+      }
     }
   }
 

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

@@ -84,22 +84,28 @@ function State() {
         </IconButton>
       </div>
 
-      <div className={styles.state}>
-        {vehicleStatusKeys.map((key) => (
-          <IconButton
-            key={key}
-            radius="1"
-            className={styles.toggle}
-            color={status[key] ? undefined : "gray"}
-            variant={status[key] ? "surface" : "soft"}
-            onClick={() => {
-              Tankopedia.mutate((draft) => {
-                draft.protagonist.status[key] = !draft.protagonist.status[key];
-              });
-            }}
-          >
-            <img src={`/media/status/${key}.svg`} />
-          </IconButton>
+      <div className={styles.states}>
+        {vehicleStatusKeys.map((group, index) => (
+          <div key={index} className={styles.group}>
+            {group.map((key) => (
+              <IconButton
+                key={key}
+                radius="1"
+                className={styles.state}
+                data-selected={status[key]}
+                color={status[key] ? "amber" : "gray"}
+                variant={status[key] ? "surface" : "soft"}
+                onClick={() => {
+                  Tankopedia.mutate((draft) => {
+                    draft.protagonist.status[key] =
+                      !draft.protagonist.status[key];
+                  });
+                }}
+              >
+                <img src={`/media/status/${key}.png`} />
+              </IconButton>
+            ))}
+          </div>
         ))}
       </div>
     </div>

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

@@ -1,6 +1,5 @@
 import { OrbitControls } from "@react-three/drei";
-import { Canvas, useLoader } from "@react-three/fiber";
-import { FogExp2 } from "three";
+import { useLoader } from "@react-three/fiber";
 import { GLTFLoader } from "three-stdlib";
 import styles from "./index.module.css";
 
@@ -8,14 +7,14 @@ export function TankopediaSandbox() {
   return (
     <div className={styles.wrapper}>
       <div className={styles.sandbox}>
-        <Canvas
+        {/*<Canvas
           scene={{ fog: new FogExp2("black", 0.05) }}
           shadows
           className={styles.canvas}
           frameloop="demand"
         >
           {!import.meta.env.SSR && <Content />}
-        </Canvas>
+        </Canvas>*/}
       </div>
     </div>
   );
@@ -24,10 +23,9 @@ export function TankopediaSandbox() {
 function Content() {
   const gltf = useLoader(GLTFLoader, "/amogos.glb");
 
-  gltf.scene.traverse(child =>
-  {
+  gltf.scene.traverse((child) => {
     child.castShadow = true;
-    })
+  });
 
   return (
     <>

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

@@ -2,10 +2,10 @@
 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";
-import ColorScale from "../../../../components/ColorScale.astro";
 
 export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
   const { list } = await api.tankList();
@@ -21,5 +21,8 @@ const { id, locale } = Astro.props;
 
 <BaseLayout {locale} accent="violet">
   <ColorScale color="red" />
+  <ColorScale color="jade" />
+  <ColorScale color="amber" />
+
   <Page {locale} {id} client:load />
 </BaseLayout>

packages/website-ue/src/tankopedia/characteristics.ts

@@ -242,12 +242,12 @@ export const characteristics = {
     const maxSpeed = characteristic("speed_forward") as number;
 
     return (
-      (state.isGunDamaged ? gunDamaged : 1) *
+      (state.status.gun_damaged ? gunDamaged : 1) *
       (base +
         (state.speed / maxSpeed) * movement +
-        (state.isHullTraversing ? vehicleRotation : 0) +
-        (state.isTurretTraversing ? turretRotation : 0) +
-        (state.isShooting ? afterShot : 0))
+        (state.status.hull_traversing ? vehicleRotation : 0) +
+        (state.status.turret_traversing ? turretRotation : 0) +
+        (state.status.shooting ? afterShot : 0))
     );
   },
 
@@ -376,7 +376,7 @@ export const characteristics = {
       100 *
       base *
       (1 + moving * state.speed) *
-      (state.isShooting ? shooting : 1)
+      (state.status.shooting ? shooting : 1)
     );
   },
 
@@ -409,7 +409,7 @@ export const characteristics = {
   },
 
   id({ state }) {
-    return state.id;
+    return state.id.split(".").at(-1)!;
   },
 
   slug({ tank }) {

packages/website-ue/src/tankopedia/characteristicsOrder.tsx

@@ -103,8 +103,13 @@ export const characteristicsOrder: CharacteristicsGroup[] = [
       { name: "module_damage", units: "hp" },
       { name: "clip_size" },
       { name: "intra_clip", decimals: 2, units: "s" },
+      // { name: "burst_size" }, // TODO: implement burst size
+      // { name: 'intra_burst', decimals: 2, units: "s" }, // TODO: implement intra burst
+      // TODO: investigate ATTRIBUTE_NAME_SHELLS_SLOTS
+      // TODO: investigate ATTRIBUTE_NAME_RELOAD_SPEED_SCALE
+      // TODO: investigate ATTRIBUTE_NAME_AVERAGE_THICKNESS
 
-      { toy: "ricochet" },
+      // { toy: "ricochet" },
       { name: "penetration", units: "mm" },
       { name: "caliber", units: "mm" },
       { name: "normalization", units: "deg" },
@@ -114,29 +119,33 @@ export const characteristicsOrder: CharacteristicsGroup[] = [
       { name: "shell_range", units: "m" },
       { name: "shell_capacity" },
 
-      { toy: "aim_time" },
+      // { toy: "aim_time" },
       { name: "aim_time", decimals: 1, units: "s" },
       { name: "dispersion", decimals: 3, units: "m" },
+      // { name: "dispersion_angle", decimals: 3, units: "m" }, // TODO: implement dispersion angle
 
-      { toy: "flexibility" },
+      // { toy: "flexibility" },
       { name: "gun_depression", decimals: 0, units: "deg" },
       { name: "gun_elevation", decimals: 0, units: "deg" },
+      // { name: "gun_yaw_range", decimals: 0, units: "deg" }, // TODO: implement gun yaw range
     ],
   },
   {
     group: "maneuverability",
     order: [
-      { toy: "traverse" },
+      // { toy: "traverse" },
       { name: "speed_forward", units: "km_h" },
       { name: "speed_backward", units: "km_h" },
 
       { name: "engine_power", units: "bhp" },
+      // { name: "brake_force", units: "N" }, // TODO: implement brake force
       { name: "weight", decimals: 1, units: "t" },
 
       { name: "terrain_coefficient" },
       { name: "power_to_weight", decimals: 1, units: "bhp_t" },
       { name: "hull_traverse_speed", units: "deg_s" },
       { name: "turret_traverse_speed", units: "deg_s" },
+      // { name: "gun_traverse_speed", units: "deg_s" }, // TODO: implement gun traverse speed
     ],
   },
   {
@@ -144,13 +153,18 @@ export const characteristicsOrder: CharacteristicsGroup[] = [
     order: [
       { name: "health", units: "hp" },
       { name: "fire_chance", units: "%" },
+      // { name: "fire_health_burn", units: "hp_s" }, // TODO: implement fire health burn
+      // { name: "ramming_resistance", units: "%" }, // TODO: implement ramming resistance
 
-      { toy: "view_range" },
+      // { toy: "view_range" },
       { name: "view_range", units: "m" },
       { name: "camouflage", decimals: 0, units: "%" },
 
-      // TODO: implement width
-      // { name: "width", units: "m" },
+      // { name: "consumable_cooldown", decimals: 0, units: "%" }, // TODO: implement consumable cooldown
+      // { name: "consumable_duration", decimals: 0, units: "s" }, // TODO: implement consumable duration
+      // { name: "consumable_reload", decimals: 0, units: "s" }, // TODO: implement consumable reload
+
+      // { name: "width", units: "m" }, // TODO: implement width
       { name: "height", units: "m" },
       { name: "length", units: "m" },
       { name: "volume", units: "m" },

packages/website-ue/src/tankopedia/tankState.ts

@@ -21,23 +21,19 @@ export interface TankState {
 }
 
 export const vehicleStatusKeys = [
-  "commander_dead",
-  "gunner_dead",
-  "driver_dead",
-  "loader_dead",
+  ["commander_dead", "gunner_dead", "driver_dead", "loader_dead"],
 
-  "fuel_tank_damaged",
-  "engine_damaged",
-  "chassis_damaged",
-  "viewport_damaged",
-  "ammo_bay_damaged",
-  "gun_damaged",
-  "turret_damaged",
+  [
+    "fuel_tank_damaged",
+    "engine_damaged",
+    "chassis_damaged",
+    "viewport_damaged",
+    "ammo_bay_damaged",
+    "gun_damaged",
+    "turret_damaged",
+  ],
 
-  "caught_on_fire",
-  "shooting",
-  "turret_traversing",
-  "hull_traversing",
+  ["caught_on_fire", "shooting", "turret_traversing", "hull_traversing"],
 ] as const;
 
-export type VehicleStatusKey = (typeof vehicleStatusKeys)[number];
+export type VehicleStatusKey = (typeof vehicleStatusKeys)[number][number];