thepaperpilot/Dream-Hero
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Dream-Hero.git synced 2024-11-21 08:12:37 +00:00
Code Issues Releases Activity Actions

Fixed scaling issues on mobile

Browse source
This commit is contained in:
thepaperpilot 2021-03-24 00:09:33 -05:00
parent 1af91bd60f
commit bed86140ee
6 changed files with 39 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/App.vue
View file

@ -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>

8
src/components/Dream.vue
View file

@ -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;

3
src/components/Floor.vue
View file

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

5
src/components/Modal.vue
View file

@ -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;

10
src/components/Town.vue
View file

@ -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 {

6
src/main.js
View file

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