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/components/KeyArtStage.vue

71 lines
1.9 KiB
Vue
Raw Normal View History

<template>
<div class="p-8 relative">
<div class="key-art absolute top-8 left-0 right-0" />
<div
class="absolute top-0 bottom-0 left-0 right-0 flex flex-col items-center justify-center"
:class="`text-${$store.getters.activeTab.darkColor}`"
@click="click"
>
<span
class="spare-time flex flex-row items-center font-bold rounded-2xl select-none"
>
<span
2022-01-13 21:02:43 +00:00
class="spare-time-value text-3xl md:text-5xl"
v-text="currencyText"
/>
2022-01-13 21:02:43 +00:00
<span class="fas fa-hourglass-half text-xl pl-2 md:text-3xl md:pt-1" />
</span>
<span class="spare-time-explanation text-sm md:text-lg select-none">
Tap to gain
<b><span class="fas fa-hourglass-half" /> Spare Time</b>
</span>
</div>
</div>
</template>
<script>
export default {
2022-01-12 01:19:17 +00:00
computed: {
currencyText() {
return this.$store.getters.suffixedDecimalText(this.$store.state.currency)
2022-01-12 01:19:17 +00:00
},
},
methods: {
click() {
2022-01-14 07:16:18 +00:00
if (this.$store.state.gameStopped) return
this.$store.commit('addCurrency', 1)
if (
this.$store.getters.isTabUnlocked('Time Magic') &&
this.$store.state.manaMax > this.$store.state.mana
) {
this.$store.commit('tickMana')
}
},
},
}
</script>
<style scoped>
.key-art {
background: url('https://freesvg.org/img/johnny_automatic_hourglass.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
height: calc(100% - 4rem); /* 4rem = top padding + bottom padding */
}
.spare-time {
--color: rgba(2555, 255, 255, 0.5);
box-shadow: 0px 0px 20px 20px var(--color);
background: var(--color);
transition: color 2000ms;
}
.spare-time-explanation {
--color: rgba(2555, 255, 255, 0.2);
box-shadow: 0px 0px 10px 10px var(--color);
background: var(--color);
transition: color 2000ms;
}
</style>