From 08951244ab39960ad9cff165eab8b9fe0979d812 Mon Sep 17 00:00:00 2001 From: pskfyi Date: Thu, 13 Jan 2022 23:15:32 -0800 Subject: [PATCH] feat: narrative modal and game flow draft 4 --- components/NarrativeModal.vue | 34 ++++++++++++ layouts/default.vue | 38 +++++++++++++- pages/Missions.vue | 9 ++++ pages/TimeMachine.vue | 21 ++++++-- store/index.js | 98 +++++++++++++++++++++++------------ 5 files changed, 163 insertions(+), 37 deletions(-) create mode 100644 components/NarrativeModal.vue diff --git a/components/NarrativeModal.vue b/components/NarrativeModal.vue new file mode 100644 index 0000000..a11d88d --- /dev/null +++ b/components/NarrativeModal.vue @@ -0,0 +1,34 @@ +/* eslint-disable vue/no-v-html */ + + + + + diff --git a/layouts/default.vue b/layouts/default.vue index 498bae2..8a805f1 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -28,6 +28,7 @@ + @@ -43,10 +44,17 @@ export default { }, mounted() { window.setInterval(() => { - if (this.$store.state.playerAge < this.$store.state.playerAgeMax) + if (this.$store.state.modalIsOpen || this.$store.state.gameStopped) return + + if (this.$store.state.playerAge < this.$store.state.playerAgeMax) { this.gametick() + } else { + this.checkLossCondition() + } }, 100) window.setInterval(() => { + if (this.$store.state.modalIsOpen || this.$store.state.gameStopped) return + if (this.$store.state.playerAge < this.$store.state.playerAgeMax) this.$store.commit('tickGameDate') }, 1000) @@ -56,7 +64,7 @@ export default { // Instruments tick this.$store.state.processes .filter((p) => p.created) - .forEach((process, index) => { + .forEach((process) => { if (process.completion >= process.completionRequired) { const reward = process.baseReward * (1 + process.workerLevel) @@ -75,6 +83,32 @@ export default { this.$store.commit('tickEnergy') } }, + checkLossCondition() { + this.$store.commit('stopGame') + + // End state + const lostTheGame = + this.$store.state.playerAge === this.$store.state.playerAgeMax && + !this.$store.getters.isTabUnlocked('Time Machine') + + if (lostTheGame) { + const message = + 'You wasted your precious time your whole life with nothing to show for it.' + + '

' + + 'You have lost the game. Reload the page and try again.' + + this.$store.commit('openModal', message) + } else { + const message = + "You are too frail to continue. It's time to gather your knowledge into a book and " + + 'send it, along with the time machine and your timekeeping instruments, to your younger self. ' + + 'Hopefully they will know what to do with this valuable wisdom.' + + '

' + + 'Go to the Missions tab to continue.' + + this.$store.commit('openModal', message) + } + }, }, } diff --git a/pages/Missions.vue b/pages/Missions.vue index 6e7c639..19ab40a 100644 --- a/pages/Missions.vue +++ b/pages/Missions.vue @@ -80,6 +80,15 @@ export default { this.$store.commit('setPlayerAge', { year: 30 }) this.$store.commit('timeTravel', { year: 1400, era: 'Early Modern' }) this.$store.commit('tickLifetime') + this.$store.commit('spendCurrency', this.$store.state.currency) + this.$store.commit('startGame') + + const message = + 'You are young-ish once again and back in the year 1400 with all your wisdom intact.' + + '

' + + 'Continue to explore the eras and unlock the secrets of time.' + + this.$store.commit('openModal', message) } if (mission.name === 'Live Forever') { diff --git a/pages/TimeMachine.vue b/pages/TimeMachine.vue index 0104f0c..e29e738 100644 --- a/pages/TimeMachine.vue +++ b/pages/TimeMachine.vue @@ -62,6 +62,7 @@ export default { }, isEnabled(process) { const isCurrentEra = process.unlockEra === this.$store.state.gameEra + if (isCurrentEra) { return false } else if (process.visited) { @@ -78,9 +79,13 @@ export default { const latestEraIndex = processes.map((p) => p.visited).lastIndexOf(true) const nextLatestEraIndex = latestEraIndex + 1 + const middleAges = this.$store.state.processes.find( + (p) => p.unlockEra === 'Middle Ages' + ) + return ( processIndex === nextEarliestEraIndex || - processIndex === nextLatestEraIndex + (middleAges.visited && processIndex === nextLatestEraIndex) ) } }, @@ -91,13 +96,23 @@ export default { } }, travelToEra(process) { + const hadBeenVisited = process.visited // save this before we time travel + 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 + + if (process.unlockEra === 'Middle Ages' && !hadBeenVisited) { + this.$nextTick(() => { + const message = + 'Congratulations! ' + + "You've successfully traveled through time and landed in the year 1100" + + '... though it was rather hard on your body.' + + this.$store.commit('openModal', message) + }) } }, }, diff --git a/store/index.js b/store/index.js index 9c49236..23d5a01 100644 --- a/store/index.js +++ b/store/index.js @@ -58,8 +58,15 @@ export const state = () => ({ unlocked: false, }, ], + modalText: + '{{ Premise }}' + + '

' + + '{{ Click to generate Spare Time }}', + modalIsOpen: true, - currency: new Decimal(10000), + gameStopped: false, + + currency: new Decimal(0), currencyTotal: new Decimal(0), gameDate: 1400 * 12, @@ -387,7 +394,7 @@ export const state = () => ({ }, completionCriteria: { unit: 'spareTime', - value: 1000, + value: 300, }, unlocked: false, viewed: false, @@ -485,7 +492,7 @@ export const state = () => ({ ], // Time Machine - energy: 599, + energy: 0, energyMax: 600, // 60 seconds fluxCapacitorLevel: 1, nextFluxCapacitorCost: 500, @@ -519,7 +526,7 @@ export const state = () => ({ ], // Time Magic - mana: 99, + mana: 0, manaMax: 100, philosophersStoneUnlocked: false, @@ -688,6 +695,27 @@ export const getters = { } export const mutations = { + // UI + unlockTab: (state, title) => { + const index = state.tabs.findIndex((t) => t.title === title) + Vue.set(state.tabs[index], 'unlocked', true) + }, + openModal: (state, text) => { + state.modalText = text + state.modalIsOpen = true + }, + closeModal: (state) => { + state.modalIsOpen = false + state.modalText = '' + }, + stopGame: (state) => { + state.gameStopped = true + }, + startGame: (state) => { + state.gameStopped = false + }, + + // Currency addCurrency: (state, value) => { state.currency = Decimal.add(state.currency, value) state.currencyTotal = Decimal.add(state.currencyTotal, value) @@ -696,10 +724,21 @@ export const mutations = { value = Decimal.mul(value, -1) state.currency = Decimal.add(state.currency, value) }, - unlockTab: (state, title) => { - const index = state.tabs.findIndex((t) => t.title === title) - Vue.set(state.tabs[index], 'unlocked', true) + + // Dates + tickGameDate: (state) => { + state.gameDate += 1 + state.playerAge += 1 + if (!(state.playerAge % 12)) state.wisdomGained++ }, + setPlayerAge: (state, { year, month = 0 }) => { + state.playerAge = year * 12 + month + }, + tickLifetime: (state) => { + state.lifetimes += 1 + }, + + // Instruments createInstrument: (state, instrument) => { const index = state.processes.findIndex((p) => p.instrument === instrument) Vue.set(state.processes[index], 'created', true) @@ -716,6 +755,23 @@ export const mutations = { ) Vue.set(state.processes[index], 'completion', 0) }, + + // Apprentices + levelUpApprentice: (state, process) => { + if (process.nextWorkerCost > state.currency) { + return + } + const index = state.processes.findIndex((p) => p.worker === process.worker) + state.currency = Decimal.subtract(state.currency, process.nextWorkerCost) + Vue.set(state.processes[index], 'workerLevel', process.workerLevel + 1) + Vue.set( + state.processes[index], + 'nextWorkerCost', + Math.floor(process.nextWorkerCost * process.nextWorkerFactor) + ) + }, + + // Missions setMissionAvailable: (state, missionIndex) => { Vue.set(state.missions[missionIndex], 'available', true) }, @@ -730,24 +786,8 @@ export const mutations = { const index = state.missions.findIndex((m) => m.name === missionName) Vue.set(state.missions[index], 'unlocked', true) }, - levelUpApprentice: (state, process) => { - if (process.nextWorkerCost > state.currency) { - return - } - const index = state.processes.findIndex((p) => p.worker === process.worker) - state.currency = Decimal.subtract(state.currency, process.nextWorkerCost) - Vue.set(state.processes[index], 'workerLevel', process.workerLevel + 1) - Vue.set( - state.processes[index], - 'nextWorkerCost', - Math.floor(process.nextWorkerCost * process.nextWorkerFactor) - ) - }, - tickGameDate: (state) => { - state.gameDate += 1 - state.playerAge += 1 - if (!(state.playerAge % 12)) state.wisdomGained++ - }, + + // Time Machine tickEnergy: (state) => { state.energy += 1 }, @@ -759,7 +799,7 @@ export const mutations = { upgradeMaxEnergy: (state) => { state.energyMax += 200 state.fluxCapacitorLevel += 1 - state.nextFluxCapacitorCost *= 2 + state.nextFluxCapacitorCost *= 10 }, unlockTimeMachineAction: (state, name) => { const index = state.timeMachineActions.findIndex((t) => t.name === name) @@ -801,12 +841,6 @@ export const mutations = { 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 - }, - tickLifetime: (state) => { - state.lifetimes += 1 - }, // Time Magic unlockSpell: (state, name) => {