Renamed zone > map

src/components/game/map/Characters.vue

@@ -0,0 +1,14 @@
+<template>
+  <Character v-for="item in mapStore.characters" :key="item.character.id" :tilemap="tilemap" :mapCharacter="item" />
+</template>
+
+<script setup lang="ts">
+import Character from '@/components/game/character/Character.vue'
+import { useMapStore } from '@/stores/mapStore'
+
+const mapStore = useMapStore()
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+</script>

src/components/game/map/Map.vue

@@ -0,0 +1,50 @@
+<template>
+  <MapTiles :key="mapStore.map?.id ?? 0" @tileMap:create="tileMap = $event" />
+  <MapObjects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+  <Characters v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
+</template>
+
+<script setup lang="ts">
+import type { MapCharacter, mapLoadData } from '@/application/types'
+import Characters from '@/components/game/map/Characters.vue'
+import MapObjects from '@/components/game/map/MapObjects.vue'
+import MapTiles from '@/components/game/map/MapTiles.vue'
+import { loadMapTilesIntoScene } from '@/composables/mapComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapStore } from '@/stores/mapStore'
+import { useScene } from 'phavuer'
+import { onUnmounted, ref } from 'vue'
+
+const scene = useScene()
+const gameStore = useGameStore()
+const mapStore = useMapStore()
+
+const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
+
+onUnmounted(() => {
+  mapStore.reset()
+  gameStore.connection!.off('map:character:teleport')
+  gameStore.connection!.off('map:character:join')
+  gameStore.connection!.off('map:character:leave')
+  gameStore.connection!.off('map:character:move')
+})
+
+// Event listeners
+gameStore.connection!.on('map:character:teleport', async (data: mapLoadData) => {
+  await loadMapTilesIntoScene(data.map.id, scene)
+  mapStore.setMap(data.map)
+  mapStore.setCharacters(data.characters)
+})
+
+gameStore.connection!.on('map:character:join', async (data: MapCharacter) => {
+  mapStore.addCharacter(data)
+})
+
+gameStore.connection!.on('map:character:leave', (characterId: number) => {
+  mapStore.removeCharacter(characterId)
+})
+
+gameStore.connection!.on('map:character:move', (data: { characterId: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
+  mapStore.updateCharacterPosition(data)
+})
+</script>

src/components/game/map/MapObjects.vue

@@ -0,0 +1,14 @@
+<template>
+  <MapObject v-for="mapObject in mapStore.map?.mapObjects" :tilemap="tilemap" :mapObject />
+</template>
+
+<script setup lang="ts">
+import MapObject from '@/components/game/map/partials/MapObject.vue'
+import { useMapStore } from '@/stores/mapStore'
+
+const mapStore = useMapStore()
+
+defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+}>()
+</script>

src/components/game/map/MapTiles.vue

@@ -0,0 +1,69 @@
+<template>
+  <Controls :layer="tileLayer" :depth="0" />
+</template>
+
+<script setup lang="ts">
+import config from '@/application/config'
+import { unduplicateArray } from '@/application/utilities'
+import Controls from '@/components/utilities/Controls.vue'
+import { FlattenMapArray, setLayerTiles } from '@/composables/mapComposable'
+import { useMapStore } from '@/stores/mapStore'
+import { useScene } from 'phavuer'
+import { onBeforeUnmount } from 'vue'
+
+const emit = defineEmits(['tileMap:create'])
+
+const scene = useScene()
+const mapStore = useMapStore()
+const tileMap = createTileMap()
+const tileLayer = createTileLayer()
+
+/**
+ * A Tilemap is a container for Tilemap data.
+ * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
+ * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
+ */
+function createTileMap() {
+  const mapData = new Phaser.Tilemaps.MapData({
+    width: mapStore.map?.width,
+    height: mapStore.map?.height,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
+  emit('tileMap:create', newTileMap)
+
+  return newTileMap
+}
+
+/**
+ * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
+ */
+function createTileLayer() {
+  const tilesArray = unduplicateArray(FlattenMapArray(mapStore.map?.tiles ?? []))
+
+  const tilesetImages = Array.from(tilesArray).map((tile: any, index: number) => {
+    return tileMap.addTilesetImage(tile, tile, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y })
+  }) as any
+
+  // Add blank tile
+  tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
+  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
+
+  layer.setDepth(0)
+  layer.setCullPadding(2, 2)
+
+  return layer
+}
+
+setLayerTiles(tileMap, tileLayer, mapStore.map?.tiles)
+
+onBeforeUnmount(() => {
+  tileMap.destroyLayer('tiles')
+  tileMap.removeAllLayers()
+  tileMap.destroy()
+})
+</script>

src/components/game/map/partials/MapObject.vue

@@ -0,0 +1,41 @@
+<template>
+  <Image v-if="gameStore.getLoadedAsset(props.mapObject.object.id)" v-bind="imageProps" />
+</template>
+
+<script setup lang="ts">
+import type { AssetDataT, PlacedMapObject } from '@/application/types'
+import { loadTexture } from '@/composables/gameComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
+import { useGameStore } from '@/stores/gameStore'
+import { Image, useScene } from 'phavuer'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  tilemap: Phaser.Tilemaps.Tilemap
+  mapObject: PlacedMapObject
+}>()
+
+const gameStore = useGameStore()
+const scene = useScene()
+
+const imageProps = computed(() => ({
+  depth: calculateIsometricDepth(props.mapObject.positionX, props.mapObject.positionY, props.mapObject.object.frameWidth, props.mapObject.object.frameHeight),
+  x: tileToWorldX(props.tilemap, props.mapObject.positionX, props.mapObject.positionY),
+  y: tileToWorldY(props.tilemap, props.mapObject.positionX, props.mapObject.positionY),
+  flipX: props.mapObject.isRotated,
+  texture: props.mapObject.object.id,
+  originY: Number(props.mapObject.object.originX),
+  originX: Number(props.mapObject.object.originY)
+}))
+
+loadTexture(scene, {
+  key: props.mapObject.object.id,
+  data: '/assets/objects/' + props.mapObject.object.id + '.png',
+  group: 'objects',
+  updatedAt: props.mapObject.object.updatedAt,
+  frameWidth: props.mapObject.object.frameWidth,
+  frameHeight: props.mapObject.object.frameHeight
+} as AssetDataT).catch((error) => {
+  console.error('Error loading texture:', error)
+})
+</script>