sizing changes

public/global.css

@@ -2,6 +2,7 @@ html, body {
 	position: relative;
 	width: 100%;
 	height: 100%;
+	overflow: hidden;
 }
 
 body {

src/App.svelte

@@ -43,9 +43,17 @@
         outerHeight = window.outerHeight;
         outerWidth = window.outerWidth;
     }
+
+	function clicked() {
+		startPlaying();
+
+		if(window.innerHeight < 768) {
+			document.body.requestFullscreen({ navigationUI: "hide" });
+		}
+	}
 </script>
 
-<svelte:window on:click={startPlaying} on:resize={resize} on:keydown={startPlaying} />
+<svelte:window on:click={clicked} on:resize={resize} on:keydown={startPlaying} />
 
 <svelte:head>
 	<title>Heaventaker</title>

src/game/index.js

@@ -2,10 +2,25 @@ import { CANVAS, Game, Scale, WEBGL } from "phaser";
 import { GameScene } from "./gameScene";
 import { maps } from "./maps";
 
+var ratio = window.devicePixelRatio || 1;
 export function resize() {
-
+    if(!game || !htmlcanvas) return;
+    try {
+        // game.scale.resize(htmlcanvas.parentElement.width * ratio, htmlcanvas.parentElement.height * ratio);
+    } catch(e) {
+        console.error(e, new ErrorEvent(e.type, {
+            colno: e.colno,
+            error: e,
+            lineno: e.lineno,
+            message: e.message,
+            filename: e.filename
+        }));
+        window.dispatchEvent(new ErrorEvent("error", e));
+    }
+    console.log("size", htmlcanvas.parentElement.clientWidth * ratio, htmlcanvas.parentElement.clientHeight * ratio);
 }
 
+/** @type {HTMLCanvasElement} */
 var htmlcanvas;
 /** @type {Game} */
 var game;
@@ -22,8 +37,8 @@ export function setCanvas(canvas) {
         type: ctx ? WEBGL : CANVAS,
         context: ctx || canvas.getContext("2d"),
         customEnvironment: false,
-        width: canvas.parentElement.clientWidth,
+        width: window.innerWidth * ratio,
-        height: canvas.parentElement.clientHeight,
+        height: window.innerHeight * ratio,
         scale: {
             mode: Scale.RESIZE
         },

src/pages/crashHandler.svelte

@@ -61,5 +61,6 @@
         width: calc(100vw - 40px);
         height: calc(100vh - 40px);
         z-index: 999;
+        overflow: auto;
     }
 </style>

src/pages/game.svelte

@@ -23,7 +23,6 @@
         console.log("Started");
         setMap(dialog[current].map);
         setCanvas(canvas);
-        resize();
         return () => {
             console.log("Stopped");
             stop();