feat: first tab draft 2; adjust tick and worker mechanics
This commit is contained in:
pskfyi
pskfyi
parent
8c61da296d
commit
ea1a65766d
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div
|
||||
class="relative rounded-lg overflow-hidden border"
|
||||
:class="`border-${$store.getters.activeTab.darkColor}`"
|
||||
>
|
||||
<div
|
||||
class="progress-wrapper absolute top-0 left-0 right-0 w-full h-5"
|
||||
:class="`text-${$store.getters.activeTab.color}`"
|
||||
>
|
||||
<progress
|
||||
class="w-full h-5 border-b"
|
||||
:class="`border-${$store.getters.activeTab.darkColor}`"
|
||||
:max="process.completionRequired"
|
||||
:value="process.completion"
|
||||
/>
|
||||
<span
|
||||
class="absolute top-0 left-0 right-0 w-full text-center text-sm h-5"
|
||||
:class="`text-${$store.getters.activeTab.darkColor}`"
|
||||
>
|
||||
{{ reward }} <span class="fas fa-hourglass-half" /> every
|
||||
{{ interval }} seconds
|
||||
</span>
|
||||
</div>
|
||||
<img
|
||||
src="https://freesvg.org/img/johnny_automatic_hourglass.png"
|
||||
class="pt-8 pb-3"
|
||||
/>
|
||||
<p
|
||||
class="text-center text-sm font-semibold h-5 border-t"
|
||||
:class="`border-${$store.getters.activeTab.darkColor}`"
|
||||
>
|
||||
{{ process.instrument }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
process: { type: Object, required: true },
|
||||
},
|
||||
computed: {
|
||||
reward() {
|
||||
return this.process.baseReward * (1 + this.process.workerLevel)
|
||||
},
|
||||
interval() {
|
||||
return this.process.completionRequired / 10 /* in seconds */
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
/* progress for all browsers */
|
||||
progress::-webkit-progress-bar {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
width: 100%;
|
||||
}
|
||||
progress {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: currentColor;
|
||||
}
|
||||
progress::-webkit-progress-value {
|
||||
background-color: currentColor;
|
||||
}
|
||||
progress::-moz-progress-bar {
|
||||
background-color: currentColor;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +1,17 @@
|
|||
<template>
|
||||
<div class="page container max-h-full h-full w-full mx-auto bg-gray-400 px-4">
|
||||
<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-${$store.getters.activeTab.color}`"
|
||||
:class="`bg-${activeTab.color}`"
|
||||
>
|
||||
<time-header />
|
||||
|
||||
<key-art-stage />
|
||||
|
||||
<div class="tabs grid w-full text-gray-400 h-10 relative">
|
||||
<div class="grid grid-cols-6 gap-1 w-full h-10 relative">
|
||||
<game-tab
|
||||
v-for="(tab, index) in $store.state.tabs"
|
||||
:key="index"
|
||||
:index="index"
|
||||
v-for="tab in $store.state.tabs"
|
||||
:key="tab.route"
|
||||
:tab-data="tab"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -23,7 +22,7 @@
|
|||
>
|
||||
<div
|
||||
class="w-full text-2xl text-center pt-1 pb-2"
|
||||
v-text="$store.getters.activeTab.title"
|
||||
v-text="activeTab.title"
|
||||
/>
|
||||
|
||||
<nuxt />
|
||||
|
|
@ -33,39 +32,41 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'IndexPage',
|
||||
computed: {
|
||||
activeTabColorClasses() {
|
||||
const { lightColor, darkColor } = this.$store.getters.activeTab
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
return `bg-${lightColor} text-${darkColor}`
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(['activeTab']),
|
||||
activeTabColorClasses() {
|
||||
return `bg-${this.activeTab.lightColor} text-${this.activeTab.darkColor}`
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.setInterval(() => {
|
||||
this.gametick()
|
||||
}, 1000)
|
||||
}, 100)
|
||||
window.setInterval(() => {
|
||||
this.$store.commit('tickGameDate')
|
||||
}, 1000)
|
||||
},
|
||||
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.state.processes
|
||||
.filter((p) => p.created)
|
||||
.forEach((process, index) => {
|
||||
if (process.completion >= process.completionRequired) {
|
||||
this.$store.commit('addCurrency', process.baseReward)
|
||||
this.$store.commit('setProcessCompletion', {
|
||||
processIndex: i,
|
||||
value: newValue,
|
||||
index,
|
||||
value: 0,
|
||||
})
|
||||
}
|
||||
|
||||
this.$store.commit('setProcessCompletion', {
|
||||
index,
|
||||
value: process.completion + 1,
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -87,17 +88,8 @@ html {
|
|||
</style>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-template-rows: auto minmax(0, 2fr) auto minmax(0, 3fr);
|
||||
transition: background-color 2000ms;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-gap: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,40 @@
|
|||
<template>
|
||||
<div class="tab-content grid flex-col">
|
||||
<template v-for="(process, index) in $store.state.processes">
|
||||
<button :key="process.instrument" 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>
|
||||
<responsive-grid class="mb-4">
|
||||
<progress-button
|
||||
v-for="(process, index) in uncreated"
|
||||
:key="index"
|
||||
:label="process.instrument"
|
||||
:max="process.cost"
|
||||
:value="$store.state.currency"
|
||||
@click="create(process.instrument)"
|
||||
/>
|
||||
</responsive-grid>
|
||||
|
||||
<responsive-grid min="2" mid="4" max="8">
|
||||
<timekeeping-instrument
|
||||
v-for="(process, index) in created"
|
||||
:key="index"
|
||||
:process="process"
|
||||
/>
|
||||
</responsive-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tab-content {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-gap: 1rem 1rem;
|
||||
export default {
|
||||
computed: {
|
||||
created() {
|
||||
return this.$store.state.processes.filter((p) => p.created)
|
||||
},
|
||||
uncreated() {
|
||||
return this.$store.state.processes.filter((p) => !p.created)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
create(instrument) {
|
||||
this.$store.commit('createInstrument', instrument)
|
||||
},
|
||||
},
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -62,39 +62,54 @@ export const state = () => ({
|
|||
currencyTotal: new Decimal(0),
|
||||
processes: [
|
||||
{
|
||||
instrument: 'Star Chart',
|
||||
worker: 'Shaman',
|
||||
deviceCount: new Decimal(0),
|
||||
workerCount: 0,
|
||||
completion: 0,
|
||||
workerRate: 6.0, // amount added to "completion" (100=full bar) per worker
|
||||
reward: 8, // currency added when the bar is completed
|
||||
nextWorkerCost: 15, // currency cost of next worker
|
||||
nextWorkerFactor: 1.4, // worker cost *= this factor after each purchase
|
||||
instrument: 'Mechanical Clock',
|
||||
worker: 'Engineer',
|
||||
|
||||
cost: 10,
|
||||
created: false,
|
||||
|
||||
completion: 0, // how close it is to giving currency. 10 gained per second.
|
||||
completionRequired: 10, // should be divisible by 10
|
||||
baseReward: 5, // currency added when the bar is completed
|
||||
|
||||
workerLevel: 0, // 0 = not hired; 1+ = hired
|
||||
nextWorkerCost: 25, // currency cost of next worker
|
||||
nextWorkerFactor: 1.5, // worker cost *= this factor after each purchase
|
||||
|
||||
unlockThreshold: { tech: null, currency: 0 },
|
||||
},
|
||||
{
|
||||
instrument: 'Stone Calendar',
|
||||
worker: 'Stonecarver',
|
||||
deviceCount: new Decimal(0),
|
||||
workerCount: 0,
|
||||
instrument: 'Hourglass',
|
||||
worker: 'Glassblower',
|
||||
|
||||
cost: 100,
|
||||
created: false,
|
||||
|
||||
completion: 0,
|
||||
workerRate: 4.0,
|
||||
reward: 35,
|
||||
nextWorkerCost: 60,
|
||||
completionRequired: 20,
|
||||
baseReward: 35,
|
||||
|
||||
workerLevel: 0,
|
||||
nextWorkerCost: 200,
|
||||
nextWorkerFactor: 1.6,
|
||||
|
||||
unlockThreshold: { tech: null, currency: 10000 },
|
||||
},
|
||||
{
|
||||
instrument: 'Astrolabes',
|
||||
worker: 'Mathematician',
|
||||
deviceCount: new Decimal(0),
|
||||
workerCount: 0,
|
||||
instrument: 'Pocket Watch',
|
||||
worker: 'Miniaturist',
|
||||
|
||||
cost: 1000,
|
||||
created: false,
|
||||
|
||||
completion: 0,
|
||||
workerRate: 1.5,
|
||||
reward: 80,
|
||||
nextWorkerCost: 90,
|
||||
completionRequired: 30,
|
||||
baseReward: 80,
|
||||
|
||||
workerLevel: 0,
|
||||
nextWorkerCost: 2000,
|
||||
nextWorkerFactor: 1.8,
|
||||
|
||||
unlockThreshold: { tech: 0, currency: new Decimal(10e5) },
|
||||
},
|
||||
],
|
||||
|
|
@ -190,10 +205,6 @@ export const getters = {
|
|||
}
|
||||
|
||||
export const mutations = {
|
||||
setActiveTab: (state, index) => {
|
||||
if (state.tabs[index].locked) return
|
||||
state.activeTabIndex = index
|
||||
},
|
||||
addCurrency: (state, value) => {
|
||||
state.currency = Decimal.add(state.currency, value)
|
||||
state.currencyTotal = Decimal.add(state.currencyTotal, value)
|
||||
|
|
@ -202,8 +213,12 @@ export const mutations = {
|
|||
value = Decimal.mul(value, -1)
|
||||
state.currency = Decimal.add(state.currency, value)
|
||||
},
|
||||
setProcessCompletion: (state, { processIndex, value }) => {
|
||||
Vue.set(state.processes[processIndex], 'completion', value)
|
||||
createInstrument: (state, instrument) => {
|
||||
const index = state.processes.findIndex((p) => p.instrument === instrument)
|
||||
Vue.set(state.processes[index], 'created', true)
|
||||
},
|
||||
setProcessCompletion: (state, { index, value }) => {
|
||||
Vue.set(state.processes[index], 'completion', value)
|
||||
},
|
||||
setMissionAvailable: (state, missionIndex) => {
|
||||
Vue.set(state.missions[missionIndex], 'available', true)
|
||||
|
|
@ -214,15 +229,17 @@ export const mutations = {
|
|||
completeMission: (state, missionIndex) => {
|
||||
state.missions[missionIndex].complete = true
|
||||
},
|
||||
purchaseWorker: (state, processIndex) => {
|
||||
const p = state.processes[processIndex]
|
||||
if (p.nextWorkerCost > state.currency) return
|
||||
state.currency = Decimal.subtract(state.currency, p.nextWorkerCost)
|
||||
Vue.set(state.processes[processIndex], 'workerCount', p.workerCount + 1)
|
||||
levelUpApprentice: (state, process) => {
|
||||
if (process.nextWorkerCost > state.currency) {
|
||||
return
|
||||
}
|
||||
const index = state.processes.findIndex((p) => p.worker === process.worker)
|
||||
state.currency = Decimal.subtract(state.currency, process.nextWorkerCost)
|
||||
Vue.set(state.processes[index], 'workerLevel', process.workerLevel + 1)
|
||||
Vue.set(
|
||||
state.processes[processIndex],
|
||||
state.processes[index],
|
||||
'nextWorkerCost',
|
||||
Math.floor(p.nextWorkerCost * p.nextWorkerFactor)
|
||||
Math.floor(process.nextWorkerCost * process.nextWorkerFactor)
|
||||
)
|
||||
},
|
||||
tickGameDate: (state) => {
|
||||
|
|
|
|||
Reference in New Issue