From 5bccb7c7f6f4b3f6531fa6dbe58cc65d2f5f7022 Mon Sep 17 00:00:00 2001
From: David Thompson <dthompson2@worcester.edu>
Date: Mon, 3 Jun 2024 12:18:19 -0400
Subject: [PATCH] Improve scaling on small phone screens.

... at the expense of pixel perfection. :(
---
 game.css | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/game.css b/game.css
index e65aea7..4f9a509 100644
--- a/game.css
+++ b/game.css
@@ -13,9 +13,24 @@ body {
     height: 100vh;
 }
 
-canvas {
-    display: block;
-    margin: auto auto;
+/* Scale up canvas image on small screens.  Loses pixel perfectness
+   but improves visibility on phones. */
+@media (max-width: 960px) or (max-height: 720px) {
+    canvas {
+        display: block;
+        margin: auto auto;
+        image-rendering: pixelated;
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+@media (min-width: 960px) or (min-height: 720px) {
+    canvas {
+        display: block;
+        margin: auto auto;
+    }
 }
 
 @media (pointer: fine) {