feat: floating editor

src/components/Armor/components/ArmorPlateDisplay.tsx

@@ -1,7 +1,8 @@
-import { Card, Code, Flex, Text } from '@radix-ui/themes';
+import { Card, Code, Flex, Text, TextField } from '@radix-ui/themes';
 import { Html } from '@react-three/drei';
 import { useRef } from 'react';
 import { radToDeg } from 'three/src/math/MathUtils';
+import { resolveArmorIndex } from '../../../core/blitzkit/resolveArmorIndex';
 import * as App from '../../../stores/app';
 import * as Duel from '../../../stores/duel';
 import * as TankopediaEphemeral from '../../../stores/tankopediaEphemeral';
@@ -16,12 +17,16 @@ export function ArmorPlateDisplay() {
   const developerMode = App.use((state) => state.developerMode);
   const devThicknessInput = useRef<HTMLInputElement>(null);
   const duelStore = Duel.useStore();
+  const input = useRef<HTMLInputElement>(null);
 
   if (highlightArmor === undefined) return null;
 
   return (
     <group position={highlightArmor.point}>
-      <Html center>
+      <Html
+        center
+        style={{ pointerEvents: highlightArmor.editingPlate ? 'auto' : 'none' }}
+      >
         <Card
           mb="4"
           style={{
@@ -38,6 +43,7 @@ export function ArmorPlateDisplay() {
                 mm
               </Text>
             </Text>
+
             {highlightArmor.type !== ArmorType.External && (
               <Text size="2" color="gray">
                 {highlightArmor.thicknessAngled.toFixed(0)}
@@ -54,6 +60,67 @@ export function ArmorPlateDisplay() {
                 </Text>
               </>
             )}
+
+            {highlightArmor.editingPlate && (
+              <TextField.Root
+                mt="2"
+                ref={input}
+                type="number"
+                autoFocus
+                onFocus={(event) => event.target.select()}
+                onKeyDown={(event) => {
+                  if (!highlightArmor.editingPlate) return;
+
+                  const index = resolveArmorIndex(highlightArmor.name);
+
+                  if (index === undefined) return;
+
+                  const thickness = event.currentTarget.valueAsNumber;
+
+                  if (isNaN(thickness) || thickness < 0) return;
+
+                  if (event.key === 'Enter') {
+                    input.current?.blur();
+
+                    mutateTankopediaEphemeral((draft) => {
+                      draft.highlightArmor = undefined;
+                      const { protagonist } = duelStore.getState();
+                      const tank = draft.model;
+                      const turret = tank.turrets[protagonist.turret.id];
+                      const gun = turret.guns[protagonist.gun.id];
+                      const track = tank.tracks[protagonist.track.id];
+
+                      console.log(highlightArmor.name);
+                      if (highlightArmor.name.startsWith('hull_')) {
+                        tank.armor.thickness[index] = thickness;
+                      } else if (highlightArmor.name.startsWith('turret_')) {
+                        turret.armor.thickness[index] = thickness;
+                      } else if (highlightArmor.name.startsWith('gun_')) {
+                        if (highlightArmor.name.includes('_armor_')) {
+                          gun.armor.thickness[index] = thickness;
+                        } else {
+                          gun.thickness = thickness;
+                        }
+                      } else if (highlightArmor.name.startsWith('chassis_')) {
+                        track.thickness = thickness;
+                      }
+                    });
+                  } else if (event.key === 'Escape') {
+                    input.current?.blur();
+                    mutateTankopediaEphemeral((draft) => {
+                      draft.highlightArmor = undefined;
+                    });
+                  }
+                }}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  event.preventDefault();
+                }}
+                defaultValue={highlightArmor.thickness.toFixed(0)}
+              >
+                <TextField.Slot side="right">mm</TextField.Slot>
+              </TextField.Root>
+            )}
           </Flex>
         </Card>
       </Html>

src/components/Armor/components/StaticArmorSceneComponent.tsx

@@ -173,41 +173,31 @@ export function StaticArmorSceneComponent({
 
           const { editStatic } = tankopediaEphemeralStore.getState();
 
-          if (editStatic) {
-            mutateTankopediaEphemeralStore((draft) => {
-              draft.editingPlate = {
-                name: name,
-                default: thickness,
-              };
-            });
-          } else {
-            const bounds = new Box3().setFromObject(event.object);
-            const point = bounds.min
-              .clone()
-              .add(bounds.max)
-              .divideScalar(2)
-              .setY(bounds.max.y);
-            const cameraNormal = camera.position.clone().sub(point).normalize();
-            const surfaceNormal = event
-              .normal!.clone()
-              .applyQuaternion(
-                event.object.getWorldQuaternion(new Quaternion()),
-              );
-            const angle = surfaceNormal.angleTo(cameraNormal);
-            const thicknessAngled = thickness / Math.sin(Math.PI / 2 - angle);
-
-            mutateTankopediaEphemeralStore((draft) => {
-              draft.highlightArmor = {
-                type: props.type,
-                name,
-                point,
-                thickness,
-                thicknessAngled,
-                angle,
-                color: `#${color.getHexString()}`,
-              };
-            });
-          }
+          const bounds = new Box3().setFromObject(event.object);
+          const point = bounds.min
+            .clone()
+            .add(bounds.max)
+            .divideScalar(2)
+            .setY(bounds.max.y);
+          const cameraNormal = camera.position.clone().sub(point).normalize();
+          const surfaceNormal = event
+            .normal!.clone()
+            .applyQuaternion(event.object.getWorldQuaternion(new Quaternion()));
+          const angle = surfaceNormal.angleTo(cameraNormal);
+          const thicknessAngled = thickness / Math.sin(Math.PI / 2 - angle);
+          console.log(name);
+          mutateTankopediaEphemeralStore((draft) => {
+            draft.highlightArmor = {
+              type: props.type,
+              name,
+              point,
+              thickness,
+              thicknessAngled,
+              angle,
+              color: `#${color.getHexString()}`,
+              editingPlate: editStatic,
+            };
+          });
         },
       })}