refactor: use multiple routes
This commit is contained in:
pskfyi
pskfyi
parent
19ee7040ac
commit
1d655da2ab
|
|
@ -1,36 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="tab-content grid flex-col">
|
|
||||||
<template v-for="(process, index) in $store.state.processes">
|
|
||||||
<button :key="index" class="text-right font-semibold">
|
|
||||||
{{ process.instrument }}
|
|
||||||
</button>
|
|
||||||
<div :key="index" class="progress-bar relative">
|
|
||||||
<progress
|
|
||||||
max="100"
|
|
||||||
:value="process.completion"
|
|
||||||
class="w-full h-full"
|
|
||||||
></progress>
|
|
||||||
<span
|
|
||||||
class="absolute top-0 bottom-0 left-0 right-0 text-center text-white"
|
|
||||||
>
|
|
||||||
{{
|
|
||||||
(process.workerCount * process.workerRate * process.reward) / 100.0
|
|
||||||
}}
|
|
||||||
<span class="fas fa-hourglass-half text-sm" /> / sec
|
|
||||||
<!-- {{ $store.state.incremental.currency[process.produces] }} {{ process.produces }} -->
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.tab-content {
|
|
||||||
grid-template-columns: auto 1fr;
|
|
||||||
grid-gap: 1rem 1rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<nuxt-link
|
||||||
class="tab flex-grow text-center text-2xl font-semibold py-1 cursor-pointer"
|
class="tab flex-grow text-center text-2xl font-semibold py-1 cursor-pointer"
|
||||||
:class="[colorClasses, index < 5 && 'mr-px']"
|
:class="[colorClasses, index < 5 && 'mr-px']"
|
||||||
@click="$store.commit('setActiveTab', index)"
|
:to="tabData.route"
|
||||||
>
|
>
|
||||||
<template v-if="!tabData.locked">
|
<template v-if="!tabData.locked">
|
||||||
<span :class="tabData.label" />
|
<span :class="tabData.label" />
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<template v-if="tabData.locked">
|
<template v-if="tabData.locked">
|
||||||
<span class="fas fa-lock" />
|
<span class="fas fa-lock" />
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</nuxt-link>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -27,12 +27,14 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
active() {
|
active() {
|
||||||
return this.$store.state.activeTabIndex === this.index
|
return this.$route.path === this.tabData.route
|
||||||
},
|
},
|
||||||
colorClasses() {
|
colorClasses() {
|
||||||
|
const { lightColor, darkColor } = this.tabData
|
||||||
|
|
||||||
return this.active
|
return this.active
|
||||||
? this.$store.getters.activeColorClasses(this.index)
|
? `bg-${lightColor} text-${darkColor}`
|
||||||
: this.$store.getters.inactiveColorClasses(this.index)
|
: `bg-${darkColor} text-${lightColor}`
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,158 @@
|
||||||
|
<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>
|
||||||
|
|
@ -8,26 +8,22 @@
|
||||||
@click="$store.commit('purchaseWorker', index)"
|
@click="$store.commit('purchaseWorker', index)"
|
||||||
>
|
>
|
||||||
<span class="text-center font-bold pb-2 text-xl">
|
<span class="text-center font-bold pb-2 text-xl">
|
||||||
{{ process.workerCount }} {{ process.worker
|
{{ process.workerCount }} {{ process.worker }}
|
||||||
}}<template v-if="process.workerCount != 1">s</template>
|
<template v-if="process.workerCount != 1">s</template>
|
||||||
</span>
|
</span>
|
||||||
<span class="text-left font-semibold">
|
<span class="text-left font-semibold">
|
||||||
Each <b>{{ process.worker }}</b> makes your
|
Each <b>{{ process.worker }}</b> makes your
|
||||||
<b>{{ process.device }}s</b> produce <b>spare time</b> at an increased
|
<b>{{ process.device }}s</b> produce <b>spare time</b> at an increased
|
||||||
rate.
|
rate.
|
||||||
</span>
|
</span>
|
||||||
<span class="text-center text-md pt-2"
|
<span class="text-center text-md pt-2">
|
||||||
>Cost for next {{ process.worker }}: {{ process.nextWorkerCost }}
|
Cost for next {{ process.worker }}: {{ process.nextWorkerCost }}
|
||||||
{{ process.buyWorkersWith }}</span
|
{{ process.buyWorkersWith }}
|
||||||
>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.tab-content {
|
.tab-content {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<div>Tab 4 content</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<div>Tab 5 content</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
@ -38,9 +38,3 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
174
pages/index.vue
174
pages/index.vue
|
|
@ -1,170 +1,36 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="tab-content grid flex-col">
|
||||||
class="page grid container max-h-full h-full w-full mx-auto bg-gray-300 px-4"
|
<template v-for="(process, index) in $store.state.processes">
|
||||||
>
|
<button :key="index" class="text-right font-semibold">
|
||||||
<header
|
{{ process.instrument }}
|
||||||
class="text-3xl flex items-center justify-center font-bold bg-gray-600 text-gray-400"
|
</button>
|
||||||
>
|
<div :key="index" class="progress-bar relative">
|
||||||
Timekeeper
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<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
|
<progress
|
||||||
class="absolute top-0 left-0 right-0 h-1 w-full"
|
max="100"
|
||||||
:max="
|
:value="process.completion"
|
||||||
$store.state.playerAgeMax.year * 12 +
|
class="w-full h-full"
|
||||||
$store.state.playerAgeMax.month
|
></progress>
|
||||||
"
|
|
||||||
: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
|
<span
|
||||||
class="spare-time flex flex-row items-center font-bold rounded-2xl"
|
class="absolute top-0 bottom-0 left-0 right-0 text-center text-white"
|
||||||
>
|
>
|
||||||
<span class="text-3xl md:text-5xl"
|
{{
|
||||||
>{{ $store.state.currency }}
|
(process.workerCount * process.workerRate * process.reward) / 100.0
|
||||||
</span>
|
}}
|
||||||
<span
|
<span class="fas fa-hourglass-half text-sm" /> / sec
|
||||||
class="fas fa-hourglass-half text-xl pt-1 pl-2 md:text-3xl md:pt-2"
|
<!-- {{ $store.state.incremental.currency[process.produces] }} {{ process.produces }} -->
|
||||||
></span>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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="$store.getters.activeTabColorClasses"
|
|
||||||
>
|
|
||||||
{{ $store.getters.activeTab.title }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="tab-content px-4 w-full overflow-y-scroll"
|
|
||||||
:class="$store.getters.activeTabColorClasses"
|
|
||||||
>
|
|
||||||
<first-tab-content v-if="$store.state.activeTabIndex === 0" />
|
|
||||||
<second-tab-content v-else-if="$store.state.activeTabIndex === 1" />
|
|
||||||
<third-tab-content v-else-if="$store.state.activeTabIndex === 2" />
|
|
||||||
|
|
||||||
<template v-else-if="$store.state.activeTabIndex === 3">
|
|
||||||
Tab 4 content
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else-if="$store.state.activeTabIndex === 4">
|
|
||||||
Tab 5 content
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<sixth-tab-content v-else-if="$store.state.activeTabIndex === 5" />
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="text-lg flex 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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {}
|
||||||
name: 'IndexPage',
|
|
||||||
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>
|
</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>
|
<style scoped>
|
||||||
.page {
|
.tab-content {
|
||||||
grid-template-rows: 0rem 1fr auto;
|
grid-template-columns: auto 1fr;
|
||||||
}
|
grid-gap: 1rem 1rem;
|
||||||
|
|
||||||
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ import Decimal from 'break_infinity.js'
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
export const state = () => ({
|
export const state = () => ({
|
||||||
activeTabIndex: 0,
|
|
||||||
tabs: [
|
tabs: [
|
||||||
{
|
{
|
||||||
route: '/',
|
route: '/',
|
||||||
|
|
@ -152,19 +151,11 @@ export const state = () => ({
|
||||||
})
|
})
|
||||||
|
|
||||||
export const getters = {
|
export const getters = {
|
||||||
activeTab: (state) => {
|
activeTab(state) {
|
||||||
return state.tabs[state.activeTabIndex]
|
return state.tabs.find(
|
||||||
},
|
// eslint-disable-next-line no-undef
|
||||||
activeColorClasses: (state) => (index) => {
|
(tab) => tab.route === $nuxt.$route.path
|
||||||
const { darkColor, lightColor } = state.tabs[index]
|
)
|
||||||
return `bg-${lightColor} text-${darkColor}`
|
|
||||||
},
|
|
||||||
inactiveColorClasses: (state) => (index) => {
|
|
||||||
const { darkColor, lightColor } = state.tabs[index]
|
|
||||||
return `bg-${darkColor} text-${lightColor}`
|
|
||||||
},
|
|
||||||
activeTabColorClasses: (state, getters) => {
|
|
||||||
return getters.activeColorClasses(state.activeTabIndex)
|
|
||||||
},
|
},
|
||||||
canTimeTravel: (state) => {
|
canTimeTravel: (state) => {
|
||||||
if (state.playerAge.year < state.playerAgeMax.year) return true
|
if (state.playerAge.year < state.playerAgeMax.year) return true
|
||||||
|
|
|
||||||
Reference in New Issue