feat: auto poser

src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx

@@ -4,6 +4,8 @@ import { Canvas } from '@react-three/fiber';
 import { Suspense, use, useEffect, useRef, useState } from 'react';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { modelDefinitions } from '../../../../../../core/blitzkrieg/modelDefinitions';
+import { modelTransformEvent } from '../../../../../../core/blitzkrieg/modelTransform';
+import { Pose, poseEvent } from '../../../../../../core/blitzkrieg/pose';
 import { theme } from '../../../../../../stitches.config';
 import mutateTankopedia, {
   TankopediaMode,
@@ -29,6 +31,11 @@ export function TankDisplay({ duel }: TankDisplayProps) {
   const canvasWrapper = useRef<HTMLDivElement>(null);
   const [isFullScreen, setIsFullScreen] = useState(false);
   const mode = useTankopedia((state) => state.mode);
+  const tankModelDefinition = awaitedModelDefinitions[duel.protagonist.tank.id];
+  const turretModelDefinition =
+    tankModelDefinition.turrets[duel.protagonist.turret.id];
+  const gunModelDefinition =
+    turretModelDefinition.guns[duel.protagonist.gun.id];
 
   function handlePointerDown() {
     window.addEventListener('pointermove', handlePointerMove);
@@ -49,23 +56,37 @@ export function TankDisplay({ duel }: TankDisplayProps) {
       setIsFullScreen(document.fullscreenElement !== null);
     }
 
+    function handlePoseEvent(pose: Pose) {
+      switch (pose) {
+        case Pose.HullDown: {
+          mutateTankopedia((draft) => {
+            const [pitch, yaw] = applyPitchYawLimits(
+              -Infinity,
+              0,
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+            );
+
+            modelTransformEvent.emit({ pitch, yaw });
+            draft.model.physical.pitch = pitch;
+            draft.model.physical.yaw = yaw;
+          });
+        }
+      }
+    }
+
+    poseEvent.on(handlePoseEvent);
     document.addEventListener('fullscreenchange', handleFullScreenChange);
 
     return () => {
       document.removeEventListener('fullscreenchange', handleFullScreenChange);
+      poseEvent.off(handlePoseEvent);
     };
   });
 
   useEffect(() => {
     if (!duel.protagonist) return void 0;
 
-    const tankModelDefinition =
-      awaitedModelDefinitions[duel.protagonist.tank.id];
-    const turretModelDefinition =
-      tankModelDefinition.turrets[duel.protagonist.turret.id];
-    const gunModelDefinition =
-      turretModelDefinition.guns[duel.protagonist.gun.id];
-
     mutateTankopedia((draft) => {
       [draft.model.physical.pitch, draft.model.physical.yaw] =
         applyPitchYawLimits(
@@ -116,7 +137,7 @@ export function TankDisplay({ duel }: TankDisplayProps) {
                 camera={{ fov: 20 }}
                 onPointerDown={handlePointerDown}
               >
-                <Controls />
+                <Controls duel={duel} />
                 <SceneProps />
                 <Lighting />
 

src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx

@@ -1,10 +1,12 @@
 import {
   EnterFullScreenIcon,
   ExitFullScreenIcon,
+  EyeOpenIcon,
   GearIcon,
 } from '@radix-ui/react-icons';
 import { Button, DropdownMenu, Flex } from '@radix-ui/themes';
 import { RefObject } from 'react';
+import { Pose, poseEvent } from '../../../../../../../core/blitzkrieg/pose';
 import mutateTankopedia, {
   useTankopedia,
 } from '../../../../../../../stores/tankopedia';
@@ -30,6 +32,25 @@ export function Options({ isFullScreen, canvas }: OptionsProps) {
         right: 18,
       }}
     >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <Button color={showGrid ? 'purple' : 'gray'} variant="ghost">
+            <EyeOpenIcon />
+          </Button>
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.Item
+            onClick={() => {
+              console.log('called?');
+              poseEvent.emit(Pose.HullDown);
+            }}
+          >
+            Hull down
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <Button color={showGrid ? 'purple' : 'gray'} variant="ghost">