81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<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>
|