Reordered func. params getTile(), npm run format, refactor zone object part in zone editor, other improvements

src/components/gameMaster/zoneEditor/EventTiles.vue

@@ -1,18 +1,14 @@
-<template>
-
-</template>
+<template></template>
 
 <script setup lang="ts">
-
-
 import type { ZoneEventTile } from '@/types'
 import { tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 
-function getEventTileImageProps(tile: ZoneEventTile) {
-  return {
-    x: tileToWorldX(zoneTilemap as any, tile.positionX, tile.positionY),
-    y: tileToWorldY(zoneTilemap as any, tile.positionX, tile.positionY),
-    texture: tile.type
-  }
-}
-</script>
+// function getEventTileImageProps(tile: ZoneEventTile) {
+//   return {
+//     x: tileToWorldX(zoneTilemap as any, tile.positionX, tile.positionY),
+//     y: tileToWorldY(zoneTilemap as any, tile.positionX, tile.positionY),
+//     texture: tile.type
+//   }
+// }
+</script>

src/components/gameMaster/zoneEditor/Objects.vue

@@ -1,17 +1,20 @@
 <template>
-  <SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" />
+  <SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" />
   <Image v-for="object in zoneEditorStore.zone?.zoneObjects" :key="object.id" v-bind="getObjectImageProps(object)" />
 </template>
 
 <script setup lang="ts">
-import { tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
-import { Image } from 'phavuer'
+import { uuidv4 } from '@/utilities'
+import { calculateIsometricDepth, getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { Image, useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import type { ZoneObject } from '@/types'
-import { ZoneEventTileType } from '@/types'
 import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
+import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
 
+const scene = useScene()
 const zoneEditorStore = useZoneEditorStore()
+const selectedZoneObject = ref<ZoneObject | null>(null)
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
@@ -20,7 +23,8 @@ const props = defineProps<{
 function getObjectImageProps(object: ZoneObject) {
   return {
     // alpha: object.id === movingZoneObject.value?.id ? .5 : 1,
-    tint: zoneEditorStore.selectedZoneObject?.id === object.id ? 0x00ff00 : 0xffffff,
+    depth: calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight),
+    tint: selectedZoneObject?.id === object.id ? 0x00ff00 : 0xffffff,
     x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
     y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
     texture: object.object.id,
@@ -28,4 +32,52 @@ function getObjectImageProps(object: ZoneObject) {
     originX: Number(object.object.originY)
   }
 }
+
+function addZoneObject(pointer: Phaser.Input.Pointer) {
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is object
+  if (zoneEditorStore.drawMode !== 'object') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if there is a tile @TODO chekc if props.tilemap words
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if there is a selected object
+  if (!zoneEditorStore.selectedObject) return
+
+  // Check if object already exists on position
+  const existingObject = zoneEditorStore.zone?.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (existingObject) return
+
+  const newObject = {
+    id: uuidv4(),
+    zoneId: zoneEditorStore.zone.id,
+    zone: zoneEditorStore.zone,
+    object: zoneEditorStore.selectedObject,
+    depth: 0,
+    isRotated: false,
+    positionX: tile.x,
+    positionY: tile.y
+  }
+
+  // Add new object to zoneObjects
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObject)
+}
+
+onBeforeMount(() => {
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, addZoneObject)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, addZoneObject)
+})
+
+onBeforeUnmount(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, addZoneObject)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, addZoneObject)
+})
 </script>

src/components/gameMaster/zoneEditor/Tiles.vue

@@ -13,9 +13,9 @@ import Controls from '@/components/utilities/Controls.vue'
 
 const emit = defineEmits(['tilemap:create'])
 
+const scene = useScene()
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
-const scene = useScene()
 
 const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
@@ -55,11 +55,14 @@ function handleTileClick(pointer: Phaser.Input.Pointer) {
   // Check if tool is pencil
   if (zoneEditorStore.tool !== 'pencil') return
 
+  // Check if draw mode is tile
+  if (zoneEditorStore.drawMode !== 'tile') return
+
   // Check if left mouse button is pressed
   if (!pointer.isDown) return
 
   // Check if there is a tile
-  const tile = getTile(pointer.worldX, pointer.worldY, tiles)
+  const tile = getTile(tiles, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Check if there is a selected tile

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0" v-if="zoneEditorStore.selectedZoneObject">
+  <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>
@@ -42,7 +42,7 @@ const handleRotate = () => {
 }
 
 const handleMove = () => {
-  emit('move', zoneEditorStore.selectedZoneObject?.id);
+  emit('move', zoneEditorStore.selectedZoneObject?.id)
 }
 
 const handleDelete = () => {

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

@@ -88,7 +88,7 @@ import { onClickOutside } from '@vueuse/core'
 
 const zoneEditorStore = useZoneEditorStore()
 
-const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
+const emit = defineEmits(['save', 'clear'])
 
 // track when clicked outside of toolbar items
 const toolbar = ref(null)
@@ -124,16 +124,16 @@ function handleClick(tool: string) {
 }
 
 function cycleToolMode(tool: 'pencil' | 'eraser') {
-  const modes = ['tile', 'object', 'teleport', 'blocking tile'];
-  const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode;
-  const currentIndex = modes.indexOf(currentMode);
-  const nextIndex = (currentIndex + 1) % modes.length;
-  const nextMode = modes[nextIndex];
+  const modes = ['tile', 'object', 'teleport', 'blocking tile']
+  const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode
+  const currentIndex = modes.indexOf(currentMode)
+  const nextIndex = (currentIndex + 1) % modes.length
+  const nextMode = modes[nextIndex]
 
   if (tool === 'pencil') {
-    setDrawMode(nextMode);
+    setDrawMode(nextMode)
   } else {
-    setEraserMode(nextMode);
+    setEraserMode(nextMode)
   }
 }
 
@@ -151,11 +151,11 @@ function initKeyShortcuts(event: KeyboardEvent) {
   }
 
   if (keyActions.hasOwnProperty(event.key)) {
-    const tool = keyActions[event.key];
+    const tool = keyActions[event.key]
     if ((tool === 'pencil' || tool === 'eraser') && zoneEditorStore.tool === tool) {
-      cycleToolMode(tool);
+      cycleToolMode(tool)
     } else {
-      handleClick(tool);
+      handleClick(tool)
     }
   }
 }