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

70 lines
1.7 KiB
Vue

<template>
<div class="md:pt-4 pt-2">
<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>
<responsive-grid class="pt-4 md:pt-8">
<progress-button
v-for="(action, index) in $store.state.timeMachineActions"
:key="index"
:label="action.name"
:description="action.description"
:max="action.cost"
:value="$store.state.energy"
@click="doAction(action)"
/>
</responsive-grid>
</div>
</template>
<script>
export default {
methods: {
doAction(action) {
this.$store.commit('spendEnergy', action.cost)
if (action.name === 'Activate!') {
// do action-specific things
}
},
},
}
</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>