From a21f01c02d64bbfb4f09211e9c07da1aea2ccd44 Mon Sep 17 00:00:00 2001
From: ddidderr <ddidderr@paul.network>
Date: Sat, 29 Aug 2026 14:49:37 +0200
Subject: [PATCH] fix(web): keep game at original canvas size

The browser shell previously sized the canvas to the full viewport, causing
Macroquad to scale the 640x460 game presentation as the website changed size.
Keep the canvas at the original 640x460 CSS-pixel dimensions and center it on
a black page instead. A minimum page size and scrolling preserve access to the
fixed canvas on viewports smaller than the original presentation.

Test Plan:
- `just web-build` -- passed
- `git diff --check` -- passed
- Browser smoke test -- canvas measured 640x460 and was centered at (320,130)
  in a 1280x720 viewport; the rendered game remained at the intended fixed
  presentation size with no runtime errors
---
 tdkpin-rs/web/README.md  | 7 ++++---
 tdkpin-rs/web/index.html | 8 +++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/tdkpin-rs/web/README.md b/tdkpin-rs/web/README.md
index bd5f68a..083786e 100644
--- a/tdkpin-rs/web/README.md
+++ b/tdkpin-rs/web/README.md
@@ -6,9 +6,10 @@ Build and serve the browser version from this directory with:
 just web-serve
 ```
 
-The game is compiled for `wasm32-unknown-unknown` and loaded into the centered
-black canvas by `index.html`. Browser settings and high scores are saved in
-`localStorage`; native builds continue to use their normal per-user save file.
+The game is compiled for `wasm32-unknown-unknown` and loaded into a fixed
+640x460 canvas centered on the black page by `index.html`. Browser settings and
+high scores are saved in `localStorage`; native builds continue to use their
+normal per-user save file.
 
 The page uses Macroquad's official browser loader from the miniquad samples
 site. The web page must be served over HTTP rather than opened directly from a
diff --git a/tdkpin-rs/web/index.html b/tdkpin-rs/web/index.html
index 66153c5..56965b4 100644
--- a/tdkpin-rs/web/index.html
+++ b/tdkpin-rs/web/index.html
@@ -22,7 +22,9 @@
         width: 100%;
         height: 100%;
         margin: 0;
-        overflow: hidden;
+        min-width: 640px;
+        min-height: 460px;
+        overflow: auto;
         background: #000;
       }
 
@@ -33,8 +35,8 @@
 
       #glcanvas {
         display: block;
-        width: 100vw;
-        height: 100vh;
+        width: 640px;
+        height: 460px;
         background: #000;
         outline: none;
         image-rendering: pixelated;