feat: game flow draft 2; time machine first draft

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="right">{{ $store.state.totalLifetimes }}</span>
+      <span align="left"><b>Completed lifetimes</b></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')
+      }
     },
   },
 }