From 0e5debd4fb2f055484a46e56eceed7ebc29a9996 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Wed, 9 Jun 2021 16:58:16 +0200
Subject: [PATCH] add rotate warning

---
 src/App.svelte | 44 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/App.svelte b/src/App.svelte
index c4a4d5e..6ca77fc 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -33,14 +33,37 @@
 
 	$: console.log(dialog[$page]);
 	console.log("Pancake recipe at https://github.com/danbulant/heaventaker");
+
+    var width = window.innerWidth;
+    var height = window.innerHeight;
+    var outerHeight = window.outerHeight;
+    var outerWidth = window.outerWidth;
+
+	/**
+	 * @param {UIEvent} e
+	 */
+    function resize(e) {
+        width = window.innerWidth;
+        height = window.innerHeight;
+        outerHeight = window.outerHeight;
+        outerWidth = window.outerWidth;
+    }
 </script>
 
-<svelte:window on:click={startPlaying} on:keydown={startPlaying} />
+<svelte:window on:click={startPlaying} on:resize={resize} on:keydown={startPlaying} />
 
 <svelte:head>
 	<title>Heaventaker</title>
 </svelte:head>
 
+{#if width < height / 1080 * 615 * 2}
+	<div class="warning" style="height: {height}px; line-height: {height}px;">
+		<span>
+			Resize or rotate your device to play.
+		</span>
+	</div>
+{/if}
+
 {#if dialog[$page].map}
 	<Game bind:current={$page} />
 {/if}
@@ -48,3 +71,22 @@
 <Overlay active={!$gameActive}>
 	<Dialog bind:current={$page} />
 </Overlay>
+
+<style>
+	.warning {
+		width: 100vw;
+		position: fixed;
+		top: 0;
+		left: 0;
+		background: rgba(0,0,0,0.7);
+		color: white;
+		text-align: center;
+		z-index: 99;
+		font-size: x-large;
+	}
+	.warning span {
+		display: inline-block;
+		vertical-align: middle;
+		line-height: normal;
+	}
+</style>
\ No newline at end of file