feat: cleaner fullscreen

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

@@ -2,6 +2,7 @@ import { ChevronLeftIcon, MixIcon } from '@radix-ui/react-icons';
 import { Button, Flex, Heading, Text } from '@radix-ui/themes';
 import Link from 'next/link';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
+import { useFullScreen } from '../../../../../../hooks/useFullScreen';
 import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import strings from '../../../../../../lang/en-US.json';
 import { theme } from '../../../../../../stitches.config';
@@ -17,6 +18,7 @@ export function HeroSection() {
     protagonistTank.id === antagonistTank.id
       ? [protagonistTank.id]
       : [protagonistTank.id, antagonistTank.id];
+  const isFullScreen = useFullScreen();
 
   return (
     <Flex
@@ -87,9 +89,14 @@ export function HeroSection() {
 
         <div
           style={{
-            height: wideFormat ? 512 : undefined,
             flex: 2,
-            position: 'relative',
+            position: isFullScreen ? 'fixed' : 'relative',
+            top: isFullScreen ? 0 : undefined,
+            left: isFullScreen ? 0 : undefined,
+            width: isFullScreen ? '100vw' : undefined,
+            height: isFullScreen ? '100vh' : wideFormat ? 512 : undefined,
+            zIndex: isFullScreen ? 3 : undefined,
+            background: isFullScreen ? theme.colors.appBackground1 : undefined,
           }}
         >
           <div

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

@@ -1,7 +1,6 @@
 import { PerspectiveCamera } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
-import { Suspense, use, useEffect, useRef, useState } from 'react';
-import { isMobile } from 'react-device-detect';
+import { Suspense, use, useEffect, useRef } from 'react';
 import { Armor } from '../../../../../../components/Armor';
 import { ShotDisplay } from '../../../../../../components/Armor/components/ShotDisplay';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
@@ -9,13 +8,8 @@ import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitio
 import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
 import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
-import { useFullScreen } from '../../../../../../hooks/useFullScreen';
-import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
-import {
-  mutateTankopediaTemporary,
-  useTankopediaPersistent,
-} from '../../../../../../stores/tankopedia';
+import { mutateTankopediaTemporary } from '../../../../../../stores/tankopedia';
 import { Controls } from '../Control';
 import { Lighting } from '../Lighting';
 import { SceneProps } from '../SceneProps';
@@ -26,17 +20,11 @@ export function TankSandbox() {
   const canvas = useRef<HTMLCanvasElement>(null);
   const hasImprovedVerticalStabilizer = useEquipment(122);
   const awaitedModelDefinitions = use(modelDefinitions);
-  const canvasWrapper = useRef<HTMLDivElement>(null);
-  const mode = useTankopediaPersistent((state) => state.mode);
   const protagonist = useDuel((state) => state.protagonist!);
   const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
-  const wideFormat = useWideFormat();
-  const [loadModel, setLoadModel] = useState(wideFormat || !isMobile);
-  const duel = useDuel();
-  const isFullScreen = useFullScreen();
 
   function handlePointerDown() {
     window.addEventListener('pointermove', handlePointerMove);