[object Object]

← back to Games Agentabrams

hopper + tower-stack: fix desktop scale

c13d6789720c2859f6308442133827ebea06d7bd · 2026-07-25 10:40:30 -0700 · Steve Abrams

hopper: clip lane rendering to the play-field rect so off-field lane items
(logs/cars/pads that spawn beyond the columns) no longer bleed into the
letterbox on wide desktops. tower-stack: cap the playfield to a centered ~2:3
portrait column (W=min(innerWidth, round(H*0.66))) like flappy-sky, so the
block doesn't slide across a 1440px field. Both mirror into their .aa copies.

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

Files touched

Diff

commit c13d6789720c2859f6308442133827ebea06d7bd
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sat Jul 25 10:40:30 2026 -0700

    hopper + tower-stack: fix desktop scale
    
    hopper: clip lane rendering to the play-field rect so off-field lane items
    (logs/cars/pads that spawn beyond the columns) no longer bleed into the
    letterbox on wide desktops. tower-stack: cap the playfield to a centered ~2:3
    portrait column (W=min(innerWidth, round(H*0.66))) like flappy-sky, so the
    block doesn't slide across a 1440px field. Both mirror into their .aa copies.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 games/hopper/AbramsHopper.aa     | 3 +++
 games/hopper/index.html          | 3 +++
 games/tower-stack/AbramsStack.aa | 3 ++-
 games/tower-stack/index.html     | 3 ++-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/games/hopper/AbramsHopper.aa b/games/hopper/AbramsHopper.aa
index d8ee5b4..e6b16f9 100644
--- a/games/hopper/AbramsHopper.aa
+++ b/games/hopper/AbramsHopper.aa
@@ -370,6 +370,9 @@
       ctx.fillStyle = "#0a0e14";
       ctx.fillRect(0,0,canvas.width/DPR,canvas.height/DPR);
       ctx.translate(offX, offY);
+      // clip all field content to the grid rect so lane items that spawn
+      // off-screen (x<0 or x>COLS) don't bleed into the letterbox area
+      ctx.beginPath(); ctx.rect(0, 0, W, H); ctx.clip();
 
       // playfield bg
       ctx.fillStyle = "#080b11";
diff --git a/games/hopper/index.html b/games/hopper/index.html
index d8ee5b4..e6b16f9 100644
--- a/games/hopper/index.html
+++ b/games/hopper/index.html
@@ -370,6 +370,9 @@
       ctx.fillStyle = "#0a0e14";
       ctx.fillRect(0,0,canvas.width/DPR,canvas.height/DPR);
       ctx.translate(offX, offY);
+      // clip all field content to the grid rect so lane items that spawn
+      // off-screen (x<0 or x>COLS) don't bleed into the letterbox area
+      ctx.beginPath(); ctx.rect(0, 0, W, H); ctx.clip();
 
       // playfield bg
       ctx.fillStyle = "#080b11";
diff --git a/games/tower-stack/AbramsStack.aa b/games/tower-stack/AbramsStack.aa
index d25f198..01a4821 100644
--- a/games/tower-stack/AbramsStack.aa
+++ b/games/tower-stack/AbramsStack.aa
@@ -121,11 +121,12 @@
   var muteBtn = document.getElementById("mute");
 
   // ---------- Sizing (DPR aware, iframe responsive) ----------
+  // Cap to a centered ~2:3 portrait column on desktop (letterboxed); full-width on phones.
   var W = 0, H = 0, DPR = 1;
   function resize() {
     DPR = Math.min(window.devicePixelRatio || 1, 2);
-    W = window.innerWidth;
     H = window.innerHeight;
+    W = Math.min(window.innerWidth, Math.round(H * 0.66));
     canvas.width = Math.floor(W * DPR);
     canvas.height = Math.floor(H * DPR);
     canvas.style.width = W + "px";
diff --git a/games/tower-stack/index.html b/games/tower-stack/index.html
index d25f198..01a4821 100644
--- a/games/tower-stack/index.html
+++ b/games/tower-stack/index.html
@@ -121,11 +121,12 @@
   var muteBtn = document.getElementById("mute");
 
   // ---------- Sizing (DPR aware, iframe responsive) ----------
+  // Cap to a centered ~2:3 portrait column on desktop (letterboxed); full-width on phones.
   var W = 0, H = 0, DPR = 1;
   function resize() {
     DPR = Math.min(window.devicePixelRatio || 1, 2);
-    W = window.innerWidth;
     H = window.innerHeight;
+    W = Math.min(window.innerWidth, Math.round(H * 0.66));
     canvas.width = Math.floor(W * DPR);
     canvas.height = Math.floor(H * DPR);
     canvas.style.width = W + "px";

← 989a1b2 flappy-sky: restore portrait-column fix (sync reverted it) +  ·  back to Games Agentabrams  ·  sync guard: deploy re-syncs from source first + sync.sh --ch 686fd16 →