chromatic-lattice/src/components/features/Challenges.vue
thepaperpilot 0afcd1cd3d First pass at typescript support
Oh man did this end up requiring a *ton* of other work as well.
There's still a few typing issues I still can't quite work out,
and others I'd like to improve when I have time. In fact, this version
doesn't even really work, it has a stack overflow error caused by
a tooltip for some reason have a tree inside it, which in turn has
another tooltip, etc. There's also 17 errors that I *really* feel like
shouldn't be there, but they are, and 113 warnings - mostly using !
to assert that things are non-null. Lots of work left to do, to sum up.

The reason I'm committing this now is because I really need to get to
work on my game jam, and since it won't use a tree or really many of
TMT-X's features, I can get away with using a broken engine :)
2021-08-16 23:30:54 -05:00

41 lines
1.3 KiB
Vue

<template>
<div v-if="filteredChallenges" class="table">
<template v-if="filteredChallenges.rows && filteredChallenges.cols">
<div v-for="row in filteredChallenges.rows" class="row" :key="row">
<div v-for="col in filteredChallenges.cols" :key="col">
<challenge
v-if="filteredChallenges[row * 10 + col] !== undefined"
:id="row * 10 + col"
/>
</div>
</div>
</template>
<row v-else>
<challenge v-for="(challenge, id) in filteredChallenges" :key="id" :id="id" />
</row>
</div>
</template>
<script lang="ts">
import { layers } from "@/game/layers";
import { Challenge } from "@/typings/features/challenge";
import { getFiltered, InjectLayerMixin } from "@/util/vue";
import { defineComponent, PropType } from "vue";
export default defineComponent({
name: "challenges",
mixins: [InjectLayerMixin],
props: {
challenges: {
type: Object as PropType<Array<string>>
}
},
computed: {
filteredChallenges(): Record<string, Challenge> {
return getFiltered(layers[this.layer].challenges!.data, this.challenges);
}
}
});
</script>
<style scoped></style>