refactor: use multiple routes
This commit is contained in:
pskfyi
pskfyi
parent
19ee7040ac
commit
1d655da2ab
10 changed files with 219 additions and 230 deletions
182
pages/index.vue
182
pages/index.vue
|
|
@ -1,170 +1,36 @@
|
|||
<template>
|
||||
<div
|
||||
class="page grid container max-h-full h-full w-full mx-auto bg-gray-300 px-4"
|
||||
>
|
||||
<header
|
||||
class="text-3xl flex items-center justify-center font-bold bg-gray-600 text-gray-400"
|
||||
>
|
||||
Timekeeper
|
||||
</header>
|
||||
|
||||
<main class="bg-gray-400 grid w-full h-full overflow-auto relative">
|
||||
<div
|
||||
class="flex flex-row bg-gray-300 border border-gray-600 font-semibold h-10"
|
||||
>
|
||||
<div class="text-center pt-2 pb-1 flex-grow border-r border-gray-600">
|
||||
{{ $store.getters.gameMonth }} {{ $store.state.gameDate.year }}
|
||||
</div>
|
||||
<div
|
||||
class="text-center pt-2 pb-1 flex-grow border-r border-gray-600 relative"
|
||||
<div class="tab-content grid flex-col">
|
||||
<template v-for="(process, index) in $store.state.processes">
|
||||
<button :key="index" class="text-right font-semibold">
|
||||
{{ process.instrument }}
|
||||
</button>
|
||||
<div :key="index" class="progress-bar relative">
|
||||
<progress
|
||||
max="100"
|
||||
:value="process.completion"
|
||||
class="w-full h-full"
|
||||
></progress>
|
||||
<span
|
||||
class="absolute top-0 bottom-0 left-0 right-0 text-center text-white"
|
||||
>
|
||||
<progress
|
||||
class="absolute top-0 left-0 right-0 h-1 w-full"
|
||||
:max="
|
||||
$store.state.playerAgeMax.year * 12 +
|
||||
$store.state.playerAgeMax.month
|
||||
"
|
||||
:value="
|
||||
$store.state.playerAge.year * 12 + $store.state.playerAge.month
|
||||
"
|
||||
/>
|
||||
{{ $store.state.playerAge.year }}y{{ $store.state.playerAge.month }}m
|
||||
</div>
|
||||
<div class="text-center pt-2 pb-1 flex-grow">
|
||||
{{ $store.state.playerAgeMax.year }}y{{
|
||||
$store.state.playerAgeMax.month
|
||||
}}m max
|
||||
</div>
|
||||
{{
|
||||
(process.workerCount * process.workerRate * process.reward) / 100.0
|
||||
}}
|
||||
<span class="fas fa-hourglass-half text-sm" /> / sec
|
||||
<!-- {{ $store.state.incremental.currency[process.produces] }} {{ process.produces }} -->
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="units p-8 relative bg-gray-300">
|
||||
<div class="units-background absolute top-8 left-0 right-0"></div>
|
||||
<div
|
||||
class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center"
|
||||
@click="$store.commit('addCurrency', 1)"
|
||||
>
|
||||
<span
|
||||
class="spare-time flex flex-row items-center font-bold rounded-2xl"
|
||||
>
|
||||
<span class="text-3xl md:text-5xl"
|
||||
>{{ $store.state.currency }}
|
||||
</span>
|
||||
<span
|
||||
class="fas fa-hourglass-half text-xl pt-1 pl-2 md:text-3xl md:pt-2"
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs flex flex-row w-full bg-gray-400 text-gray-400 h-10">
|
||||
<game-tab
|
||||
v-for="(tab, index) in $store.state.tabs"
|
||||
:key="index"
|
||||
:index="index"
|
||||
:tab-data="tab"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-full text-2xl text-center pt-1 pb-2"
|
||||
:class="$store.getters.activeTabColorClasses"
|
||||
>
|
||||
{{ $store.getters.activeTab.title }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="tab-content px-4 w-full overflow-y-scroll"
|
||||
:class="$store.getters.activeTabColorClasses"
|
||||
>
|
||||
<first-tab-content v-if="$store.state.activeTabIndex === 0" />
|
||||
<second-tab-content v-else-if="$store.state.activeTabIndex === 1" />
|
||||
<third-tab-content v-else-if="$store.state.activeTabIndex === 2" />
|
||||
|
||||
<template v-else-if="$store.state.activeTabIndex === 3">
|
||||
Tab 4 content
|
||||
</template>
|
||||
|
||||
<template v-else-if="$store.state.activeTabIndex === 4">
|
||||
Tab 5 content
|
||||
</template>
|
||||
|
||||
<sixth-tab-content v-else-if="$store.state.activeTabIndex === 5" />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="text-lg flex items-center pt-4 pb-2 px-4 hidden md:block">
|
||||
Created by GrapefruitChili, PK, TNNPe, Vice for New Years Incremental Game
|
||||
Jam 2022.
|
||||
</footer>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'IndexPage',
|
||||
mounted() {
|
||||
window.setInterval(() => {
|
||||
this.gametick()
|
||||
}, 1000)
|
||||
window.setInterval(() => {
|
||||
this.$store.commit('tickGameDate')
|
||||
}, 100)
|
||||
},
|
||||
methods: {
|
||||
gametick() {
|
||||
for (let i = 0; i < this.$store.state.processes.length; i++) {
|
||||
const p = this.$store.state.processes[i]
|
||||
// const step = 100.0 / (6.0 * (i + 1)) // go at different rates
|
||||
const step = p.workerRate * p.workerCount
|
||||
let newValue = p.completion + step
|
||||
while (newValue >= 100) {
|
||||
newValue = newValue - 100
|
||||
this.$store.commit('addCurrency', p.reward)
|
||||
}
|
||||
this.$store.commit('setProcessCompletion', {
|
||||
processIndex: i,
|
||||
value: newValue,
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#__nuxt,
|
||||
#__layout {
|
||||
height: 100%; /* 100vh is broken on mobile. this is the fix. */
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #e5e7eb;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
grid-template-rows: 0rem 1fr auto;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr);
|
||||
}
|
||||
|
||||
.units-background {
|
||||
background: url('https://freesvg.org/img/johnny_automatic_hourglass.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
opacity: 0.4;
|
||||
height: calc(100% - 4rem); /* 4rem = top padding + bottom padding */
|
||||
}
|
||||
.spare-time {
|
||||
background: rgba(2555, 255, 255, 0.6);
|
||||
box-shadow: 0px 0px 21px 3px #fff;
|
||||
.tab-content {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-gap: 1rem 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Reference in a new issue