feat: time machine and time travel flow draft 1
This commit is contained in:
pskfyi
pskfyi
parent
c85debba56
commit
6e14d26ee4
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<progress-button
|
||||
:label="label"
|
||||
:description="description"
|
||||
:max="$store.state.nextFluxCapacitorCost"
|
||||
:value="$store.state.currency"
|
||||
:current="$store.state.energyMax"
|
||||
:next="$store.state.energyMax + 200"
|
||||
@click="upgrade"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
label() {
|
||||
return `L${this.$store.state.fluxCapacitorLevel} Flux Capacitor`
|
||||
},
|
||||
description() {
|
||||
return `Increase maximum energy.`
|
||||
},
|
||||
current() {
|
||||
return this.$store.state.energyMax
|
||||
},
|
||||
next() {
|
||||
return this.$store.state.energyMax + 200
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
upgrade() {
|
||||
this.$store.commit(
|
||||
'spendCurrency',
|
||||
this.$store.state.nextFluxCapacitorCost
|
||||
)
|
||||
this.$store.commit('upgradeMaxEnergy')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,18 +1,30 @@
|
|||
<template>
|
||||
<button
|
||||
class="relative flex flex-col pt-2 pb-3 px-3 border rounded-lg overflow-hidden border-current"
|
||||
:class="[colorClasses, clickable ? 'cursor-pointer' : 'cursor-default']"
|
||||
:class="[
|
||||
colorClasses,
|
||||
{
|
||||
disabled,
|
||||
[`text-${$store.getters.activeTab.darkColor}`]: disabled,
|
||||
'cursor-pointer': clickable,
|
||||
'cursor-default': !clickable,
|
||||
},
|
||||
]"
|
||||
:disable="!clickable"
|
||||
@click="clickable && $emit('click')"
|
||||
>
|
||||
<progress
|
||||
v-if="!clickable"
|
||||
class="absolute top-0 left-0 right-0 h-1 w-full"
|
||||
:class="{ hidden: disabled }"
|
||||
:max="max"
|
||||
:value="cappedValue"
|
||||
/>
|
||||
|
||||
<span class="absolute top-3 right-3 font-semibold text-sm">
|
||||
<span
|
||||
class="absolute top-3 right-3 font-semibold text-sm"
|
||||
:class="{ hidden: disabled }"
|
||||
>
|
||||
<span v-if="unit === 'apprenticeLevels'">L</span>{{ cappedValueText }}
|
||||
/
|
||||
<span v-if="unit === 'apprenticeLevels'">L</span>{{ maxText }}
|
||||
|
|
@ -45,8 +57,9 @@ export default {
|
|||
max: { type: Number, required: true },
|
||||
value: { type: [Number, Decimal], required: true },
|
||||
unit: { type: String, default: 'spareTime' },
|
||||
current: { type: String, default: null },
|
||||
next: { type: String, default: null },
|
||||
current: { type: [Number, String], default: null },
|
||||
next: { type: [Number, String], default: null },
|
||||
disabled: { type: Boolean, default: false },
|
||||
},
|
||||
computed: {
|
||||
cappedValue() {
|
||||
|
|
@ -61,7 +74,7 @@ export default {
|
|||
return this.unit === 'maxAge' ? this.$store.getters.ageMaxText : this.max
|
||||
},
|
||||
clickable() {
|
||||
return this.value >= this.max
|
||||
return !this.disabled && this.value >= this.max
|
||||
},
|
||||
colorClasses() {
|
||||
const { lightColor, darkColor } = this.$store.getters.activeTab
|
||||
|
|
@ -75,6 +88,12 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.disabled {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.clickable {
|
||||
box-shadow: 0px 4px 8px -3px var(--dark-color);
|
||||
}
|
||||
/* progress background for all browsers */
|
||||
progress::-webkit-progress-bar {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
export default {
|
||||
computed: {
|
||||
unlocked() {
|
||||
return this.$store.state.processes.filter((p) => p.unlocked && p.created)
|
||||
return this.$store.state.processes.filter((p) => p.visited && p.created)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export default {
|
|||
if (mission.name === 'Time to Cheat Death') {
|
||||
this.$store.commit('unlockTab', 'Wisdom')
|
||||
this.$store.commit('setPlayerAge', { year: 30 })
|
||||
this.$store.commit('timeTravel', { year: 1400 })
|
||||
this.$store.commit('timeTravel', { year: 1400, era: 'Early Modern' })
|
||||
this.$store.commit('tickLifetime')
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="md:pt-4 pt-2">
|
||||
<div class="md:pt-4 pt-2 pb-16">
|
||||
<div
|
||||
class="energy-bar relative mx-auto rounded-full overflow-hidden border-2"
|
||||
:class="`text-${$store.getters.activeTab.color} border-${$store.getters.activeTab.darkColor}`"
|
||||
|
|
@ -20,15 +20,24 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-lg font-semibold text-center pt-4 md:pt-8">Upgrades</h2>
|
||||
|
||||
<responsive-grid class="pt-4 md:pt-8">
|
||||
<max-energy-upgrade-button />
|
||||
</responsive-grid>
|
||||
|
||||
<h2 class="text-lg font-semibold text-center pt-4 md:pt-8">Time Travel</h2>
|
||||
|
||||
<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"
|
||||
v-for="process in $store.state.processes"
|
||||
:key="process.instrument"
|
||||
:label="getLabel(process)"
|
||||
:max="process.travelCost"
|
||||
:value="$store.state.energy"
|
||||
@click="doAction(action)"
|
||||
unit="energy"
|
||||
:disabled="!isEnabled(process)"
|
||||
@click="travelToEra(process)"
|
||||
/>
|
||||
</responsive-grid>
|
||||
</div>
|
||||
|
|
@ -37,12 +46,55 @@
|
|||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
getLabel(process) {
|
||||
if (process.unlockEra === this.$store.state.gameEra) {
|
||||
return process.unlockEra + ' (You Are Here)'
|
||||
} else if (this.isEnabled(process)) {
|
||||
return process.unlockEra
|
||||
} else {
|
||||
return '???'
|
||||
}
|
||||
},
|
||||
isEnabled(process) {
|
||||
const isCurrentEra = process.unlockEra === this.$store.state.gameEra
|
||||
if (isCurrentEra) {
|
||||
return false
|
||||
} else if (process.visited) {
|
||||
return true
|
||||
} else {
|
||||
const processes = this.$store.state.processes
|
||||
const processIndex = processes.findIndex(
|
||||
(p) => p.unlockEra === process.unlockEra
|
||||
)
|
||||
|
||||
const earliestEraIndex = processes.findIndex((p) => p.visited)
|
||||
const nextEarliestEraIndex = earliestEraIndex - 1
|
||||
|
||||
const latestEraIndex = processes.map((p) => p.visited).lastIndexOf(true)
|
||||
const nextLatestEraIndex = latestEraIndex + 1
|
||||
|
||||
return (
|
||||
processIndex === nextEarliestEraIndex ||
|
||||
processIndex === nextLatestEraIndex
|
||||
)
|
||||
}
|
||||
},
|
||||
doAction(action) {
|
||||
this.$store.commit('spendEnergy', action.cost)
|
||||
if (action.name === 'Activate!') {
|
||||
// do action-specific things
|
||||
}
|
||||
},
|
||||
travelToEra(process) {
|
||||
this.$store.commit('spendEnergy', process.travelCost)
|
||||
this.$store.commit('timeTravel', {
|
||||
era: process.unlockEra,
|
||||
month: process.minDateUnlocked,
|
||||
})
|
||||
if (process.unlockEra === 'Middle Ages') {
|
||||
// do era-specific things
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
export default {
|
||||
computed: {
|
||||
unlocked() {
|
||||
return this.$store.state.processes.filter((p) => p.unlocked)
|
||||
return this.$store.state.processes.filter((p) => p.visited)
|
||||
},
|
||||
created() {
|
||||
return this.unlocked.filter((p) => p.created)
|
||||
|
|
|
|||
165
store/index.js
165
store/index.js
|
|
@ -64,17 +64,23 @@ export const state = () => ({
|
|||
|
||||
energy: 0,
|
||||
energyMax: 600, // 60 seconds
|
||||
fluxCapacitorLevel: 1,
|
||||
nextFluxCapacitorCost: 500,
|
||||
|
||||
mana: 0,
|
||||
manaMax: 100,
|
||||
|
||||
processes: [
|
||||
{
|
||||
instrument: 'Atlantean Clock',
|
||||
worker: 'Chronomancer',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: -12000 * 12,
|
||||
unlockEra: 'Prehistoric',
|
||||
cost: 1000000000000,
|
||||
created: false,
|
||||
cost: 1000000000000,
|
||||
|
||||
unlockEra: 'Prehistoric',
|
||||
minDateUnlocked: -12000 * 12,
|
||||
travelCost: 2400,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 320,
|
||||
|
|
@ -89,12 +95,13 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Sundial',
|
||||
worker: 'Shaman',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: -1500 * 12,
|
||||
unlockEra: 'Antiquity',
|
||||
cost: 10000000000,
|
||||
created: false,
|
||||
cost: 10000000000,
|
||||
|
||||
unlockEra: 'Antiquity',
|
||||
minDateUnlocked: -1500 * 12,
|
||||
travelCost: 2200,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 160,
|
||||
|
|
@ -109,13 +116,14 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Star Chart',
|
||||
worker: 'Astrologer',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: -500 * 12,
|
||||
unlockEra: 'Early Classical',
|
||||
cost: 100000000,
|
||||
created: false,
|
||||
|
||||
unlockEra: 'Early Classical',
|
||||
minDateUnlocked: -500 * 12,
|
||||
travelCost: 1800,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 80,
|
||||
baseReward: 50000000,
|
||||
|
|
@ -129,13 +137,14 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Incense Clock',
|
||||
worker: 'Oracle',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: 400 * 12,
|
||||
unlockEra: 'Classical',
|
||||
cost: 1000000,
|
||||
created: false,
|
||||
|
||||
unlockEra: 'Classical',
|
||||
minDateUnlocked: 400 * 12,
|
||||
travelCost: 1400,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 40,
|
||||
baseReward: 500000,
|
||||
|
|
@ -149,13 +158,14 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Astrolabe',
|
||||
worker: 'Mathematician',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: 700 * 12,
|
||||
unlockEra: 'Late Classical',
|
||||
cost: 10000,
|
||||
created: false,
|
||||
|
||||
unlockEra: 'Late Classical',
|
||||
minDateUnlocked: 700 * 12,
|
||||
travelCost: 1000,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 20,
|
||||
baseReward: 5000,
|
||||
|
|
@ -169,13 +179,14 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Hourglass',
|
||||
worker: 'Glassblower',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: 1100 * 12,
|
||||
unlockEra: 'Middle Ages',
|
||||
cost: 100,
|
||||
created: false,
|
||||
|
||||
unlockEra: 'Middle Ages',
|
||||
minDateUnlocked: 1100 * 12,
|
||||
travelCost: 600,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 10,
|
||||
baseReward: 50,
|
||||
|
|
@ -189,13 +200,14 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Mechanical Clock',
|
||||
worker: 'Machinist',
|
||||
|
||||
unlocked: true,
|
||||
minDateUnlocked: 1400 * 12,
|
||||
unlockEra: 'Early Modern',
|
||||
cost: 10,
|
||||
created: false,
|
||||
|
||||
minDateUnlocked: 1400 * 12,
|
||||
unlockEra: 'Early Modern',
|
||||
travelCost: 400,
|
||||
visited: true,
|
||||
|
||||
completion: 0, // how close it is to giving currency. 10 gained per second.
|
||||
completionRequired: 10, // should be divisible by 10
|
||||
baseReward: 5, // currency added when the bar is completed
|
||||
|
|
@ -209,13 +221,14 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Pocket Watch',
|
||||
worker: 'Engineer',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: 1600 * 12,
|
||||
unlockEra: 'Modern',
|
||||
cost: 1000,
|
||||
created: false,
|
||||
|
||||
unlockEra: 'Modern',
|
||||
minDateUnlocked: 1600 * 12,
|
||||
travelCost: 800,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 8,
|
||||
baseReward: 500,
|
||||
|
|
@ -229,13 +242,14 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Electric Clock',
|
||||
worker: 'Electrician',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: 1840 * 12,
|
||||
unlockEra: 'Late Modern',
|
||||
cost: 100000,
|
||||
created: false,
|
||||
|
||||
unlockEra: 'Late Modern',
|
||||
minDateUnlocked: 1840 * 12,
|
||||
travelCost: 1200,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 6,
|
||||
baseReward: 50000,
|
||||
|
|
@ -249,13 +263,14 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Atomic Clock',
|
||||
worker: 'Scientist',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: 1950 * 12,
|
||||
unlockEra: 'Post-Modern',
|
||||
cost: 10000000,
|
||||
created: false,
|
||||
|
||||
unlockEra: 'Post-Modern',
|
||||
minDateUnlocked: 1950 * 12,
|
||||
travelCost: 1600,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 4,
|
||||
baseReward: 5000000,
|
||||
|
|
@ -269,13 +284,14 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Quantum Clock',
|
||||
worker: 'Artificial Intelligence',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: 2200 * 12,
|
||||
unlockEra: 'Near Future',
|
||||
cost: 1000000000,
|
||||
created: false,
|
||||
|
||||
unlockEra: 'Near Future',
|
||||
minDateUnlocked: 2200 * 12,
|
||||
travelCost: 2000,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 3,
|
||||
baseReward: 500000000,
|
||||
|
|
@ -289,13 +305,14 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Non-Euclidian Clock',
|
||||
worker: 'Befuddled Scientist',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: 3333 * 12,
|
||||
unlockEra: 'Future',
|
||||
cost: 100000000000,
|
||||
created: false,
|
||||
|
||||
unlockEra: 'Future',
|
||||
minDateUnlocked: 3333 * 12,
|
||||
travelCost: 2400,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 2,
|
||||
baseReward: 50000000000,
|
||||
|
|
@ -309,12 +326,13 @@ export const state = () => ({
|
|||
{
|
||||
instrument: 'Pulsar Clock',
|
||||
worker: 'Deep-Space Satellite',
|
||||
|
||||
unlocked: false,
|
||||
minDateUnlocked: 9000 * 12,
|
||||
unlockEra: 'Deep Future',
|
||||
cost: 10000000000000,
|
||||
created: false,
|
||||
cost: 10000000000000,
|
||||
|
||||
unlockEra: 'Deep Future',
|
||||
minDateUnlocked: 9000 * 12,
|
||||
travelCost: 2800,
|
||||
visited: false,
|
||||
|
||||
completion: 0,
|
||||
completionRequired: 1,
|
||||
|
|
@ -473,6 +491,7 @@ export const state = () => ({
|
|||
],
|
||||
|
||||
gameDate: 1400 * 12,
|
||||
gameEra: 'Early Modern',
|
||||
playerAge: 30 * 12,
|
||||
playerAgeMax: 60 * 12,
|
||||
playerLivedTotal: 0,
|
||||
|
|
@ -547,23 +566,6 @@ export const getters = {
|
|||
process.created ? totalInstruments + 1 : totalInstruments,
|
||||
0
|
||||
),
|
||||
currentEra: (state) => {
|
||||
if (state.gameDate < 100 * 12) {
|
||||
return 'prehistoric'
|
||||
} else if (state.gameDate < 999 * 12) {
|
||||
return 'classical'
|
||||
} else if (state.gameDate < 1400 * 12) {
|
||||
return 'middle ages'
|
||||
} else if (state.gameDate < 1750 * 12) {
|
||||
return 'early modern'
|
||||
} else if (state.gameDate < 2100 * 12) {
|
||||
return 'modern'
|
||||
} else if (state.gameDate < 2500 * 12) {
|
||||
return 'future'
|
||||
} else {
|
||||
return 'distant future'
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
|
|
@ -635,6 +637,19 @@ export const mutations = {
|
|||
state.energy -= amount
|
||||
}
|
||||
},
|
||||
upgradeMaxEnergy: (state) => {
|
||||
state.energyMax += 200
|
||||
state.fluxCapacitorLevel += 1
|
||||
state.nextFluxCapacitorCost *= 2
|
||||
},
|
||||
tickMana: (state) => {
|
||||
state.mana += 1
|
||||
},
|
||||
spendMana: (state, amount) => {
|
||||
if (amount <= state.mana) {
|
||||
state.mana -= amount
|
||||
}
|
||||
},
|
||||
unlockTimeMachineAction: (state, name) => {
|
||||
const index = state.timeMachineActions.findIndex((t) => t.name === name)
|
||||
Vue.set(state.tabs[index], 'unlocked', true)
|
||||
|
|
@ -662,7 +677,7 @@ export const mutations = {
|
|||
state.gameDate = 1378 * 12
|
||||
}
|
||||
},
|
||||
timeTravel: (state, { year, month = 0 }) => {
|
||||
timeTravel: (state, { era, year = 0, month = 0 }) => {
|
||||
const newYear = year * 12 + month
|
||||
|
||||
if (newYear < state.gameDate) {
|
||||
|
|
@ -670,6 +685,10 @@ export const mutations = {
|
|||
}
|
||||
|
||||
state.gameDate = newYear
|
||||
state.gameEra = era
|
||||
|
||||
const processIndex = state.processes.findIndex((p) => p.unlockEra === era)
|
||||
Vue.set(state.processes[processIndex], 'visited', true)
|
||||
},
|
||||
setPlayerAge: (state, { year, month = 0 }) => {
|
||||
state.playerAge = year * 12 + month
|
||||
|
|
|
|||
Reference in New Issue