Resize canvas based on container size

Author: rezigned

.github/workflows/github-pages.yml

@@ -3,7 +3,7 @@ name: Release to Github Pages
 
 on:
   push:
-    branches: [main]
+    branches: [main, add-wasm-backend]
     paths:
       - 'examples/wasm/**'
   workflow_dispatch:

examples/wasm/game.js

@@ -1,6 +1,10 @@
 // Configuration constants
 const CONFIG = {
   GROUND_HEIGHT: 22,
+  CANVAS: {
+    WIDTH: 600,
+    HEIGHT: 300,
+  },
   PLAYER: {
     WIDTH: 80,
     HEIGHT: 40,
@@ -70,6 +74,9 @@ const Utils = {
 
 // Game elements
 const canvas = document.getElementById("game-canvas");
+canvas.width = CONFIG.CANVAS.WIDTH;
+canvas.height = CONFIG.CANVAS.HEIGHT;
+
 const ctx = canvas.getContext("2d");
 const UI = {
   gameOverMessage: document.getElementById("game-over"),

examples/wasm/index.css

@@ -7,27 +7,24 @@
   font-style: normal;
 }
 body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
   min-height: 100vh;
   margin: 0;
   padding-top: 1.5rem;
-  background-color: #f0f4f8; /* Soft light blue-gray */
-  font-family: 'Silkscreen', cursive; /* Pixel font for everything */
-  color: #334e68; /* Dark blue-gray text */
+  background-color: #f0f4f8;
+  font-family: 'Silkscreen', cursive;
+  color: #334e68;
 }
 body > * {
-  width: 600px;
-  margin: 0 0 2rem;
+  max-width: 600px;
+  min-width: 400px;
+  margin: 0 auto 2rem;
 }
 h1, h2 {
-  font-family: 'Press Start 2P', cursive; /* Pixel font for everything */
+  font-family: 'Press Start 2P', cursive;
   text-align: center;
 }
 h1 {
-  color: #243b53; /* Darker blue-gray for title */
+  color: #243b53;
 }
 h3 {
   margin-bottom: 1.5rem;
@@ -48,7 +45,7 @@ code, p {
 }
 p {
   font-size: 1.2em;
-  margin: 0 0 1em;
+  margin: 0 auto 1em;
   line-height: 1.3em;
 }
 p code {
@@ -59,17 +56,21 @@ code {
 }
 .game-container {
   position: relative;
-  width: 600px;
-  height: 300px;
+  min-width: 400px;
+  max-width: 600px;
   border: 4px solid #9fb3c8; /* Muted blue-gray border */
   box-sizing: content-box; /* Include padding and border in the element's total width and height */
+  margin: 0 auto 2rem;
 }
 canvas {
   background-color: #0c0c1f; /* Dark blue night sky */
   image-rendering: pixelated; /* Ensure pixel art stays sharp */
   image-rendering: -moz-crisp-edges;
   image-rendering: -webkit-crisp-edges;
   display: block; /* Remove extra space below canvas */
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 600 / 300;
 }
 .socials a {
   float: right;

examples/wasm/index.html

@@ -29,7 +29,7 @@ <h1>
     </p>
     <h3>DEMO: Nyan Jump! (WASM Edition)</h3>
     <div class="game-container">
-      <canvas id="game-canvas" width="600" height="300"></canvas>
+      <canvas id="game-canvas" width="100%"></canvas>
       <div id="game-over">GAME OVER!</div>
       <button id="restart-button">Restart</button>
       <button id="share-button">Share on X</button>