feat: game flow draft 2; time machine first draft

components/GameTab.vue

@@ -4,7 +4,7 @@
     :class="[colorClasses, { active }]"
     :to="tabData.route"
   >
-    <span v-if="!tabData.locked" :class="tabData.label" />
+    <span v-if="tabData.unlocked" :class="tabData.label" />
     <span v-else class="fas fa-lock" />
   </nuxt-link>
 </template>

components/ProgressButton.vue

@@ -17,6 +17,7 @@
       /
       <span v-if="unit === 'apprenticeLevels'">L</span>{{ maxText }}
       <span v-if="unit === 'spareTime'" class="fas fa-hourglass-half" />
+      <span v-if="unit === 'energy'" class="fas fa-bolt" />
     </span>
 
     <span

layouts/default.vue

@@ -53,6 +53,7 @@ export default {
   },
   methods: {
     gametick() {
+      // Instruments tick
       this.$store.state.processes
         .filter((p) => p.created)
         .forEach((process, index) => {
@@ -65,6 +66,14 @@ export default {
 
           this.$store.commit('tickProcess', { process })
         })
+
+      // Energy ticks
+      if (
+        this.$store.getters.isTabUnlocked('Time Machine') &&
+        this.$store.state.energy < this.$store.state.energyMax
+      ) {
+        this.$store.commit('tickEnergy')
+      }
     },
   },
 }

pages/Apprentices.vue

@@ -12,7 +12,7 @@
 export default {
   computed: {
     unlocked() {
-      return this.$store.state.processes.filter((p) => p.unlocked)
+      return this.$store.state.processes.filter((p) => p.unlocked && p.created)
     },
   },
 }

pages/Missions.vue

@@ -68,9 +68,25 @@ export default {
   methods: {
     complete(mission) {
       this.$store.commit('completeMission', mission.name)
+
       if (mission.completionCriteria.unit === 'spareTime') {
         this.$store.commit('spendCurrency', mission.completionCriteria.value)
       }
+
+      if (mission.name === 'Study Time Magic') {
+        this.$store.commit('unlockTab', 'Time Magic')
+      }
+
+      if (mission.name === 'Create the Time Machine') {
+        this.$store.commit('unlockTab', 'Time Machine')
+      }
+
+      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('tickLifetime')
+      }
     },
   },
 }

pages/TimeMachine.vue

@@ -1,3 +1,69 @@
 <template>
-  <div>Tab 4 content</div>
+  <div class="md:pt-4 pt-2">
+    <div
+      class="energy-bar relative mx-auto rounded-full overflow-hidden border-2"
+      :class="`text-${$store.getters.activeTab.color} border-${$store.getters.activeTab.darkColor}`"
+    >
+      <progress
+        class="absolute top-0 right-0 left-0 w-full h-full"
+        :max="$store.state.energyMax"
+        :value="$store.state.energy"
+      />
+      <span
+        class="relative block pt-1 pb-2 text-center text-lg font-semibold"
+        :class="`text-${$store.getters.activeTab.darkColor}`"
+      >
+        <span class="mr-1"
+          >{{ $store.state.energy }} / {{ $store.state.energyMax }}</span
+        >
+        <span class="text-base pt-1 ml-2 fas fa-bolt" />
+      </span>
+    </div>
+
+    <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"
+        :value="$store.state.energy"
+        @click="doAction(action)"
+      />
+    </responsive-grid>
+  </div>
 </template>
+
+<script>
+export default {
+  methods: {
+    doAction(action) {
+      this.$store.commit('spendEnergy', action.cost)
+      if (action.name === 'Activate!') {
+        // do action-specific things
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.energy-bar {
+  width: 75%;
+}
+/* progress bars for all browsers */
+progress::-webkit-progress-bar {
+  background-color: rgba(255, 255, 255, 0.1);
+  width: 100%;
+}
+progress {
+  color: currentColor;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+progress::-webkit-progress-value {
+  background-color: currentColor;
+}
+progress::-moz-progress-bar {
+  background-color: currentColor;
+}
+</style>

pages/TimeMagic.vue

@@ -1,3 +1,3 @@
 <template>
-  <div>Tab 5 content</div>
+  <div>Tab 5 content.</div>
 </template>

pages/Wisdom.vue

@@ -13,8 +13,8 @@
       ><span align="right"></span>
     </div>
     <div>
-      <span align="left"><b>Total lifetimes</b></span
+      <span align="left"><b>Completed lifetimes</b></span
-      ><span align="right">{{ $store.state.totalLifetimes }}</span>
+      ><span align="right">{{ $store.state.lifetimes }}</span>
     </div>
     <div>
       <span align="left"><b>Longest lifetime</b></span

pages/index.vue

@@ -38,6 +38,10 @@ export default {
     create(process) {
       this.$store.commit('createInstrument', process.instrument)
       this.$store.commit('spendCurrency', process.cost)
+      if (process.instrument === 'Mechanical Clock') {
+        this.$store.commit('unlockTab', 'Apprentices')
+        this.$store.commit('unlockTab', 'Missions')
+      }
     },
   },
 }

store/index.js

@@ -10,7 +10,7 @@ export const state = () => ({
       darkColor: 'amber-900',
       color: 'amber-400',
       lightColor: 'amber-200',
-      locked: false,
+      unlocked: true,
     },
     {
       route: '/apprentices',
@@ -19,7 +19,7 @@ export const state = () => ({
       darkColor: 'rose-900',
       color: 'rose-400',
       lightColor: 'rose-200',
-      locked: false,
+      unlocked: false,
     },
     {
       route: '/missions',
@@ -28,7 +28,7 @@ export const state = () => ({
       darkColor: 'sky-900',
       color: 'sky-400',
       lightColor: 'sky-200',
-      locked: false,
+      unlocked: false,
     },
     {
       route: '/timemachine',
@@ -37,7 +37,7 @@ export const state = () => ({
       darkColor: 'lime-900',
       color: 'lime-400',
       lightColor: 'lime-200',
-      locked: false,
+      unlocked: false,
     },
     {
       route: '/timemagic',
@@ -46,7 +46,7 @@ export const state = () => ({
       darkColor: 'violet-900',
       color: 'violet-400',
       lightColor: 'violet-200',
-      locked: false,
+      unlocked: false,
     },
     {
       route: '/wisdom',
@@ -55,11 +55,16 @@ export const state = () => ({
       darkColor: 'teal-900',
       color: 'teal-400',
       lightColor: 'teal-100',
-      locked: false,
+      unlocked: false,
     },
   ],
-  currency: new Decimal(0),
+
+  currency: new Decimal(10000),
   currencyTotal: new Decimal(0),
+
+  energy: 0,
+  energyMax: 600, // 60 seconds
+
   processes: [
     {
       instrument: 'Atlantean Clock',
@@ -390,8 +395,8 @@ export const state = () => ({
         'Write a book to pass your knowedge to your younger self through the time machine. ' +
         "Now where's your pen...",
       unlockCriteria: {
-        unit: 'timeJumpsBackwards',
+        unit: 'missionsCompleted',
-        value: 1,
+        value: ['Create the Time Machine'],
       },
       completionCriteria: {
         unit: 'maxAge',
@@ -421,7 +426,7 @@ export const state = () => ({
       resetOnPrestige: false,
     },
     {
-      name: 'Time to Cheat Death... Again',
+      name: 'Cheat Death... Again',
       description:
         'Another life well lived. ' +
         'Add a few chapters to the tome you received and send it back again.',
@@ -439,13 +444,41 @@ export const state = () => ({
     },
   ],
 
+  timeMachineActions: [
+    {
+      name: 'Activate!',
+      description: 'Will it work?? Only one way to find out!',
+      cost: 600,
+      unlocked: true,
+    },
+    {
+      name: 'Jump Forwards a Lot',
+      description: 'This time is boring. You yearn for more interesting times.',
+      cost: 1000,
+      unlocked: true,
+    },
+    {
+      name: 'Loop Back Around',
+      description: '...',
+      cost: 2000,
+      unlocked: true,
+    },
+    {
+      name: 'Jump Forwards a Little',
+      description:
+        'Visit your apprentices a few years into the future to benefit from the fruits of their labor.',
+      cost: 300,
+      unlocked: true,
+    },
+  ],
+
   gameDate: 1400 * 12,
   playerAge: 30 * 12,
   playerAgeMax: 60 * 12,
   playerLivedTotal: 0,
   wisdomGained: 0, // wisdom gained so far on this run, not applied until player sends the book.
   wisdomApplied: 0, // wisdom from previous runs
-  totalLifetimes: 1,
+  lifetimes: 0, // comleted lifetimes
   timeJumpsBackwards: 0,
 })
 
@@ -456,6 +489,9 @@ export const getters = {
       (tab) => tab.route === $nuxt.$route.path
     )
   },
+  isTabUnlocked: (state) => (title) => {
+    return state.tabs.find((t) => t.title === title).unlocked
+  },
   canTimeTravel: (state) => {
     if (state.playerAge.year < state.playerAgeMax.year) return true
     if (state.playerAge.year > state.playerAgeMax.year) return false
@@ -539,6 +575,10 @@ 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)
+  },
   createInstrument: (state, instrument) => {
     const index = state.processes.findIndex((p) => p.instrument === instrument)
     Vue.set(state.processes[index], 'created', true)
@@ -587,6 +627,18 @@ export const mutations = {
     state.playerAge += 1
     if (!(state.playerAge % 12)) state.wisdomGained++
   },
+  tickEnergy: (state) => {
+    state.energy += 1
+  },
+  spendEnergy: (state, amount) => {
+    if (amount <= state.energy) {
+      state.energy -= amount
+    }
+  },
+  unlockTimeMachineAction: (state, name) => {
+    const index = state.timeMachineActions.findIndex((t) => t.name === name)
+    Vue.set(state.tabs[index], 'unlocked', true)
+  },
   travelGameDate: (state, month) => {
     state.gameDate = month
   },
@@ -594,7 +646,7 @@ export const mutations = {
     state.currency = new Decimal(0)
     state.wisdomApplied += state.wisdomGained
     state.wisdomGained = 0
-    state.totalLifetimes += 1
+    state.lifetimes += 1
     state.timeJumpsBackwards += 1
     state.playerLivedTotal += state.playerAge
     // TODO: refactor next 3 lines if getters can be used in mutators: missionIsCompleted('Time Travel Precision')
@@ -610,5 +662,19 @@ export const mutations = {
       state.gameDate = 1378 * 12
     }
   },
-  doTimeTravel: (state, monthNumber) => {},
+  timeTravel: (state, { year, month = 0 }) => {
+    const newYear = year * 12 + month
+
+    if (newYear < state.gameDate) {
+      state.timeJumpsBackwards += 1
+    }
+
+    state.gameDate = newYear
+  },
+  setPlayerAge: (state, { year, month = 0 }) => {
+    state.playerAge = year * 12 + month
+  },
+  tickLifetime: (state) => {
+    state.lifetimes += 1
+  },
 }