noxious_client/src/components/utilities/zoneEditor/ZoneEditor.vue

<template>
  <TilemapLayerC :tilemap="zone" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
  <Controls :layer="tiles" />

  <Container>
    <Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="Number(object.object.origin_x)" :originX="Number(object.object.origin_y)" />
  </Container>

  <Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" />
  <Tiles v-if="((zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile') || zoneEditorStore.tool === 'paint'" />
  <Objects v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'object'" />
  <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
  <ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
</template>

<script setup lang="ts">
import config from '@/config'
import Tileset = Phaser.Tilemaps.Tileset
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import { Container, TilemapLayer as TilemapLayerC, useScene, Image } from 'phavuer'
import { onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
import Controls from '@/components/utilities/Controls.vue'
import { useSocketStore } from '@/stores/socket'
import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
import { placeTile, tileToWorldXY } from '@/services/zone'
import { useAssetStore } from '@/stores/assets'
import Objects from '@/components/utilities/zoneEditor/Objects.vue'
import type { Object } from '@/types'
import { storeToRefs } from 'pinia'
import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue'

const scene = useScene()
const socket = useSocketStore()
const zoneEditorStore = useZoneEditorStore()
const assetStore = useAssetStore()

const zoneData = new Phaser.Tilemaps.MapData({
  width: zoneEditorStore.width,
  height: zoneEditorStore.height,
  tileWidth: config.tile_size.x,
  tileHeight: config.tile_size.y,
  orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
  format: Phaser.Tilemaps.Formats.ARRAY_2D
})

const tilesetImages: Tileset[] = []
const zone = new Phaser.Tilemaps.Tilemap(scene, zoneData)
const zoneObjects = ref<ZoneObject[]>([])

type ZoneObject = {
  id: number
  object: Object
  position_x: number
  position_y: number
}

/**
 * Walk through object and add them to the zone as tilesetImages
 */
let tileCount = 1
toRaw(assetStore.assets).forEach((asset) => {
  if (asset.group !== 'tiles') return
  tilesetImages.push(zone.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, tileCount++) as Tileset)
})
tilesetImages.push(zone.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0) as Tileset)

const tiles = zone.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 'blank_tile'))

function eraser(tile: Phaser.Tilemaps.Tile) {
  if (zoneEditorStore.drawMode === 'tile') {
    placeTile(zone, tiles, tile.x, tile.y, 'blank_tile')
    zoneEditorStore.updateTile(tile.x, tile.y, 'blank_tile')
  }

  if (zoneEditorStore.drawMode === 'object') {
    zoneObjects.value = zoneObjects.value.filter((object) => object.position_x !== tileToWorldXY(tiles, tile.x, tile.y).position_x && object.position_y !== tileToWorldXY(tiles, tile.x, tile.y).position_y)
  }
}

function pencil(tile: Phaser.Tilemaps.Tile) {
  if (zoneEditorStore.drawMode === 'tile') {
    if (!zoneEditorStore.selectedTile) return
    placeTile(zone, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
  }

  if (zoneEditorStore.drawMode === 'object') {
    if (zoneEditorStore.selectedObject === null) return
    zoneObjects.value.push({
      id: zoneObjects.value.length + 1,
      object: zoneEditorStore.selectedObject,
      position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x,
      position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y
    })
  }
}

function paint(tile: Phaser.Tilemaps.Tile) {
  if (!zoneEditorStore.selectedTile) return
  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, zoneEditorStore.selectedTile)))
}

function save() {
  socket.connection.emit('gm:zone_editor:zone:update', {
    zoneId: socket.character.zoneId,
    name: zoneEditorStore.name,
    width: zoneEditorStore.width,
    height: zoneEditorStore.height,
    tiles: zoneEditorStore.tiles,
    objects: zoneEditorStore.objects
  })
}

// socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
//   tileTilemap = generateTilemap(scene, data.width, data.height);
//   zoneEditorStore.setName(data.name)
//   zoneEditorStore.setWidth(data.width)
//   zoneEditorStore.setHeight(data.height)
// })

const { objectList } = storeToRefs(zoneEditorStore)

watch(objectList, (newObjects) => {
  // update objects inside zoneObjects and keep the position
  zoneObjects.value = zoneObjects.value.map((object) => {
    const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
    if (!newObject) return object
    return { ...object, object: newObject }
  })
})

onBeforeMount(() => {
  exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, 'blank_tile')))
  socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
})

onBeforeUnmount(() => {
  zoneEditorStore.reset()
})

// center camera
const centerY = (zone.height * zone.tileHeight) / 2
const centerX = (zone.width * zone.tileWidth) / 2
scene.cameras.main.centerOn(centerX, centerY)
</script>