MVP of teleports

src/components/zone/Characters.vue

@@ -1,5 +1,5 @@
 <template>
-  <Character v-for="item in zoneStore.characters" :key="item.id" :layer="zoneTilemap as any" :character="item" :depth="item.depth" />
+  <Character v-for="item in zoneStore.characters" :key="item.id" :layer="tilemap" :character="item" />
 </template>
 
 <script setup lang="ts">
@@ -8,7 +8,14 @@ import { useZoneStore } from '@/stores/zone'
 import { useGameStore } from '@/stores/game'
 import { useAssetStore } from '@/stores/assets'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useScene } from 'phavuer'
 
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
+
+const scene = useScene()
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
 </script>

src/components/zone/Tiles.vue

@@ -13,6 +13,8 @@ import { storeToRefs } from 'pinia'
 import { placeTile, setAllTiles } from '@/services/zone'
 import Controls from '@/components/utilities/Controls.vue'
 
+const emit = defineEmits(['tilemap:create'])
+
 const assetStore = useAssetStore()
 const zoneStore = useZoneStore()
 const scene = useScene()
@@ -22,6 +24,7 @@ const zoneTilemap = ref(createTilemap())
 const tiles = ref(createTileLayer())
 const tileArray = ref(createTileArray())
 
+
 function createTilemap() {
   const zoneData = new Phaser.Tilemaps.MapData({
     width: zone.value?.width,
@@ -31,7 +34,9 @@ function createTilemap() {
     orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
     format: Phaser.Tilemaps.Formats.ARRAY_2D
   })
-  return new Phaser.Tilemaps.Tilemap(scene, zoneData)
+  const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
+  emit('tilemap:create', tilemap)
+  return tilemap
 }
 
 function createTileLayer() {

src/components/zone/Zone.vue

@@ -1,14 +1,14 @@
 <template>
-  <Tiles :key="zoneStore.zone?.id ?? 0" />
+  <Tiles :key="zoneStore.zone?.id ?? 0" @tilemap:create="tileMap = $event" />
   <Objects />
-<!--  <Characters />-->
+  <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
 </template>
 
 <script setup lang="ts">
 import { useGameStore } from '@/stores/game'
 import { useZoneStore } from '@/stores/zone'
-import { onBeforeMount, onBeforeUnmount, watch } from 'vue'
-import type { Character as CharacterT, Zone as ZoneT } from '@/types'
+import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import type { Character as CharacterT, Zone as ZoneT, ExtendedCharacter as ExtendedCharacterT } from '@/types'
 import Tiles from '@/components/zone/Tiles.vue'
 import Objects from '@/components/zone/Objects.vue'
 import Characters from '@/components/zone/Characters.vue'
@@ -16,6 +16,8 @@ import Characters from '@/components/zone/Characters.vue'
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 
+const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
+
 type zoneLoadData = {
   zone: ZoneT
   characters: CharacterT[]
@@ -26,16 +28,37 @@ gameStore.connection?.emit('zone:characterJoin', { zoneId: gameStore.character?.
   zoneStore.setCharacters(response.characters)
 })
 
+// Event listeners
+gameStore.connection?.on('zone:teleport', (data: zoneLoadData) => {
+  tileMap.value = null;
+  zoneStore.setZone(data.zone)
+  zoneStore.setCharacters(data.characters)
+})
+
+gameStore.connection?.on('zone:character:join', (data: ExtendedCharacterT) => {
+  zoneStore.addCharacter(data)
+})
+
+gameStore.connection?.on('zone:character:leave', (character_id: number) => {
+  zoneStore.removeCharacter(character_id)
+})
+
+gameStore.connection?.on('character:move', (data: ExtendedCharacterT) => {
+  zoneStore.updateCharacter(data)
+})
+
 watch(() => zoneStore.zone, (newZone) => {
   console.log('Zone changed:', newZone)
 }, { deep: true })
 
-
 onBeforeMount(() => {
 
 });
 
 onBeforeUnmount(() => {
-
+  gameStore.connection?.off('zone:teleport')
+  gameStore.connection?.off('zone:character:join')
+  gameStore.connection?.off('zone:character:leave')
+  gameStore.connection?.off('character:move')
 });
 </script>