feat: improved missions UI and more sophisticated unlock options

pages/Missions.vue

@@ -1,9 +1,80 @@
 <template>
-  <responsive-grid>
-    <mission-button
-      v-for="(mission, index) in $store.state.missions"
-      :key="index"
-      :mission="mission"
-    />
-  </responsive-grid>
+  <div class="missions grid">
+    <responsive-grid
+      v-if="incomplete.length"
+      :class="
+        completed.length &&
+        `pb-6 border-b-2 border-${$store.getters.activeTab.darkColor}`
+      "
+    >
+      <mission-button
+        v-for="(mission, index) in incomplete"
+        :key="index"
+        :mission="mission"
+        @click="complete(mission)"
+      />
+    </responsive-grid>
+
+    <div
+      v-else
+      :class="
+        completed.length &&
+        `pt-6 pb-10 border-b-2 border-${$store.getters.activeTab.darkColor}`
+      "
+    >
+      <h3 class="text-center">No Missions Currently Available</h3>
+    </div>
+
+    <template v-if="completed.length">
+      <h2 class="pt-2 pb-2 text-center text-xl">Completed Missions</h2>
+      <responsive-grid min="1" mid="3" max="6">
+        <completed-mission
+          v-for="(mission, index) in completed"
+          :key="index"
+          :mission="mission"
+        />
+      </responsive-grid>
+    </template>
+  </div>
 </template>
+
+<script>
+export default {
+  computed: {
+    unlocked() {
+      return this.$store.state.missions.filter(({ unlockCriteria }) => {
+        if (unlockCriteria.unit === 'instruments') {
+          return unlockCriteria.value <= this.$store.getters.instruments
+        } else if (unlockCriteria.unit === 'apprenticeLevels') {
+          return unlockCriteria.value <= this.$store.getters.apprenticeLevels
+        } else if (unlockCriteria.unit === 'missionsCompleted') {
+          return unlockCriteria.value.every((name) =>
+            this.$store.getters.missionIsCompleted(name)
+          )
+        } else if (unlockCriteria.unit === 'timeJumpsBackwards') {
+          return unlockCriteria.value <= this.$store.state.timeJumpsBackwards
+        } else {
+          return false
+        }
+      })
+    },
+    incomplete() {
+      return this.unlocked.filter((m) => !m.complete)
+    },
+    completed() {
+      return this.unlocked.filter((m) => m.complete)
+    },
+  },
+  methods: {
+    complete(mission) {
+      this.$store.commit('completeMission', mission.name)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.missions {
+  grid-template-rows: minmax(0, 1fr) auto auto;
+}
+</style>