#102 - Various zone editor UX improvements and bug fixes

package-lock.json

@@ -3365,9 +3365,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.22",
+      "version": "1.5.23",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.22.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.23.tgz",
-      "integrity": "sha512-tKYm5YHPU1djz0O+CGJ+oJIvimtsCcwR2Z9w7Skh08lUdyzXY5djods3q+z2JkWdb7tCcmM//eVavSRAiaPRNg==",
+      "integrity": "sha512-mBhODedOXg4v5QWwl21DjM5amzjmI1zw9EPrPK/5Wx7C8jt33bpZNrC7OhHUG3pxRtbLpr3W2dXT+Ph1SsfRZA==",
       "dev": true,
       "license": "ISC"
     },
@@ -5145,9 +5145,9 @@
       }
     },
     "node_modules/npm-run-all2": {
-      "version": "6.2.2",
+      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-6.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-6.2.3.tgz",
-      "integrity": "sha512-Q+alQAGIW7ZhKcxLt8GcSi3h3ryheD6xnmXahkMRVM5LYmajcUrSITm8h+OPC9RYWMV2GR0Q1ntTUCfxaNoOJw==",
+      "integrity": "sha512-5RsxC7jEc/RjxOYBVdEfrJf5FsJ0pHA7jr2/OxrThXknajETCTYjigOCG3iaGjdYIKEQlDuCG0ir0T1HTva8pg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -3,7 +3,7 @@
   <Controls :layer="tiles as TilemapLayer" />
 
   <Container :depth="2">
-    <Image v-for="object in sortedZoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => zoneEditorStore.setSelectedZoneObject(object)" />
+    <Image v-for="object in sortedZoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => setSelectedZoneObject(object)" />
   </Container>
 
   <Container :depth="3">
@@ -123,6 +123,10 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
 }
 
 function addZoneObject(tile: Phaser.Tilemaps.Tile) {
+  // Check if object already exists on position
+  const existingObject = zoneObjects.value.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (existingObject) return
+
   const newObject = {
     id: uuidv4(),
     zoneId: zone.value!.id,
@@ -137,6 +141,10 @@ function addZoneObject(tile: Phaser.Tilemaps.Tile) {
 }
 
 function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
+  // Check if event tile already exists on position
+  const existingEventTile = zoneEventTiles.value.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  if (existingEventTile) return
+
   const newEventTile = {
     id: uuidv4(),
     zoneId: zone.value!.id,
@@ -263,4 +271,11 @@ watch(
   },
   { deep: true }
 )
+
+const setSelectedZoneObject = (zoneObject: ZoneObject | null) => {
+  if (!zoneObject) return
+  // Check if tool is move or return
+  if (zoneEditorStore.tool !== 'move') return
+  zoneEditorStore.setSelectedZoneObject(zoneObject)
+}
 </script>

src/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-center p-5 fixed bottom-6 mx-6 right-0">
+  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
     <div class="self-end mt-2 flex gap-2">
       <div>
         <label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
@@ -33,7 +33,7 @@ watch(
 )
 
 const handleDepthInput = () => {
-  const depth = parseFloat(objectDepth.value)
+  const depth = parseFloat(objectDepth.value.toString())
   if (!isNaN(depth)) {
     emit('update_depth', depth)
   }

src/config.ts

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

src/screens/Characters.vue

@@ -78,16 +78,7 @@
     </template>
 
     <template #modalBody>
-      <div class="m-4 character-form">
+
-        <form method="post" @submit.prevent="create" class="inline">
-          <div class="form-field-full">
-            <label for="name">Name</label>
-            <input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
-          </div>
-          <button class="btn-cyan py-1.5 px-4 mr-5 min-w-24 inline-block" type="submit">CREATE</button>
-        </form>
-        <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="isModalOpen = false">CANCEL</button>
-      </div>
     </template>
   </Modal>
 </template>

src/stores/zoneEditor.ts

@@ -85,7 +85,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setSelectedObject(object: any) {
       this.selectedObject = object
     },
-    setSelectedZoneObject(zoneObject: ZoneObject) {
+    setSelectedZoneObject(zoneObject: ZoneObject | null) {
       const gameStore = useGameStore() // Access the gameStore
       if (gameStore.isMovingCamera) return // Step 2: Check isMovingCamera before proceeding