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

<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)" />
</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 SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
import { getTile } from '@/composables/mapComposable'
import { useScene } from 'phavuer'
import { ref, watch } from 'vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'

const scene = useScene()
const mapEditor = useMapEditorComposable()
const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)

const tileLayer = ref<Phaser.Tilemaps.TilemapLayer>()

const props = defineProps<{
  tileMap: Phaser.Tilemaps.Tilemap
}>()

defineExpose({handlePointer})

function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
  // Check if there is a tile
  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
  if (!tile) return

  // Check if object already exists on position
  const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
  if (existingPlacedMapObject) return

  const newPlacedMapObject: PlacedMapObjectT = {
    id: uuidv4(),
    depth: 0,
    map: map,
    mapObject: mapEditor.selectedMapObject.value!,
    isRotated: false,
    positionX: tile.x,
    positionY: tile.y
  }

  // Add new object to mapObjects
  map.placedMapObjects.concat(newPlacedMapObject)
}

function eraser(pointer: Phaser.Input.Pointer, map: MapT) {
  // Check if there is a tile
  const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
  if (!tile) return

  // Check if object already exists on position
  const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
  if (!existingPlacedMapObject) return

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

function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
  // Check if there is a tile
  const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
  if (!tile) return

  // Check if object already exists on position
  const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
  if (!existingPlacedMapObject) return

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

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

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

    const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
    if (!tile) return

    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)
    movingPlacedMapObject.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) {
  map.placedMapObjects = map.placedMapObjects.filter((object) => object.id !== id)
  selectedPlacedMapObject.value = null
}

function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
  selectedPlacedMapObject.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':
      if (mapEditor.selectedMapObject.value) 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,
  () => {
    const map = mapEditor.currentMap.value
    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 = [...map.placedMapObjects, ...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>