Placement of map objects

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" />
-  <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap="tileMap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
+  <SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" :selectedPlacedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
+  <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 { uuidv4 } from '@/application/utilities'
-import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
+import type { Map as MapT, PlacedMapObject as PlacedMapObjectT, TextureData } from '@/application/types'
+import PlacedMapObject from '@/components/game/map/partials/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,
-    positionY: pointer.y
+    positionX: pointer.worldX,
+    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,
-  () => {
-    const map = mapEditor.currentMap.value
+  (map) => {
     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