From c27ebdbcb3332fe2596e3ff35e4aa8a1b881cec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 10 Jul 2024 13:16:04 -0500
Subject: [PATCH] feat: fullscreen hydration

---
 .../[id]/components/Model/HeroSection.tsx     | 19 ++++---------------
 .../components/Model/components/Options.tsx   |  5 ++---
 src/hooks/useFullscreenAvailability.ts        | 11 +++++++++++
 3 files changed, 17 insertions(+), 18 deletions(-)
 create mode 100644 src/hooks/useFullscreenAvailability.ts

diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
index 6bb9ee06b..29d714543 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
@@ -104,24 +104,13 @@ export function HeroSection() {
             background: isFullScreen ? 'var(--color-background)' : undefined,
           }}
         >
-          <div
-            style={{
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-            }}
-          >
-            <div
-              style={{
-                width: '100%',
-                height: '100%',
-              }}
-            >
+          <Box width="100%" height="100%" position="absolute">
+            <Box width="100%" height="100%">
               <TankSandbox />
-            </div>
+            </Box>
 
             <Options />
-          </div>
+          </Box>
         </Box>
       </Flex>
     </Flex>
diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
index 1aeb51054..1a54382bd 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
@@ -31,6 +31,7 @@ import {
 } from '../../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useEquipment } from '../../../../../../../hooks/useEquipment';
 import { useFullScreen } from '../../../../../../../hooks/useFullScreen';
+import { useFullscreenAvailability } from '../../../../../../../hooks/useFullscreenAvailability';
 import * as App from '../../../../../../../stores/app';
 import * as Duel from '../../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
@@ -60,8 +61,7 @@ export function Options() {
     (state) => state.model.visual.showSpacedArmor,
   );
   const opaque = TankopediaPersistent.use((state) => state.model.visual.opaque);
-  const fullScreenAvailable =
-    typeof document !== 'undefined' && document.fullscreenEnabled;
+  const fullScreenAvailable = useFullscreenAvailability();
   const environment = TankopediaPersistent.use(
     (state) => state.model.visual.environment,
   );
@@ -533,7 +533,6 @@ export function Options() {
                   });
                 }}
               >
-                {/* TODO: consider removing this? */}
                 View environment
               </DropdownMenu.CheckboxItem>
 
diff --git a/src/hooks/useFullscreenAvailability.ts b/src/hooks/useFullscreenAvailability.ts
new file mode 100644
index 000000000..13824cacb
--- /dev/null
+++ b/src/hooks/useFullscreenAvailability.ts
@@ -0,0 +1,11 @@
+import { useLayoutEffect, useState } from 'react';
+
+export function useFullscreenAvailability() {
+  const [available, setAvailable] = useState(false);
+
+  useLayoutEffect(() => {
+    setAvailable(document.fullscreenEnabled);
+  }, []);
+
+  return available;
+}