Removed redundant code , refactor event tile code

src/components/gameMaster/zoneEditor/EventTiles.vue

@@ -1,14 +1,81 @@
-<template></template>
+<template>
+  <Image v-for="tile in zoneEditorStore.zone?.zoneEventTiles" v-bind="getEventTileImageProps(tile)" />
+</template>
 
 <script setup lang="ts">
-import type { ZoneEventTile } from '@/types'
-import { tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { type ZoneEventTile, ZoneEventTileType, type ZoneObject } from '@/types'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { Image, useScene } from 'phavuer'
+import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { uuidv4 } from '@/utilities'
+import { onBeforeMount, onBeforeUnmount } from 'vue'
 
-// 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
-//   }
-// }
+const scene = useScene()
+const zoneEditorStore = useZoneEditorStore()
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+
+function getEventTileImageProps(tile: ZoneEventTile) {
+  return {
+    x: tileToWorldX(props.tilemap, tile.positionX, tile.positionY),
+    y: tileToWorldY(props.tilemap, tile.positionX, tile.positionY),
+    texture: tile.type
+  }
+}
+
+function addZoneEventTile(pointer: Phaser.Input.Pointer) {
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'pencil') return
+
+  // Check if draw mode is blocking tile or teleport
+  if (zoneEditorStore.drawMode !== 'blocking tile' && zoneEditorStore.drawMode !== 'teleport') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if event tile already exists on position
+  const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  if (existingEventTile) return
+
+  // If teleport, check if there is a selected zone
+  if (zoneEditorStore.drawMode === 'teleport' && !zoneEditorStore.teleportSettings.toZoneId) return
+
+  const newEventTile = {
+    id: uuidv4(),
+    zoneId: zoneEditorStore.zone.id,
+    zone: zoneEditorStore.zone,
+    type: zoneEditorStore.drawMode === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
+    positionX: tile.x,
+    positionY: tile.y,
+    teleport:
+      zoneEditorStore.drawMode === 'teleport'
+        ? {
+          toZoneId: zoneEditorStore.teleportSettings.toZoneId,
+          toPositionX: zoneEditorStore.teleportSettings.toPositionX,
+          toPositionY: zoneEditorStore.teleportSettings.toPositionY,
+          toRotation: zoneEditorStore.teleportSettings.toRotation
+        }
+        : undefined
+  }
+
+  zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.concat(newEventTile as ZoneEventTile)
+}
+
+onBeforeMount(() => {
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, addZoneEventTile)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, addZoneEventTile)
+})
+
+onBeforeUnmount(() => {
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, addZoneEventTile)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, addZoneEventTile)
+})
 </script>

src/components/gameMaster/zoneEditor/Objects.vue

@@ -48,16 +48,16 @@ function addZoneObject(pointer: Phaser.Input.Pointer) {
   // Check if draw mode is object
   if (zoneEditorStore.drawMode !== 'object') return
 
+  // Check if there is a selected object
+  if (!zoneEditorStore.selectedObject) return
+
   // Check if left mouse button is pressed
   if (!pointer.isDown) return
 
-  // Check if there is a tile @TODO chekc if props.tilemap words
+  // Check if there is a tile
   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

src/components/gameMaster/zoneEditor/Tiles.vue

@@ -58,6 +58,9 @@ function handleTileClick(pointer: Phaser.Input.Pointer) {
   // Check if draw mode is tile
   if (zoneEditorStore.drawMode !== 'tile') return
 
+  // Check if there is a selected tile
+  if (!zoneEditorStore.selectedTile) return
+
   // Check if left mouse button is pressed
   if (!pointer.isDown) return
 
@@ -65,9 +68,6 @@ function handleTileClick(pointer: Phaser.Input.Pointer) {
   const tile = getTile(tiles, pointer.worldX, pointer.worldY)
   if (!tile) return
 
-  // Check if there is a selected tile
-  if (!zoneEditorStore.selectedTile) return
-
   placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
 }
 

src/screens/Game.vue

@@ -111,10 +111,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
   /**
    * Load the base assets into the Phaser scene
    */
-  scene.load.image('BLOCK', '/assets/zone/bt_tile.png')
-  scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
   scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
-  scene.load.image('blank_object', '/assets/zone/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
 
   /**

src/screens/ZoneEditor.vue

@@ -97,7 +97,6 @@ const preloadScene = async (scene: Phaser.Scene) => {
   scene.load.image('BLOCK', '/assets/zone/bt_tile.png')
   scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
   scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
-  scene.load.image('blank_object', '/assets/zone/blank_tile.png')
   scene.load.image('waypoint', '/assets/waypoint.png')
 
   /**