Fixed scaling issues on mobile

src/App.vue

@@ -1,22 +1,24 @@
 <template>
-<transition name="victory" v-if="$store.cycle >= 5 && !$store.keepPlaying">
+<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>
+	</transition>
-<div id="app" v-else-if="$store.started">
+	<div id="app" v-else-if="$store.started">
 		<Header />
 		<Town />
 		<Dream ref="dream" />
-</div>
+	</div>
-<transition name="welcome" v-else>
+	<transition name="welcome" v-else>
 		<div  class="welcome" v-on:click="start">
 			<img src="assets/logo.png" alt="Dream Hero" />
 		</div>
-</transition>
+	</transition>
+</div>
 </template>
 
 <script>

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;

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);
 }

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;

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 {

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),