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) => (