From 1281503de93f6afbf87b8de6d328b6e4638cf7e2 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Dec 2024 20:48:13 -0600
Subject: [PATCH] feat: more progress

---
 .../HeroSection/components/Options/index.tsx  | 17 ++++++++++++
 .../TankSandbox/components/Control.tsx        | 12 ++++++---
 .../TankSandbox/components/SceneProps.tsx     | 26 ++++++++++++++-----
 .../website/src/stores/tankopediaEphemeral.ts |  2 +-
 4 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
index 2d86be4f5..a3c447445 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
@@ -15,6 +15,7 @@ import {
   GearIcon,
 } from '@radix-ui/react-icons';
 import {
+  Box,
   Button,
   Dialog,
   DropdownMenu,
@@ -86,6 +87,22 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
     <>
       <QuickInputs />
 
+      {display === TankopediaDisplay.ShootingRange && (
+        <Box
+          width="1rem"
+          height="1rem"
+          position="absolute"
+          top="50%"
+          left="50%"
+          style={{
+            backgroundImage: `url(${imgur('27Gwth4')})`,
+            backgroundSize: 'contain',
+            transform: 'translate(-50%, -50%)',
+            borderRadius: '50%',
+          }}
+        />
+      )}
+
       {display === TankopediaDisplay.StaticArmor && (
         <Thicknesses thicknessRange={thicknessRange} />
       )}
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx
index 31250ceef..d43ae57df 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx
@@ -20,7 +20,7 @@ const poseDistances: Record<Pose, number> = {
 const modelDefinitions = await awaitableModelDefinitions;
 
 const ARCADE_MODE_DISTANCE = 19;
-const ARCADE_MODE_ANGLE = Math.PI / 4;
+const ARCADE_MODE_ANGLE = Math.PI / 8;
 
 export const ARCADE_MODE_FOV = 54;
 export const INSPECT_MODE_FOV = 25;
@@ -82,6 +82,8 @@ export function Controls() {
   ] as const;
 
   useEffect(() => {
+    if (!orbitControls.current) return;
+
     if (display === TankopediaDisplay.ShootingRange) {
       (camera as PerspectiveCamera).fov = ARCADE_MODE_FOV;
       camera.position.set(
@@ -89,11 +91,15 @@ export function Controls() {
         initialPosition[1] + ARCADE_MODE_DISTANCE * Math.sin(ARCADE_MODE_ANGLE),
         ARCADE_MODE_DISTANCE * Math.cos(ARCADE_MODE_ANGLE),
       );
-      orbitControls.current?.target.set(0, initialPosition[1], 0);
+      orbitControls.current.target.set(0, initialPosition[1] + 3, 0);
+      orbitControls.current.enablePan = false;
+      orbitControls.current.enableZoom = false;
     } else {
       (camera as PerspectiveCamera).fov = INSPECT_MODE_FOV;
       camera.position.set(...initialPosition);
-      orbitControls.current?.target.set(0, initialPosition[1] / 2, 0);
+      orbitControls.current.target.set(0, initialPosition[1] / 2, 0);
+      orbitControls.current.enablePan = true;
+      orbitControls.current.enableZoom = true;
     }
 
     camera.updateProjectionMatrix();
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps.tsx
index 8a38c24d1..c697d3fc1 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps.tsx
@@ -2,7 +2,9 @@ import { useFrame, useLoader } from '@react-three/fiber';
 import { clamp } from 'lodash-es';
 import { useRef } from 'react';
 import { MeshStandardMaterial, TextureLoader } from 'three';
+import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
 import { TankopediaPersistent } from '../../../../../../stores/tankopediaPersistent';
+import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants';
 
 export function SceneProps() {
   const show = TankopediaPersistent.use(
@@ -10,6 +12,7 @@ export function SceneProps() {
   );
   const texture = useLoader(TextureLoader, 'https://i.imgur.com/C28Z8nU.png');
   const material = useRef<MeshStandardMaterial>(null);
+  const display = TankopediaEphemeral.use((state) => state.display);
 
   useFrame(({ camera }) => {
     if (!material.current) return;
@@ -18,12 +21,23 @@ export function SceneProps() {
 
   texture.anisotropy = 2;
 
-  if (!show) return null;
-
   return (
-    <mesh rotation={[-Math.PI / 2, 0, 0]}>
-      <planeGeometry args={[10, 10]} />
-      <meshStandardMaterial ref={material} map={texture} transparent />
-    </mesh>
+    <>
+      {show && display !== TankopediaDisplay.ShootingRange && (
+        <mesh rotation={[-Math.PI / 2, 0, 0]}>
+          <planeGeometry args={[10, 10]} />
+          <meshStandardMaterial ref={material} map={texture} transparent />
+        </mesh>
+      )}
+      {display === TankopediaDisplay.ShootingRange && (
+        <>
+          {/* <TransformControls>
+            <mesh rotation={[-Math.PI / 2, 0, 0]}>
+              <boxGeometry args={[1, 1, 1]} />
+            </mesh>
+          </TransformControls> */}
+        </>
+      )}
+    </>
   );
 }
diff --git a/packages/website/src/stores/tankopediaEphemeral.ts b/packages/website/src/stores/tankopediaEphemeral.ts
index 30eaf4431..e0866990b 100644
--- a/packages/website/src/stores/tankopediaEphemeral.ts
+++ b/packages/website/src/stores/tankopediaEphemeral.ts
@@ -116,7 +116,7 @@ export const TankopediaEphemeral = createContextualStore(
         model,
         controlsEnabled: true,
         xpMultiplier: 1,
-        display: TankopediaDisplay.Model,
+        display: TankopediaDisplay.ShootingRange,
       })),
     );
   },