Map object isometric placement

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

@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import type { PlacedMapObject, TextureData } from '@/application/types'
 import { loadTexture } from '@/composables/gameComposable'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
+import { calculateIsometricDepth } from '@/composables/mapComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed, onMounted } from 'vue'
@@ -31,22 +31,13 @@ const imageProps = computed(() => ({
   originY: props.placedMapObject.mapObject.originY
 }))
 
-function calculateObjectPlacement(mapObj: PlacedMapObject, tileCenterSnap: boolean) : {x: number; y: number} {
+function calculateObjectPlacement(mapObj: PlacedMapObject) : {x: number; y: number} {
-  let position : {x: number; y: number}
+  let position = { x: mapObj.positionX, y: mapObj.positionY }
-  if (tileCenterSnap) {
   let halfTileWidth = config.tile_size.width/2
   let halfTileHeight = config.tile_size.height/2
-    position = {
-      x: Math.ceil((mapObj.positionX-config.tile_size.height)/halfTileWidth) * halfTileWidth,
-      y: Math.ceil((mapObj.positionY-config.tile_size.height)/halfTileWidth) * halfTileWidth,
-    }
-  }
-  else {
-    position = { x: mapObj.positionX, y: mapObj.positionY }
-  }
   return {
     x: position.x-mapObj.mapObject.frameWidth/2,
-    y: position.y-mapObj.mapObject.frameHeight/2
+    y: position.y-mapObj.mapObject.frameHeight/2-halfTileHeight
   }
 }
 

src/components/gameMaster/mapEditor/Map.vue

@@ -1,7 +1,7 @@
 <template>
   <MapTiles ref="mapTiles" @tileMap:create="tileMap = $event" />
-  <PlacedMapObjects ref="mapObjects" v-if="tileMap" />
+  <PlacedMapObjects ref="mapObjects" v-if="tileMap" :tileMap />
-  <MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap />
 </template>
 
 <script setup lang="ts">

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

@@ -11,13 +11,22 @@ import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useScene } from 'phavuer'
 import { ref, watch } from 'vue'
+import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
+import Tilemap = Phaser.Tilemaps.Tilemap
 
 const scene = useScene()
 const mapEditor = useMapEditorComposable()
 
 defineExpose({ handlePointer })
 
+const props = defineProps<{
+  tileMap: Tilemap
+}>()
+
 function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
+  const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
   // Check if object already exists on position
   const existingPlacedMapObject = findInMap(pointer, map)
   if (existingPlacedMapObject) return
@@ -29,8 +38,8 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
     map: map,
     mapObject: mapEditor.selectedMapObject.value,
     isRotated: false,
-    positionX: pointer.worldX,
+    positionX: tileToWorldX(props.tileMap, tile.x, tile.y),
-    positionY: pointer.worldY
+    positionY: tileToWorldY(props.tileMap, tile.x, tile.y)
   }
 
   // Add new object to mapObjects

src/components/screens/MapEditor.vue

@@ -98,18 +98,17 @@ function save() {
   if (!currentMap) return
 
   const data = {
-    mapId: currentMap.id,
+    mapId: {...currentMap},
     name: currentMap.name,
     width: currentMap.width,
     height: currentMap.height,
-    tiles: currentMap.tiles,
+    tiles: {...currentMap.tiles},
     pvp: currentMap.pvp,
-    mapEffects: currentMap.mapEffects?.map(({ id, effect, strength }) => ({ id, effect, strength })) ?? [],
+    mapEffects: {...currentMap.mapEffects},
-    mapEventTiles: currentMap.mapEventTiles?.map(({ id, type, positionX, positionY, teleport }) => ({ id, type, positionX, positionY, teleport: {...teleport} })),
+    mapEventTiles: {...currentMap.mapEventTiles},
     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)
   })