feat: improved missions UI and more sophisticated unlock options

components/CompletedMission.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="rounded-lg border text-center py-1">
+    {{ mission.name }}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    mission: { type: Object, required: true },
+  },
+}
+</script>
+
+<style scoped>
+div {
+  border-color: currentColor;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+</style>

components/MissionButton.vue

@@ -4,8 +4,8 @@
     :description="mission.description"
     :max="max"
     :value="value"
-    :unit="unit"
-    @click="complete"
+    :unit="mission.completionCriteria.unit"
+    @click="$emit('click')"
   />
 </template>
 
@@ -16,22 +16,21 @@ export default {
   },
   computed: {
     value() {
-      return 'cost' in this.mission.completionCriteria
-        ? this.$store.state.currency
-        : this.$store.state.playerAge
+      const { unit } = this.mission.completionCriteria
+
+      if (unit === 'maxAge') {
+        return this.$store.state.playerAge
+      } else if (unit === 'spareTime') {
+        return this.$store.state.currency
+      } else {
+        //  (unit === 'apprenticeLevels')
+        return this.$store.getters.apprenticeLevels
+      }
     },
     max() {
-      return 'cost' in this.mission.completionCriteria
-        ? this.mission.completionCriteria.cost
-        : this.$store.state.playerAgeMax
-    },
-    unit() {
-      return 'cost' in this.mission.completionCriteria ? 'spareTime' : 'age'
-    },
-  },
-  methods: {
-    complete() {
-      this.$store.commit('completeMission', this.mission)
+      return this.mission.completionCriteria.unit === 'maxAge'
+        ? this.$store.state.playerAgeMax
+        : this.mission.completionCriteria.value
     },
   },
 }