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/TimekeepingInstrument.vue

128 lines
4.0 KiB
Vue

<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}`"
>
{{ rewardText }} <span class="fas fa-hourglass-half" /> /
{{ interval }} sec
</span>
</div>
<div
class="frame pt-5 m-4"
:class="`text-${$store.getters.activeTab.darkColor}`"
>
<atlantean-clock-image v-if="process.instrument === 'Atlantean Clock'" />
<sundail-image v-if="process.instrument === 'Sundial'" />
<star-chart-image v-if="process.instrument === 'Star Chart'" />
<incense-clock-image v-if="process.instrument === 'Incense Clock'" />
<astrolabe-image v-if="process.instrument === 'Astrolabe'" />
<hourglass-image v-if="process.instrument === 'Hourglass'" />
<mechanical-clock-image
v-if="process.instrument === 'Mechanical Clock'"
/>
<pocket-watch-image v-if="process.instrument === 'Pocket Watch'" />
<digital-clock-image v-if="process.instrument === 'Electric Clock'" />
<atomic-clock-image v-if="process.instrument === 'Atomic Clock'" />
<quantum-clock-image v-if="process.instrument === 'Quantum Clock'" />
<pulsar-clock-image v-if="process.instrument === 'Pulsar Clock'" />
<non-euclidian-clock-image
v-if="process.instrument === 'Non-Euclidian Clock'"
/>
</div>
<p
class="text-center text-sm font-semibold h-5 border-t"
:class="`border-${$store.getters.activeTab.darkColor}`"
>
{{ process.instrument }}
</p>
</div>
</template>
<script>
import AstrolabeImage from './svg/AstrolabeImage.vue'
import AtlanteanClockImage from './svg/AtlanteanClockImage.vue'
import AtomicClockImage from './svg/AtomicClockImage.vue'
import DigitalClockImage from './svg/DigitalClockImage.vue'
import HourglassImage from './svg/HourglassImage.vue'
import IncenseClockImage from './svg/IncenseClockImage.vue'
import MechanicalClockImage from './svg/MechanicalClockImage.vue'
import NonEuclidianClockImage from './svg/NonEuclidianClockImage.vue'
import PocketWatchImage from './svg/PocketWatchImage.vue'
import PulsarClockImage from './svg/PulsarClockImage.vue'
import QuantumClockImage from './svg/QuantumClockImage.vue'
import StarChartImage from './svg/StarChartImage.vue'
import SundailImage from './svg/SundailImage.vue'
export default {
components: {
HourglassImage,
MechanicalClockImage,
PocketWatchImage,
IncenseClockImage,
PulsarClockImage,
AstrolabeImage,
AtomicClockImage,
StarChartImage,
SundailImage,
DigitalClockImage,
QuantumClockImage,
AtlanteanClockImage,
NonEuclidianClockImage,
},
props: {
process: { type: Object, required: true },
},
computed: {
reward() {
return this.process.baseReward * (1 + this.process.workerLevel)
},
rewardText() {
return this.$store.getters.suffixedDecimalText(
this.process.baseReward * (1 + this.process.workerLevel)
)
},
interval() {
return this.process.completionRequired / 10 /* in seconds */
},
},
}
</script>
<style scoped>
.frame >>> svg {
fill: currentColor;
stroke: currentColor;
}
/* 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>