Renamed zone > map

src/components/game/character/Character.vue

@@ -1,23 +1,23 @@
 <template>
-  <ChatBubble :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
-  <Healthbar :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
+  <ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
+  <Healthbar :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
   <Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
-    <CharacterHair :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
-    <!--    <CharacterChest :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />-->
+    <CharacterHair :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />
+    <!--    <CharacterChest :mapCharacter="props.mapCharacter" :currentX="currentX" :currentY="currentY" />-->
     <Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
   </Container>
 </template>
 
 <script lang="ts" setup>
 import config from '@/application/config'
-import { type Sprite as SpriteT, type ZoneCharacter } from '@/application/types'
+import { type Sprite as SpriteT, type MapCharacter } from '@/application/types'
 import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
 import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
 import Healthbar from '@/components/game/character/partials/Healthbar.vue'
 import { loadSpriteTextures } from '@/composables/gameComposable'
-import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
 import { useGameStore } from '@/stores/gameStore'
-import { useZoneStore } from '@/stores/zoneStore'
+import { useMapStore } from '@/stores/mapStore'
 import { Container, refObj, Sprite, useScene } from 'phavuer'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
@@ -31,14 +31,14 @@ enum Direction {
 
 const props = defineProps<{
   tilemap: Phaser.Tilemaps.Tilemap
-  zoneCharacter: ZoneCharacter
+  mapCharacter: MapCharacter
 }>()
 
 const charContainer = refObj<Phaser.GameObjects.Container>()
 const charSprite = refObj<Phaser.GameObjects.Sprite>()
 
 const gameStore = useGameStore()
-const zoneStore = useZoneStore()
+const mapStore = useMapStore()
 const scene = useScene()
 
 const currentX = ref(0)
@@ -105,19 +105,19 @@ const calcDirection = (oldX: number, oldY: number, newX: number, newY: number):
   return Direction.UNCHANGED
 }
 
-const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
+const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
 
 const charTexture = computed(() => {
-  const { rotation, characterType } = props.zoneCharacter.character
+  const { rotation, characterType } = props.mapCharacter.character
   const spriteId = characterType?.sprite ?? 'idle_right_down'
-  const action = props.zoneCharacter.isMoving ? 'walk' : 'idle'
+  const action = props.mapCharacter.isMoving ? 'walk' : 'idle'
   const direction = [0, 6].includes(rotation) ? 'left_up' : 'right_down'
 
   return `${spriteId}-${action}_${direction}`
 })
 
 const updateSprite = () => {
-  if (props.zoneCharacter.isMoving) {
+  if (props.mapCharacter.isMoving) {
     charSprite.value!.anims.play(charTexture.value, true)
     return
   }
@@ -129,10 +129,10 @@ const updateSprite = () => {
 
 watch(
   () => ({
-    x: props.zoneCharacter.character.positionX,
-    y: props.zoneCharacter.character.positionY,
-    isMoving: props.zoneCharacter.isMoving,
-    rotation: props.zoneCharacter.character.rotation
+    x: props.mapCharacter.character.positionX,
+    y: props.mapCharacter.character.positionY,
+    isMoving: props.mapCharacter.isMoving,
+    rotation: props.mapCharacter.character.rotation
   }),
   (newValues, oldValues) => {
     if (!newValues) return
@@ -150,9 +150,9 @@ watch(
   { deep: true }
 )
 
-watch(() => props.zoneCharacter, updateSprite)
+watch(() => props.mapCharacter, updateSprite)
 
-loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as string)
+loadSpriteTextures(scene, props.mapCharacter.character.characterType?.sprite as string)
   .then(() => {
     charSprite.value!.setTexture(charTexture.value)
     charSprite.value!.setFlipX(isFlippedX.value)
@@ -162,17 +162,17 @@ loadSpriteTextures(scene, props.zoneCharacter.character.characterType?.sprite as
   })
 
 onMounted(() => {
-  charContainer.value!.setName(props.zoneCharacter.character!.name)
+  charContainer.value!.setName(props.mapCharacter.character!.name)
 
-  if (props.zoneCharacter.character.id === gameStore.character!.id) {
-    zoneStore.setCharacterLoaded(true)
+  if (props.mapCharacter.character.id === gameStore.character!.id) {
+    mapStore.setCharacterLoaded(true)
 
     // #146 : Set camera position to character, need to be improved still
     // scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
     // scene.cameras.main.stopFollow()
   }
 
-  updatePosition(props.zoneCharacter.character.positionX, props.zoneCharacter.character.positionY, props.zoneCharacter.character.rotation)
+  updatePosition(props.mapCharacter.character.positionX, props.mapCharacter.character.positionY, props.mapCharacter.character.rotation)
 })
 
 onUnmounted(() => {

src/components/game/character/partials/CharacterChest.vue

@@ -3,14 +3,14 @@
 </template>
 
 <script lang="ts" setup>
-import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
+import type { Sprite as SpriteT, MapCharacter } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed } from 'vue'
 
 const props = defineProps<{
-  zoneCharacter: ZoneCharacter
+  mapCharacter: MapCharacter
   currentX: number
   currentY: number
 }>()
@@ -19,19 +19,19 @@ const gameStore = useGameStore()
 const scene = useScene()
 
 const texture = computed(() => {
-  const { rotation, characterHair } = props.zoneCharacter.character
+  const { rotation, characterHair } = props.mapCharacter.character
   const spriteId = characterHair?.sprite?.id
   const direction = [0, 6].includes(rotation) ? 'back' : 'front'
 
   return `${spriteId}-${direction}`
 })
 
-const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
+const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
 
 const imageProps = computed(() => {
   // Get the current sprite action based on direction
-  const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
-  const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
+  const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
+  const spriteAction = props.mapCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
 
   return {
     depth: 1,
@@ -39,11 +39,11 @@ const imageProps = computed(() => {
     originY: Number(spriteAction?.originY) ?? 0,
     flipX: isFlippedX.value,
     texture: texture.value
-    // y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
+    // y: props.mapCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
   }
 })
 
-loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
+loadSpriteTextures(scene, props.mapCharacter.character.characterHair?.sprite as SpriteT)
   .then(() => {})
   .catch((error) => {
     console.error('Error loading texture:', error)

src/components/game/character/partials/CharacterHair.vue

@@ -3,14 +3,14 @@
 </template>
 
 <script lang="ts" setup>
-import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
+import type { Sprite as SpriteT, MapCharacter } from '@/application/types'
 import { loadSpriteTextures } from '@/composables/gameComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { Image, useScene } from 'phavuer'
 import { computed } from 'vue'
 
 const props = defineProps<{
-  zoneCharacter: ZoneCharacter
+  mapCharacter: MapCharacter
   currentX: number
   currentY: number
 }>()
@@ -19,19 +19,19 @@ const gameStore = useGameStore()
 const scene = useScene()
 
 const texture = computed(() => {
-  const { rotation, characterHair } = props.zoneCharacter.character
+  const { rotation, characterHair } = props.mapCharacter.character
   const spriteId = characterHair?.sprite?.id
   const direction = [0, 6].includes(rotation) ? 'back' : 'front'
 
   return `${spriteId}-${direction}`
 })
 
-const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
+const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
 
 const imageProps = computed(() => {
   // Get the current sprite action based on direction
-  const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
-  const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
+  const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
+  const spriteAction = props.mapCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
 
   return {
     depth: 1,
@@ -39,11 +39,11 @@ const imageProps = computed(() => {
     originY: Number(spriteAction?.originY) ?? 0,
     flipX: isFlippedX.value,
     texture: texture.value,
-    y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
+    y: props.mapCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
   }
 })
 
-loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
+loadSpriteTextures(scene, props.mapCharacter.character.characterHair?.sprite as SpriteT)
   .then(() => {})
   .catch((error) => {
     console.error('Error loading texture:', error)

src/components/game/character/partials/ChatBubble.vue

@@ -6,12 +6,12 @@
 </template>
 
 <script setup lang="ts">
-import type { ZoneCharacter } from '@/application/types'
+import type { MapCharacter } from '@/application/types'
 import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
 import { onMounted } from 'vue'
 
 const props = defineProps<{
-  zoneCharacter: ZoneCharacter
+  mapCharacter: MapCharacter
   currentX: number
   currentY: number
 }>()
@@ -20,11 +20,11 @@ const game = useGame()
 const charChatContainer = refObj<Phaser.GameObjects.Container>()
 
 const createChatBubble = (container: Phaser.GameObjects.Container) => {
-  container.setName(`${props.zoneCharacter.character.name}_chatBubble`)
+  container.setName(`${props.mapCharacter.character.name}_chatBubble`)
 }
 
 const createChatText = (text: Phaser.GameObjects.Text) => {
-  text.setName(`${props.zoneCharacter.character.name}_chatText`)
+  text.setName(`${props.mapCharacter.character.name}_chatText`)
   text.setFontSize(13)
   text.setFontFamily('Arial')
   text.setOrigin(0.5, 10.9)
@@ -40,7 +40,7 @@ const createChatText = (text: Phaser.GameObjects.Text) => {
 }
 
 onMounted(() => {
-  charChatContainer.value!.setName(`${props.zoneCharacter.character!.name}_chatContainer`)
+  charChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
   charChatContainer.value!.setVisible(false)
 })
 </script>

src/components/game/character/partials/Healthbar.vue

@@ -1,17 +1,17 @@
 <template>
   <Container :depth="999" :x="currentX" :y="currentY">
-    <Text @create="createNicknameText" :text="props.zoneCharacter.character.name" />
+    <Text @create="createNicknameText" :text="props.mapCharacter.character.name" />
     <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
     <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
   </Container>
 </template>
 
 <script setup lang="ts">
-import type { ZoneCharacter } from '@/application/types'
+import type { MapCharacter } from '@/application/types'
 import { Container, RoundRectangle, Text, useGame } from 'phavuer'
 
 const props = defineProps<{
-  zoneCharacter: ZoneCharacter
+  mapCharacter: MapCharacter
   currentX: number
   currentY: number
 }>()

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

@@ -6,15 +6,15 @@
 import config from '@/application/config'
 import { unduplicateArray } from '@/application/utilities'
 import Controls from '@/components/utilities/Controls.vue'
-import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
-import { useZoneStore } from '@/stores/zoneStore'
+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 zoneStore = useZoneStore()
+const mapStore = useMapStore()
 const tileMap = createTileMap()
 const tileLayer = createTileLayer()
 
@@ -24,16 +24,16 @@ const tileLayer = createTileLayer()
  * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
  */
 function createTileMap() {
-  const zoneData = new Phaser.Tilemaps.MapData({
-    width: zoneStore.zone?.width,
-    height: zoneStore.zone?.height,
+  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, zoneData)
+  const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
   emit('tileMap:create', newTileMap)
 
   return newTileMap
@@ -43,7 +43,7 @@ function createTileMap() {
  * 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(FlattenZoneArray(zoneStore.zone?.tiles ?? []))
+  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 })
@@ -59,7 +59,7 @@ function createTileLayer() {
   return layer
 }
 
-setLayerTiles(tileMap, tileLayer, zoneStore.zone?.tiles)
+setLayerTiles(tileMap, tileLayer, mapStore.map?.tiles)
 
 onBeforeUnmount(() => {
   tileMap.destroyLayer('tiles')

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>

src/components/game/zone/Characters.vue

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

src/components/game/zone/Zone.vue

@@ -1,50 +0,0 @@
-<template>
-  <ZoneTiles :key="zoneStore.zone?.id ?? 0" @tileMap:create="tileMap = $event" />
-  <ZoneObjects 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 { ZoneCharacter, zoneLoadData } from '@/application/types'
-import Characters from '@/components/game/zone/Characters.vue'
-import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
-import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
-import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
-import { useGameStore } from '@/stores/gameStore'
-import { useZoneStore } from '@/stores/zoneStore'
-import { useScene } from 'phavuer'
-import { onUnmounted, ref } from 'vue'
-
-const scene = useScene()
-const gameStore = useGameStore()
-const zoneStore = useZoneStore()
-
-const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
-
-onUnmounted(() => {
-  zoneStore.reset()
-  gameStore.connection!.off('zone:character:teleport')
-  gameStore.connection!.off('zone:character:join')
-  gameStore.connection!.off('zone:character:leave')
-  gameStore.connection!.off('zone:character:move')
-})
-
-// Event listeners
-gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) => {
-  await loadZoneTilesIntoScene(data.zone.id, scene)
-  zoneStore.setZone(data.zone)
-  zoneStore.setCharacters(data.characters)
-})
-
-gameStore.connection!.on('zone:character:join', async (data: ZoneCharacter) => {
-  zoneStore.addCharacter(data)
-})
-
-gameStore.connection!.on('zone:character:leave', (characterId: number) => {
-  zoneStore.removeCharacter(characterId)
-})
-
-gameStore.connection!.on('zone:character:move', (data: { characterId: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
-  zoneStore.updateCharacterPosition(data)
-})
-</script>

src/components/game/zone/ZoneObjects.vue

@@ -1,14 +0,0 @@
-<template>
-  <ZoneObject v-for="zoneObject in zoneStore.zone?.zoneObjects" :tilemap="tilemap" :zoneObject />
-</template>
-
-<script setup lang="ts">
-import ZoneObject from '@/components/game/zone/partials/ZoneObject.vue'
-import { useZoneStore } from '@/stores/zoneStore'
-
-const zoneStore = useZoneStore()
-
-defineProps<{
-  tilemap: Phaser.Tilemaps.Tilemap
-}>()
-</script>

src/components/game/zone/partials/ZoneObject.vue

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