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

(WIP) add virtual list to tiles

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-20 18:53:45 +02:00
parent c3aff706f0
commit dca773b8c9
1 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,19 +25,21 @@
{{ tag }} {{ tag }}
</button> </button>
</div> </div>
<div class="flex justify-between flex-wrap gap-2.5 items-center"> <div v-bind="containerProps">
<div v-for="(tile, index) in filteredTiles" :key="index" class="max-w-[25%] inline-block"> <div v-bind="wrapperProps" class="flex justify-start flex-wrap gap-2.5 content-start">
<img <div v-for="{ data: tile } in list" :key="tile.id" class="max-w-[25%] inline-block">
class="border-2 border-solid max-w-full" <img
:src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" class="border-2 border-solid max-w-full"
alt="Tile" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`"
@click="zoneEditorStore.setSelectedTile(tile)" alt="Tile"
:class="{ @click="zoneEditorStore.setSelectedTile(tile)"
'cursor-pointer transition-all duration-300': true, :class="{
'border-cyan shadow-lg scale-105': zoneEditorStore.selectedTile?.id === tile.id, 'cursor-pointer transition-all duration-300': true,
'border-transparent hover:border-gray-300': zoneEditorStore.selectedTile?.id !== tile.id 'border-cyan shadow-lg scale-105': zoneEditorStore.selectedTile?.id === tile.id,
}" 'border-transparent hover:border-gray-300': zoneEditorStore.selectedTile?.id !== tile.id
/> }"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -53,6 +55,7 @@ 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)
@ -73,6 +76,14 @@ 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)