tank icons

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

@@ -1,5 +1,5 @@
 .characteristics-wrapper {
-  margin: 0 var(--space-4);
+  margin: var(--space-4);
 
   --base-cell-width: 20rem;
   --group-span: 7;

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

@@ -13,7 +13,13 @@
     }
   }
 
-  .states {
+  .state {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .status {
     display: flex;
     flex-direction: column;
     gap: var(--space-2);

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

@@ -55,22 +55,25 @@ export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
 
   return (
     <>
-      <State />
       {showModules && <Modules />}
       <Equipment />
       <Consumables characteristics={characteristics} />
+      <State />
+      <Status />
     </>
   );
 }
 
 function State() {
   const strings = useStrings();
-  const status = Tankopedia.use((state) => state.protagonist.status);
+
+  const shell = Tankopedia.use((state) => state.protagonist.shell);
+  const speed = Tankopedia.use((state) => state.protagonist.speed);
 
   return (
     <div className={styles.section}>
       <div className={styles.header}>
-        <Heading size="4">{strings.tanks.loadout.state}</Heading>
+        <Heading size="4">{strings.tanks.loadout.dynamics}</Heading>
 
         <IconButton
           color="red"
@@ -84,7 +87,36 @@ function State() {
         </IconButton>
       </div>
 
-      <div className={styles.states}>
+      <div className={styles.state}>
+        <span>shell: {shell}</span>
+        <span>speed: {speed}</span>
+      </div>
+    </div>
+  );
+}
+
+function Status() {
+  const strings = useStrings();
+  const status = Tankopedia.use((state) => state.protagonist.status);
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.header}>
+        <Heading size="4">{strings.tanks.loadout.status}</Heading>
+
+        <IconButton
+          color="red"
+          onClick={() => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.consumables = [];
+            });
+          }}
+        >
+          <TrashIcon />
+        </IconButton>
+      </div>
+
+      <div className={styles.status}>
         {vehicleStatusKeys.map((group, index) => (
           <div key={index} className={styles.group}>
             {group.map((key) => (

packages/website-ue/src/pages/[media]/tanks/big/[id].webp.ts

@@ -1,24 +1,23 @@
 import type { APIContext } from "astro";
 import { api } from "../../../../api/dynamic";
-import {
-  clientUnmountedResponse,
-  notFoundResponse,
-} from "../../../../api/responses";
+import { clientUnmountedResponse } from "../../../../api/responses";
+import { mixStaticPaths } from "../../../../astro/mixStaticPaths";
+import { assertDiscoveryTag } from "../../../../game/assertDiscoveryTag";
 import { game } from "../../../../game/game";
 import { clientUnmounted } from "../../../../game/unmounted";
 import { getStaticPaths as _getStaticPaths } from "../../../[api]/tanks/[id].json";
 import { getStaticPaths as __getStaticPaths } from "../../_index";
-import { mixStaticPaths } from "../../../../astro/mixStaticPaths";
 
 export const getStaticPaths = mixStaticPaths(__getStaticPaths, _getStaticPaths);
 
 export async function GET({ params }: APIContext<never, { id: string }>) {
   if (clientUnmounted) return clientUnmountedResponse;
 
-  const tank = await api.tank(params.id);
-  const image = game!.tankBigIcon(params.id, tank.tank!.visual_data);
+  const item = api.metadata.item(params.id);
+  const assetDiscovery = item.BlitzStaticAssetsDiscovery();
+  const tag = assertDiscoveryTag(assetDiscovery);
+  const icon = game!.tankBigIcon(tag);
+  const array = new Uint8Array(icon);
 
-  if (image.length === 0) return notFoundResponse;
-
-  return new Response(new Uint8Array(image));
+  return new Response(array);
 }

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

@@ -17,6 +17,10 @@ export interface TankState {
   speed: number;
   terrainHardness: TerrainHardness;
 
+  isHullRotating: boolean;
+  isTurretRotating: boolean;
+  isGunRotating: boolean;
+
   status: Record<VehicleStatusKey, boolean>;
 }