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

<template>
  <SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
  <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :placedMapObject @pointerdown="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/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'

const scene = useScene()
const mapEditor = useMapEditorComposable()

defineExpose({ handlePointer })

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,
    isRotated: false,
    positionX: pointer.worldX,
    positionY: pointer.worldY
  }

  // Add new object to mapObjects

  map.placedMapObjects.push(newPlacedMapObject)
  mapEditor.selectedPlacedObject.value = newPlacedMapObject
}

function eraser(pointer: Phaser.Input.Pointer, map: MapT) {
  // Check if object already exists on position
  const existingPlacedMapObject = findInMap(pointer, map)
  if (!existingPlacedMapObject) return

  // Remove existing object
  map.placedMapObjects = map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
}

function findInMap(pointer: Phaser.Input.Pointer, map: MapT) {
  return map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === pointer.worldX && placedMapObject.positionY === pointer.worldY)
}

function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
  // Check if object already exists on position
  const existingPlacedMapObject = findInMap(pointer, map)
  if (!existingPlacedMapObject) return

  // Select the object
  mapEditor.setSelectedMapObject(existingPlacedMapObject.mapObject)
}

function moveMapObject(id: string, map: MapT) {
  mapEditor.movingPlacedObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT

  function handlePointerMove(pointer: Phaser.Input.Pointer) {
    if (!mapEditor.movingPlacedObject.value) return

    mapEditor.movingPlacedObject.value.positionX = pointer.worldX
    mapEditor.movingPlacedObject.value.positionY = pointer.worldY
  }

  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)

  function handlePointerUp() {
    scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
    mapEditor.movingPlacedObject.value = null
  }

  scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
}

function rotatePlacedMapObject(id: string, map: MapT) {
  map.placedMapObjects = map.placedMapObjects.map((placedMapObject) => {
    if (placedMapObject.id === id) {
      return {
        ...placedMapObject,
        isRotated: !placedMapObject.isRotated
      }
    }
    return placedMapObject
  })
}

function deletePlacedMapObject(id: string, map: MapT) {
  let mapE = mapEditor.currentMap.value
  mapE.placedMapObjects = map.placedMapObjects.filter((object) => object.id !== id)
  mapEditor.selectedPlacedObject.value = null
}

function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
  mapEditor.selectedPlacedObject.value = placedMapObject

  // If alt is pressed, select the object
  if (scene.input.activePointer.event.altKey) {
    mapEditor.setSelectedMapObject(placedMapObject.mapObject)
  }
}

function handlePointer(pointer: Phaser.Input.Pointer) {
  const map = mapEditor.currentMap.value
  if (!map) return

  if (mapEditor.drawMode.value !== 'map_object') return

  // Check if left mouse button is pressed
  if (!pointer.isDown) return

  // Check if shift is not pressed, this means we are moving the camera
  if (pointer.event.shiftKey) return

  // Check if alt is pressed, this means we are selecting the object
  if (pointer.event.altKey) return

  // Check if tool is pencil
  switch (mapEditor.tool.value) {
    case 'pencil':
      pencil(pointer, map)
      break
    case 'eraser':
      eraser(pointer, map)
      break
    case 'object picker':
      objectPicker(pointer, map)
      break
  }
}

// watch mapEditorStore.mapObjectList and update originX and originY of objects in mapObjects
watch(
  () => mapEditor.currentMap.value,
  (map) => {
    if (!map) return

    const updatedMapObjects = map.placedMapObjects.map((mapObject) => {
      const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapObject.mapObject.id)
      if (updatedMapObject) {
        return {
          ...mapObject,
          mapObject: {
            ...mapObject.mapObject,
            originX: updatedMapObject.positionX,
            originY: updatedMapObject.positionY
          }
        }
      }
      return mapObject
    })

    // Update the map with the new mapObjects
    map.placedMapObjects.concat(updatedMapObjects)

    // Update mapObject if it's set
    if (mapEditor.selectedMapObject.value) {
      const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapEditor.selectedMapObject.value?.id)
      if (updatedMapObject) {
        mapEditor.setSelectedMapObject({
          ...mapEditor.selectedMapObject.value,
          originX: updatedMapObject.positionX,
          originY: updatedMapObject.positionY
        })
      }
    }
  }
  // { deep: true }
)
</script>