From b3ecb1e9b90c913161fa73e221b870181dab38e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 3 Jan 2024 14:15:34 -0600
Subject: [PATCH] feat: track turning

---
 .../[id]/components/HullContainer.tsx         | 51 +++++++++++++++----
 src/app/tools/tankopedia/[id]/page.tsx        |  2 +
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/HullContainer.tsx b/src/app/tools/tankopedia/[id]/components/HullContainer.tsx
index 1312fe8ad..2b9cdfae5 100644
--- a/src/app/tools/tankopedia/[id]/components/HullContainer.tsx
+++ b/src/app/tools/tankopedia/[id]/components/HullContainer.tsx
@@ -1,6 +1,6 @@
 import { ThreeEvent, useThree } from '@react-three/fiber';
 import { ReactNode, forwardRef, useImperativeHandle, useRef } from 'react';
-import { Group, Mesh, Object3D } from 'three';
+import { Group, Mesh, MeshStandardMaterial, Object3D, Vector2 } from 'three';
 import { resolveJsxTree } from '../../../../../core/blitzkrieg/resolveJsxTree';
 import { normalizeAnglePI } from '../../../../../core/math/normalizeAngle180';
 
@@ -10,10 +10,15 @@ interface HullContainerProps {
   objects: Object3D[];
   onYawStart: () => void;
   onYawEnd: (yaw: number) => void;
+  onTrackStart: () => void;
+  onTrackEnd: () => void;
 }
 
 export const HullContainer = forwardRef<Group, HullContainerProps>(
-  ({ children, yaw, objects, onYawStart, onYawEnd }, ref) => {
+  (
+    { children, yaw, objects, onYawStart, onYawEnd, onTrackEnd, onTrackStart },
+    ref,
+  ) => {
     const canvas = useThree((state) => state.gl.domElement);
     const hullContainer = useRef<Group>(null);
 
@@ -31,13 +36,19 @@ export const HullContainer = forwardRef<Group, HullContainerProps>(
           function handlePointerDown(event: ThreeEvent<PointerEvent>) {
             event.stopPropagation();
 
-            draftHullYaw = yaw;
+            if (isHull) {
+              draftHullYaw = yaw;
 
-            onYawStart();
-            window.addEventListener('pointermove', handlePointerMove);
-            window.addEventListener('pointerup', handlePointerUp);
+              onYawStart();
+              window.addEventListener('pointermove', handlePointerMoveHull);
+              window.addEventListener('pointerup', handlePointerUpHull);
+            } else if (isTrack) {
+              onTrackStart();
+              window.addEventListener('pointermove', handlePointerMoveTrack);
+              window.addEventListener('pointerup', handlePointerUpTrack);
+            }
           }
-          function handlePointerMove(event: PointerEvent) {
+          function handlePointerMoveHull(event: PointerEvent) {
             event.preventDefault();
 
             draftHullYaw += event.movementX * ((2 * Math.PI) / canvas.width);
@@ -46,10 +57,30 @@ export const HullContainer = forwardRef<Group, HullContainerProps>(
               hullContainer.current.rotation.z = draftHullYaw;
             }
           }
-          function handlePointerUp() {
+          function handlePointerUpHull() {
             onYawEnd(normalizeAnglePI(draftHullYaw));
-            window.removeEventListener('pointermove', handlePointerMove);
-            window.removeEventListener('pointerup', handlePointerUp);
+            window.removeEventListener('pointermove', handlePointerMoveHull);
+            window.removeEventListener('pointerup', handlePointerUpHull);
+          }
+          function handlePointerMoveTrack(event: PointerEvent) {
+            event.preventDefault();
+
+            const mesh = object as Mesh;
+            const material = mesh.material as MeshStandardMaterial;
+            const offset = new Vector2(
+              0,
+              -event.movementY * (6 / canvas.height) +
+                event.movementX * (6 / canvas.width),
+            );
+
+            material.map?.offset.add(offset);
+            material.roughnessMap?.offset.add(offset);
+            material.normalMap?.offset.add(offset);
+          }
+          function handlePointerUpTrack() {
+            onTrackEnd();
+            window.removeEventListener('pointermove', handlePointerMoveTrack);
+            window.removeEventListener('pointerup', handlePointerUpTrack);
           }
 
           if (!isVisible) return null;
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index b8c60bafb..51a21b44d 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/src/app/tools/tankopedia/[id]/page.tsx
@@ -146,6 +146,8 @@ export default function Page({ params }: { params: { id: string } }) {
                       setControlsEnabled(true);
                       setHullYaw(yaw);
                     }}
+                    onTrackStart={() => setControlsEnabled(false)}
+                    onTrackEnd={() => setControlsEnabled(true)}
                   >
                     <TurretContainer
                       gunOrigin={gunOrigin}