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

<template>
  <SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :map :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
  <PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap :tileMapLayer :placedMapObject @pointerdown="clickPlacedMapObject(placedMapObject)" />
</template>

<script setup lang="ts">
import type { MapObject, Map as MapT, PlacedMapObject as PlacedMapObjectT, UUID } 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 { getTile } from '@/services/mapService'
import { useScene } from 'phavuer'

import Tilemap = Phaser.Tilemaps.Tilemap
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import { computed } from 'vue'

const scene = useScene()
const mapEditor = useMapEditorComposable()
const map = computed(() => mapEditor.currentMap.value)

defineExpose({ handlePointer })

const props = defineProps<{
  tileMap: Tilemap
  tileMapLayer: TilemapLayer
}>()

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 = findObjectByPointer(pointer, map)
  if (existingPlacedMapObject) return

  if (!mapEditor.selectedMapObject.value) return

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

  // 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 = findObjectByPointer(pointer, map)
  if (!existingPlacedMapObject) return

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

function findObjectByPointer(pointer: Phaser.Input.Pointer, map: MapT): PlacedMapObjectT | undefined {
  const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
  if (!tile) return undefined

  return map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
}

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

  // Select the object
  mapEditor.setSelectedMapObject(existingPlacedMapObject.mapObject as 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
    const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
    if (!tile) return

    mapEditor.movingPlacedObject.value.positionX = tile.x
    mapEditor.movingPlacedObject.value.positionY = tile.y
  }

  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) {
  const matchingObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.id === id)
  matchingObject!.isRotated = !matchingObject!.isRotated
}

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 as MapObject)
  }
}

function handlePointer(pointer: Phaser.Input.Pointer) {
  const map = mapEditor.currentMap.value
  if (!map) 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
  }
}
</script>