feat: Display year/month durations via getters

components/MissionButton.vue

@@ -4,6 +4,7 @@
     :description="mission.description"
     :max="max"
     :value="value"
+    :unit="unit"
     @click="complete"
   />
 </template>
@@ -24,6 +25,9 @@ export default {
         ? this.mission.completionCriteria.cost
         : this.$store.state.playerAgeMax
     },
+    unit() {
+      return 'cost' in this.mission.completionCriteria ? 'spareTime' : 'age'
+    },
   },
   methods: {
     complete() {

components/ProgressButton.vue

@@ -13,8 +13,8 @@
     />
 
     <span class="absolute top-3 right-3 font-semibold text-sm">
-      {{ cappedValue }} / {{ max }}
+      {{ cappedValueText }} / {{ maxText }}
-      <span class="fas fa-hourglass-half" />
+      <span v-if="unit === 'spareTime'" class="fas fa-hourglass-half" />
     </span>
 
     <span
@@ -41,7 +41,7 @@ export default {
     description: { type: String, default: null },
     max: { type: Number, required: true },
     value: { type: [Number, Decimal], required: true },
-    unit: { type: String, default: null },
+    unit: { type: String, default: 'spareTime' },
     current: { type: String, default: null },
     next: { type: String, default: null },
   },
@@ -49,6 +49,16 @@ export default {
     cappedValue() {
       return this.value > this.max ? this.max : this.value
     },
+    cappedValueText() {
+      return this.unit === 'spareTime'
+        ? this.cappedValue
+        : this.$store.getters.ageText
+    },
+    maxText() {
+      return this.unit === 'spareTime'
+        ? this.max
+        : this.$store.getters.ageMaxText
+    },
     clickable() {
       return this.value >= this.max
     },

components/TimeHeader.vue

@@ -16,28 +16,19 @@
         :max="$store.state.playerAgeMax"
         :value="$store.state.playerAge"
       />
-      {{ ageText }}
+      {{ $store.getters.ageText }}
     </div>
 
-    <div class="text-center pt-2 pb-1 select-none" v-text="maxAgeText" />
+    <div
+      class="text-center pt-2 pb-1 select-none"
+      v-text="$store.getters.ageMaxText"
+    />
   </header>
 </template>
 
 <script>
 export default {
   computed: {
-    ageText() {
-      const year = Math.floor(this.$store.state.playerAge / 12)
-      const month = this.$store.state.playerAge % 12
-
-      return `${year}y${month}m`
-    },
-    maxAgeText() {
-      const year = Math.floor(this.$store.state.playerAgeMax / 12)
-      const month = this.$store.state.playerAgeMax % 12
-
-      return `${year}y${month}m max`
-    },
     colorClasses() {
       const { lightColor, darkColor } = this.$store.getters.activeTab
 

pages/Missions.vue

@@ -1,12 +1,9 @@
 <template>
   <responsive-grid>
-    <progress-button
+    <mission-button
       v-for="(mission, index) in $store.state.missions"
       :key="index"
-      :label="mission.name"
+      :mission="mission"
-      :description="mission.description"
-      :max="mission.completionCriteria.cost"
-      :value="$store.state.currency"
     />
   </responsive-grid>
 </template>

store/index.js

@@ -143,7 +143,7 @@ export const state = () => ({
         age: 100,
       },
       completionCriteria: {
-        cost: 150000,
+        maxAge: true,
       },
       available: true,
       viewed: false,
@@ -193,6 +193,18 @@ export const getters = {
   currencySpent: (state) => {
     return Decimal.subtract(state.currencyTotal, state.currency)
   },
+  ageText: (state) => {
+    const year = Math.floor(state.playerAge / 12)
+    const month = state.playerAge % 12
+
+    return `${year}y${month}m`
+  },
+  ageMaxText: (state) => {
+    const year = Math.floor(state.playerAgeMax / 12)
+    const month = state.playerAgeMax % 12
+
+    return `${year}y${month}m`
+  },
 }
 
 export const mutations = {
@@ -217,8 +229,9 @@ export const mutations = {
   setMissionViewed: (state, missionIndex) => {
     Vue.set(state.missions[missionIndex], 'viewed', true)
   },
-  completeMission: (state, missionIndex) => {
+  completeMission: (state, mission) => {
-    state.missions[missionIndex].complete = true
+    const index = state.missions.findIndex((m) => m.name === mission.name)
+    Vue.set(state.missions[index], 'complete', true)
   },
   levelUpApprentice: (state, process) => {
     if (process.nextWorkerCost > state.currency) {