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

src/components/Effects.vue

@@ -1,6 +1,5 @@
 <template>
-  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene">
-  </Scene>
+  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene"> </Scene>
 </template>
 
 <script setup lang="ts">
@@ -12,9 +11,6 @@ import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()
 
-
-
-
 // See if there's a dat
 
 const sceneRef = ref<Phaser.Scene | null>(null)
@@ -53,7 +49,7 @@ const createDayNightCycle = (scene: Phaser.Scene) => {
 const updateDayNightCycle = (time: number) => {
   if (!dayNightCycle.value) return
 
-  const darkness = Math.sin((time % dayNightDuration) / dayNightDuration * Math.PI) * maxDarkness
+  const darkness = Math.sin(((time % dayNightDuration) / dayNightDuration) * Math.PI) * maxDarkness
   dayNightCycle.value.clear()
   dayNightCycle.value.fillStyle(0x000000, darkness)
   dayNightCycle.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
@@ -90,7 +86,7 @@ const createFogEffect = (scene: Phaser.Scene) => {
 const updateFogEffect = () => {
   if (fogSprite.value) {
     // Example: Oscillate fog opacity
-    const fogOpacity = (Math.sin(Date.now() / 5000) + 1) / 2 * 0.3
+    const fogOpacity = ((Math.sin(Date.now() / 5000) + 1) / 2) * 0.3
     fogSprite.value.setAlpha(fogOpacity)
   }
 }

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
-  }
-}
+// 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)
     }
   }
 }

src/components/gui/ExpBar.vue

@@ -1,6 +1,4 @@
-<template>
-
-</template>
+<template></template>
 
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'

src/components/gui/Menu.vue

@@ -53,5 +53,5 @@
 import { useGameStore } from '@/stores/gameStore'
 
 const gameStore = useGameStore()
-let characterLevel = gameStore.character?.level.toString().padStart(2, '0');
+let characterLevel = gameStore.character?.level.toString().padStart(2, '0')
 </script>

src/composables/pointerHandlers/useGamePointerHandlers.ts

@@ -9,7 +9,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
   const dragThreshold = 5 // pixels
 
   function updateWaypoint(worldX: number, worldY: number) {
-    const pointerTile = getTile(worldX, worldY, layer)
+    const pointerTile = getTile(layer, worldX, worldY)
     if (pointerTile) {
       const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
       waypoint.value = {
@@ -46,7 +46,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
     const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
 
     if (distance <= dragThreshold) {
-      const pointerTile = getTile(pointer.worldX, pointer.worldY, layer)
+      const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
       if (pointerTile) {
         gameStore.connection?.emit('character:initMove', {
           positionX: pointerTile.x,

src/composables/pointerHandlers/useZoneEditorPointerHandlers.ts

@@ -11,7 +11,7 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
 
   function updateWaypoint(pointer: Phaser.Input.Pointer) {
     const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
-    const pointerTile = getTile(px, py, layer)
+    const pointerTile = getTile(layer, px, py)
 
     if (pointerTile) {
       const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)

src/composables/zoneComposable.ts

@@ -5,8 +5,8 @@ import Tileset = Phaser.Tilemaps.Tileset
 import Tile = Phaser.Tilemaps.Tile
 import { useGameStore } from '@/stores/gameStore'
 
-export function getTile(x: number, y: number, layer: TilemapLayer): Tile | undefined {
-  const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
+export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
+  const tile = layer.getTileAtWorldXY(x, y)
   if (!tile) return undefined
   return tile
 }
@@ -59,9 +59,7 @@ export const sortByIsometricDepth = <T extends { positionX: number; positionY: n
   })
 }
 
-export const clearAssets = (scene: Phaser.Scene) => {
-
-}
+export const clearAssets = (scene: Phaser.Scene) => {}
 
 export const loadAssets = (scene: Phaser.Scene): Promise<void> => {
   return new Promise((resolve) => {

src/screens/Characters.vue

@@ -5,12 +5,7 @@
       <div class="filler"></div>
       <div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
         <!-- CHARACTER LIST -->
-        <div
-          v-for="character in characters"
-          :key="character.id"
-          class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character"
-          :class="{ active: selected_character == character.id }"
-        >
+        <div v-for="character in characters" :key="character.id" class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character" :class="{ active: selected_character == character.id }">
           <img src="/assets/ui-box-outer.svg" class="absolute w-full h-full" />
           <img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
           <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
@@ -93,8 +88,9 @@
       <h3 class="m-0 font-medium text-white">Delete character?</h3>
     </template>
     <template #modalBody>
-      <p class="mt-0 mb-5 text-white text-lg">Do you want to permanently delete 
-        <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span>?
+      <p class="mt-0 mb-5 text-white text-lg">
+        Do you want to permanently delete <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span
+        >?
       </p>
     </template>
   </ConfirmationModal>

src/stores/zoneEditorStore.ts

@@ -22,7 +22,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       objectList: [] as Object[],
       selectedTile: null as Tile | null,
       selectedObject: null as Object | null,
-      selectedZoneObject: null as ZoneObject | null,
       objectDepth: 0,
       isTileListModalShown: false,
       isObjectListModalShown: false,
@@ -95,9 +94,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
     setSelectedObject(object: any) {
       this.selectedObject = object
     },
-    setSelectedZoneObject(zoneObject: ZoneObject | null) {
-      this.selectedZoneObject = zoneObject
-    },
     setObjectDepth(depth: number) {
       this.objectDepth = depth
     },
@@ -123,7 +119,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       this.drawMode = 'tile'
       this.selectedTile = null
       this.selectedObject = null
-      this.selectedZoneObject = null
       this.objectDepth = 0
       this.isSettingsModalShown = false
       this.isZoneListModalShown = false