feat: appretices tab draft 2

This commit is contained in:
pskfyi 2022-01-10 02:14:44 -08:00 committed by pskfyi
parent 7c0a3b6375
commit 875418a84f
2 changed files with 52 additions and 28 deletions

View File

@ -0,0 +1,46 @@
<template>
<progress-button
:label="label"
:description="description"
:max="process.nextWorkerCost"
:value="$store.state.currency"
:current="current"
:next="next"
@click="levelUp"
/>
</template>
<script>
export default {
props: {
process: { type: Object, required: true },
},
computed: {
label() {
return this.process.workerLevel > 0
? `L${this.process.workerLevel} ${this.process.worker}`
: `Hire ${this.process.worker}`
},
description() {
return this.process.workerLevel > 0
? `Multiplies spare time gained from ${this.process.instrument}s.`
: `Use your spare time to hire an apprentice ${this.process.worker} who can help you with ${this.process.instrument}s.`
},
current() {
return this.process.workerLevel > 0
? `${1 + this.process.workerLevel}x`
: null
},
next() {
return this.process.workerLevel > 0
? `${2 + this.process.workerLevel}x`
: null
},
},
methods: {
levelUp() {
this.$store.commit('levelUpApprentice', this.process)
},
},
}
</script>

View File

@ -1,31 +1,9 @@
<template>
<div class="tab-content grid flex-col">
<div
<responsive-grid>
<apprentice-button
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>
:key="`${index}-${process.workerLevel}`"
:process="process"
/>
</responsive-grid>
</template>
<style>
.tab-content {
grid-template-columns: 1fr;
}
</style>