Make game properly resize

FormularSumo · FormularSumo · commit 4edaaf6f91d8 · 2022-10-09T17:29:32.000+01:00
As per Davidobot/love.js#16 & https://github.com/rameshvarun/fault/blob/bf08d1cfab662b2ffa3baad1678a000782ef8f65/platform/web/index.html#L91
diff --git a/index.html b/index.html
@@ -8,13 +8,35 @@
     <link rel="icon" type="image/x-icon" href="Game.ico">
 
     <!-- Load custom style sheet -->
-    <link rel="stylesheet" type="text/css" href="theme/love.css">
+    <style>
+      body {
+        background-repeat: no-repeat;
+        font-family: arial;
+        margin: 0;
+        padding: none;
+        background-color: rgb( 154, 205, 237 );
+        color: rgb( 28, 78, 104 );
+      }
+
+      button {
+        font-size: 20px
+      }
+
+      footer {
+        font-family: arial;
+        font-size: 12px;
+        padding-left: 10px;
+        position:absolute;
+        bottom: 0;
+        width: 100%;
+      }
+    </style>
   </head>
   <body>
     <center>
       <div>
-        <canvas id="loadingCanvas" oncontextmenu="event.preventDefault()" width="1920" height="1080"></canvas>
-        <canvas id="canvas" oncontextmenu="event.preventDefault()" width="1920" height="1080"></canvas>
+        <canvas id="canvas" style="visibility: hidden; position: absolute; width: 100%; height: 100%; display: block;" oncontextmenu="event.preventDefault()"></canvas>
+        <canvas id="loadingCanvas" style="position: absolute; width: 100%; height: 100%; display: block;" oncontextmenu="event.preventDefault()"></canvas>
       </div>
     </center>
 
@@ -28,14 +50,16 @@
             else if(canvas.mozRequestFullScreen)
                 canvas.mozRequestFullScreen();
       }
-      function FullScreenHook(){
-        var canvas = document.getElementById("canvas");
-        canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-        canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-      }
+      // function FullScreenHook(){
+      //   var canvas = document.getElementById("canvas");
+      //   canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+      //   canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+      // }
       var loadingContext = document.getElementById('loadingCanvas').getContext('2d');
       function drawLoadingText(text) {
         var canvas = loadingContext.canvas;
+        canvas.width  = window.innerWidth;
+        canvas.height = window.innerHeight;
 
         loadingContext.fillStyle = "rgb(142, 195, 227)";
         loadingContext.fillRect(0, 0, canvas.scrollWidth, canvas.scrollHeight);
@@ -104,8 +128,8 @@
     </script>
     <script type="text/javascript" src="game.js"></script>
     <script async type="text/javascript" src="love.js" onload="applicationLoad(this)"></script>
-    <footer>
+    <!-- <footer>
       <p><button onclick="goFullScreen();">Go Fullscreen</button></p>
-    </footer>
+    </footer> -->
   </body>
 </html>
diff --git a/theme/bg.png b/theme/bg.png
diff --git a/theme/love.css b/theme/love.css
@@ -1,5 +1,5 @@
 body {
-    background-image: url(bg.png);
+    /* background-image: url(bg.png); */
     background-repeat: no-repeat;
     font-family: arial;
     margin: 0;
@@ -19,26 +19,4 @@ footer {
     position:absolute;
     bottom: 0;
     width: 100%;
-}
-
-/* Links */
-a {
-    text-decoration: none;
-}
-a:link {
-    color: rgb( 233, 73, 154 );
-}
-a:visited {
-    color: rgb( 110, 30, 71 );
-}
-a:hover {
-    color: rgb( 252, 207, 230 );
-}
-
-/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
-#canvas {
-    padding: 0;
-    display: inline;
-    border: 0px;
-    visibility: hidden;
-}
+}
