feat: ricochet angle

src/components/ShotDisplay.tsx

@@ -1,7 +1,8 @@
 import { Card, Flex, Text } from '@radix-ui/themes';
 import { Html } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
 import { ReactNode, useEffect, useRef } from 'react';
-import { Group, Vector3 } from 'three';
+import { Group, Mesh, Vector3 } from 'three';
 import { radToDeg } from 'three/src/math/MathUtils';
 import { AngledPenetration } from '../icons/AngledPenetration';
 import { Block } from '../icons/Block';
@@ -21,27 +22,65 @@ export const SHOT_ICONS: Record<Shot['type'], ReactNode> = {
   penetration: <NominalPenetration width={24} height={24} />,
 };
 
-const THICKNESS = 0.05;
+const THICKNESS = 0.025;
 const LENGTH = 2;
 
 export function ShotDisplay() {
   const shot = useTankopediaTemporary((state) => state.shot);
-  const wrapper = useRef<Group>(null);
+  const entryWrapper = useRef<Group>(null);
+  const entryLine = useRef<Mesh>(null);
+  const circle = useRef<Mesh>(null);
+  const exitWrapper = useRef<Group>(null);
+  const exitLine = useRef<Mesh>(null);
+
+  useFrame(({ clock }) => {
+    const t1 = clock.elapsedTime % 1;
+    const t2 = (clock.elapsedTime + 0.5) % 1;
+
+    entryLine.current?.position.set(0, 0, LENGTH - t1 * LENGTH);
+    entryLine.current?.scale.set(1, -2 * Math.abs(t1 - 0.5) + 1, 1);
+    exitLine.current?.position.set(0, 0, t2 * LENGTH);
+    exitLine.current?.scale.set(1, -2 * Math.abs(t2 - 0.5) + 1, 1);
+  });
 
   useEffect(() => {
     if (!shot) return;
 
     const point = new Vector3(...shot.point);
     const shotNormal = new Vector3(...shot.shellNormal);
+    const surfaceNormal = new Vector3(...shot.surfaceNormal);
+    const bounceNormal = shotNormal
+      .clone()
+      .multiplyScalar(-1)
+      .sub(
+        surfaceNormal
+          .clone()
+          .multiplyScalar(
+            2 * surfaceNormal.dot(shotNormal.clone().multiplyScalar(-1)),
+          ),
+      );
 
-    wrapper.current?.position.set(...shot.point);
+    entryWrapper.current?.position.set(...shot.point);
-    wrapper.current?.lookAt(point.clone().add(shotNormal));
+    entryWrapper.current?.lookAt(point.clone().add(shotNormal));
+    exitWrapper.current?.position.set(...shot.point);
+    exitWrapper.current?.lookAt(point.clone().add(bounceNormal));
+    circle.current?.position.set(...shot.point);
+    circle.current?.lookAt(point.clone().add(surfaceNormal));
   }, [shot]);
 
   if (!shot) return null;
 
   return (
-    <group ref={wrapper}>
+    <>
+      <mesh ref={circle}>
+        <torusGeometry args={[0.05, 0.0125, 4, 16]} />
+        <meshBasicMaterial
+          color={shot.type === 'penetration' ? 'green' : 'red'}
+          depthTest={false}
+        />
+      </mesh>
+
+      <group ref={entryWrapper}>
         <Html position={[0, 0, LENGTH]}>
           <Card
             style={{
@@ -86,10 +125,30 @@ export function ShotDisplay() {
           </Card>
         </Html>
 
-      <mesh position={[0, 0, LENGTH / 2]} rotation={[Math.PI / 2, 0, 0]}>
+        <mesh
+          position={[0, 0, LENGTH / 2]}
+          rotation={[Math.PI / 2, 0, 0]}
+          ref={entryLine}
+        >
           <cylinderGeometry args={[THICKNESS / 2, THICKNESS / 2, LENGTH, 8]} />
           <meshBasicMaterial color="white" depthTest={false} />
         </mesh>
       </group>
+
+      {shot.type === 'ricochet' && (
+        <group ref={exitWrapper}>
+          <mesh
+            position={[0, 0, LENGTH / 2]}
+            rotation={[Math.PI / 2, 0, 0]}
+            ref={exitLine}
+          >
+            <cylinderGeometry
+              args={[THICKNESS / 2, THICKNESS / 2, LENGTH, 8]}
+            />
+            <meshBasicMaterial color="white" depthTest={false} />
+          </mesh>
+        </group>
+      )}
+    </>
   );
 }