From 89a781470bc27513354c0d76160d35899ee5faef Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 7 Jul 2024 04:32:16 +0200
Subject: [PATCH] Small styling adjustment on buttons. Some zone editor stuff.

---
 src/assets/scss/main.scss                     |  4 +-
 .../utilities/assetManager/AssetManager.vue   |  2 +-
 .../assetManager/partials/ObjectList.vue      |  3 +-
 .../assetManager/partials/TileList.vue        | 18 ++++-----
 .../utilities/zoneEditor/ZoneEditor.vue       |  4 +-
 .../utilities/zoneEditor/ZoneList.vue         | 16 +++++---
 src/stores/zoneEditor.ts                      | 37 ++++++++++---------
 7 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 0bbfb3a..750e720 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -68,7 +68,7 @@ button {
   @apply text-center;
 
   &.btn-cyan {
-    @apply bg-cyan bg-opacity-50 border border-solid border-white rounded drop-shadow-20;
+    @apply bg-cyan bg-opacity-50 border border-solid border-white border-opacity-25 rounded drop-shadow-20;
 
     &.active,
     &:hover {
@@ -77,7 +77,7 @@ button {
   }
 
   &.btn-bordeaux {
-    @apply bg-bordeaux bg-opacity-50 border border-solid border-white rounded drop-shadow-20;
+    @apply bg-bordeaux bg-opacity-50 border border-solid border-white border-opacity-25 rounded drop-shadow-20;
 
     &.active,
     &:hover {
diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index 00964c7..e4ec3a8 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -24,7 +24,7 @@
     <!-- Assets list -->
     <div class="overflow-auto h-full w-[35%] flex flex-col relative" ref="elementToScroll" @scroll="onScroll">
       <TileList v-if="selectedCategory === 'tiles'" />
-      <ObjectList :name="selectedCategory" v-if="selectedCategory === 'objects'" />
+      <ObjectList v-if="selectedCategory === 'objects'" />
     </div>
 
     <button class="left-[calc(50%_-_60px)] absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan bg-opacity-50 p-0 hover:bg-opacity-80" v-show="hasScrolled" @click="toTop">
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index 6b220d5..be331f1 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -12,7 +12,7 @@
       <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
         <img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />
       </div>
-      <span class="flex-shrink-0">{{ object.name }}</span>
+      <span>{{ object.name }}</span>
     </div>
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </a>
@@ -64,7 +64,6 @@ const filteredObjects = computed(() => {
 
 onMounted(() => {
   socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
-    if (config.development) console.log(response)
     assetManagerStore.setObjectList(response)
   })
 })
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 8cca73e..2de7bc8 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -7,14 +7,15 @@
     <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
     <div class="absolute left-0 bottom-0 w-full height-[1px] bg-cyan-200"></div>
   </div>
-  <a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
-    <div class="flex items-center gap-2.5">
-      <!--      TODO make all img have same width so text aligns nicely -->
-      <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
-      <span class="flex-shrink-0">{{ tile }}</span>
-    </div>
-    <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
-  </a>
+  <div>
+    <a class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap w-full" :class="{ 'bg-cyan bg-opacity-80': assetManagerStore.selectedTile === tile }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile)">
+      <div class="flex items-center gap-2.5">
+        <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" />
+        <span class="">{{ tile }}</span>
+      </div>
+      <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+    </a>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -62,7 +63,6 @@ const filteredTiles = computed(() => {
 
 onMounted(() => {
   socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-    if (config.development) console.log(response)
     assetManagerStore.setTileList(response)
   })
 })
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index 57dab16..2f6807a 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/src/components/utilities/zoneEditor/ZoneEditor.vue
@@ -104,13 +104,13 @@ function paint(tile: Phaser.Tilemaps.Tile) {
 }
 
 function save() {
+  if (!zoneEditorStore.name) return
   socket.connection.emit('gm:zone_editor:zone:update', {
     zoneId: socket.character.zoneId,
     name: zoneEditorStore.name,
     width: zoneEditorStore.width,
     height: zoneEditorStore.height,
-    tiles: zoneEditorStore.tiles,
-    objects: zoneEditorStore.objects
+    tiles: tiles.gidMap,
   })
 }
 
diff --git a/src/components/utilities/zoneEditor/ZoneList.vue b/src/components/utilities/zoneEditor/ZoneList.vue
index 14336d9..4737473 100644
--- a/src/components/utilities/zoneEditor/ZoneList.vue
+++ b/src/components/utilities/zoneEditor/ZoneList.vue
@@ -2,7 +2,7 @@
   <CreateZone @submit="fetchZones" v-if="zoneEditorStore.isCreateZoneModalShown" />
 
   <Teleport to="body">
-    <Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="200" :modal-height="360">
+    <Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="300" :modal-height="360">
       <template #modalHeader>
         <h3 class="text-lg">Zones</h3>
       </template>
@@ -13,10 +13,9 @@
           </div>
           <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zones" :key="zone.id">
             <div class="absolute left-0 top-0 w-full h-[1px] bg-cyan-200" v-if="index === 0"></div>
-            <div class="flex items-center">
-              <span>{{ zone.name }}</span>
-              <!--              @TODO : BUG , ml-auto no work -->
-              <span class="ml-auto">
+            <div class="flex gap-3 items-center w-full">
+              <span @click="() => loadZone(zone.id)">{{ zone.name }}</span>
+              <span class="ml-auto gap-1 flex">
                 <button class="btn-bordeaux py-0.5 px-2.5" @click="() => deleteZone(zone.id)">X</button>
               </span>
             </div>
@@ -50,6 +49,13 @@ function fetchZones() {
   })
 }
 
+function loadZone(id: number) {
+  console.log('loadZone', id)
+  socket.connection.emit('gm:zone_editor:zone:load', { zoneId: id }, () => {
+    zoneEditorStore.toggleZoneListModal()
+  })
+}
+
 function deleteZone(id: number) {
   socket.connection.emit('gm:zone_editor:zone:delete', { zoneId: id }, () => {
     fetchZones()
diff --git a/src/stores/zoneEditor.ts b/src/stores/zoneEditor.ts
index b3d7c17..4cd54a3 100644
--- a/src/stores/zoneEditor.ts
+++ b/src/stores/zoneEditor.ts
@@ -4,32 +4,26 @@ import type { Object, ZoneObject } from '@/types'
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => ({
     active: true,
-    isZoneListModalShown: false,
-    isCreateZoneModalShown: false,
     name: '',
     width: 10,
     height: 10,
+    tool: 'move',
+    drawMode: 'tile',
     tileList: [] as string[],
     tiles: [] as string[][],
     objectList: [] as Object[],
     objects: [] as ZoneObject[],
-    tool: 'move',
-    drawMode: 'tile',
+
     selectedTile: '',
     selectedObject: null as Object | null,
+    isZoneListModalShown: false,
+    isCreateZoneModalShown: false,
     isSettingsModalShown: false
   }),
   actions: {
     toggleActive() {
       this.active = !this.active
     },
-    toggleZoneListModal() {
-      this.isZoneListModalShown = !this.isZoneListModalShown
-      this.isCreateZoneModalShown = false
-    },
-    toggleCreateZoneModal() {
-      this.isCreateZoneModalShown = !this.isCreateZoneModalShown
-    },
     setName(name: string) {
       this.name = name
     },
@@ -39,6 +33,12 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setHeight(height: number) {
       this.height = height
     },
+    setTool(tool: string) {
+      this.tool = tool
+    },
+    setDrawMode(mode: string) {
+      this.drawMode = mode
+    },
     setTileList(tiles: string[]) {
       this.tileList = tiles
     },
@@ -57,12 +57,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     updateObject(index: number, object: ZoneObject) {
       this.objects[index] = object
     },
-    setTool(tool: string) {
-      this.tool = tool
-    },
-    setDrawMode(mode: string) {
-      this.drawMode = mode
-    },
     setSelectedTile(tile: string) {
       this.selectedTile = tile
     },
@@ -72,6 +66,13 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     toggleSettingsModal() {
       this.isSettingsModalShown = !this.isSettingsModalShown
     },
+    toggleZoneListModal() {
+      this.isZoneListModalShown = !this.isZoneListModalShown
+      this.isCreateZoneModalShown = false
+    },
+    toggleCreateZoneModal() {
+      this.isCreateZoneModalShown = !this.isCreateZoneModalShown
+    },
     reset() {
       this.name = ''
       this.width = 10
@@ -85,6 +86,8 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.selectedTile = ''
       this.selectedObject = null
       this.isSettingsModalShown = false
+      this.isZoneListModalShown = false
+      this.isCreateZoneModalShown = false
     }
   }
 })