This repository has been archived on 2024-03-13. You can view files and clone it, but cannot push or open issues or pull requests.
timekeeper/layouts/default.vue

144 lines
3.8 KiB
Vue
Raw Normal View History

2022-01-10 03:28:09 +00:00
<template>
<div class="container max-h-full h-full w-full mx-auto bg-gray-400 px-4">
<main
class="grid w-full h-full overflow-auto relative"
:class="`bg-${activeTab.color}`"
>
<time-header />
2022-01-10 03:28:09 +00:00
<key-art-stage />
2022-01-10 03:28:09 +00:00
<div class="grid grid-cols-6 gap-1 w-full h-10 relative">
2022-01-10 03:28:09 +00:00
<game-tab
v-for="tab in $store.state.tabs"
:key="tab.route"
2022-01-10 03:28:09 +00:00
:tab-data="tab"
/>
</div>
<div
class="tab-content px-4 w-full relative overflow-y-scroll"
2022-01-10 03:28:09 +00:00
:class="activeTabColorClasses"
>
<div
2022-01-13 21:02:43 +00:00
class="tab-title w-full text-2xl text-center pt-1 pb-2"
v-text="activeTab.title"
/>
2022-01-10 03:28:09 +00:00
<nuxt />
</div>
</main>
<narrative-modal v-if="$store.state.modalIsOpen" />
2022-01-10 03:28:09 +00:00
</div>
</template>
<script>
import { mapGetters } from 'vuex'
2022-01-10 03:28:09 +00:00
export default {
computed: {
...mapGetters(['activeTab']),
2022-01-10 03:28:09 +00:00
activeTabColorClasses() {
return `bg-${this.activeTab.lightColor} text-${this.activeTab.darkColor}`
2022-01-10 03:28:09 +00:00
},
},
mounted() {
window.setInterval(() => {
if (this.$store.state.modalIsOpen || this.$store.state.gameStopped) return
if (this.$store.state.playerAge < this.$store.state.playerAgeMax) {
this.gametick()
} else {
this.checkLossCondition()
}
}, 100)
2022-01-10 03:28:09 +00:00
window.setInterval(() => {
if (this.$store.state.modalIsOpen || this.$store.state.gameStopped) return
if (this.$store.state.playerAge < this.$store.state.playerAgeMax)
this.$store.commit('tickGameDate')
2022-01-10 06:25:55 +00:00
}, 1000)
2022-01-10 03:28:09 +00:00
},
methods: {
gametick() {
// Instruments tick
this.$store.state.processes
.filter((p) => p.created)
.forEach((process) => {
if (process.completion >= process.completionRequired) {
const reward = process.baseReward * (1 + process.workerLevel)
this.$store.commit('addCurrency', reward)
this.$store.commit('resetProcess', { process })
}
this.$store.commit('tickProcess', { process })
2022-01-10 03:28:09 +00:00
})
// Energy ticks
if (
this.$store.getters.isTabUnlocked('Time Machine') &&
this.$store.state.energy < this.$store.state.energyMax
) {
this.$store.commit('tickEnergy')
}
2022-01-10 03:28:09 +00:00
},
checkLossCondition() {
this.$store.commit('stopGame')
// End state
const lostTheGame =
this.$store.state.playerAge === this.$store.state.playerAgeMax &&
!this.$store.getters.isTabUnlocked('Time Machine')
if (lostTheGame) {
const message =
'You wasted your precious time your whole life with nothing to show for it.' +
'<br><br>' +
'You have lost the game. Reload the page and try again.'
this.$store.commit('openModal', message)
} else {
const message =
"You are too frail to continue. It's time to gather your knowledge into a book and " +
'send it, along with the time machine and your timekeeping instruments, to your younger self. ' +
'Hopefully they will know what to do with this valuable wisdom.' +
'<br><br>' +
'Go to the <b>Missions</b> tab to continue.'
this.$store.commit('openModal', message)
}
},
2022-01-10 03:28:09 +00:00
},
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=Roboto+Slab:wght@600&display=swap');
2022-01-13 21:02:43 +00:00
2022-01-10 03:28:09 +00:00
html,
body,
#__nuxt,
#__layout {
height: 100%; /* 100vh is broken on mobile. this is the fix. */
width: 100vw;
}
html {
background: #e5e7eb;
overflow-y: hidden;
2022-01-13 21:02:43 +00:00
font-family: 'Manrope', sans-serif;
2022-01-10 03:28:09 +00:00
}
</style>
<style scoped>
main {
grid-template-rows: auto minmax(0, 2fr) auto minmax(0, 3fr);
transition: background-color 2000ms;
2022-01-10 03:28:09 +00:00
}
2022-01-13 21:02:43 +00:00
.tab-title {
font-family: 'Roboto Slab', serif;
}
2022-01-10 03:28:09 +00:00
</style>