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
56 lines
1.2 KiB
HTML
56 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, viewport-fit=cover"
|
|
/>
|
|
<meta
|
|
name="description"
|
|
content="Play the reconstructed 1995 TDK Pinball Machine in your browser."
|
|
/>
|
|
<title>TDK Pinball Machine 1.00</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
background: #000;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
min-width: 640px;
|
|
min-height: 460px;
|
|
overflow: auto;
|
|
background: #000;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
#glcanvas {
|
|
display: block;
|
|
width: 640px;
|
|
height: 460px;
|
|
background: #000;
|
|
outline: none;
|
|
image-rendering: pixelated;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="glcanvas" tabindex="1" aria-label="TDK Pinball Machine"></canvas>
|
|
<noscript>This game needs JavaScript enabled.</noscript>
|
|
<script src="https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js"></script>
|
|
<script src="./storage.js"></script>
|
|
<script>
|
|
load("tdkpin-rs.wasm");
|
|
</script>
|
|
</body>
|
|
</html>
|