From af3d6ac07150ba58fcf4b0f4924f3dcccd5bedb6 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Fri, 15 Oct 2021 17:42:36 +0200
Subject: [PATCH] sizing changes

---
 public/global.css             |  1 +
 src/App.svelte                | 10 +++++++++-
 src/game/index.js             | 21 ++++++++++++++++++---
 src/pages/crashHandler.svelte |  1 +
 src/pages/game.svelte         |  1 -
 5 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/public/global.css b/public/global.css
index 1e54753..48b60de 100644
--- a/public/global.css
+++ b/public/global.css
@@ -2,6 +2,7 @@ html, body {
 	position: relative;
 	width: 100%;
 	height: 100%;
+	overflow: hidden;
 }
 
 body {
diff --git a/src/App.svelte b/src/App.svelte
index e2f0c8d..90e5473 100644
--- a/src/App.svelte
+++ b/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>
diff --git a/src/game/index.js b/src/game/index.js
index 48b9a26..5a6c934 100644
--- a/src/game/index.js
+++ b/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,
-        height: canvas.parentElement.clientHeight,
+        width: window.innerWidth * ratio,
+        height: window.innerHeight * ratio,
         scale: {
             mode: Scale.RESIZE
         },
diff --git a/src/pages/crashHandler.svelte b/src/pages/crashHandler.svelte
index c21f8c1..d8ec7a0 100644
--- a/src/pages/crashHandler.svelte
+++ b/src/pages/crashHandler.svelte
@@ -61,5 +61,6 @@
         width: calc(100vw - 40px);
         height: calc(100vh - 40px);
         z-index: 999;
+        overflow: auto;
     }
 </style>
\ No newline at end of file
diff --git a/src/pages/game.svelte b/src/pages/game.svelte
index 50ec1b7..577642a 100644
--- a/src/pages/game.svelte
+++ b/src/pages/game.svelte
@@ -23,7 +23,6 @@
         console.log("Started");
         setMap(dialog[current].map);
         setCanvas(canvas);
-        resize();
         return () => {
             console.log("Stopped");
             stop();