From bed86140ee8cf5b876760f41b1bda9c4b79fc35e Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Wed, 24 Mar 2021 00:09:33 -0500
Subject: [PATCH] Fixed scaling issues on mobile

---
 src/App.vue              | 34 ++++++++++++++++++----------------
 src/components/Dream.vue |  8 +++++---
 src/components/Floor.vue |  3 +--
 src/components/Modal.vue |  5 +++--
 src/components/Town.vue  | 10 ++++++----
 src/main.js              |  6 ++++++
 6 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 179043d..0513d4a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,24 @@
 <template>
-<transition name="victory" v-if="$store.cycle >= 5 && !$store.keepPlaying">
-	<div  class="victory">
-		<h1>You Win!</h1>
-		<h2>Congratulations, you beat the game in:<br/>{{ formatTime($store.timePlayed) }}</h2>
-		<h3>You can keep going if you'd like, but things might get weird</h3>
-		<button v-on:click="keepGoing">Keep Going</button>
+<div v-bind:style="{ '--height': $store.windowHeight + 'px' }">
+	<transition name="victory" v-if="$store.cycle >= 5 && !$store.keepPlaying">
+		<div  class="victory">
+			<h1>You Win!</h1>
+			<h2>Congratulations, you beat the game in:<br/>{{ formatTime($store.timePlayed) }}</h2>
+			<h3>You can keep going if you'd like, but things might get weird</h3>
+			<button v-on:click="keepGoing">Keep Going</button>
+		</div>
+	</transition>
+	<div id="app" v-else-if="$store.started">
+		<Header />
+		<Town />
+		<Dream ref="dream" />
 	</div>
-</transition>
-<div id="app" v-else-if="$store.started">
-	<Header />
-	<Town />
-	<Dream ref="dream" />
+	<transition name="welcome" v-else>
+		<div  class="welcome" v-on:click="start">
+			<img src="assets/logo.png" alt="Dream Hero" />
+		</div>
+	</transition>
 </div>
-<transition name="welcome" v-else>
-	<div  class="welcome" v-on:click="start">
-		<img src="assets/logo.png" alt="Dream Hero" />
-	</div>
-</transition>
 </template>
 
 <script>
diff --git a/src/components/Dream.vue b/src/components/Dream.vue
index d5953ea..2435ff2 100644
--- a/src/components/Dream.vue
+++ b/src/components/Dream.vue
@@ -1,7 +1,7 @@
 <template>
 <scroll class="dream" ref="scroll">
     <Floor v-for="(tile, index) in $store.path" :key="index" :index="index" />
-    <div v-if="$store.upgrades.Cot >= 1" class="endAtLoop" v-on:click="toggleEndAtLoop">
+    <div v-if="$store.upgrades.Cot >= 1" class="endAtLoop" v-on:pointerdown="toggleEndAtLoop">
         <h2 v-if="$store.endAtLoop">Waking up at end of this sleep cycle</h2>
         <h2 v-else>Entering deeper sleep at end of this sleep cycle</h2>
         <span>Click to toggle</span>
@@ -20,7 +20,7 @@
             </span>
         </div>
         <div slot="footer">
-            <button v-on:click="$actions.endDream">Wake Up</button>
+            <button v-on:pointerdown="$actions.endDream">Wake Up</button>
         </div>
     </Modal>
 </scroll>
@@ -53,11 +53,13 @@ export default {
     right: 0;
     background: var(--bg-color);
     padding: 20px;
+    min-width: 640px;
+    height: calc(var(--height) - 50px);
+    box-sizing: border-box;
 }
 
 .endAtLoop {
     width: 600px;
-    max-width: 90vw;
     margin: 10px auto;
     background: var(--raised-color);
     height: 100px;
diff --git a/src/components/Floor.vue b/src/components/Floor.vue
index 1ded1a6..4b4c884 100644
--- a/src/components/Floor.vue
+++ b/src/components/Floor.vue
@@ -13,7 +13,7 @@
             :key="index" :action="action" :index="index" />
     </span>
     <span v-bind:style="{ width: $store.upgrades.Cot >= 2 && $store.position === index ? '15%' : '0%' }"
-        class="endAtFloor" v-on:click="toggleEndAtFloor">
+        class="endAtFloor" v-on:pointerdown="toggleEndAtFloor">
         Wake up early:<br/><b>{{ $store.endAtFloor ? "On" : "Off" }}</b>
     </span>
     <Action :tile="$store.path[index]" />
@@ -48,7 +48,6 @@ export default {
 <style scoped>
 .tile {
     width: 600px;
-    max-width: 90vw;
     margin: 10px auto;
     background: var(--raised-color);
 }
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index a51b057..b64e3c2 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,7 +1,7 @@
 <template>
 	<transition name="modal">
 		<div class="modal-mask" v-if="show">
-			<div class="modal-wrapper" v-on:click.self="$emit('close')">
+			<div class="modal-wrapper" v-on:pointerdown.self="$emit('close')">
 				<div class="modal-container">
 
 					<div class="modal-header">
@@ -45,7 +45,8 @@ export default {
 	top: 0;
 	left: 0;
 	width: 100%;
-	height: 100%;
+	min-width: 640px;
+	height: var(--height);
 	background-color: rgba(0, 0, 0, 0.5);
 	display: table;
 	transition: opacity 0.3s ease;
diff --git a/src/components/Town.vue b/src/components/Town.vue
index a9fdad0..e21ec02 100644
--- a/src/components/Town.vue
+++ b/src/components/Town.vue
@@ -5,19 +5,19 @@
             <div class="town">
                 <h1 class="background">World Map</h1>
                 <div v-bind:class="{ building: true, highlight: $store.tutorialOne }" style="top: 500px; left: 700px;"
-                    v-on:click="$actions.openBuilding('Cot')">
+                    v-on:pointerdown="$actions.openBuilding('Cot')">
                     Cot
                 </div>
                 <div class="building" v-if="!$store.tutorialOne" style="top: 200px; left: 600px;"
-                    v-on:click="$actions.openBuilding('Bank')">
+                    v-on:pointerdown="$actions.openBuilding('Bank')">
                     Bank
                 </div>
                 <div class="building" v-if="!$store.tutorialOne" style="top: 800px; left: 200px;"
-                    v-on:click="$actions.openBuilding('Apothecary')">
+                    v-on:pointerdown="$actions.openBuilding('Apothecary')">
                     Apothecary
                 </div>
                 <div class="building" v-if="!$store.tutorialOne" style="top: 750px; left: 800px;"
-                    v-on:click="$actions.openBuilding('Armory')">
+                    v-on:pointerdown="$actions.openBuilding('Armory')">
                     Armory
                 </div>
             </div>
@@ -113,6 +113,8 @@ export default {
     right: 0;
     background: var(--bg-color);
     z-index: 1;
+    min-width: 640px;
+    height: calc(var(--height) - 50px);
 }
 
 .town-enter {
diff --git a/src/main.js b/src/main.js
index dd2e685..dc04e33 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,7 @@ const storageKey = "thepaperpilot-dream";
 
 // Load data from localStorage
 const startData = {
+	windowHeight: window.innerHeight,
 	timePlayed: 0,
 	keepPlaying: false,
 	points: new Decimal(0),
@@ -296,6 +297,7 @@ const actions = window.actions = {
 	}
 };
 Vue.prototype.$actions = actions;
+Vue.prototype.window = window;
 
 // Add utility functions to Vue
 Vue.prototype.format = format;
@@ -307,6 +309,10 @@ Vue.config.productionTip = false;
 Vue.use(panZoom);
 Vue.use(PerfectScrollbar, { name: 'scroll' });
 
+window.addEventListener('resize', () => {
+	store.windowHeight = window.innerHeight;
+});
+
 // Start Vue
 window.vue = new Vue({
   render: h => h(App),