imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Removed virtualList stuff

Browse Source
This commit is contained in:
Dennis Postma 2024-07-20 20:33:29 +02:00
parent 87815dd68e
commit 84fe8d7198
1 changed files with 7 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<Teleport to="body"> <Teleport to="body">
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260"> <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="600">
<template #modalHeader> <template #modalHeader>
<h3 class="text-lg">Tiles</h3> <h3 class="text-lg">Tiles</h3>
<div class="flex"> <div class="flex">
@ -13,17 +13,17 @@
</div> </div>
</template> </template>
<template #modalBody> <template #modalBody>
<div class="m-[15px]"> <div class="flex flex-col h-full p-4">
<div class="mb-4 flex flex-wrap gap-2"> <div class="mb-4 flex flex-wrap gap-2">
<button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }"> <button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
{{ tag }} {{ tag }}
</button> </button>
</div> </div>
<div v-bind="containerProps"> <div class="h-[calc(100%_-_60px)] flex-grow overflow-y-auto">
<div v-bind="wrapperProps" class="flex justify-start flex-wrap gap-2.5 content-start"> <div class="grid grid-cols-8 gap-2 justify-items-center">
<div v-for="{ data: tile } in list" :key="tile.id" class="max-w-[25%] inline-block"> <div v-for="tile in filteredTiles" :key="tile.id" class="flex items-center justify-center">
<img <img
class="border-2 border-solid max-w-full" class="max-w-full max-h-full border-2 border-solid"
:src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`"
alt="Tile" alt="Tile"
@click="zoneEditorStore.setSelectedTile(tile)" @click="zoneEditorStore.setSelectedTile(tile)"
@ -49,7 +49,6 @@ import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useGameStore } from '@/stores/game' import { useGameStore } from '@/stores/game'
import Modal from '@/components/utilities/Modal.vue' import Modal from '@/components/utilities/Modal.vue'
import type { Tile } from '@/types' import type { Tile } from '@/types'
import { useVirtualList } from '@vueuse/core'
const gameStore = useGameStore() const gameStore = useGameStore()
const isModalOpen = ref(false) const isModalOpen = ref(false)
@ -70,11 +69,6 @@ const filteredTiles = computed(() => {
}) })
}) })
const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredTiles, {
itemHeight: 40,
itemWidth: 72
})
const toggleTag = (tag: string) => { const toggleTag = (tag: string) => {
if (selectedTags.value.includes(tag)) { if (selectedTags.value.includes(tag)) {
selectedTags.value = selectedTags.value.filter((t) => t !== tag) selectedTags.value = selectedTags.value.filter((t) => t !== tag)