From 84fe8d71983a6a082b780a93fcec07aaae191e77 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 20 Jul 2024 20:33:29 +0200
Subject: [PATCH] Removed virtualList stuff

---
 src/components/utilities/zoneEditor/Tiles.vue | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index 7eb0311..be108b5 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@@ -1,6 +1,6 @@
 <template>
   <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>
         <h3 class="text-lg">Tiles</h3>
         <div class="flex">
@@ -13,17 +13,17 @@
         </div>
       </template>
       <template #modalBody>
-        <div class="m-[15px]">
+        <div class="flex flex-col h-full p-4">
           <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) }">
               {{ tag }}
             </button>
           </div>
-          <div v-bind="containerProps">
-            <div v-bind="wrapperProps" class="flex justify-start flex-wrap gap-2.5 content-start">
-              <div v-for="{ data: tile } in list" :key="tile.id" class="max-w-[25%] inline-block">
+          <div class="h-[calc(100%_-_60px)] flex-grow overflow-y-auto">
+            <div class="grid grid-cols-8 gap-2 justify-items-center">
+              <div v-for="tile in filteredTiles" :key="tile.id" class="flex items-center justify-center">
                 <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`"
                   alt="Tile"
                   @click="zoneEditorStore.setSelectedTile(tile)"
@@ -49,7 +49,6 @@ import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useGameStore } from '@/stores/game'
 import Modal from '@/components/utilities/Modal.vue'
 import type { Tile } from '@/types'
-import { useVirtualList } from '@vueuse/core'
 
 const gameStore = useGameStore()
 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) => {
   if (selectedTags.value.includes(tag)) {
     selectedTags.value = selectedTags.value.filter((t) => t !== tag)
@@ -89,4 +83,4 @@ onMounted(async () => {
     zoneEditorStore.setTileList(response)
   })
 })
-</script>
+</script>
\ No newline at end of file