feat: exit fullscreen

src/app/tools/tankopedia/[id]/components/Control.tsx

@@ -1,6 +1,6 @@
 import { OrbitControls } from '@react-three/drei';
 import { useThree } from '@react-three/fiber';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Vector3 } from 'three';
 import { OrbitControls as OrbitControlsClass } from 'three-stdlib';
 import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
@@ -19,6 +19,7 @@ const poseDistances: Record<Pose, number> = {
 
 export function Controls() {
   const camera = useThree((state) => state.camera);
+  const canvas = useThree((state) => state.gl.domElement);
   const orbitControls = useRef<OrbitControlsClass>(null);
   const awaitedModelDefinitions = useAwait(modelDefinitions);
   const protagonist = useDuel((state) => state.protagonist!);
@@ -53,7 +54,7 @@ export function Controls() {
     protagonistTrackModelDefinition.origin[1] +
     antagonistModelDefinition.turretOrigin[1] +
     antagonistTurretModelDefinition.gunOrigin[1];
-  // const hasSetInitialPose = useRef(false);
+  const [autoRotate, setAutoRotate] = useState(true);
 
   useEffect(() => {
     camera.position.set(-4, 4, -16);
@@ -162,6 +163,18 @@ export function Controls() {
     };
   }, [camera, protagonist.tank.id, antagonist.tank.id]);
 
+  useEffect(() => {
+    function handleClick() {
+      setAutoRotate(false);
+    }
+
+    canvas.addEventListener('click', handleClick);
+
+    return () => {
+      canvas.removeEventListener('click', handleClick);
+    };
+  }, []);
+
   return (
     <OrbitControls
       maxDistance={20}
@@ -170,6 +183,8 @@ export function Controls() {
       enabled={useTankopediaPersistent.getState().model.visual.controlsEnabled}
       rotateSpeed={0.25}
       enableDamping={false}
+      autoRotate={autoRotate}
+      autoRotateSpeed={1 / 4}
     />
   );
 }

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

@@ -33,11 +33,12 @@ export function HeroSection() {
         <Flex
           direction="column"
           justify="center"
+          gap="4"
           style={{
             flex: 1,
           }}
         >
-          <Heading size="7">{tank.name}</Heading>
+          <Heading size="9">{tank.name}</Heading>
           <Text color="gray">
             Tier {TIER_ROMAN_NUMERALS[tank.tier]}{' '}
             {(strings.common.nations as Record<string, string>)[tank.nation]}{' '}
@@ -93,7 +94,11 @@ export function HeroSection() {
           right: 16,
         }}
         onClick={() => {
-          document.body.requestFullscreen();
+          if (isFullScreen) {
+            document.exitFullscreen();
+          } else {
+            document.body.requestFullscreen();
+          }
         }}
       >
         {isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}