feat: more accessible full screen mode

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

@@ -12,6 +12,7 @@ import { modelTransformEvent } from '../../../../../../core/blitzkrieg/modelTran
 import { Pose, poseEvent } from '../../../../../../core/blitzkrieg/pose';
 import { tankIcon } from '../../../../../../core/blitzkrieg/tankIcon';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
+import { useFullScreen } from '../../../../../../hooks/useFullScreen';
 import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
 import mutateTankopediaPersistent, {
@@ -33,7 +34,6 @@ export function TankSandbox() {
   const hasImprovedVerticalStabilizer = useEquipment(122);
   const awaitedModelDefinitions = use(modelDefinitions);
   const canvasWrapper = useRef<HTMLDivElement>(null);
-  const [isFullScreen, setIsFullScreen] = useState(false);
   const mode = useTankopediaPersistent((state) => state.mode);
   const protagonist = useDuel((state) => state.protagonist!);
   const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
@@ -43,6 +43,7 @@ export function TankSandbox() {
   const wideFormat = useWideFormat();
   const [loadModel, setLoadModel] = useState(wideFormat || !isMobile);
   const duel = useDuel();
+  const isFullScreen = useFullScreen();
 
   function handlePointerDown() {
     window.addEventListener('pointermove', handlePointerMove);
@@ -59,10 +60,6 @@ export function TankSandbox() {
   }
 
   useEffect(() => {
-    function handleFullScreenChange() {
-      setIsFullScreen(document.fullscreenElement !== null);
-    }
-
     function handlePoseEvent(pose: Pose) {
       switch (pose) {
         case Pose.HullDown: {
@@ -121,10 +118,8 @@ export function TankSandbox() {
     }
 
     poseEvent.on(handlePoseEvent);
-    document.addEventListener('fullscreenchange', handleFullScreenChange);
 
     return () => {
-      document.removeEventListener('fullscreenchange', handleFullScreenChange);
       poseEvent.off(handlePoseEvent);
     };
   });
@@ -145,8 +140,13 @@ export function TankSandbox() {
     <Theme radius={isFullScreen ? 'none' : undefined}>
       <Card
         style={{
-          position: 'relative',
+          position: isFullScreen ? 'fixed' : 'relative',
           border: isFullScreen ? 'none' : 'unset',
+          width: isFullScreen ? '100vw' : 'unset',
+          height: isFullScreen ? 'calc(100vh)' : 'unset',
+          top: isFullScreen ? 0 : 'unset',
+          left: isFullScreen ? 0 : 'unset',
+          zIndex: isFullScreen ? 2 : 'unset',
         }}
         ref={canvasWrapper}
       >

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

@@ -18,7 +18,7 @@ interface OptionsProps {
   canvasWrapper: RefObject<HTMLElement>;
 }
 
-export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
+export function Options({ isFullScreen }: OptionsProps) {
   const showGrid = useTankopediaPersistent(
     (state) => state.model.visual.showGrid,
   );
@@ -50,136 +50,132 @@ export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
         right: 18,
       }}
     >
-      {!isFullScreen && (
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
-            <Button variant="ghost">
-              <EyeOpenIcon />
-            </Button>
-          </DropdownMenu.Trigger>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <Button variant="ghost">
+            <EyeOpenIcon />
+          </Button>
+        </DropdownMenu.Trigger>
 
-          <DropdownMenu.Content>
-            <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.HullDown)}>
-              Hull down
-            </DropdownMenu.Item>
+        <DropdownMenu.Content>
+          <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.HullDown)}>
+            Hull down
+          </DropdownMenu.Item>
 
-            <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)}>
-              Face hug
-            </DropdownMenu.Item>
+          <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)}>
+            Face hug
+          </DropdownMenu.Item>
 
-            <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)}>
-              Default
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      )}
+          <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)}>
+            Default
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
 
-      {!isFullScreen && (
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
-            <Button variant="ghost">
-              <GearIcon />
-            </Button>
-          </DropdownMenu.Trigger>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <Button variant="ghost">
+            <GearIcon />
+          </Button>
+        </DropdownMenu.Trigger>
 
-          <DropdownMenu.Content>
-            <DropdownMenu.Label>Armor</DropdownMenu.Label>
+        <DropdownMenu.Content>
+          <DropdownMenu.Label>Armor</DropdownMenu.Label>
 
-            <DropdownMenu.CheckboxItem
-              checked={showSpacedArmor}
-              onCheckedChange={(checked) => {
-                mutateTankopediaPersistent((draft) => {
-                  draft.model.visual.showSpacedArmor = checked;
-                });
-                mutateTankopediaTemporary((draft) => {
-                  draft.shot = undefined;
-                });
-              }}
-            >
-              Spaced armor
-            </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={showSpacedArmor}
+            onCheckedChange={(checked) => {
+              mutateTankopediaPersistent((draft) => {
+                draft.model.visual.showSpacedArmor = checked;
+              });
+              mutateTankopediaTemporary((draft) => {
+                draft.shot = undefined;
+              });
+            }}
+          >
+            Spaced armor
+          </DropdownMenu.CheckboxItem>
 
-            <DropdownMenu.CheckboxItem
-              checked={greenPenetration}
-              onCheckedChange={(checked) => {
-                mutateTankopediaPersistent((draft) => {
-                  draft.model.visual.greenPenetration = checked;
-                });
-              }}
-            >
-              Green penetration
-            </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={greenPenetration}
+            onCheckedChange={(checked) => {
+              mutateTankopediaPersistent((draft) => {
+                draft.model.visual.greenPenetration = checked;
+              });
+            }}
+          >
+            Green penetration
+          </DropdownMenu.CheckboxItem>
 
-            <DropdownMenu.CheckboxItem
-              checked={wireframe}
-              onCheckedChange={(checked) => {
-                mutateTankopediaPersistent((draft) => {
-                  draft.model.visual.wireframe = checked;
-                });
-              }}
-            >
-              Wireframe
-            </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={wireframe}
+            onCheckedChange={(checked) => {
+              mutateTankopediaPersistent((draft) => {
+                draft.model.visual.wireframe = checked;
+              });
+            }}
+          >
+            Wireframe
+          </DropdownMenu.CheckboxItem>
 
-            <DropdownMenu.CheckboxItem
-              checked={opaque}
-              onCheckedChange={(checked) => {
-                mutateTankopediaPersistent((draft) => {
-                  draft.model.visual.opaque = checked;
-                });
-              }}
-            >
-              Opaque
-            </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={opaque}
+            onCheckedChange={(checked) => {
+              mutateTankopediaPersistent((draft) => {
+                draft.model.visual.opaque = checked;
+              });
+            }}
+          >
+            Opaque
+          </DropdownMenu.CheckboxItem>
 
-            <DropdownMenu.Label>Environment</DropdownMenu.Label>
+          <DropdownMenu.Label>Environment</DropdownMenu.Label>
 
-            <DropdownMenu.CheckboxItem
-              checked={showGrid}
-              onCheckedChange={(checked) => {
-                mutateTankopediaPersistent((draft) => {
-                  draft.model.visual.showGrid = checked;
-                });
-              }}
-            >
-              Show grid
-            </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={showGrid}
+            onCheckedChange={(checked) => {
+              mutateTankopediaPersistent((draft) => {
+                draft.model.visual.showGrid = checked;
+              });
+            }}
+          >
+            Show grid
+          </DropdownMenu.CheckboxItem>
 
-            <DropdownMenu.CheckboxItem
-              checked={showEnvironment}
-              onCheckedChange={(checked) => {
-                mutateTankopediaPersistent((draft) => {
-                  draft.model.visual.showEnvironment = checked;
-                });
-              }}
-            >
-              View environment
-            </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={showEnvironment}
+            onCheckedChange={(checked) => {
+              mutateTankopediaPersistent((draft) => {
+                draft.model.visual.showEnvironment = checked;
+              });
+            }}
+          >
+            View environment
+          </DropdownMenu.CheckboxItem>
 
-            <DropdownMenu.Sub>
-              <DropdownMenu.SubTrigger>Lighting</DropdownMenu.SubTrigger>
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger>Lighting</DropdownMenu.SubTrigger>
 
-              <DropdownMenu.SubContent>
-                <DropdownMenu.RadioGroup value={environment}>
-                  {ENVIRONMENTS.map((environment) => (
-                    <DropdownMenu.RadioItem
-                      key={environment}
-                      value={environment}
-                      onClick={() => {
-                        mutateTankopediaPersistent((draft) => {
-                          draft.model.visual.environment = environment;
-                        });
-                      }}
-                    >
-                      {environment[0].toUpperCase() + environment.slice(1)}
-                    </DropdownMenu.RadioItem>
-                  ))}
-                </DropdownMenu.RadioGroup>
-              </DropdownMenu.SubContent>
-            </DropdownMenu.Sub>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      )}
+            <DropdownMenu.SubContent>
+              <DropdownMenu.RadioGroup value={environment}>
+                {ENVIRONMENTS.map((environment) => (
+                  <DropdownMenu.RadioItem
+                    key={environment}
+                    value={environment}
+                    onClick={() => {
+                      mutateTankopediaPersistent((draft) => {
+                        draft.model.visual.environment = environment;
+                      });
+                    }}
+                  >
+                    {environment[0].toUpperCase() + environment.slice(1)}
+                  </DropdownMenu.RadioItem>
+                ))}
+              </DropdownMenu.RadioGroup>
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
 
       {fullScreenAvailable && (
         <Button
@@ -187,7 +183,7 @@ export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
           onClick={() => {
             if (isFullScreen) {
               document.exitFullscreen();
-            } else canvasWrapper.current?.requestFullscreen();
+            } else document.body.requestFullscreen();
           }}
         >
           {isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}