state buttons

packages/i18n/strings/en.json

@@ -263,6 +263,7 @@
     },
 
     "loadout": {
+      "state": "State",
       "consumables": "Consumables",
       "modules": "Modules",
       "equipment": "Equipment",

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));

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;
 }