cap playfield to centered portrait column (source-of-truth for arcade sync)

53a3d8a37a1e26d4a1fe4258713868bb87cf50fc · 2026-07-25 10:15:29 -0700 · Steve Abrams

This is the sync.sh source for games-agentabrams/games/flappy-sky. The arcade
copy was fixed earlier but a sync re-copied this UNPATCHED file over it, reverting
the fix. Patch it here so the fix survives future syncs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M index.html

Diff

commit 53a3d8a37a1e26d4a1fe4258713868bb87cf50fc
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sat Jul 25 10:15:29 2026 -0700

    cap playfield to centered portrait column (source-of-truth for arcade sync)
    
    This is the sync.sh source for games-agentabrams/games/flappy-sky. The arcade
    copy was fixed earlier but a sync re-copied this UNPATCHED file over it, reverting
    the fix. Patch it here so the fix survives future syncs.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 index.html | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 3350124..9e3f044 100644
--- a/index.html
+++ b/index.html
@@ -20,8 +20,22 @@
     touch-action: none;
   }
 
+  /* Portrait play-column: flappy is tuned for a phone-shaped field, so cap the
+     stage to a ~2:3 column centered in the window (letterboxed on desktop,
+     full-width on phones). JS sets #stage width; everything else is inset:0
+     to it so the HUD + overlay track the play area, not the whole window. */
+  #stage {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 100%;
+    overflow: hidden;
+  }
   canvas {
     display: block;
+    width: 100%;
+    height: 100%;
     background: radial-gradient(circle at 20% 20%, #586df2 0, #243046 40%, #0e1018 100%);
     /* keeps focus outline from ever painting a box around the game */
     outline: none;
@@ -171,6 +185,7 @@
 </style>
 </head>
 <body>
+<div id="stage">
 <canvas id="game" tabindex="-1" aria-label="Flappy Sky game canvas"></canvas>
 
 <div id="scoreTop" class="hidden"><span id="scoreVal">0</span></div>
@@ -202,12 +217,14 @@
 <div id="pauseVeil">Paused</div>
 
 <div id="smallInfo">Space / Click / Tap · P pause · M mute</div>
+</div><!-- /#stage -->
 
 <script>
 (function () {
   "use strict";
 
   const canvas = document.getElementById("game");
+  const stage = document.getElementById("stage");
   const ctx = canvas.getContext("2d", { alpha: false });
 
   // ---- DOM refs -------------------------------------------------------
@@ -234,8 +251,12 @@
   let W, H, scale, groundH;
   function resize() {
     const dpr = Math.min(window.devicePixelRatio || 1, 2.5);
-    W = window.innerWidth;
+    // Cap the playfield to a ~2:3 portrait column so the phone-tuned physics
+    // stay playable on wide desktop windows (letterboxed) while phones still
+    // fill their full width. #stage is centered via CSS; the canvas fills it.
     H = window.innerHeight;
+    W = Math.min(window.innerWidth, Math.round(H * 0.66));
+    stage.style.width = W + "px";
     canvas.width  = Math.round(W * dpr);
     canvas.height = Math.round(H * dpr);
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

← 8c90edb Fix ghosting: opaque per-frame sky clear (back-port hub fix · back to Flappy Sky · (newest)