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/pages/TimeMachine.vue

142 lines
4.0 KiB
Vue
Raw Normal View History

2022-01-10 03:28:09 +00:00
<template>
<div class="md:pt-4 pt-2 pb-16">
<div
class="energy-bar relative mx-auto rounded-full overflow-hidden border-2"
:class="`text-${$store.getters.activeTab.color} border-${$store.getters.activeTab.darkColor}`"
>
<progress
class="absolute top-0 right-0 left-0 w-full h-full"
:max="$store.state.energyMax"
:value="$store.state.energy"
/>
<span
class="relative block pt-1 pb-2 text-center text-lg font-semibold"
:class="`text-${$store.getters.activeTab.darkColor}`"
>
<span class="mr-1"
>{{ $store.state.energy }} / {{ $store.state.energyMax }}</span
>
<span class="text-base pt-1 ml-2 fas fa-bolt" />
</span>
</div>
<p class="text-lg text-center py-2 border-b-2 border-current">
<b><span class="fas fa-bolt text-base" /> Energy</b>
is generated over time
</p>
2022-01-14 03:30:59 +00:00
<h2 class="text-xl font-semibold text-center pt-8">Upgrades</h2>
2022-01-13 21:02:43 +00:00
<responsive-grid class="pt-2 md:pt-4">
<max-energy-upgrade-button />
</responsive-grid>
2022-01-14 03:30:59 +00:00
<h2 class="text-xl font-semibold text-center pt-8">Time Travel</h2>
2022-01-13 21:02:43 +00:00
<responsive-grid class="pt-2 md:pt-4">
<progress-button
v-for="process in $store.state.processes"
:key="process.instrument"
:label="getLabel(process)"
:max="process.travelCost"
:value="$store.state.energy"
unit="energy"
:disabled="!isEnabled(process)"
@click="travelToEra(process)"
/>
</responsive-grid>
</div>
2022-01-10 03:28:09 +00:00
</template>
<script>
export default {
methods: {
getLabel(process) {
if (process.unlockEra === this.$store.state.gameEra) {
return process.unlockEra + ' (You Are Here)'
} else if (this.isEnabled(process)) {
return process.unlockEra
} else {
return '???'
}
},
isEnabled(process) {
const isCurrentEra = process.unlockEra === this.$store.state.gameEra
if (isCurrentEra) {
return false
} else if (process.visited) {
return true
} else {
const processes = this.$store.state.processes
const processIndex = processes.findIndex(
(p) => p.unlockEra === process.unlockEra
)
const earliestEraIndex = processes.findIndex((p) => p.visited)
const nextEarliestEraIndex = earliestEraIndex - 1
const latestEraIndex = processes.map((p) => p.visited).lastIndexOf(true)
const nextLatestEraIndex = latestEraIndex + 1
const middleAges = this.$store.state.processes.find(
(p) => p.unlockEra === 'Middle Ages'
)
return (
processIndex === nextEarliestEraIndex ||
(middleAges.visited && processIndex === nextLatestEraIndex)
)
}
},
doAction(action) {
this.$store.commit('spendEnergy', action.cost)
if (action.name === 'Activate!') {
// do action-specific things
}
},
travelToEra(process) {
const hadBeenVisited = process.visited // save this before we time travel
this.$store.commit('spendEnergy', process.travelCost)
this.$store.commit('timeTravel', {
era: process.unlockEra,
month: process.minDateUnlocked,
})
if (process.unlockEra === 'Middle Ages' && !hadBeenVisited) {
this.$nextTick(() => {
const message =
'Congratulations! ' +
"You've successfully traveled through time and landed in the year 1100" +
'... though it was rather hard on your body.'
this.$store.commit('openModal', message)
})
}
},
},
}
</script>
<style scoped>
.energy-bar {
width: 75%;
}
/* progress bars for all browsers */
progress::-webkit-progress-bar {
background-color: rgba(255, 255, 255, 0.1);
width: 100%;
}
progress {
color: currentColor;
background-color: rgba(255, 255, 255, 0.1);
}
progress::-webkit-progress-value {
background-color: currentColor;
}
progress::-moz-progress-bar {
background-color: currentColor;
}
</style>