From cebc4392edcd3499171b940484ed15552d6da0f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 4 May 2024 17:02:03 -0500
Subject: [PATCH] feat: cleaner fullscreen

---
 src/app/layout.tsx                               |  4 +---
 .../[id]/components/Characteristics/index.tsx    |  4 ----
 .../[id]/components/Model/HeroSection.tsx        | 11 +++++++++--
 .../[id]/components/Model/TankSandbox.tsx        | 16 ++--------------
 .../tools/tankopedia/[id]/components/Videos.tsx  |  4 +---
 src/components/Navbar/index.tsx                  |  4 ----
 6 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3beba1710..e2d05768f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -12,7 +12,6 @@ import Navbar from '../components/Navbar';
 import { Party3 } from '../components/Party3';
 import isDev from '../core/blitzkit/isDev';
 import { isLocalhost } from '../core/blitzkit/isLocalhost';
-import { useFullScreen } from '../hooks/useFullScreen';
 import { useApp } from '../stores/app';
 
 config();
@@ -34,7 +33,6 @@ export default function RootLayout({ children }: RootLayoutProps) {
   const isRoot = pathname === '/';
   const darkMode = useApp((state) => state.darkMode);
   const [showDevBuildAlert, setShowDevBuildAlert] = useState(false);
-  const isFullScreen = useFullScreen();
 
   useEffect(() => {
     setShowDevBuildAlert(
@@ -120,7 +118,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
               {children}
             </Suspense>
 
-            {!isEmbed && !isFullScreen && <Footer />}
+            {!isEmbed && <Footer />}
           </Flex>
         </Theme>
       </body>
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
index 6f8ccd968..6f6c0c7d9 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx
@@ -24,7 +24,6 @@ import {
   GUN_TYPE_NAMES,
 } from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
-import { useFullScreen } from '../../../../../../hooks/useFullScreen';
 import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
 import { useTankopediaTemporary } from '../../../../../../stores/tankopedia';
@@ -38,7 +37,6 @@ export function Characteristics() {
   const awaitedProvisionDefinitions = use(provisionDefinitions);
   const crewSkills = useTankopediaTemporary((state) => state.skills);
   const penetrationDistanceInput = useRef<HTMLInputElement>(null);
-  const isFullScreen = useFullScreen();
   const hasImprovedVentilation = useEquipment(102);
   const crewMastery = useDuel((state) => state.protagonist!.crewMastery);
   const [penetrationDistance, setPenetrationDistance] = useState(250);
@@ -127,8 +125,6 @@ export function Characteristics() {
     });
   }, [hasImprovedVerticalStabilizer]);
 
-  if (isFullScreen) return null;
-
   return (
     <Flex direction={wideFormat ? 'row' : 'column'} gap="8" wrap="wrap">
       <Flex direction="column" gap="8" style={{ flex: 1 }}>
diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
index b3507d4c7..a34a9edaa 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+++ b/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
diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
index 1804c44d4..ec8a8c212 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
+++ b/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);
diff --git a/src/app/tools/tankopedia/[id]/components/Videos.tsx b/src/app/tools/tankopedia/[id]/components/Videos.tsx
index d370e7296..68414c75b 100644
--- a/src/app/tools/tankopedia/[id]/components/Videos.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Videos.tsx
@@ -2,16 +2,14 @@ import { Flex, Heading, Link } from '@radix-ui/themes';
 import { use } from 'react';
 import PageWrapper from '../../../../../components/PageWrapper';
 import { videoDefinitions } from '../../../../../core/blitzkit/videos';
-import { useFullScreen } from '../../../../../hooks/useFullScreen';
 import { useDuel } from '../../../../../stores/duel';
 
 export function Videos() {
-  const isFullScreen = useFullScreen();
   const tank = useDuel((state) => state.protagonist!.tank);
   const awaitedVideoDefinitions = use(videoDefinitions);
   const videos = awaitedVideoDefinitions[tank.id]?.videos ?? [];
 
-  if (isFullScreen || videos.length === 0) return null;
+  if (videos.length === 0) return null;
 
   return (
     <PageWrapper noFlex1>
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 8c794a755..a5904c878 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -21,7 +21,6 @@ import { TOOLS } from '../../constants/tools';
 import { authURL } from '../../core/blitz/authURL';
 import { extendAuth } from '../../core/blitz/extendAuth';
 import { logout } from '../../core/blitz/logout';
-import { useFullScreen } from '../../hooks/useFullScreen';
 import { useWideFormat } from '../../hooks/useWideFormat';
 import { BlitzkitWide } from '../../icons/BlitzkitWide';
 import { PatreonIcon } from '../../icons/Patreon';
@@ -30,7 +29,6 @@ import { useApp } from '../../stores/app';
 import { LoggedIn } from './components/LoggedIn';
 
 export default function Navbar() {
-  const isFullScreen = useFullScreen();
   const wideFormat = useWideFormat(480);
   const login = useApp((state) => state.login);
 
@@ -47,8 +45,6 @@ export default function Navbar() {
     }
   });
 
-  if (isFullScreen) return null;
-
   const plugs = (
     <>
       <Link