feat: magic game flow 1

pages/Missions.vue

@@ -41,6 +41,10 @@ export default {
           return unlockCriteria.value.every((name) =>
             this.$store.getters.missionIsCompleted(name)
           )
+        } else if (unlockCriteria.unit === 'eraVisited') {
+          return this.$store.state.processes.find(
+            (p) => p.unlockEra === unlockCriteria.value
+          ).visited
         } else if (unlockCriteria.unit === 'timeJumpsBackwards') {
           return unlockCriteria.value <= this.$store.state.timeJumpsBackwards
         } else {
@@ -77,6 +81,10 @@ export default {
         this.$store.commit('timeTravel', { year: 1400, era: 'Early Modern' })
         this.$store.commit('tickLifetime')
       }
+
+      if (mission.name === 'Live Forever') {
+        this.$store.commit('unlockPhilosophersStone')
+      }
     },
   },
 }

pages/TimeMagic.vue

@@ -27,9 +27,46 @@
       now also gains
       <b><span class="fas fa-star text-base" /> Mana</b>
     </p>
+
+    <h2 class="text-xl font-semibold text-center pt-8">Spells</h2>
+
+    <responsive-grid min="1" mid="1" max="1" class="pt-2 md:pt-4 text-center">
+      <p>Spells coming soon!</p>
+    </responsive-grid>
+
+    <h2 class="text-xl font-semibold text-center pt-8">Philosopher's Stone</h2>
+
+    <responsive-grid class="pt-2 md:pt-4">
+      <philosophers-stone-button
+        v-for="action in $store.state.philosophersStoneActions"
+        :key="action.name"
+        :action="action"
+      />
+    </responsive-grid>
   </div>
 </template>
 
+<script>
+import PhilosophersStoneButton from '~/components/PhilosophersStoneButton.vue'
+export default {
+  components: { PhilosophersStoneButton },
+  data() {
+    return {
+      riteOfChronosTime: 300,
+    }
+  },
+  methods: {
+    castSpell(name) {
+      this.$store.commit('spendMana', 100)
+
+      if (name === 'Rite of Chronos') {
+        //
+      }
+    },
+  },
+}
+</script>
+
 <style scoped>
 .mana-bar {
   width: 75%;