From 6e2885cba6e7091069187560022854e91eece939 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 19 Oct 2024 21:15:13 +0200
Subject: [PATCH] Added tile sorting logic, minor improvements

---
 package-lock.json                             |  12 +-
 src/components/forms/ChipsInput.vue           |   4 +-
 .../gameMaster/zoneEditor/Objects.vue         |   1 +
 .../zoneEditor/partials/ObjectList.vue        |  74 ++++---
 .../zoneEditor/partials/TileList.vue          | 186 ++++++++++++++++--
 src/components/sprites/Character.vue          |   2 +-
 src/main.ts                                   |   3 +-
 7 files changed, 215 insertions(+), 67 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5d2e7fb..fc3e187 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1991,9 +1991,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.16.12",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.12.tgz",
-      "integrity": "sha512-LfPFB0zOeCeCNQV3i+67rcoVvoN5n0NVuR2vLG0O5ySQMgchuZlC4lgz546ZOJyDtj5KIgOxy+lacOimfqZAIA==",
+      "version": "20.16.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.13.tgz",
+      "integrity": "sha512-GjQ7im10B0labo8ZGXDGROUl9k0BNyDgzfGpb4g/cl+4yYDWVKcozANF4FGr4/p0O/rAkQClM6Wiwkije++1Tg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6426,9 +6426,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.80.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.2.tgz",
-      "integrity": "sha512-9wXY8cGBlUmoUoT+vwOZOFCiS+naiWVjqlreN9ar9PudXbGwlMTFwCR5K9kB4dFumJ6ib98wZyAObJKsWf1nAA==",
+      "version": "1.80.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.3.tgz",
+      "integrity": "sha512-ptDWyVmDMVielpz/oWy3YP3nfs7LpJTHIJZboMVs8GEC9eUmtZTZhMHlTW98wY4aEorDfjN38+Wr/XjskFWcfA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index 04c70d3..eb19f5f 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-wrap items-center input-field gap-1">
     <div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
-      <span class="text-xs">{{ chip }}</span>
+      <span class="text-xs text-white">{{ chip }}</span>
       <button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)" aria-label="Remove chip">×</button>
     </div>
-    <input class="outline-none border-none p-1" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
+    <input class="outline-none border-none p-1 text-gray-300" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
   </div>
 </template>
 
diff --git a/src/components/gameMaster/zoneEditor/Objects.vue b/src/components/gameMaster/zoneEditor/Objects.vue
index 0ee3f44..5878bfc 100644
--- a/src/components/gameMaster/zoneEditor/Objects.vue
+++ b/src/components/gameMaster/zoneEditor/Objects.vue
@@ -63,6 +63,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
     id: uuidv4(),
     zoneId: zoneEditorStore.zone.id,
     zone: zoneEditorStore.zone,
+    objectId: zoneEditorStore.selectedObject.id,
     object: zoneEditorStore.selectedObject,
     depth: 0,
     isRotated: false,
diff --git a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue b/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
index 3bc95dc..ba2bb03 100644
--- a/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/ObjectList.vue
@@ -1,45 +1,43 @@
 <template>
-  <Teleport to="body">
-    <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)">
-      <template #modalHeader>
-        <h3 class="text-lg text-white">Objects</h3>
-      </template>
-      <template #modalBody>
-        <div class="flex pt-4 pl-4">
-          <div class="w-full flex gap-1.5 flex-row">
-            <div>
-              <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
-              <input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+  <Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)">
+    <template #modalHeader>
+      <h3 class="text-lg text-white">Objects</h3>
+    </template>
+    <template #modalBody>
+      <div class="flex pt-4 pl-4">
+        <div class="w-full flex gap-1.5 flex-row">
+          <div>
+            <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
+            <input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
+          </div>
+        </div>
+      </div>
+      <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 class="h-full overflow-auto">
+          <div class="flex justify-between flex-wrap gap-2.5 items-center">
+            <div v-for="(object, index) in filteredObjects" :key="index" class="max-w-1/4 inline-block">
+              <img
+                class="border-2 border-solid max-w-full"
+                :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
+                alt="Object"
+                @click="zoneEditorStore.setSelectedObject(object)"
+                :class="{
+                  'cursor-pointer transition-all duration-300': true,
+                  'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
+                  'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
+                }"
+              />
             </div>
           </div>
         </div>
-        <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 class="h-full overflow-auto">
-            <div class="flex justify-between flex-wrap gap-2.5 items-center">
-              <div v-for="(object, index) in filteredObjects" :key="index" class="max-w-1/4 inline-block">
-                <img
-                  class="border-2 border-solid max-w-full"
-                  :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
-                  alt="Object"
-                  @click="zoneEditorStore.setSelectedObject(object)"
-                  :class="{
-                    'cursor-pointer transition-all duration-300': true,
-                    'border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
-                    'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
-                  }"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-    </Modal>
-  </Teleport>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/gameMaster/zoneEditor/partials/TileList.vue b/src/components/gameMaster/zoneEditor/partials/TileList.vue
index 695641b..77cc507 100644
--- a/src/components/gameMaster/zoneEditor/partials/TileList.vue
+++ b/src/components/gameMaster/zoneEditor/partials/TileList.vue
@@ -1,10 +1,10 @@
 <template>
-  <Teleport to="body">
-    <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)">
-      <template #modalHeader>
-        <h3 class="text-lg text-white">Tiles</h3>
-      </template>
-      <template #modalBody>
+  <Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)">
+    <template #modalHeader>
+      <h3 class="text-lg text-white">Tiles</h3>
+    </template>
+    <template #modalBody>
+      <div v-if="!selectedGroup">
         <div class="flex pt-4 pl-4">
           <div class="w-full flex gap-1.5 flex-row">
             <div>
@@ -21,25 +21,61 @@
           </div>
           <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">
+              <div v-for="group in groupedTiles" :key="group.parent.id" class="flex flex-col items-center justify-center relative">
                 <img
-                  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)"
+                  class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
+                  :src="`${config.server_endpoint}/assets/tiles/${group.parent.id}.png`"
+                  :alt="group.parent.name"
+                  @click="openGroup(group)"
+                  @load="() => processTile(group.parent)"
                   :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
+                    'border-cyan shadow-lg scale-105': isActiveTile(group.parent),
+                    'border-transparent hover:border-gray-300': !isActiveTile(group.parent)
                   }"
                 />
+                <span class="text-xs mt-1">{{ getTileCategory(group.parent) }}</span>
+                <span v-if="group.children.length > 0" class="absolute top-0 right-0 bg-cyan text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
+                  {{ group.children.length + 1 }}
+                </span>
               </div>
             </div>
           </div>
         </div>
-      </template>
-    </Modal>
-  </Teleport>
+      </div>
+      <div v-else class="p-4">
+        <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
+        <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
+        <div class="grid grid-cols-8 gap-2 justify-items-center">
+          <div class="flex flex-col items-center justify-center">
+            <img
+              class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
+              :src="`${config.server_endpoint}/assets/tiles/${selectedGroup.parent.id}.png`"
+              :alt="selectedGroup.parent.name"
+              @click="selectTile(selectedGroup.parent)"
+              :class="{
+                'border-cyan shadow-lg scale-105': isActiveTile(selectedGroup.parent),
+                'border-transparent hover:border-gray-300': !isActiveTile(selectedGroup.parent)
+              }"
+            />
+            <span class="text-xs mt-1">{{ getTileCategory(selectedGroup.parent) }}</span>
+          </div>
+          <div v-for="childTile in selectedGroup.children" :key="childTile.id" class="flex flex-col items-center justify-center">
+            <img
+              class="max-w-full max-h-full border-2 border-solid cursor-pointer transition-all duration-300"
+              :src="`${config.server_endpoint}/assets/tiles/${childTile.id}.png`"
+              :alt="childTile.name"
+              @click="selectTile(childTile)"
+              :class="{
+                'border-cyan shadow-lg scale-105': isActiveTile(childTile),
+                'border-transparent hover:border-gray-300': !isActiveTile(childTile)
+              }"
+            />
+            <span class="text-xs mt-1">{{ getTileCategory(childTile) }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup lang="ts">
@@ -55,20 +91,60 @@ const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 const searchQuery = ref('')
 const selectedTags = ref<string[]>([])
+const tileCategories = ref<Map<string, string>>(new Map())
+const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null)
 
 const uniqueTags = computed(() => {
   const allTags = zoneEditorStore.tileList.flatMap((tile) => tile.tags || [])
   return Array.from(new Set(allTags))
 })
 
-const filteredTiles = computed(() => {
-  return zoneEditorStore.tileList.filter((tile) => {
+const groupedTiles = computed(() => {
+  const groups: { parent: Tile; children: Tile[] }[] = []
+  const filteredTiles = zoneEditorStore.tileList.filter((tile) => {
     const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())
     const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag)))
     return matchesSearch && matchesTags
   })
+
+  filteredTiles.forEach((tile) => {
+    const parentGroup = groups.find((group) => areTilesRelated(group.parent, tile))
+    if (parentGroup && parentGroup.parent.id !== tile.id) {
+      parentGroup.children.push(tile)
+    } else {
+      groups.push({ parent: tile, children: [] })
+    }
+  })
+
+  return groups
 })
 
+const tileColorData = ref<Map<string, { r: number; g: number; b: number }>>(new Map())
+const tileEdgeData = ref<Map<string, number>>(new Map())
+
+function areTilesRelated(tile1: Tile, tile2: Tile): boolean {
+  const colorSimilarityThreshold = 30 // Adjust this value as needed
+  const edgeComplexitySimilarityThreshold = 20 // Adjust this value as needed
+
+  const color1 = tileColorData.value.get(tile1.id)
+  const color2 = tileColorData.value.get(tile2.id)
+  const edge1 = tileEdgeData.value.get(tile1.id)
+  const edge2 = tileEdgeData.value.get(tile2.id)
+
+  if (!color1 || !color2 || edge1 === undefined || edge2 === undefined) {
+    return false
+  }
+
+  const colorDifference = Math.sqrt(Math.pow(color1.r - color2.r, 2) + Math.pow(color1.g - color2.g, 2) + Math.pow(color1.b - color2.b, 2))
+
+  const edgeComplexityDifference = Math.abs(edge1 - edge2)
+
+  const namePrefix1 = tile1.name.split('_')[0]
+  const namePrefix2 = tile2.name.split('_')[0]
+
+  return colorDifference <= colorSimilarityThreshold && edgeComplexityDifference <= edgeComplexitySimilarityThreshold && namePrefix1 === namePrefix2
+}
+
 const toggleTag = (tag: string) => {
   if (selectedTags.value.includes(tag)) {
     selectedTags.value = selectedTags.value.filter((t) => t !== tag)
@@ -77,10 +153,82 @@ const toggleTag = (tag: string) => {
   }
 }
 
+function processTile(tile: Tile) {
+  const img = new Image()
+  img.crossOrigin = 'Anonymous'
+  img.onload = () => {
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    canvas.width = img.width
+    canvas.height = img.height
+    ctx!.drawImage(img, 0, 0, img.width, img.height)
+
+    const imageData = ctx!.getImageData(0, 0, canvas.width, canvas.height)
+    tileColorData.value.set(tile.id, getDominantColor(imageData))
+    tileEdgeData.value.set(tile.id, getEdgeComplexity(imageData))
+  }
+  img.src = `${config.server_endpoint}/assets/tiles/${tile.id}.png`
+}
+
+function getDominantColor(imageData: ImageData) {
+  let r = 0,
+    g = 0,
+    b = 0,
+    total = 0
+  for (let i = 0; i < imageData.data.length; i += 4) {
+    if (imageData.data[i + 3] > 0) {
+      // Only consider non-transparent pixels
+      r += imageData.data[i]
+      g += imageData.data[i + 1]
+      b += imageData.data[i + 2]
+      total++
+    }
+  }
+  return {
+    r: Math.round(r / total),
+    g: Math.round(g / total),
+    b: Math.round(b / total)
+  }
+}
+
+function getEdgeComplexity(imageData: ImageData) {
+  let edgePixels = 0
+  for (let y = 0; y < imageData.height; y++) {
+    for (let x = 0; x < imageData.width; x++) {
+      const i = (y * imageData.width + x) * 4
+      if (imageData.data[i + 3] > 0 && (x === 0 || y === 0 || x === imageData.width - 1 || y === imageData.height - 1 || imageData.data[i - 1] === 0 || imageData.data[i + 7] === 0)) {
+        edgePixels++
+      }
+    }
+  }
+  return edgePixels
+}
+
+function getTileCategory(tile: Tile): string {
+  return tileCategories.value.get(tile.id) || ''
+}
+
+function openGroup(group: { parent: Tile; children: Tile[] }) {
+  selectedGroup.value = group
+}
+
+function closeGroup() {
+  selectedGroup.value = null
+}
+
+function selectTile(tile: Tile) {
+  zoneEditorStore.setSelectedTile(tile)
+}
+
+function isActiveTile(tile: Tile): boolean {
+  return zoneEditorStore.selectedTile?.id === tile.id
+}
+
 onMounted(async () => {
   isModalOpen.value = true
   gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
     zoneEditorStore.setTileList(response)
+    response.forEach((tile) => processTile(tile))
   })
 })
 </script>
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 272e074..7d7629c 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -113,7 +113,7 @@ const isFlippedX = computed(() => [6, 4].includes(props.character.rotation ?? 0)
 
 const charTexture = computed(() => {
   const { rotation, characterType, isMoving } = props.character
-  const spriteId = characterType?.sprite.id ?? 'idle_right_down'
+  const spriteId = characterType?.sprite?.id ?? 'idle_right_down'
   const action = isMoving ? 'walk' : 'idle'
   const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
 
diff --git a/src/main.ts b/src/main.ts
index 50b985c..4993577 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,7 +5,8 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 
 const app = createApp(App)
+const pinia = createPinia()
 
-app.use(createPinia())
+app.use(pinia)
 
 app.mount('#app')