feat: make game canvas resize according to the window size

UoB-COMSM0166 · Feb 13, 2025 · 212f25e · 212f25e
1 parent 75b07ed
commit 212f25e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/docs/src/sketch.js b/docs/src/sketch.js
@@ -27,8 +27,7 @@ function preload() {
 }
 
 function setup() {
-  // TODO: check the way to set size, now use the current screen size to set canvas
-  createCanvas(windowWidth, windowHeight);
+  createCanvas(800, 600);
   Controller.changePage(new Welcome(), Constants.Page.WELCOME);
 }
 

diff --git a/docs/style.css b/docs/style.css
@@ -9,8 +9,16 @@ body {
   background-color: #222;
 }
 
+main {
+  width: min(100vw - 32px, 100vh * (4/3));
+  height: min(100vh - 32px, 90vw * (3/4));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 canvas {
   display: block;
-  max-width: 100%;
-  max-height: 100%;
+  width: 100% !important;
+  height: 100% !important;
 }