fix(web): keep game at original canvas size
Build TDK Pinball / build (macos-latest) (push) Canceled after 0s
Build TDK Pinball / build (ubuntu-latest) (push) Canceled after 0s
Build TDK Pinball / build (windows-latest) (push) Canceled after 0s

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
This commit is contained in:
2026-08-29 14:49:37 +02:00
parent b079cfa196
commit a21f01c02d
2 changed files with 9 additions and 6 deletions
+4 -3
View File
@@ -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
+5 -3
View File
@@ -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;