feat: more controllers

packages/website-ue/src/pages/tanks/[slug]/_index.tsx

@@ -4,6 +4,7 @@ import { api } from "../../../core/api/dynamic";
 import { characteristicsOrder } from "../../../core/tankopedia/characteristicsOrder";
 import { computeCharacteristics } from "../../../core/tankopedia/computeCharacteristics";
 import { renderCharacteristic } from "../../../core/tankopedia/renderCharacteristic";
+import { TerrainHardness } from "../../../core/tankopedia/tankState";
 import { useAwait } from "../../../hooks/useAwait";
 import { Tankopedia } from "../../../stores/tankopedia";
 
@@ -30,6 +31,8 @@ function Content({ id }: { id: string }) {
     <>
       <h1>{id}</h1>
 
+      <br />
+
       <div style={{ display: "flex", flexWrap: "wrap" }}>
         {times(tank.upgrade_stages.length + 1, (index) => (
           <button
@@ -63,6 +66,106 @@ function Content({ id }: { id: string }) {
         ))}
       </div>
 
+      <br />
+
+      <div>
+        <span>speed (0 - {characteristics.speed_forward})</span>
+        <input
+          type="range"
+          min={0}
+          max={characteristics.speed_forward as number}
+          value={protagonist.speed}
+          onChange={(event) => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.speed = event.target.valueAsNumber;
+            });
+          }}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <span>isHullTraversing</span>
+        <input
+          type="checkbox"
+          value={`${protagonist.isHullTraversing}`}
+          onChange={(event) => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isHullTraversing = event.target.checked;
+            });
+          }}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <span>isTurretTraversing</span>
+        <input
+          type="checkbox"
+          value={`${protagonist.isTurretTraversing}`}
+          onChange={(event) => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isTurretTraversing = event.target.checked;
+            });
+          }}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <span>isShooting</span>
+        <input
+          type="checkbox"
+          value={`${protagonist.isShooting}`}
+          onChange={(event) => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isShooting = event.target.checked;
+            });
+          }}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <span>isGunDamaged</span>
+        <input
+          type="checkbox"
+          value={`${protagonist.isGunDamaged}`}
+          onChange={(event) => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isGunDamaged = event.target.checked;
+            });
+          }}
+        />
+      </div>
+
+      <br />
+
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        {Object.values(TerrainHardness).map(
+          (hardness) =>
+            typeof hardness === "number" && (
+              <button
+                key={hardness}
+                onClick={() => {
+                  Tankopedia.mutate((draft) => {
+                    draft.protagonist.terrainHardness = hardness;
+                  });
+                }}
+              >
+                {TerrainHardness[hardness]}{" "}
+                {hardness === protagonist.terrainHardness && "(selected)"}
+              </button>
+            )
+        )}
+      </div>
+
+      <br />
+
       {characteristicsOrder.map(({ group, order }) => (
         <>
           <h2 key={group}>{group}</h2>