refactor: use multiple routes
This commit is contained in:
pskfyi
pskfyi
parent
19ee7040ac
commit
1d655da2ab
10 changed files with 219 additions and 230 deletions
|
|
@ -1,36 +0,0 @@
|
|||
<template>
|
||||
<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"
|
||||
>
|
||||
{{
|
||||
(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>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tab-content {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-gap: 1rem 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div
|
||||
<nuxt-link
|
||||
class="tab flex-grow text-center text-2xl font-semibold py-1 cursor-pointer"
|
||||
:class="[colorClasses, index < 5 && 'mr-px']"
|
||||
@click="$store.commit('setActiveTab', index)"
|
||||
:to="tabData.route"
|
||||
>
|
||||
<template v-if="!tabData.locked">
|
||||
<span :class="tabData.label" />
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<template v-if="tabData.locked">
|
||||
<span class="fas fa-lock" />
|
||||
</template>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -27,12 +27,14 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
active() {
|
||||
return this.$store.state.activeTabIndex === this.index
|
||||
return this.$route.path === this.tabData.route
|
||||
},
|
||||
colorClasses() {
|
||||
const { lightColor, darkColor } = this.tabData
|
||||
|
||||
return this.active
|
||||
? this.$store.getters.activeColorClasses(this.index)
|
||||
: this.$store.getters.inactiveColorClasses(this.index)
|
||||
? `bg-${lightColor} text-${darkColor}`
|
||||
: `bg-${darkColor} text-${lightColor}`
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<div class="tab-content grid flex-col">
|
||||
<div
|
||||
v-for="(process, index) in $store.state.processes"
|
||||
:key="index"
|
||||
class="flex flex-col mb-4 p-4 rounded border"
|
||||
:class="`border-${$store.getters.activeTab.darkColor}`"
|
||||
@click="$store.commit('purchaseWorker', index)"
|
||||
>
|
||||
<span class="text-center font-bold pb-2 text-xl">
|
||||
{{ process.workerCount }} {{ process.worker
|
||||
}}<template v-if="process.workerCount != 1">s</template>
|
||||
</span>
|
||||
<span class="text-left font-semibold">
|
||||
Each <b>{{ process.worker }}</b> makes your
|
||||
<b>{{ process.device }}s</b> produce <b>spare time</b> at an increased
|
||||
rate.
|
||||
</span>
|
||||
<span class="text-center text-md pt-2"
|
||||
>Cost for next {{ process.worker }}: {{ process.nextWorkerCost }}
|
||||
{{ process.buyWorkersWith }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tab-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<div class="tab-content grid md:overflow-hidden">
|
||||
<div>
|
||||
<span align="left"><b>Total spare time generated</b></span
|
||||
><span align="right">{{ $store.state.currencyTotal }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span align="left"><b>Total spare time spent</b></span
|
||||
><span align="right">{{ $store.getters.currencySpent }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span align="left"><b>Total in-game time elapsed</b></span
|
||||
><span align="right"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span align="left"><b>Total lifetimes</b></span
|
||||
><span align="right">{{ $store.state.totalLifetimes }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span align="left"><b>Longest lifetime</b></span
|
||||
><span align="right"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span align="left"><b>Oldest age reached</b></span
|
||||
><span align="right"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span align="left"><b>Latest time reached</b></span
|
||||
><span align="right"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span align="left"><b>Wisdom for next prestige</b></span
|
||||
><span align="right">{{ $store.state.wisdomGained }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span align="left"><b>Wisdom from other timelines</b></span
|
||||
><span align="right">{{ $store.state.wisdomApplied }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<div class="tab-content grid md:overflow-hidden">
|
||||
<template v-for="(mission, index) in $store.state.missions">
|
||||
<progress-button
|
||||
:key="index"
|
||||
:label="mission.name"
|
||||
:description="mission.description"
|
||||
:max="mission.completionCriteria.cost"
|
||||
:value="$store.state.currency"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tab-content {
|
||||
--columns: 1;
|
||||
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
/* md */
|
||||
@media (min-width: 768px) {
|
||||
.tab-content {
|
||||
--columns: 2;
|
||||
}
|
||||
}
|
||||
/* 2xl */
|
||||
@media (min-width: 1536px) {
|
||||
.tab-content {
|
||||
--columns: 3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in a new issue