From b297babde5173d6aa0fff0e09352a909aa69e6cf Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 29 May 2026 14:27:38 -0500
Subject: [PATCH] state buttons

---
 packages/i18n/strings/en.json                 |   1 +
 .../TankopediaLoadout/index.module.css        |  10 ++
 .../components/TankopediaLoadout/index.tsx    | 113 ++++++++++++++++++
 3 files changed, 124 insertions(+)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index f3e24bf4c..d1f28bc87 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -263,6 +263,7 @@
     },
 
     "loadout": {
+      "state": "State",
       "consumables": "Consumables",
       "modules": "Modules",
       "equipment": "Equipment",
diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.module.css b/packages/website-ue/src/components/TankopediaLoadout/index.module.css
index 1ca654c48..3139b9a63 100644
--- a/packages/website-ue/src/components/TankopediaLoadout/index.module.css
+++ b/packages/website-ue/src/components/TankopediaLoadout/index.module.css
@@ -13,6 +13,16 @@
     }
   }
 
+  .state {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+
+    .toggle {
+      font-size: 2em;
+    }
+  }
+
   .consumables {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
diff --git a/packages/website-ue/src/components/TankopediaLoadout/index.tsx b/packages/website-ue/src/components/TankopediaLoadout/index.tsx
index 62c285437..a92a3ad85 100644
--- a/packages/website-ue/src/components/TankopediaLoadout/index.tsx
+++ b/packages/website-ue/src/components/TankopediaLoadout/index.tsx
@@ -11,6 +11,7 @@ import {
   CornerBottomLeftIcon,
   DoubleArrowLeftIcon,
   DoubleArrowRightIcon,
+  ExclamationTriangleIcon,
   ResetIcon,
   TrashIcon,
 } from "@radix-ui/react-icons";
@@ -54,6 +55,7 @@ export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
 
   return (
     <>
+      <State />
       {showModules && <Modules />}
       <Equipment />
       <Consumables characteristics={characteristics} />
@@ -61,6 +63,117 @@ export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
   );
 }
 
+function State() {
+  const strings = useStrings();
+  const isShooting = Tankopedia.use((state) => state.protagonist.isShooting);
+  const isGunDamaged = Tankopedia.use(
+    (state) => state.protagonist.isGunDamaged,
+  );
+  const isTurretTraversing = Tankopedia.use(
+    (state) => state.protagonist.isTurretTraversing,
+  );
+  const isHullTraversing = Tankopedia.use(
+    (state) => state.protagonist.isHullTraversing,
+  );
+  const isCaughtOnFire = Tankopedia.use(
+    (state) => state.protagonist.isCaughtOnFire,
+  );
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.header}>
+        <Heading size="4">{strings.tanks.loadout.state}</Heading>
+
+        <IconButton
+          color="red"
+          onClick={() => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.consumables = [];
+            });
+          }}
+        >
+          <TrashIcon />
+        </IconButton>
+      </div>
+
+      <div className={styles.state}>
+        <IconButton
+          radius="1"
+          className={styles.toggle}
+          color={isShooting ? undefined : "gray"}
+          variant={isShooting ? "surface" : "soft"}
+          onClick={() => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isShooting = !draft.protagonist.isShooting;
+            });
+          }}
+        >
+          <ExclamationTriangleIcon />
+        </IconButton>
+
+        <IconButton
+          radius="1"
+          className={styles.toggle}
+          color={isGunDamaged ? undefined : "gray"}
+          variant={isGunDamaged ? "surface" : "soft"}
+          onClick={() => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isGunDamaged = !draft.protagonist.isGunDamaged;
+            });
+          }}
+        >
+          <ExclamationTriangleIcon />
+        </IconButton>
+
+        <IconButton
+          radius="1"
+          className={styles.toggle}
+          color={isTurretTraversing ? undefined : "gray"}
+          variant={isTurretTraversing ? "surface" : "soft"}
+          onClick={() => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isTurretTraversing =
+                !draft.protagonist.isTurretTraversing;
+            });
+          }}
+        >
+          <ExclamationTriangleIcon />
+        </IconButton>
+
+        <IconButton
+          radius="1"
+          className={styles.toggle}
+          color={isHullTraversing ? undefined : "gray"}
+          variant={isHullTraversing ? "surface" : "soft"}
+          onClick={() => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isHullTraversing =
+                !draft.protagonist.isHullTraversing;
+            });
+          }}
+        >
+          <ExclamationTriangleIcon />
+        </IconButton>
+
+        <IconButton
+          radius="1"
+          className={styles.toggle}
+          color={isCaughtOnFire ? undefined : "gray"}
+          variant={isCaughtOnFire ? "surface" : "soft"}
+          onClick={() => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isCaughtOnFire =
+                !draft.protagonist.isCaughtOnFire;
+            });
+          }}
+        >
+          <ExclamationTriangleIcon />
+        </IconButton>
+      </div>
+    </div>
+  );
+}
+
 interface ConsumablesProps {
   characteristics: ComputedCharacteristics;
 }