feat: better plate editing integration

src/components/Armor/components/ArmorPlateDisplay.tsx

@@ -1,9 +1,7 @@
-import { Card, Code, Flex, Text, TextField } from '@radix-ui/themes';
+import { Card, Code, Flex, Text } from '@radix-ui/themes';
 import { Html } from '@react-three/drei';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { radToDeg } from 'three/src/math/MathUtils';
-import { ModelArmor } from '../../../core/blitzkit/modelDefinitions';
-import { resolveArmorIndex } from '../../../core/blitzkit/resolveArmorIndex';
 import * as App from '../../../stores/app';
 import * as Duel from '../../../stores/duel';
 import * as TankopediaEphemeral from '../../../stores/tankopediaEphemeral';
@@ -19,10 +17,6 @@ export function ArmorPlateDisplay() {
   const devThicknessInput = useRef<HTMLInputElement>(null);
   const duelStore = Duel.useStore();
 
-  useEffect(() => {
-    devThicknessInput.current?.focus();
-  });
-
   if (highlightArmor === undefined) return null;
 
   return (
@@ -52,60 +46,12 @@ export function ArmorPlateDisplay() {
                 </Text>
               </Text>
             )}
+
             {developerMode && (
               <>
                 <Text mt="2" color="gray" size="2">
                   <b>DEV:</b> <Code>{highlightArmor.name}</Code>
                 </Text>
-                <TextField.Root
-                  type="number"
-                  style={{ width: 96 }}
-                  onKeyDown={(event) => {
-                    if (event.key === 'Enter') {
-                      devThicknessInput.current?.blur();
-                      mutateTankopediaEphemeral((draft) => {
-                        draft.highlightArmor = undefined;
-                        const { protagonist } = duelStore.getState();
-                        let armor: ModelArmor;
-
-                        if (highlightArmor.name.startsWith('hull_')) {
-                          armor = draft.model.armor;
-                        } else if (highlightArmor.name.startsWith('turret_')) {
-                          armor =
-                            draft.model.turrets[protagonist.turret.id].armor;
-                        } else if (highlightArmor.name.startsWith('gun_')) {
-                          armor =
-                            draft.model.turrets[protagonist.turret.id].guns[
-                              protagonist.gun.id
-                            ].armor;
-                        } else return;
-
-                        const index = resolveArmorIndex(highlightArmor.name);
-
-                        if (index === undefined) return;
-
-                        const input = event.currentTarget.valueAsNumber;
-
-                        if (!isNaN(input)) {
-                          armor.thickness[index] = input;
-                        }
-                      });
-                    } else if (event.key === 'Escape') {
-                      devThicknessInput.current?.blur();
-                      mutateTankopediaEphemeral((draft) => {
-                        draft.highlightArmor = undefined;
-                      });
-                    }
-                  }}
-                  key={highlightArmor.name}
-                  defaultValue={highlightArmor.thickness.toFixed(0)}
-                  mt="1"
-                  autoFocus
-                  ref={devThicknessInput}
-                  size="1"
-                >
-                  <TextField.Slot side="right">mm</TextField.Slot>
-                </TextField.Root>
               </>
             )}
           </Flex>

src/components/Armor/components/SpacedArmorSceneComponent/index.tsx

@@ -104,7 +104,6 @@ export function SpacedArmorSceneComponent({
 
     let color: Color;
     let opacity: number;
-    let renderOrder = 1;
     let depthWrite = true;
 
     switch (props.type) {
@@ -121,7 +120,6 @@ export function SpacedArmorSceneComponent({
       case ArmorType.External:
         color = externalModuleColor;
         opacity = 1 / 8;
-        renderOrder = 0;
         depthWrite = false;
         break;
     }
@@ -142,7 +140,7 @@ export function SpacedArmorSceneComponent({
     const outlineMaterial = useMemo(
       () =>
         new LineBasicMaterial({
-          color: color.clone().multiplyScalar(1 - 2 ** -3),
+          color: color.clone().multiplyScalar(2 ** 2),
         }),
       [thickness],
     );
@@ -210,37 +208,51 @@ export function SpacedArmorSceneComponent({
           onClick(event) {
             event.stopPropagation();
 
-            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);
+            const { editStatic } = tankopediaEphemeralStore.getState();
 
-            mutateTankopediaEphemeralStore((draft) => {
-              draft.highlightArmor = {
-                type: props.type,
-                name: props.name,
-                point,
-                thickness,
-                thicknessAngled,
-                angle,
-                color: `#${color.getHexString()}`,
-              };
-            });
+            if (editStatic) {
+              mutateTankopediaEphemeralStore((draft) => {
+                draft.editingPlate = {
+                  name: props.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: props.name,
+                  point,
+                  thickness,
+                  thicknessAngled,
+                  angle,
+                  color: `#${color.getHexString()}`,
+                };
+              });
+            }
           },
         })}
 
         <lineSegments material={outlineMaterial}>
-          <edgesGeometry args={[(node as Mesh).geometry]} />
+          <edgesGeometry args={[(node as Mesh).geometry, 45]} />
         </lineSegments>
       </>
     );