zoneEditor UX improvements

package-lock.json

@@ -3385,9 +3385,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.12",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.12.tgz",
-      "integrity": "sha512-tIhPkdlEoCL1Y+PToq3zRNehUaKp3wBX/sr7aclAWdIWjvqAe/Im/H0SiCM4c1Q8BLPHCdoJTol+ZblflydehA==",
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz",
+      "integrity": "sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q==",
       "dev": true,
       "license": "ISC"
     },
@@ -4310,9 +4310,9 @@
       }
     },
     "node_modules/i18next-http-backend": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.6.0.tgz",
-      "integrity": "sha512-WX5pXYNrAz2fj8ajsAuCIsogOEvJL+aHw4RTQAD/uqPoLV1FHqa6IsUULTfa3GtREVQbApp0U3woLhz9EuR2pQ==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.6.1.tgz",
+      "integrity": "sha512-rCilMAnlEQNeKOZY1+x8wLM5IpYOj10guGvEpeC59tNjj6MMreLIjIW8D1RclhD3ifLwn6d/Y9HEM1RUE6DSog==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -23,8 +23,8 @@
 
   <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
   <SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="() => console.log('lol')" />
-  <Tiles v-if="(zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
-  <Objects v-if="zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'object'" />
+  <Tiles v-if="zoneEditorStore.isTileListModalShown" />
+  <Objects v-if="zoneEditorStore.isObjectListModalShown" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
   <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
 </template>
@@ -36,13 +36,13 @@ import { onBeforeMount, onBeforeUnmount, ref, toRaw, computed, watch } from 'vue
 import Controls from '@/components/utilities/Controls.vue'
 import { useGameStore } from '@/stores/game'
 import Toolbar from '@/components/utilities/zoneEditor/partials/Toolbar.vue'
-import Tiles from '@/components/utilities/zoneEditor/partials/Tiles.vue'
+import Tiles from '@/components/utilities/zoneEditor/partials/TileList.vue'
 import SelectedZoneObject from '@/components/utilities/zoneEditor/partials/SelectedZoneObject.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import ZoneSettings from '@/components/utilities/zoneEditor/partials/ZoneSettings.vue'
 import { calculateDepth, placeTile, setAllTiles, tileToWorldX, tileToWorldY, sortByDepth } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
-import Objects from '@/components/utilities/zoneEditor/partials/Objects.vue'
+import Objects from '@/components/utilities/zoneEditor/partials/ObjectList.vue'
 import type { ZoneEventTile, ZoneObject } from '@/types'
 import { storeToRefs } from 'pinia'
 import ZoneList from '@/components/utilities/zoneEditor/partials/ZoneList.vue'

src/components/utilities/zoneEditor/partials/ObjectList.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.isObjectListModalShown = false" :isModalOpen="true" :modal-width="645" :modal-height="260">
       <template #modalHeader>
         <h3 class="text-lg">Objects</h3>
         <div class="flex">

src/components/utilities/zoneEditor/partials/TileList.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="600">
+    <Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.isTileListModalShown = false" :isModalOpen="true" :modal-width="645" :modal-height="600">
       <template #modalHeader>
         <h3 class="text-lg">Tiles</h3>
         <div class="flex">

src/components/utilities/zoneEditor/partials/Toolbar.vue

@@ -104,6 +104,12 @@ let selectEraserOpen = ref(false)
 
 // drawMode
 function setDrawMode(value: string) {
+  if (value === 'tile') {
+    zoneEditorStore.isTileListModalShown = true
+  }
+  if (value === 'object') {
+    zoneEditorStore.isObjectListModalShown = true
+  }
   zoneEditorStore.setDrawMode(value)
   selectPencilOpen.value = false
   selectEraserOpen.value = false

src/composables/usePointerHandlers.ts

@@ -1,5 +1,5 @@
 import config from '@/config'
-import { computed, ref, type Ref, watch } from 'vue'
+import { computed, type Ref, watch } from 'vue'
 import { getTile, tileToWorldXY } from '@/services/zone'
 import { useGameStore } from '@/stores/game'
 import { useZoneEditorStore } from '@/stores/zoneEditor'

src/config.ts

@@ -1,4 +1,4 @@
-const dev: boolean = false
+const dev: boolean = true
 
 export default {
   name: 'New Quest',

src/stores/zoneEditor.ts

@@ -15,6 +15,8 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     selectedObject: null as Object | null,
     selectedZoneObject: null as ZoneObject | null,
     objectDepth: 0,
+    isTileListModalShown: false,
+    isObjectListModalShown: false,
     isZoneListModalShown: false,
     isCreateZoneModalShown: false,
     isSettingsModalShown: false