feat: better plate editing integration

src/app/tools/tankopedia/[id]/components/Prompts.tsx

@@ -0,0 +1,96 @@
+import { Button, Dialog, Flex, Text, TextField } from '@radix-ui/themes';
+import { useRef } from 'react';
+import { ModelArmor } from '../../../../../core/blitzkit/modelDefinitions';
+import { resolveArmorIndex } from '../../../../../core/blitzkit/resolveArmorIndex';
+import * as Duel from '../../../../../stores/duel';
+import * as TankopediaEphemeral from '../../../../../stores/tankopediaEphemeral';
+
+export function Prompts() {
+  const input = useRef<HTMLInputElement>(null);
+  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
+  const editingPlate = TankopediaEphemeral.use((state) => state.editingPlate);
+  const duelStore = Duel.useStore();
+
+  return (
+    <Dialog.Root
+      open={editingPlate !== undefined}
+      onOpenChange={() => {
+        mutateTankopediaEphemeral((draft) => {
+          draft.editingPlate = undefined;
+        });
+      }}
+    >
+      <Dialog.Content style={{ width: 'fit-content' }}>
+        <Flex align="center" gap="2" direction="column">
+          <Text>Edit thickness</Text>
+
+          <TextField.Root
+            mt="2"
+            ref={input}
+            type="number"
+            onFocus={() => {
+              input.current?.select();
+            }}
+            onKeyDown={(event) => {
+              if (!editingPlate) return;
+
+              if (event.key === 'Enter') {
+                input.current?.blur();
+                mutateTankopediaEphemeral((draft) => {
+                  draft.editingPlate = undefined;
+                  draft.highlightArmor = undefined;
+                  const { protagonist } = duelStore.getState();
+                  let armor: ModelArmor;
+
+                  if (editingPlate.name.startsWith('hull_')) {
+                    armor = draft.model.armor;
+                  } else if (editingPlate.name.startsWith('turret_')) {
+                    armor = draft.model.turrets[protagonist.turret.id].armor;
+                  } else if (editingPlate.name.startsWith('gun_')) {
+                    armor =
+                      draft.model.turrets[protagonist.turret.id].guns[
+                        protagonist.gun.id
+                      ].armor;
+                  } else return;
+
+                  const index = resolveArmorIndex(editingPlate.name);
+
+                  if (index === undefined) return;
+
+                  const input = event.currentTarget.valueAsNumber;
+
+                  if (!isNaN(input)) {
+                    armor.thickness[index] = input;
+                  }
+                });
+              } else if (event.key === 'Escape') {
+                input.current?.blur();
+                mutateTankopediaEphemeral((draft) => {
+                  draft.highlightArmor = undefined;
+                });
+              }
+            }}
+            onClick={(event) => {
+              event.stopPropagation();
+              event.preventDefault();
+            }}
+            defaultValue={editingPlate?.default.toFixed(0)}
+          >
+            <TextField.Slot side="right">mm</TextField.Slot>
+          </TextField.Root>
+
+          <Flex gap="2" width="100%">
+            <Dialog.Close>
+              <Button style={{ flex: 1 }} color="red" variant="outline">
+                Cancel
+              </Button>
+            </Dialog.Close>
+            <Dialog.Close>
+              <Button style={{ flex: 1 }}>Apply</Button>
+            </Dialog.Close>
+          </Flex>
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

src/app/tools/tankopedia/[id]/components/Thicknesses.tsx

@@ -1,5 +1,5 @@
-import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
-import { Box, Flex, Text } from '@radix-ui/themes';
+import { EyeClosedIcon, EyeOpenIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { Box, Button, Checkbox, Flex, Text } from '@radix-ui/themes';
 import { ThicknessRange } from '../../../../../components/StaticArmor/components/StaticArmorScene';
 import * as TankopediaEphemeral from '../../../../../stores/tankopediaEphemeral';
 import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
@@ -20,6 +20,8 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
   );
   const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
+  const editStatic = TankopediaEphemeral.use((state) => state.editStatic);
+  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
 
   return (
     <Flex
@@ -136,6 +138,37 @@ export function Thicknesses({ thicknessRange }: ThicknessesProps) {
           }}
         />
       </Flex>
+
+      <Flex align="center" gap="2" mt="2">
+        <Button
+          color="red"
+          size="1"
+          variant="ghost"
+          onClick={() => {
+            mutateTankopediaEphemeral((draft) => {
+              draft.editStatic = false;
+              draft.model = tankopediaEphemeralStore.getInitialState().model;
+            });
+          }}
+        >
+          <ReloadIcon />
+          Reset
+        </Button>
+
+        <Flex
+          gap="2"
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            mutateTankopediaEphemeral((draft) => {
+              draft.editStatic = !draft.editStatic;
+              draft.highlightArmor = undefined;
+            });
+          }}
+        >
+          <Text size="1">Edit</Text>
+          <Checkbox size="2" checked={editStatic} />
+        </Flex>
+      </Flex>
     </Flex>
   );
 }

src/app/tools/tankopedia/[id]/page.tsx

@@ -10,6 +10,7 @@ import { HistorySection } from './components/HistorySection';
 import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
 import { HeroSection } from './components/Model/HeroSection';
 import { TechTreeSection } from './components/Model/TechTreeSection';
+import { Prompts } from './components/Prompts';
 import { ShotDisplaySection } from './components/ShotDisplaySection';
 import { VideoSection } from './components/VideoSection';
 
@@ -74,6 +75,8 @@ export default function Page({ params }: { params: { id: string } }) {
 
   return (
     <PageWrapper p="0" noMaxWidth color="purple" size={1600}>
+      <Prompts />
+
       <HeroSection id={id} />
       <ShotDisplaySection />
       {!exempt && <AdMidSectionResponsive />}