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)
   }
 }
@@ -111,4 +107,4 @@ defineExpose(controlEffects)
 onBeforeUnmount(() => {
   if (sceneRef.value) sceneRef.value.scene.remove('effects')
 })
-</script>
+</script>

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

src/components/gui/Chat.vue

@@ -2,7 +2,7 @@
   <div class="w-full md:min-w-[350px] max-w-[750px] flex flex-col absolute left-1/2 -translate-x-1/2 bottom-5">
     <div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray rounded-md border-2 border-solid border-gray-500 text-gray-300" v-show="gameStore.uiSettings.isChatOpen">
       <div v-for="message in chats" class="flex-col py-2 items-center p-3">
-        <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm" :class="{'text-cyan-300': gameStore.character?.role == 'gm'}">{{ message.character.name }}</span>
+        <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm" :class="{ 'text-cyan-300': gameStore.character?.role == 'gm' }">{{ message.character.name }}</span>
         <p class="text-gray-50 m-0">{{ message.message }}</p>
       </div>
     </div>

src/components/gui/ExpBar.vue

@@ -1,9 +1,7 @@
-<template>
-
-</template>
+<template></template>
 
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 
 const gameStore = useGameStore()
-</script>
+</script>

src/components/gui/Keybindings.vue

@@ -1,48 +1,48 @@
 <template>
-    <div class="absolute left-[300px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F1</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f1-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[346px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F2</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f2-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[392px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F3</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f3-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[438px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F4</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f4-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[484px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F5</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f5-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[530px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F6</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f6-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[576px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F7</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f7-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[622px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F8</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f8-icon.png')] bg-no-repeat"></div>
-    </div>
+  <div class="absolute left-[300px] top-4">
+    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+    <span class="z-10 text-pixel absolute top-1 left-2">F1</span>
+    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f1-icon.png')] bg-no-repeat"></div>
+  </div>
+  <div class="absolute left-[346px] top-4">
+    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+    <span class="z-10 text-pixel absolute top-1 left-2">F2</span>
+    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f2-icon.png')] bg-no-repeat"></div>
+  </div>
+  <div class="absolute left-[392px] top-4">
+    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+    <span class="z-10 text-pixel absolute top-1 left-2">F3</span>
+    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f3-icon.png')] bg-no-repeat"></div>
+  </div>
+  <div class="absolute left-[438px] top-4">
+    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+    <span class="z-10 text-pixel absolute top-1 left-2">F4</span>
+    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f4-icon.png')] bg-no-repeat"></div>
+  </div>
+  <div class="absolute left-[484px] top-4">
+    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+    <span class="z-10 text-pixel absolute top-1 left-2">F5</span>
+    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f5-icon.png')] bg-no-repeat"></div>
+  </div>
+  <div class="absolute left-[530px] top-4">
+    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+    <span class="z-10 text-pixel absolute top-1 left-2">F6</span>
+    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f6-icon.png')] bg-no-repeat"></div>
+  </div>
+  <div class="absolute left-[576px] top-4">
+    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+    <span class="z-10 text-pixel absolute top-1 left-2">F7</span>
+    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f7-icon.png')] bg-no-repeat"></div>
+  </div>
+  <div class="absolute left-[622px] top-4">
+    <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+    <span class="z-10 text-pixel absolute top-1 left-2">F8</span>
+    <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f8-icon.png')] bg-no-repeat"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 
 const gameStore = useGameStore()
-</script>
+</script>

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/components/gui/Minimap.vue

@@ -1,23 +1,23 @@
 <template>
-    <div class="absolute top-4 right-4">
-        <div class="w-40 h-40 rounded-full border border-solid border-gray-500 bg-[url('/assets/ui-texture.png')] bg-no-repeat">
-            <div class="w-40 h-40 rounded-full shadow-inner"></div>
-        </div>
-        <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
-            <button class="w-6 h-6 relative p-0">
-                <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/plus-icon.svg" />
-                <img class="w-full h-full" src="/assets/ui-border-4-corners.svg" />
-            </button>
-            <button class="w-6 h-6 relative p-0">
-                <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/minus-icon.svg" />
-                <img class="w-full h-full" src="/assets/ui-border-4-corners.svg" />
-            </button>
-        </div>
+  <div class="absolute top-4 right-4">
+    <div class="w-40 h-40 rounded-full border border-solid border-gray-500 bg-[url('/assets/ui-texture.png')] bg-no-repeat">
+      <div class="w-40 h-40 rounded-full shadow-inner"></div>
     </div>
+    <div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
+      <button class="w-6 h-6 relative p-0">
+        <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/plus-icon.svg" />
+        <img class="w-full h-full" src="/assets/ui-border-4-corners.svg" />
+      </button>
+      <button class="w-6 h-6 relative p-0">
+        <img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/minus-icon.svg" />
+        <img class="w-full h-full" src="/assets/ui-border-4-corners.svg" />
+      </button>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 
 const gameStore = useGameStore()
-</script>
+</script>