From d108872a06cac567392b2537df11b975310fde09 Mon Sep 17 00:00:00 2001
From: theoneand33 <theoneand33@users.noreply.github.com>
Date: Mon, 7 Sep 2026 12:00:52 +1200
Subject: [PATCH 1/2] feat(games): add fullscreen button to game players

- Add reusable FullscreenButton with fullscreen toggle
- Wire into Flash, Run 3, and Webtris wrappers
- Adjust resize and fullscreen styles to fill viewport
---
 src/components/flash.astro             | 24 ++++++++++--
 src/components/fullscreen-button.astro | 54 ++++++++++++++++++++++++++
 src/pages/games/[slug].astro           | 32 ++++++++++++++-
 3 files changed, 105 insertions(+), 5 deletions(-)
 create mode 100644 src/components/fullscreen-button.astro

diff --git a/src/components/flash.astro b/src/components/flash.astro
index 2bd9082..6e99611 100644
--- a/src/components/flash.astro
+++ b/src/components/flash.astro
@@ -1,4 +1,6 @@
 ---
+import FullscreenButton from "./fullscreen-button.astro";
+
 interface Props {
   gamePath: string;
 }
@@ -7,11 +9,23 @@ const { gamePath } = Astro.props;
 ---
 
 <div class="text-center">
-    <div id="flash-player-wrap" data-path={gamePath} class="flex items-center justify-center p-6 min-h-[calc(100vh-100px)] box-border">
+  <div id="flash-player-wrap" data-path={gamePath} class="flex items-center justify-center p-6 min-h-[calc(100vh-100px)] box-border">
     <div class="flash-loading">Loading game...</div>
   </div>
+  <div class="flex justify-center pt-2">
+    <FullscreenButton targetId="flash-player-wrap" />
+  </div>
 </div>
 
+<style>
+  /* ponytail: fullscreen drops page padding so the game can fill the viewport */
+  :global(#flash-player-wrap:fullscreen) {
+    padding: 0;
+    min-height: 100vh;
+    background: #000;
+  }
+</style>
+
 <script src="/ruffle/ruffle.js" is:inline></script>
 <script is:inline>
   (function () {
@@ -55,9 +69,11 @@ const { gamePath } = Astro.props;
       function resize() {
         var vw = window.innerWidth;
         var vh = window.innerHeight;
-        var pad = 32;
-        var headerOffset = 120;
-        var maxW = Math.min(vw - pad * 2, 1040);
+        // ponytail: in fullscreen drop the page chrome offsets and width cap so the game fills the screen
+        var isFs = !!document.fullscreenElement;
+        var pad = isFs ? 0 : 32;
+        var headerOffset = isFs ? 0 : 120;
+        var maxW = isFs ? vw : Math.min(vw - pad * 2, 1040);
         var maxH = vh - headerOffset - pad * 2;
         var w = maxW;
         var h = w / ASPECT_RATIO;
diff --git a/src/components/fullscreen-button.astro b/src/components/fullscreen-button.astro
new file mode 100644
index 0000000..a964fe2
--- /dev/null
+++ b/src/components/fullscreen-button.astro
@@ -0,0 +1,54 @@
+---
+interface Props {
+  targetId: string;
+}
+
+const { targetId } = Astro.props;
+---
+
+<button
+  type="button"
+  data-fullscreen-for={targetId}
+  class="rounded-lg border border-gray-300 bg-white px-4 py-1.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+>
+  ⛶ Full screen
+</button>
+
+<script is:inline>
+  (function () {
+    function updateLabels() {
+      document.querySelectorAll("[data-fullscreen-for]").forEach(function (btn) {
+        var active =
+          !!document.fullscreenElement &&
+          document.fullscreenElement.id === btn.getAttribute("data-fullscreen-for");
+        btn.textContent = active ? "✕ Exit full screen" : "⛶ Full screen";
+      });
+    }
+    document.addEventListener("click", function (e) {
+      var btn = e.target && e.target.closest ? e.target.closest("[data-fullscreen-for]") : null;
+      if (!btn) return;
+      var target = document.getElementById(btn.getAttribute("data-fullscreen-for") || "");
+      if (!target) return;
+      if (document.fullscreenElement) {
+        document.exitFullscreen().catch(function () {});
+      } else if (target.requestFullscreen) {
+        target.requestFullscreen().catch(function () {});
+      }
+    });
+    // ponytail: re-dispatch resize so existing game resize handlers adapt
+    document.addEventListener("fullscreenchange", function () {
+      updateLabels();
+      window.dispatchEvent(new Event("resize"));
+    });
+    updateLabels();
+  })();
+</script>
+
+<style>
+  :global(:fullscreen) {
+    background: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
diff --git a/src/pages/games/[slug].astro b/src/pages/games/[slug].astro
index aa90725..2e7a3a5 100644
--- a/src/pages/games/[slug].astro
+++ b/src/pages/games/[slug].astro
@@ -1,6 +1,7 @@
 ---
 import Layout from "../../layout/layout.astro";
 import Flash from "../../components/flash.astro";
+import FullscreenButton from "../../components/fullscreen-button.astro";
 import { gamesMap } from "../../data/game-seo";
 
 export async function getStaticPaths() {
@@ -21,6 +22,9 @@ const seo = gamesMap[slug];
         <div id="run3-wrapper" class="text-center h-[96vh] w-full">
           <div id="openfl-content" class="bg-black w-full h-full" />
         </div>
+        <div class="flex justify-center pt-2">
+          <FullscreenButton targetId="run3-wrapper" />
+        </div>
         <script src="/games/run3/Run3.js" is:inline></script>
         <script data-astro-rerun is:inline>
           (function () {
@@ -48,15 +52,41 @@ const seo = gamesMap[slug];
         </script>
       </>
     ) : slug === "webtris" ? (
-      <div class="flex justify-center items-center min-h-[80vh] bg-[#010101]">
+      <div id="webtris-wrapper" class="flex justify-center items-center min-h-[80vh] bg-[#010101]">
         <iframe
           src="https://theoneand33.github.io/webtris/"
           class="w-full max-w-[90vw] h-[80vh] border-0"
           title="Webtris"
         />
       </div>
+      <div class="flex justify-center pt-2">
+        <FullscreenButton targetId="webtris-wrapper" />
+      </div>
     ) : (
       <p class="p-6 text-center text-gray-600">Game not available.</p>
     )
   }
 </Layout>
+
+<style>
+  /* ponytail: in fullscreen fill the screen, keep game aspect ratio */
+  :global(#run3-wrapper:fullscreen) {
+    height: 100vh;
+  }
+  :global(#run3-wrapper:fullscreen #openfl-content) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  :global(#run3-wrapper:fullscreen canvas) {
+    width: min(100vw, 133.33vh);
+    height: auto;
+  }
+  :global(#webtris-wrapper:fullscreen) {
+    min-height: 100vh;
+  }
+  :global(#webtris-wrapper:fullscreen iframe) {
+    max-width: 100vw;
+    height: 100vh;
+  }
+</style>

From dff62120b1626d57221a177e73f1ccc8df15923e Mon Sep 17 00:00:00 2001
From: theoneand33 <theoneand33@users.noreply.github.com>
Date: Mon, 7 Sep 2026 12:09:28 +1200
Subject: [PATCH 2/2] fix(fullscreen): keep exit button visible in fullscreen
 mode

- Fullscreen outer game containers instead of inner player wrappers
- Add aria-pressed and aria-live to fullscreen toggle
- Log fullscreen enter/exit failures
---
 src/components/flash.astro             | 14 +++++---
 src/components/fullscreen-button.astro |  9 +++--
 src/pages/games/[slug].astro           | 48 ++++++++++++++++----------
 3 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/src/components/flash.astro b/src/components/flash.astro
index 6e99611..125aa67 100644
--- a/src/components/flash.astro
+++ b/src/components/flash.astro
@@ -8,21 +8,25 @@ interface Props {
 const { gamePath } = Astro.props;
 ---
 
-<div class="text-center">
+<div id="flash-container" class="text-center">
   <div id="flash-player-wrap" data-path={gamePath} class="flex items-center justify-center p-6 min-h-[calc(100vh-100px)] box-border">
     <div class="flash-loading">Loading game...</div>
   </div>
   <div class="flex justify-center pt-2">
-    <FullscreenButton targetId="flash-player-wrap" />
+    <FullscreenButton targetId="flash-container" />
   </div>
 </div>
 
 <style>
-  /* ponytail: fullscreen drops page padding so the game can fill the viewport */
-  :global(#flash-player-wrap:fullscreen) {
+  /* ponytail: fullscreen the outer container (game + button) so exit stays visible */
+  :global(#flash-container:fullscreen) {
     padding: 0;
     min-height: 100vh;
     background: #000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
   }
 </style>
 
@@ -70,7 +74,7 @@ const { gamePath } = Astro.props;
         var vw = window.innerWidth;
         var vh = window.innerHeight;
         // ponytail: in fullscreen drop the page chrome offsets and width cap so the game fills the screen
-        var isFs = !!document.fullscreenElement;
+        var isFs = !!document.fullscreenElement && document.fullscreenElement.id === "flash-container";
         var pad = isFs ? 0 : 32;
         var headerOffset = isFs ? 0 : 120;
         var maxW = isFs ? vw : Math.min(vw - pad * 2, 1040);
diff --git a/src/components/fullscreen-button.astro b/src/components/fullscreen-button.astro
index a964fe2..a3f6985 100644
--- a/src/components/fullscreen-button.astro
+++ b/src/components/fullscreen-button.astro
@@ -9,6 +9,7 @@ const { targetId } = Astro.props;
 <button
   type="button"
   data-fullscreen-for={targetId}
+  aria-live="polite"
   class="rounded-lg border border-gray-300 bg-white px-4 py-1.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
 >
   ⛶ Full screen
@@ -22,6 +23,7 @@ const { targetId } = Astro.props;
           !!document.fullscreenElement &&
           document.fullscreenElement.id === btn.getAttribute("data-fullscreen-for");
         btn.textContent = active ? "✕ Exit full screen" : "⛶ Full screen";
+        btn.setAttribute("aria-pressed", active ? "true" : "false");
       });
     }
     document.addEventListener("click", function (e) {
@@ -30,9 +32,9 @@ const { targetId } = Astro.props;
       var target = document.getElementById(btn.getAttribute("data-fullscreen-for") || "");
       if (!target) return;
       if (document.fullscreenElement) {
-        document.exitFullscreen().catch(function () {});
+        document.exitFullscreen().catch(function (err) { console.warn("Exit fullscreen failed:", err); });
       } else if (target.requestFullscreen) {
-        target.requestFullscreen().catch(function () {});
+        target.requestFullscreen().catch(function (err) { console.warn("Enter fullscreen failed:", err); });
       }
     });
     // ponytail: re-dispatch resize so existing game resize handlers adapt
@@ -45,9 +47,10 @@ const { targetId } = Astro.props;
 </script>
 
 <style>
-  :global(:fullscreen) {
+  :global(#flash-container:fullscreen, #run3-container:fullscreen, #webtris-container:fullscreen) {
     background: #000;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
   }
diff --git a/src/pages/games/[slug].astro b/src/pages/games/[slug].astro
index 2e7a3a5..0d84c69 100644
--- a/src/pages/games/[slug].astro
+++ b/src/pages/games/[slug].astro
@@ -19,11 +19,13 @@ const seo = gamesMap[slug];
     ) : slug === "run-3" ? (
       <>
         <base href="/games/run3/" />
-        <div id="run3-wrapper" class="text-center h-[96vh] w-full">
-          <div id="openfl-content" class="bg-black w-full h-full" />
-        </div>
-        <div class="flex justify-center pt-2">
-          <FullscreenButton targetId="run3-wrapper" />
+        <div id="run3-container">
+          <div id="run3-wrapper" class="text-center h-[96vh] w-full">
+            <div id="openfl-content" class="bg-black w-full h-full" />
+          </div>
+          <div class="flex justify-center pt-2">
+            <FullscreenButton targetId="run3-container" />
+          </div>
         </div>
         <script src="/games/run3/Run3.js" is:inline></script>
         <script data-astro-rerun is:inline>
@@ -52,15 +54,17 @@ const seo = gamesMap[slug];
         </script>
       </>
     ) : slug === "webtris" ? (
-      <div id="webtris-wrapper" class="flex justify-center items-center min-h-[80vh] bg-[#010101]">
-        <iframe
-          src="https://theoneand33.github.io/webtris/"
-          class="w-full max-w-[90vw] h-[80vh] border-0"
-          title="Webtris"
-        />
-      </div>
-      <div class="flex justify-center pt-2">
-        <FullscreenButton targetId="webtris-wrapper" />
+      <div id="webtris-container">
+        <div id="webtris-wrapper" class="flex justify-center items-center min-h-[80vh] bg-[#010101]">
+          <iframe
+            src="https://theoneand33.github.io/webtris/"
+            class="w-full max-w-[90vw] h-[80vh] border-0"
+            title="Webtris"
+          />
+        </div>
+        <div class="flex justify-center pt-2">
+          <FullscreenButton targetId="webtris-container" />
+        </div>
       </div>
     ) : (
       <p class="p-6 text-center text-gray-600">Game not available.</p>
@@ -70,22 +74,28 @@ const seo = gamesMap[slug];
 
 <style>
   /* ponytail: in fullscreen fill the screen, keep game aspect ratio */
-  :global(#run3-wrapper:fullscreen) {
+  :global(#run3-container:fullscreen) {
     height: 100vh;
   }
-  :global(#run3-wrapper:fullscreen #openfl-content) {
+  :global(#run3-container:fullscreen #run3-wrapper) {
+    height: 100%;
+  }
+  :global(#run3-container:fullscreen #openfl-content) {
     display: flex;
     align-items: center;
     justify-content: center;
   }
-  :global(#run3-wrapper:fullscreen canvas) {
+  :global(#run3-container:fullscreen canvas) {
     width: min(100vw, 133.33vh);
     height: auto;
   }
-  :global(#webtris-wrapper:fullscreen) {
+  :global(#webtris-container:fullscreen) {
+    min-height: 100vh;
+  }
+  :global(#webtris-container:fullscreen #webtris-wrapper) {
     min-height: 100vh;
   }
-  :global(#webtris-wrapper:fullscreen iframe) {
+  :global(#webtris-container:fullscreen iframe) {
     max-width: 100vw;
     height: 100vh;
   }