From abe58961ba7310c342750c2c2800c8b49c1ae981 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Tue, 9 Jul 2024 23:43:53 +0200
Subject: [PATCH] npm update, removed spacing around zone editor toolbar for
 better UX, added search logic in objects list

---
 package-lock.json                             | 52 ++++++++-----------
 .../utilities/zoneEditor/Objects.vue          | 25 +++++++--
 .../utilities/zoneEditor/Toolbar.vue          |  4 +-
 .../utilities/zoneEditor/ZoneEditor.vue       |  1 +
 src/types.ts                                  |  2 +-
 5 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3bd1ab8..e9a2e59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1392,9 +1392,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -2945,9 +2945,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.23.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.1.tgz",
-      "integrity": "sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==",
+      "version": "4.23.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
+      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
       "dev": true,
       "funding": [
         {
@@ -2965,10 +2965,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001629",
-        "electron-to-chromium": "^1.4.796",
+        "caniuse-lite": "^1.0.30001640",
+        "electron-to-chromium": "^1.4.820",
         "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.0.16"
+        "update-browserslist-db": "^1.1.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -3540,9 +3540,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.818",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.818.tgz",
-      "integrity": "sha512-eGvIk2V0dGImV9gWLq8fDfTTsCAeMDwZqEPMr+jMInxZdnp9Us8UpovYpRCf9NQ7VOFgrN2doNSgvISbsbNpxA==",
+      "version": "1.4.820",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.820.tgz",
+      "integrity": "sha512-kK/4O/YunacfboFEk/BDf7VO1HoPmDudLTJAU9NmXIOSjsV7qVIX3OrI4REZo0VmdqhcpUcncQc6N8Q3aEXlHg==",
       "dev": true,
       "license": "ISC"
     },
@@ -4246,9 +4246,9 @@
       }
     },
     "node_modules/glob": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.3.tgz",
-      "integrity": "sha512-Q38SGlYRpVtDBPSWEylRyctn7uDeTp4NQERTLiCT1FqA9JXPYWqAVmQU6qh4r/zMM5ehxTcbaO8EjhWnvEhmyg==",
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -4262,9 +4262,6 @@
       "bin": {
         "glob": "dist/esm/bin.mjs"
       },
-      "engines": {
-        "node": ">=18"
-      },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
@@ -4761,16 +4758,16 @@
       "license": "ISC"
     },
     "node_modules/jackspeak": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.1.tgz",
-      "integrity": "sha512-U23pQPDnmYybVkYjObcuYMk43VRlMLLqLI+RdZy8s8WV8WsxO9SnqSroKaluuvcNOdCAlauKszDwd+umbot5Mg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.2.tgz",
+      "integrity": "sha512-qH3nOSj8q/8+Eg8LUPOq3C+6HWkpUioIjDsq1+D4zY91oZvpPttw8GwtF1nReRYKXl+1AORyFqtm2f5Q1SB6/Q==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
       "engines": {
-        "node": ">=18"
+        "node": "14 >=14.21 || 16 >=16.20 || >=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -5099,14 +5096,11 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.0.tgz",
-      "integrity": "sha512-bfJaPTuEiTYBu+ulDaeQ0F+uLmlfFkMgXj4cbwfuMSjgObGMzb55FMMbDvbRU0fAHZ4sLGkz2mKwcMg8Dvm8Ww==",
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=18"
-      }
+      "license": "ISC"
     },
     "node_modules/magic-string": {
       "version": "0.30.10",
diff --git a/src/components/utilities/zoneEditor/Objects.vue b/src/components/utilities/zoneEditor/Objects.vue
index 6a00646..6288ffd 100644
--- a/src/components/utilities/zoneEditor/Objects.vue
+++ b/src/components/utilities/zoneEditor/Objects.vue
@@ -7,7 +7,14 @@
           <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-cyan" type="text" name="search" placeholder="Search" />
+              <input
+                @mousedown.stop
+                class="input-cyan"
+                type="text"
+                name="search"
+                placeholder="Search"
+                v-model="searchQuery"
+              />
             </div>
             <div>
               <label class="mb-1.5 font-titles hidden" for="z-index">Z-index</label>
@@ -19,7 +26,7 @@
       <template #modalBody>
         <div class="m-[15px]">
           <div class="flex justify-between flex-wrap gap-2.5 items-center">
-            <div v-for="(object, index) in zoneEditorStore.objectList" :key="index" class="max-w-[25%] inline-block">
+            <div v-for="(object, index) in filteredObjects" :key="index" class="max-w-[25%] inline-block">
               <img
                 class="border-2 border-solid max-w-full"
                 :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
@@ -41,7 +48,7 @@
 
 <script setup lang="ts">
 import config from '@/config'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useSocketStore } from '@/stores/socket'
 import Modal from '@/components/utilities/Modal.vue'
@@ -50,6 +57,16 @@ import type { Object } from '@/types'
 const socket = useSocketStore()
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
+const searchQuery = ref('')
+
+const filteredObjects = computed(() => {
+  if (!searchQuery.value) {
+    return zoneEditorStore.objectList
+  }
+  return zoneEditorStore.objectList.filter(object =>
+    object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
+})
 
 onMounted(async () => {
   isModalOpen.value = true
@@ -57,4 +74,4 @@ onMounted(async () => {
     zoneEditorStore.setObjectList(response)
   })
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue
index b3ff026..8cc533d 100644
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex justify-center m-2.5">
-    <div class="toolbar fixed top-5 rounded flex bg-gray-300 bg-opacity-80 border-2 border-solid border-cyan text-gray-50 p-1.5 pl-2.5 min-w-[90%] h-10">
+  <div class="flex justify-center">
+    <div class="toolbar fixed top-0 left-0 right-0 flex bg-gray-300 bg-opacity-80 solid border-solid border-b-2 border-b-cyan border-t-0 border-r-0 border-l-0 text-gray-50 p-1.5 px-3 p min-w-[90%] h-10">
       <div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index d895397..d60e36f 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/src/components/utilities/zoneEditor/ZoneEditor.vue
@@ -139,6 +139,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
       id: Math.random(),
       zoneId: zoneEditorStore.zone.id,
       zone: zoneEditorStore.zone,
+      type: 'BLOCK',
       position_x: tile.x,
       position_y: tile.y
     })
diff --git a/src/types.ts b/src/types.ts
index a12bde5..2d564fc 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -98,7 +98,7 @@ export type ZoneEventTile = {
   id: number
   zoneId: number
   zone: Zone
-  type: "WARP" | "NPC" | "ITEM"
+  type: "BLOCK" | "WARP" | "NPC" | "ITEM"
   position_x: number
   position_y: number
 }