feat: time machine and time travel flow draft 1

components/MaxEnergyUpgradeButton.vue

@@ -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>

components/ProgressButton.vue

@@ -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 },
+    current: { type: [Number, String], default: null },
-    next: { type: 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);

pages/Apprentices.vue

@@ -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)
     },
   },
 }

pages/Missions.vue

@@ -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')
       }
     },

pages/TimeMachine.vue

@@ -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"
+        v-for="process in $store.state.processes"
-        :key="index"
+        :key="process.instrument"
-        :label="action.name"
+        :label="getLabel(process)"
-        :description="action.description"
+        :max="process.travelCost"
-        :max="action.cost"
         :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>

pages/index.vue

@@ -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)

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