feat: on click display

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

@@ -3,6 +3,7 @@ import { Button, Card, Flex, Tabs, Theme } from '@radix-ui/themes';
 import { PerspectiveCamera } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
 import { Suspense, use, useEffect, useRef, useState } from 'react';
+import { ShotDisplay } from '../../../../../../components/ShotDisplay';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { modelDefinitions } from '../../../../../../core/blitzkrieg/modelDefinitions';
 import { modelTransformEvent } from '../../../../../../core/blitzkrieg/modelTransform';
@@ -166,12 +167,22 @@ export function TankSandbox() {
 
             <div style={{ height: '100%' }}>
               {loadModel ? (
-                <Canvas shadows ref={canvas} onPointerDown={handlePointerDown}>
+                <Canvas
+                  shadows
+                  ref={canvas}
+                  onPointerDown={handlePointerDown}
+                  onPointerMissed={() => {
+                    mutateTankopediaTemporary((draft) => {
+                      draft.shot = undefined;
+                    });
+                  }}
+                >
                   <PerspectiveCamera makeDefault fov={25} far={32} />
                   <Controls />
                   <SceneProps />
 
                   <Suspense fallback={<ModelLoader />}>
+                    <ShotDisplay />
                     <Lighting />
                     <TankModel />
                     <TankArmor />

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

@@ -144,6 +144,9 @@ export const TankModel = memo(() => {
             mutateTankopediaPersistent((draft) => {
               draft.model.visual.controlsEnabled = false;
             });
+            mutateTankopediaTemporary((draft) => {
+              draft.shot = undefined;
+            });
 
             window.addEventListener('pointermove', handlePointerMove);
             window.addEventListener('pointerup', handlePointerUp);
@@ -208,6 +211,9 @@ export const TankModel = memo(() => {
               mutateTankopediaPersistent((draft) => {
                 draft.model.visual.controlsEnabled = false;
               });
+              mutateTankopediaTemporary((draft) => {
+                draft.shot = undefined;
+              });
               window.addEventListener('pointermove', handlePointerMove);
               window.addEventListener('pointerup', handlePointerUp);
             }
@@ -272,6 +278,9 @@ export const TankModel = memo(() => {
               mutateTankopediaPersistent((draft) => {
                 draft.model.visual.controlsEnabled = false;
               });
+              mutateTankopediaTemporary((draft) => {
+                draft.shot = undefined;
+              });
               pitch = physical.pitch;
               yaw = physical.yaw;
               window.addEventListener('pointermove', handlePointerMove);