Placement of map objects

src/components/game/map/partials/PlacedMapObject.vue

@@ -28,16 +28,19 @@ const imageProps = computed(() => ({
   originX: Number(props.placedMapObject.mapObject.originY)
 }))
 
-loadTexture(scene, {
+onMounted(async () => {
+  await loadTexture(scene, {
     key: props.placedMapObject.mapObject.id,
     data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
     group: 'map_objects',
     updatedAt: props.placedMapObject.mapObject.updatedAt,
     frameWidth: props.placedMapObject.mapObject.frameWidth,
     frameHeight: props.placedMapObject.mapObject.frameHeight
-} as TextureData).catch((error) => {
+  } as TextureData).catch((error) => {
     console.error('Error loading texture:', error)
-})
+  })
 
-onMounted(async () => {})
+  if (!props.placedMapObject) return
+  scene.add.sprite(props.placedMapObject.positionX, props.placedMapObject.positionY, imageProps.value.texture);
+})
 </script>

src/components/gameMaster/mapEditor/Map.vue

@@ -34,7 +34,7 @@ function handlePointerDown(pointer: Phaser.Input.Pointer) {
   switch (mapEditor.drawMode.value) {
     case 'tile':
       mapTiles.value.handlePointer(pointer)
-    case 'object':
+    case 'map_object':
       mapObjects.value.handlePointer(pointer)
     case 'teleport':
       eventTiles.value.handlePointer(pointer)

src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue

@@ -191,7 +191,7 @@ function finalizeCommand() {
   commandStack = commandStack.slice(0, commandIndex.value)
   commandStack.push(currentCommand)
   if (commandStack.length >= 9) {
-    originTiles = applyCommands(originTiles, commandStack.shift())
+    originTiles = applyCommands(originTiles, commandStack.shift()!)
   }
 
   commandIndex.value = commandStack.length

src/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue

@@ -1,45 +0,0 @@
-<template>
-  <Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
-</template>
-
-<script setup lang="ts">
-import type { PlacedMapObject, TextureData } from '@/application/types'
-import { loadTexture } from '@/composables/gameComposable'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
-import { useGameStore } from '@/stores/gameStore'
-import { Image, useScene } from 'phavuer'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  tileMap: Phaser.Tilemaps.Tilemap
-  placedMapObject: PlacedMapObject
-  selectedPlacedMapObject: PlacedMapObject | null
-  movingPlacedMapObject: PlacedMapObject | null
-}>()
-
-const gameStore = useGameStore()
-const scene = useScene()
-
-const imageProps = computed(() => ({
-  alpha: props.movingPlacedMapObject?.id === props.placedMapObject.id ? 0.5 : 1,
-  tint: props.selectedPlacedMapObject?.id === props.placedMapObject.id ? 0x00ff00 : 0xffffff,
-  depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
-  x: tileToWorldX(props.tileMap, props.placedMapObject.positionX, props.placedMapObject.positionY),
-  y: tileToWorldY(props.tileMap, props.placedMapObject.positionX, props.placedMapObject.positionY),
-  flipX: props.placedMapObject.isRotated,
-  texture: props.placedMapObject.mapObject.id,
-  originY: Number(props.placedMapObject.mapObject.originX),
-  originX: Number(props.placedMapObject.mapObject.originY)
-}))
-
-loadTexture(scene, {
-  key: props.placedMapObject.mapObject.id,
-  data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
-  group: 'map_objects',
-  updatedAt: props.placedMapObject.mapObject.updatedAt,
-  frameWidth: props.placedMapObject.mapObject.frameWidth,
-  frameHeight: props.placedMapObject.mapObject.frameHeight
-} as TextureData).catch((error) => {
-  console.error('Error loading texture:', error)
-})
-</script>

src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue

@@ -1,16 +1,16 @@
 <template>
-  <SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
+  <SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" :selectedPlacedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
-  <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap="tileMap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
+  <PlacedMapObject :tilemap="tileMap" v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap="tileMap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
 </template>
 
 <script setup lang="ts">
-import type { Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
+import type { Map as MapT, PlacedMapObject as PlacedMapObjectT, TextureData } from '@/application/types'
-import { uuidv4 } from '@/application/utilities'
+import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
-import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
 import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useScene } from 'phavuer'
 import { ref, watch } from 'vue'
+import { uuidv4 } from '@/application/utilities'
 
 const scene = useScene()
 const mapEditor = useMapEditorComposable()
@@ -27,19 +27,23 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
   // Check if object already exists on position
   const existingPlacedMapObject = findInMap(pointer, map)
   if (existingPlacedMapObject) return
+  if (!mapEditor.selectedMapObject.value) return
 
   const newPlacedMapObject: PlacedMapObjectT = {
     id: uuidv4(),
     depth: 0,
     map: map,
-    mapObject: mapEditor.selectedMapObject.value!,
+    mapObject: mapEditor.selectedMapObject.value,
     isRotated: false,
-    positionX: pointer.x,
+    positionX: pointer.worldX,
-    positionY: pointer.y
+    positionY: pointer.worldY
   }
 
   // Add new object to mapObjects
-  map.placedMapObjects.concat(newPlacedMapObject)
+
+  map.placedMapObjects.push(newPlacedMapObject)
+  selectedPlacedMapObject.value = newPlacedMapObject
+  console.log(map.placedMapObjects)
 }
 
 function eraser(pointer: Phaser.Input.Pointer, map: MapT) {
@@ -128,7 +132,7 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   // Check if tool is pencil
   switch (mapEditor.tool.value) {
     case 'pencil':
-      if (mapEditor.selectedMapObject.value) pencil(pointer, map)
+      pencil(pointer, map)
       break
     case 'eraser':
       eraser(pointer, map)
@@ -142,8 +146,7 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
 // watch mapEditorStore.mapObjectList and update originX and originY of objects in mapObjects
 watch(
   () => mapEditor.currentMap.value,
-  () => {
+  (map) => {
-    const map = mapEditor.currentMap.value
     if (!map) return
 
     const updatedMapObjects = map.placedMapObjects.map((mapObject) => {

src/components/gameMaster/mapEditor/partials/CreateMap.vue

@@ -72,8 +72,6 @@ async function submit() {
     pvp.value = false
 
     // Add map to storage
-
-    console.log(response)
     await mapStorage.add(response)
 
     // Let list know to fetch new maps

src/components/screens/MapEditor.vue

@@ -104,10 +104,11 @@ function save() {
     tiles: currentMap.tiles,
     pvp: currentMap.pvp,
     mapEffects: currentMap.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
-    mapEventTiles: currentMap.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport })) ?? [],
+    mapEventTiles: currentMap.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport: {...teleport} })),
-    placedMapObjects: currentMap.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
+    placedMapObjects: currentMap.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject: {...mapObject}, depth, isRotated, positionX, positionY })) ?? []
   }
 
+  console.log(data.placedMapObjects)
   gameStore.connection?.emit('gm:map:update', data, (response: MapT) => {
     mapStorage.update(response.id, response)
   })

src/composables/pointerHandlers/useMapEditorPointerHandlers.ts

@@ -7,7 +7,6 @@ import { computed, ref, type Ref } from 'vue'
 export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
   const gameStore = useGameStore()
   const mapEditor = useMapEditorComposable()
-  const isMoveTool = computed(() => mapEditor.tool.value === 'move')
   const pointerStartPosition = ref({ x: 0, y: 0 })
   const dragThreshold = 5 // pixels
 
@@ -29,7 +28,7 @@ export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.T
 
   function handlePointerDown(pointer: Phaser.Input.Pointer) {
     pointerStartPosition.value = { x: pointer.x, y: pointer.y }
-    if (isMoveTool.value || pointer.event.shiftKey) {
+    if (mapEditor.tool.value === 'move' || pointer.event.shiftKey) {
       gameStore.setPlayerDraggingCamera(true)
     }
   }
@@ -48,7 +47,7 @@ export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.T
   }
 
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
-    if (isMoveTool.value || pointer.event.shiftKey) {
+    if (mapEditor.tool.value === 'move' || pointer.event.shiftKey) {
       dragMap(pointer)
     }
     updateWaypoint(pointer.worldX, pointer.worldY)