feat(CreaturesLibraryPage): unlock Factory

src/views/CreaturesLibraryPage.vue

@@ -3,7 +3,7 @@
     <section class="library-header">
       <div class="towns-anchors">
         <ObjectPortrait
-          v-for="town in towns.slice(0, 10)"
+          v-for="town in towns"
           :key="town.id"
           :file="{ name: town.id, alt: town.name }"
           folder="/images/towns/portraits/large"
@@ -30,7 +30,7 @@
       </div>
     </section>
 
-    <div v-for="town in towns.slice(0, 10)" :key="town.name" class="town">
+    <div v-for="town in towns" :key="town.name" class="town">
       <h2 :id="town.name" class="town-name">{{ town.name }}</h2>
       <CreatureCard
         v-for="creature in creatures.filter((creature) => creature.townId === town.id)"
@@ -55,92 +55,69 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ObjectPortrait from '@/components/ObjectPortrait.vue'
 import type { Creature } from '@/models/Creature'
 import { useStore } from '@/store'
 import { useDebounce } from '@vueuse/core'
-import { computed, defineAsyncComponent, defineComponent, onUnmounted, ref, watch } from 'vue'
+import { computed, defineAsyncComponent, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
-
-export default defineComponent({
-  name: 'CreaturesLibraryPage',
-  components: {
-    CreatureCard: defineAsyncComponent(() => import('@/components/creaturesLibrary/CreatureCard.vue')),
-    ObjectPortrait,
-    PageFooter: defineAsyncComponent(() => import('@/components/PageFooter.vue')),
-  },
-  setup() {
-    const store = useStore()
-    const router = useRouter()
-    const route = useRoute()
-    const { t } = useI18n()
-
-    const towns = computed(() => store.towns)
-    const creatures = computed(() => store.creatures)
-
-    const selectedCreature = ref<Creature | null>(null)
-    const search = ref('')
-    const debouncedSearch = useDebounce(search, 500)
-    const searchInput = ref()
-
-    const keyboardSearch = (value: KeyboardEvent) => {
-      if (value.key === 'Enter') {
-        if (search.value.length > 0) {
-          search.value = ''
-        } else if (route.hash.length > 0) {
-          router.replace({ hash: '' })
-        }
-      }
+const CreatureCard = defineAsyncComponent(() => import('@/components/creaturesLibrary/CreatureCard.vue'))
+const PageFooter = defineAsyncComponent(() => import('@/components/PageFooter.vue'))
+
+const store = useStore()
+const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
+
+const towns = computed(() => store.towns)
+const creatures = computed(() => store.creatures)
+
+const selectedCreature = ref<Creature | null>(null)
+const search = ref('')
+const debouncedSearch = useDebounce(search, 500)
+const searchInput = ref()
+
+const keyboardSearch = (value: KeyboardEvent) => {
+  if (value.key === 'Enter') {
+    if (search.value.length > 0) {
+      search.value = ''
+    } else if (route.hash.length > 0) {
+      router.replace({ hash: '' })
     }
+  }
+}
 
-    document.addEventListener('keyup', keyboardSearch)
-    onUnmounted(() => {
-      document.removeEventListener('keyup', keyboardSearch)
-    })
-
-    watch(debouncedSearch, (searchValue) => {
-      if (searchValue.length) {
-        const foundCreature = creatures.value.find((creature: Creature) => {
-          return creature.name.toLowerCase().indexOf(searchValue.trim().toLowerCase()) > -1
-        })
+document.addEventListener('keyup', keyboardSearch)
+onUnmounted(() => {
+  document.removeEventListener('keyup', keyboardSearch)
+})
 
-        if (foundCreature) {
-          router.replace({ hash: `#${foundCreature.name}` })
-        }
-      }
+watch(debouncedSearch, (searchValue) => {
+  if (searchValue.length) {
+    const foundCreature = creatures.value.find((creature: Creature) => {
+      return creature.name.toLowerCase().indexOf(searchValue.trim().toLowerCase()) > -1
     })
 
-    const setSearch = (event: Event) => {
-      const target = event.target as HTMLInputElement
-      search.value = target.value
-    }
-
-    const onSelectCreature = (creature: Creature) => {
-      if (selectedCreature.value && selectedCreature.value.id === creature.id) {
-        selectedCreature.value = null
-      } else {
-        selectedCreature.value = creature
-      }
+    if (foundCreature) {
+      router.replace({ hash: `#${foundCreature.name}` })
     }
+  }
+})
 
-    return {
-      router,
-      t,
-
-      towns,
-      creatures,
-
-      search,
-      selectedCreature,
-      searchInput,
+const setSearch = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  search.value = target.value
+}
 
-      setSearch,
-      onSelectCreature,
-    }
-  },
-})
+const onSelectCreature = (creature: Creature) => {
+  if (selectedCreature.value && selectedCreature.value.id === creature.id) {
+    selectedCreature.value = null
+  } else {
+    selectedCreature.value = creature
+  }
+}
 </script>
 
 <style lang="scss">