Map editor WIP

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

@@ -1,45 +0,0 @@
-<template>
-  <Image v-if="gameStore.getLoadedAsset(props.mapObject.object.id)" v-bind="imageProps" />
-</template>
-
-<script setup lang="ts">
-import type { AssetDataT, PlacedMapObject } 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
-  mapObject: PlacedMapObject
-  selectedMapObject: PlacedMapObject | null
-  movingMapObject: PlacedMapObject | null
-}>()
-
-const gameStore = useGameStore()
-const scene = useScene()
-
-const imageProps = computed(() => ({
-  alpha: props.movingMapObject?.id === props.mapObject.id ? 0.5 : 1,
-  tint: props.selectedMapObject?.id === props.mapObject.id ? 0x00ff00 : 0xffffff,
-  depth: calculateIsometricDepth(props.mapObject.positionX, props.mapObject.positionY, props.mapObject.object.frameWidth, props.mapObject.object.frameHeight),
-  x: tileToWorldX(props.tilemap, props.mapObject.positionX, props.mapObject.positionY),
-  y: tileToWorldY(props.tilemap, props.mapObject.positionX, props.mapObject.positionY),
-  flipX: props.mapObject.isRotated,
-  texture: props.mapObject.object.id,
-  originY: Number(props.mapObject.object.originX),
-  originX: Number(props.mapObject.object.originY)
-}))
-
-loadTexture(scene, {
-  key: props.mapObject.object.id,
-  data: '/assets/objects/' + props.mapObject.object.id + '.png',
-  group: 'objects',
-  updatedAt: props.mapObject.object.updatedAt,
-  frameWidth: props.mapObject.object.frameWidth,
-  frameHeight: props.mapObject.object.frameHeight
-} as AssetDataT).catch((error) => {
-  console.error('Error loading texture:', error)
-})
-</script>

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

@@ -0,0 +1,45 @@
+<template>
+  <Image v-if="gameStore.getLoadedAsset(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
+</template>
+
+<script setup lang="ts">
+import type { AssetDataT, PlacedMapObject } 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: '/assets/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 AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
+})
+</script>

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

@@ -1,22 +1,22 @@
 <template>
-  <SelectedMapObject v-if="selectedMapObject" :mapObject="selectedMapObject" :movingMapObject="movingMapObject" @move="moveMapObject" @rotate="rotateMapObject" @delete="deleteMapObject" />
-  <MapObject v-for="mapObject in mapEditorStore.map?.placedMapObjects" :tilemap="tilemap" :mapObject :selectedMapObject :movingMapObject @pointerup="clickMapObject(mapObject)" />
+  <SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotateMapObject" @delete="deleteMapObject" />
+  <PlacedMapObject v-for="placedMapObject in mapEditorStore.map?.placedMapObjects" :tilemap="tilemap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
 </template>
 
 <script setup lang="ts">
-import type { PlacedMapObject as MapObjectT } from '@/application/types'
+import type { PlacedMapObject as PlacedMapObjectT } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
-import MapObject from '@/components/gameMaster/mapEditor/mapPartials/MapObject.vue'
-import SelectedMapObject from '@/components/gameMaster/mapEditor/partials/SelectedMapObject.vue'
 import { getTile } from '@/composables/mapComposable'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { useScene } from 'phavuer'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
+import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
+import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
 
 const scene = useScene()
 const mapEditorStore = useMapEditorStore()
-const selectedMapObject = ref<MapObjectT | null>(null)
-const movingMapObject = ref<MapObjectT | null>(null)
+const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
+const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
@@ -29,8 +29,8 @@ function pencil(pointer: Phaser.Input.Pointer) {
   // Check if tool is pencil
   if (mapEditorStore.tool !== 'pencil') return
 
-  // Check if draw mode is object
-  if (mapEditorStore.drawMode !== 'object') return
+  // Check if draw mode is map_object
+  if (mapEditorStore.drawMode !== 'map_object') return
 
   // Check if there is a selected object
   if (!mapEditorStore.selectedMapObject) return
@@ -49,15 +49,13 @@ function pencil(pointer: Phaser.Input.Pointer) {
   if (!tile) return
 
   // Check if object already exists on position
-  const existingObject = mapEditorStore.map?.mapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  const existingObject = mapEditorStore.map.placedMapObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
   if (existingObject) return
 
   const newObject = {
     id: uuidv4(),
-    mapId: mapEditorStore.map.id,
     map: mapEditorStore.map,
-    objectId: mapEditorStore.selectedMapObject.id,
-    object: mapEditorStore.selectedMapObject,
+    mapObject: mapEditorStore.selectedMapObject,
     depth: 0,
     isRotated: false,
     positionX: tile.x,
@@ -65,7 +63,7 @@ function pencil(pointer: Phaser.Input.Pointer) {
   }
 
   // Add new object to mapObjects
-  mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.concat(newObject as MapObjectT)
+  mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.concat(newObject as PlacedMapObjectT)
 }
 
 function eraser(pointer: Phaser.Input.Pointer) {
@@ -75,8 +73,8 @@ function eraser(pointer: Phaser.Input.Pointer) {
   // Check if tool is eraser
   if (mapEditorStore.tool !== 'eraser') return
 
-  // Check if draw mode is object
-  if (mapEditorStore.eraserMode !== 'object') return
+  // Check if draw mode is map_object
+  if (mapEditorStore.eraserMode !== 'map_object') return
 
   // Check if left mouse button is pressed
   if (!pointer.isDown) return
@@ -106,8 +104,8 @@ function objectPicker(pointer: Phaser.Input.Pointer) {
   // Check if tool is pencil
   if (mapEditorStore.tool !== 'pencil') return
 
-  // Check if draw mode is object
-  if (mapEditorStore.drawMode !== 'object') return
+  // Check if draw mode is map_object
+  if (mapEditorStore.drawMode !== 'map_object') return
 
   // Check if left mouse button is pressed
   if (!pointer.isDown) return
@@ -134,23 +132,23 @@ function moveMapObject(id: string) {
   // Check if map is set
   if (!mapEditorStore.map) return
 
-  movingMapObject.value = mapEditorStore.map.placedMapObjects.find((object) => object.id === id) as MapObjectT
+  movingPlacedMapObject.value = mapEditorStore.map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
 
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
-    if (!movingMapObject.value) return
+    if (!movingPlacedMapObject.value) return
 
     const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
     if (!tile) return
 
-    movingMapObject.value.positionX = tile.x
-    movingMapObject.value.positionY = tile.y
+    movingPlacedMapObject.value.positionX = tile.x
+    movingPlacedMapObject.value.positionY = tile.y
   }
 
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
 
   function handlePointerUp() {
     scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
-    movingMapObject.value = null
+    movingPlacedMapObject.value = null
   }
 
   scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
@@ -176,15 +174,15 @@ function deleteMapObject(id: string) {
   if (!mapEditorStore.map) return
 
   mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.filter((object) => object.id !== id)
-  selectedMapObject.value = null
+  selectedPlacedMapObject.value = null
 }
 
-function clickMapObject(mapObject: MapObjectT) {
-  selectedMapObject.value = mapObject
+function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
+  selectedPlacedMapObject.value = placedMapObject
 
   // If alt is pressed, select the object
   if (scene.input.activePointer.event.altKey) {
-    mapEditorStore.setSelectedMapObject(mapObject.mapObject)
+    mapEditorStore.setSelectedMapObject(placedMapObject.mapObject)
   }
 }
 
@@ -210,7 +208,6 @@ watch(
   (newObjects) => {
     if (!mapEditorStore.map) return
 
-    console.log(mapEditorStore.map.placedMapObjects)
     const updatedMapObjects = mapEditorStore.map.placedMapObjects.map((mapObject) => {
       const updatedObject = newObjects.find((obj) => obj.id === mapObject.mapObject.id)
       if (updatedObject) {
@@ -229,7 +226,7 @@ watch(
     // Update the map with the new mapObjects
     mapEditorStore.setMap({
       ...mapEditorStore.map,
-      mapObjects: updatedMapObjects
+      placedMapObjects: updatedMapObjects
     })
 
     // Update selectedMapObject if it's set