From dca773b8c9beccb64f368eef760283525a0e92aa Mon Sep 17 00:00:00 2001
From: Colin Kallemein <kallemein@redkiwi.nl>
Date: Sat, 20 Jul 2024 18:53:45 +0200
Subject: [PATCH] (WIP) add virtual list to tiles

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

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