159 lines
4.2 KiB
Vue
159 lines
4.2 KiB
Vue
|
<template>
|
||
|
<div
|
||
|
class="page grid container max-h-full h-full w-full mx-auto bg-gray-300 px-4"
|
||
|
>
|
||
|
<main class="bg-gray-400 grid w-full h-full overflow-auto relative">
|
||
|
<div
|
||
|
class="flex flex-row bg-gray-300 border border-gray-600 font-semibold h-10"
|
||
|
>
|
||
|
<div class="text-center pt-2 pb-1 flex-grow border-r border-gray-600">
|
||
|
{{ $store.getters.gameMonth }} {{ $store.state.gameDate.year }}
|
||
|
</div>
|
||
|
|
||
|
<div
|
||
|
class="text-center pt-2 pb-1 flex-grow border-r border-gray-600 relative"
|
||
|
>
|
||
|
<progress
|
||
|
class="absolute top-0 left-0 right-0 h-1 w-full"
|
||
|
:max="
|
||
|
$store.state.playerAgeMax.year * 12 +
|
||
|
$store.state.playerAgeMax.month
|
||
|
"
|
||
|
:value="
|
||
|
$store.state.playerAge.year * 12 + $store.state.playerAge.month
|
||
|
"
|
||
|
/>
|
||
|
{{ $store.state.playerAge.year }}y{{ $store.state.playerAge.month }}m
|
||
|
</div>
|
||
|
<div class="text-center pt-2 pb-1 flex-grow">
|
||
|
{{ $store.state.playerAgeMax.year }}y{{
|
||
|
$store.state.playerAgeMax.month
|
||
|
}}m max
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="units p-8 relative bg-gray-300">
|
||
|
<div class="units-background absolute top-8 left-0 right-0"></div>
|
||
|
<div
|
||
|
class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center"
|
||
|
@click="$store.commit('addCurrency', 1)"
|
||
|
>
|
||
|
<span
|
||
|
class="spare-time flex flex-row items-center font-bold rounded-2xl"
|
||
|
>
|
||
|
<span class="text-3xl md:text-5xl" v-text="$store.state.currency" />
|
||
|
<span
|
||
|
class="fas fa-hourglass-half text-xl pt-1 pl-2 md:text-3xl md:pt-2"
|
||
|
/>
|
||
|
</span>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="tabs flex flex-row w-full bg-gray-400 text-gray-400 h-10">
|
||
|
<game-tab
|
||
|
v-for="(tab, index) in $store.state.tabs"
|
||
|
:key="index"
|
||
|
:index="index"
|
||
|
:tab-data="tab"
|
||
|
/>
|
||
|
</div>
|
||
|
|
||
|
<div
|
||
|
class="w-full text-2xl text-center pt-1 pb-2"
|
||
|
:class="activeTabColorClasses"
|
||
|
>
|
||
|
{{ $store.getters.activeTab.title }}
|
||
|
</div>
|
||
|
|
||
|
<div
|
||
|
class="tab-content px-4 w-full overflow-y-scroll"
|
||
|
:class="activeTabColorClasses"
|
||
|
>
|
||
|
<nuxt />
|
||
|
</div>
|
||
|
</main>
|
||
|
|
||
|
<footer class="text-lg items-center pt-4 pb-2 px-4 hidden md:block">
|
||
|
Created by GrapefruitChili, PK, TNNPe, Vice for New Years Incremental Game
|
||
|
Jam 2022.
|
||
|
</footer>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
name: 'IndexPage',
|
||
|
computed: {
|
||
|
activeTabColorClasses() {
|
||
|
const { lightColor, darkColor } = this.$store.getters.activeTab
|
||
|
|
||
|
return `bg-${lightColor} text-${darkColor}`
|
||
|
},
|
||
|
},
|
||
|
mounted() {
|
||
|
window.setInterval(() => {
|
||
|
this.gametick()
|
||
|
}, 1000)
|
||
|
window.setInterval(() => {
|
||
|
this.$store.commit('tickGameDate')
|
||
|
}, 100)
|
||
|
},
|
||
|
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.commit('setProcessCompletion', {
|
||
|
processIndex: i,
|
||
|
value: newValue,
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
html,
|
||
|
body,
|
||
|
#__nuxt,
|
||
|
#__layout {
|
||
|
height: 100%; /* 100vh is broken on mobile. this is the fix. */
|
||
|
width: 100vw;
|
||
|
}
|
||
|
|
||
|
html {
|
||
|
background: #e5e7eb;
|
||
|
overflow-y: hidden;
|
||
|
}
|
||
|
</style>
|
||
|
|
||
|
<style scoped>
|
||
|
.page {
|
||
|
grid-template-rows: 1fr auto;
|
||
|
}
|
||
|
|
||
|
main {
|
||
|
grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr);
|
||
|
}
|
||
|
|
||
|
.units-background {
|
||
|
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 {
|
||
|
background: rgba(2555, 255, 255, 0.6);
|
||
|
box-shadow: 0px 0px 21px 3px #fff;
|
||
|
}
|
||
|
</style>
|