Major refractor, cleaning and improvements.

src/components/Zone.vue

@@ -1,233 +0,0 @@
-<template>
-  <TilemapLayerC :tilemap="zoneTilemap" :tileset="tileArray" :layerIndex="0" :cull-padding="10" />
-  <Controls :layer="tiles" />
-
-  <Container :depth="2">
-    <template v-for="item in sortedItems" :key="item.id">
-      <Image
-        v-if="item.type === 'object'"
-        :x="tileToWorldX(zoneTilemap as any, item.positionX, item.positionY)"
-        :y="tileToWorldY(zoneTilemap as any, item.positionX, item.positionY)"
-        :texture="item.object.id"
-        :originY="Number(item.object.originX)"
-        :originX="Number(item.object.originY)"
-        :depth="item.depth > 0 ? item.depth : undefined"
-      />
-      <Character v-else :layer="zoneTilemap as any" :character="item" :depth="item.depth" />
-    </template>
-  </Container>
-</template>
-
-<script setup lang="ts">
-import config from '@/config'
-import { Container, Image, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
-import { onBeforeMount, onBeforeUnmount, ref, toRaw, computed, onUnmounted } from 'vue'
-import Controls from '@/components/utilities/Controls.vue'
-import { useGameStore } from '@/stores/game'
-import { useAssetStore } from '@/stores/assets'
-import type { Zone, ZoneObject, ExtendedCharacter, CharacterType } from '@/types'
-import TilemapLayer = Phaser.Tilemaps.TilemapLayer
-import { useZoneStore } from '@/stores/zone'
-import Character from '@/components/sprites/Character.vue'
-import {
-  createZoneData,
-  createTilesetImages,
-  initializeZoneTiles,
-  updateZoneTiles,
-  calculateDepth,
-  sortByDepth,
-  tileToWorldX,
-  tileToWorldY,
-  placeTile, setAllTiles
-} from '@/services/zone'
-import { storeToRefs } from 'pinia'
-import Tilemap = Phaser.Tilemaps.Tilemap
-
-const scene = useScene()
-const gameStore = useGameStore()
-const assetStore = useAssetStore()
-const zoneStore = useZoneStore()
-
-const { zone } = storeToRefs(zoneStore)
-type zoneLoadData = {
-  zone: Zone
-  characters: ExtendedCharacter[]
-}
-if (!zone) {
-  gameStore.connection?.emit('character:zone:request', { zoneId: gameStore.character?.zoneId }, (response: zoneLoadData) => {
-    zoneStore.setCharacters(response.characters)
-    zoneStore.setZone(response.zone)
-  })
-}
-
-const zoneTilemap = ref(createTilemap())
-const tiles = ref(createTileLayer())
-const zoneObjects = ref<ZoneObject[]>([])
-const tileArray = ref(createTileArray())
-
-// Computed property that combines and sorts both objects and characters
-const sortedItems = computed(() => {
-  const objects = zoneObjects.value.map((obj) => ({
-    ...obj,
-    type: 'object' as const,
-    depth: calculateDepth(obj.positionX, obj.positionY, zoneTilemap.value.width)
-  }))
-
-  const characters = zoneStore.characters.map((char) => ({
-    ...char,
-    type: 'character' as const,
-    depth: calculateDepth(char.positionX, char.positionY, zoneTilemap.value.width)
-  }))
-
-  return sortByDepth([...objects, ...characters], zoneTilemap.value.width)
-})
-
-function createTilemap() {
-  const zoneData = new Phaser.Tilemaps.MapData({
-    width: zone.value?.width ?? 10,
-    height: zone.value?.height ?? 10,
-    tileWidth: config.tile_size.x,
-    tileHeight: config.tile_size.y,
-    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-    format: Phaser.Tilemaps.Formats.ARRAY_2D
-  })
-  return new Phaser.Tilemaps.Tilemap(scene, zoneData)
-}
-
-function createTileLayer() {
-  const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.value.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1))
-  tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0))
-  return zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y)
-}
-
-function createTileArray() {
-  return Array.from({ length: zone.value?.width ?? 0 }, () => Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile'))
-}
-
-function getObjectImageProps(object: ZoneObject) {
-  return {
-    x: tileToWorldX(zoneTilemap.value as any, object.positionX, object.positionY),
-    y: tileToWorldY(zoneTilemap.value as any, object.positionX, object.positionY),
-    texture: object.object.id,
-    originY: Number(object.object.originX),
-    originX: Number(object.object.originY)
-  }
-}
-
-onBeforeMount(() => {
-  console.log('before mount')
-  if (!zone.value) {
-    gameStore.connection?.emit('character:zone:request', { zoneId: gameStore.character?.zoneId })
-  }
-  tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
-
-
-  console.log('zone', zone.value)
-
-  if (zone.value?.tiles) {
-    setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles)
-    tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
-  }
-
-  zoneObjects.value = zone.value?.zoneObjects ?? []
-
-  // Center camera
-  const centerY = (zoneTilemap.value.height * zoneTilemap.value.tileHeight) / 2
-  const centerX = (zoneTilemap.value.width * zoneTilemap.value.tileWidth) / 2
-  scene.cameras.main.centerOn(centerX, centerY)
-})
-
-onBeforeUnmount(() => {
-  zoneObjects.value = []
-  tiles.value.destroy()
-  zoneTilemap.value.removeAllLayers()
-  zoneTilemap.value.destroy()
-  zoneStore.reset()
-})
-
-gameStore.connection?.on('character:dataUpdated', (data: CharacterType) => {
-  gameStore.setCharacter(data)
-})
-
-onUnmounted(() => {
-  gameStore.connection?.off('character:dataUpdated')
-})
-
-// const zoneData = createZoneData(gameStore.character?.zone?.width ?? 10, gameStore.character?.zone?.height ?? 10, config.tile_size.x, config.tile_size.y)
-//
-// const zoneTilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
-// const tilesetImages = createTilesetImages(zoneTilemap, toRaw(assetStore.assets), config.tile_size)
-//
-// const tiles = zoneTilemap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
-// const exampleTilesArray = initializeZoneTiles(zoneTilemap, tiles, gameStore.character?.zone?.width ?? 10, gameStore.character?.zone?.height ?? 10)
-//
-// const zoneObjects = ref<ZoneObject[]>([])
-//
-// // Computed property that combines and sorts both objects and characters
-// const sortedItems = computed(() => {
-//   const objects = zoneObjects.value.map((obj) => ({
-//     ...obj,
-//     type: 'object' as const,
-//     depth: calculateDepth(obj.positionX, obj.positionY, zoneTilemap.width)
-//   }))
-//
-//   const characters = zoneStore.characters.map((char) => ({
-//     ...char,
-//     type: 'character' as const,
-//     depth: calculateDepth(char.positionX, char.positionY, zoneTilemap.width)
-//   }))
-//
-//   return sortByDepth([...objects, ...characters], zoneTilemap.width)
-// })
-//
-// // Event listeners
-// gameStore.connection?.on('zone:character:join', (data: ExtendedCharacter) => {
-//   zoneStore.addCharacter(data)
-// })
-//
-// gameStore.connection?.on('zone:character:leave', (character_id: number) => {
-//   zoneStore.removeCharacter(character_id)
-// })
-//
-// gameStore.connection?.on('character:move', (data: ExtendedCharacter) => {
-//   zoneStore.updateCharacter(data)
-// })
-//
-// type zoneLoadData = {
-//   zone: Zone
-//   characters: ExtendedCharacter[]
-// }
-// //
-// gameStore.connection?.on('character:zone:load', (data: zoneLoadData) => {
-//   zoneStore.setZone(data.zone)
-//   zoneStore.setCharacters(data.characters)
-// })
-//
-// onBeforeMount(() => {
-//   if (gameStore.character?.zone) {
-//     updateZoneTiles(zoneTilemap, tiles, gameStore.character.zone)
-//   }
-//
-//   zoneObjects.value = gameStore.character?.zone?.zoneObjects ?? []
-//   gameStore.connection?.emit('character:zone:request', { zoneId: gameStore.character?.zoneId })
-// })
-//
-// onBeforeUnmount(() => {
-//   zoneObjects.value = []
-//   tiles.destroy()
-//   zoneTilemap.removeAllLayers()
-//   zoneTilemap.destroy()
-//   zoneStore.reset()
-//
-//   gameStore.connection?.emit('character:zone:leave')
-//   gameStore.connection?.off('character:zone:load')
-//   gameStore.connection?.off('zone:character:join')
-//   gameStore.connection?.off('user:disconnect')
-//   gameStore.connection?.off('character:move')
-// })
-//
-// // center camera
-// const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2
-// const centerX = (zoneTilemap.width * zoneTilemap.tileWidth) / 2
-// scene.cameras.main.centerOn(centerX, centerY)
-</script>

src/components/gameMaster/GmPanel.vue

@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
-import AssetManager from '@/components/utilities/assetManager/AssetManager.vue'
+import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
 import { useGameStore } from '@/stores/game'
 
 const gameStore = useGameStore()

src/components/gameMaster/assetManager/AssetManager.vue

@@ -58,12 +58,12 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
-import TileList from '@/components/utilities/assetManager/partials/tile/TileList.vue'
-import TileDetails from '@/components/utilities/assetManager/partials/tile/TileDetails.vue'
-import ObjectList from '@/components/utilities/assetManager/partials/object/ObjectList.vue'
-import ObjectDetails from '@/components/utilities/assetManager/partials/object/ObjectDetails.vue'
-import SpriteList from '@/components/utilities/assetManager/partials/sprite/SpriteList.vue'
-import SpriteDetails from '@/components/utilities/assetManager/partials/sprite/SpriteDetails.vue'
+import TileList from '@/components/gameMaster/assetManager/partials/tile/TileList.vue'
+import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'
+import ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue'
+import ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
+import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
+import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
 
 const assetManagerStore = useAssetManagerStore()
 const selectedCategory = ref('tiles')

src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue

@@ -70,7 +70,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
 import { useGameStore } from '@/stores/game'
 import Accordion from '@/components/utilities/Accordion.vue'
-import SpriteActionsInput from '@/components/utilities/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
+import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
 import { uuidv4 } from '@/utilities'
 
 const gameStore = useGameStore()

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -33,13 +33,13 @@ import config from '@/config'
 
 // Components
 import Controls from '@/components/utilities/Controls.vue'
-import Toolbar from '@/components/utilities/zoneEditor/partials/Toolbar.vue'
-import Tiles from '@/components/utilities/zoneEditor/partials/TileList.vue'
-import SelectedZoneObject from '@/components/utilities/zoneEditor/partials/SelectedZoneObject.vue'
-import ZoneSettings from '@/components/utilities/zoneEditor/partials/ZoneSettings.vue'
-import Objects from '@/components/utilities/zoneEditor/partials/ObjectList.vue'
-import ZoneList from '@/components/utilities/zoneEditor/partials/ZoneList.vue'
-import TeleportModal from '@/components/utilities/zoneEditor/partials/TeleportModal.vue'
+import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
+import Tiles from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
+import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
+import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
+import Objects from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
+import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
+import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 

src/components/gameMaster/zoneEditor/partials/ZoneList.vue

@@ -34,7 +34,7 @@ import { useGameStore } from '@/stores/game'
 import Modal from '@/components/utilities/Modal.vue'
 import type { Zone } from '@/types'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
-import CreateZone from '@/components/utilities/zoneEditor/partials/CreateZone.vue'
+import CreateZone from '@/components/gameMaster/zoneEditor/partials/CreateZone.vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()

src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue

@@ -37,7 +37,7 @@
 <script setup>
 import { ref, watch } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
-import { useZoneEditorStore } from '@/stores/zoneEditor'
+import { useZoneEditorStore } from '@/stores/zoneEditor.ts'
 
 const zoneEditorStore = useZoneEditorStore()
 

src/components/zone/Characters.vue

@@ -0,0 +1,14 @@
+<template>
+  <Character v-for="item in zoneStore.characters" :key="item.id" :layer="zoneTilemap as any" :character="item" :depth="item.depth" />
+</template>
+
+<script setup lang="ts">
+import Character from '@/components/sprites/Character.vue'
+import { useZoneStore } from '@/stores/zone'
+import { useGameStore } from '@/stores/game'
+import { useAssetStore } from '@/stores/assets'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+
+const gameStore = useGameStore()
+const zoneStore = useZoneStore()
+</script>

src/components/zone/Objects.vue

@@ -0,0 +1,7 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>

src/components/zone/Tiles.vue

@@ -0,0 +1,61 @@
+<template>
+  <TilemapLayer :tilemap="zoneTilemap" :tileset="tileArray" :layerIndex="0" :cull-padding="10" />
+  <Controls :layer="tiles" />
+</template>
+
+<script setup lang="ts">
+import config from '@/config'
+import { TilemapLayer, useScene } from 'phavuer'
+import { useAssetStore } from '@/stores/assets'
+import { useZoneStore } from '@/stores/zone'
+import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { placeTile, setAllTiles } from '@/services/zone'
+import Controls from '@/components/utilities/Controls.vue'
+
+const assetStore = useAssetStore()
+const zoneStore = useZoneStore()
+const scene = useScene()
+
+const { zone } = storeToRefs(zoneStore)
+const zoneTilemap = ref(createTilemap())
+const tiles = ref(createTileLayer())
+const tileArray = ref(createTileArray())
+
+function createTilemap() {
+  const zoneData = new Phaser.Tilemaps.MapData({
+    width: zone.value?.width,
+    height: zone.value?.height,
+    tileWidth: config.tile_size.x,
+    tileHeight: config.tile_size.y,
+    orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
+    format: Phaser.Tilemaps.Formats.ARRAY_2D
+  })
+  return new Phaser.Tilemaps.Tilemap(scene, zoneData)
+}
+
+function createTileLayer() {
+  const tilesetImages = assetStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.value.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 0, 0, index + 1))
+  tilesetImages.push(zoneTilemap.value.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 0, 0, 0))
+  return zoneTilemap.value.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y)
+}
+
+function createTileArray() {
+  return Array.from({ length: zone.value?.width ?? 0 }, () => Array.from({ length: zone.value?.height ?? 0 }, () => 'blank_tile'))
+}
+
+onBeforeMount(() => {
+  tileArray.value.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap.value, tiles.value, x, y, 'blank_tile')))
+
+  if (zone.value?.tiles) {
+    setAllTiles(zoneTilemap.value, tiles.value, zone.value.tiles)
+    tileArray.value = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
+  }
+})
+
+onBeforeUnmount(() => {
+  tiles.value?.destroy()
+  zoneTilemap.value.removeAllLayers()
+  zoneTilemap.value.destroy()
+})
+</script>

src/components/zone/Zone.vue

@@ -0,0 +1,41 @@
+<template>
+  <Tiles :key="zoneStore.zone?.id ?? 0" />
+  <Objects />
+  <Characters />
+</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 Tiles from '@/components/zone/Tiles.vue'
+import Objects from '@/components/zone/Objects.vue'
+import Characters from '@/components/zone/Characters.vue'
+
+const gameStore = useGameStore()
+const zoneStore = useZoneStore()
+
+type zoneLoadData = {
+  zone: ZoneT
+  characters: CharacterT[]
+}
+
+gameStore.connection?.emit('zone:characterJoin', { zoneId: gameStore.character?.zoneId }, (response: zoneLoadData) => {
+  zoneStore.setZone(response.zone)
+  zoneStore.setCharacters(response.characters)
+})
+
+watch(() => zoneStore.zone, (newZone) => {
+  console.log('Zone changed:', newZone)
+}, { deep: true })
+
+
+onBeforeMount(() => {
+
+});
+
+onBeforeUnmount(() => {
+
+});
+</script>