feat: more progress

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} />
       )}

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();

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> */}
+        </>
+      )}
+    </>
   );
 }

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,
       })),
     );
   },