From e5552e72f7a9b14a3f393866fdeba816a82ce5d6 Mon Sep 17 00:00:00 2001
From: name <jorqsraze@users.noreply.github.com>
Date: Sun, 12 Apr 2026 01:55:57 -0700
Subject: [PATCH] hide fullscreen controls on iOS/devices without Fullscreen
 API

iOS Safari doesn't support requestFullscreen. Detect support and:
- Intro page: show single START button instead of FULLSCREEN/WINDOWED
- AppLayout: hide the global fullscreen button entirely

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/AppLayout.tsx   |  7 ++++--
 src/lib/platform.ts     |  3 +++
 src/pages/IntroPage.tsx | 56 ++++++++++++++++++++++++++---------------
 3 files changed, 44 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/platform.ts

diff --git a/src/app/AppLayout.tsx b/src/app/AppLayout.tsx
index 3c7188b..8956c57 100644
--- a/src/app/AppLayout.tsx
+++ b/src/app/AppLayout.tsx
@@ -1,15 +1,18 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Outlet } from 'react-router-dom'
+import { supportsFullscreen } from '../lib/platform'
 import styles from './AppLayout.module.css'
 
 export function AppLayout() {
+  const canFullscreen = supportsFullscreen()
   const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement)
 
   useEffect(() => {
+    if (!canFullscreen) return
     const onChange = () => setIsFullscreen(!!document.fullscreenElement)
     document.addEventListener('fullscreenchange', onChange)
     return () => document.removeEventListener('fullscreenchange', onChange)
-  }, [])
+  }, [canFullscreen])
 
   const goFullscreen = useCallback(() => {
     document.documentElement.requestFullscreen().catch(() => {})
@@ -20,7 +23,7 @@ export function AppLayout() {
       <main className={styles.main}>
         <Outlet />
       </main>
-      {!isFullscreen && (
+      {canFullscreen && !isFullscreen && (
         <button
           type="button"
           className={styles.fullscreenBtn}
diff --git a/src/lib/platform.ts b/src/lib/platform.ts
new file mode 100644
index 0000000..527d89a
--- /dev/null
+++ b/src/lib/platform.ts
@@ -0,0 +1,3 @@
+export function supportsFullscreen(): boolean {
+  return !!document.documentElement.requestFullscreen
+}
diff --git a/src/pages/IntroPage.tsx b/src/pages/IntroPage.tsx
index 5601db4..1524d78 100644
--- a/src/pages/IntroPage.tsx
+++ b/src/pages/IntroPage.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ROUTE_PATHS } from '../app/route-paths'
 import { playSound, SFX_BUTTON_DEFAULT } from '../lib/sounds'
+import { supportsFullscreen } from '../lib/platform'
 import styles from './IntroPage.module.css'
 
 const SPONSORS = [
@@ -121,26 +122,41 @@ export function IntroPage() {
 
         {cameraReady && (
           <div className={styles.actionsRow}>
-            <button
-              type="button"
-              className={`${styles.btn} ${styles.btnPrimary} font-title`}
-              onClick={() => {
-                playSound(SFX_BUTTON_DEFAULT)
-                goFullscreen()
-              }}
-            >
-              FULLSCREEN
-            </button>
-            <button
-              type="button"
-              className={`${styles.btn} ${styles.btnSecondary} font-title`}
-              onClick={() => {
-                playSound(SFX_BUTTON_DEFAULT)
-                goWindowed()
-              }}
-            >
-              WINDOWED
-            </button>
+            {supportsFullscreen() ? (
+              <>
+                <button
+                  type="button"
+                  className={`${styles.btn} ${styles.btnPrimary} font-title`}
+                  onClick={() => {
+                    playSound(SFX_BUTTON_DEFAULT)
+                    goFullscreen()
+                  }}
+                >
+                  FULLSCREEN
+                </button>
+                <button
+                  type="button"
+                  className={`${styles.btn} ${styles.btnSecondary} font-title`}
+                  onClick={() => {
+                    playSound(SFX_BUTTON_DEFAULT)
+                    goWindowed()
+                  }}
+                >
+                  WINDOWED
+                </button>
+              </>
+            ) : (
+              <button
+                type="button"
+                className={`${styles.btn} ${styles.btnPrimary} font-title`}
+                onClick={() => {
+                  playSound(SFX_BUTTON_DEFAULT)
+                  goWindowed()
+                }}
+              >
+                START
+              </button>
+            )}
           </div>
         )}