Worked on zones

src/components/World.vue

@@ -10,6 +10,7 @@
 <script setup lang="ts">
 import { Container, refObj, TilemapLayer, useScene } from 'phavuer'
 import Character from '@/components/sprites/Character.vue'
+import {Character as CharacterType} from '@/types'
 import config from '@/config'
 import { onBeforeMount, onMounted, reactive, ref, type Ref, toRaw, watch } from 'vue'
 import Tileset = Phaser.Tilemaps.Tileset
@@ -53,7 +54,6 @@ watch(
 
 // Load the zone from the server
 onBeforeMount(() => {
-  socket.getConnection.emit('character:connect')
   socket.getConnection.emit('character:zone:load')
 })
 
@@ -76,17 +76,13 @@ socket.getConnection.on('character:zone:load', (data) => {
 })
 
 // Listen for player join events
-socket.getConnection.on('player_join', (data) => {
-  console.log('player_join', data)
-  if (data.id === socket.getConnection.id) {
+socket.getConnection.on('character:zone:character_join', (data: CharacterType) => {
+  console.log('character:zone:character_join', data)
+  if (data.id === socket.getConnection.character.id) {
     console.log('self')
     return
   }
-  zoneStore.addPlayer(data)
-})
-
-socket.getConnection.on('ping', (data) => {
-  console.log('ping', data)
+  zoneStore.addCharacter(data)
 })
 
 /**

src/components/screens/Characters.vue

@@ -59,7 +59,6 @@ import { ref } from 'vue'
 import Modal from '@/components/utilities/Modal.vue'
 import {type Character as CharacterT} from '@/types'
 
-
 const characters = ref([])
 const socket = useSocketStore()
 
@@ -72,7 +71,6 @@ socket.getConnection.emit('character:list')
 // Select character logics
 const selected_character = ref(null)
 function select_character() {
-  console.log(selected_character.value)
   if (!selected_character.value) return
   socket.getConnection.emit('character:connect', { character_id: selected_character.value })
   socket.getConnection.on('character:connect', (data: CharacterT) => socket.setCharacter(data))
@@ -86,7 +84,7 @@ function delete_character(character_id: number) {
 
 // Create character logics
 const isModalOpen = ref(false)
-let name: any = ref('')
+const name = ref('')
 function create() {
   socket.getConnection.on('character:create:success', (data: CharacterT) => {
     socket.setCharacter(data)

src/stores/zone.ts

@@ -1,30 +1,34 @@
 import { defineStore } from 'pinia'
+import type { Character } from '@/types'
 
 export const useZoneStore = defineStore('zone', {
   state: () => ({
     loaded: false,
     tiles: undefined,
-    players: {}
+    characters: [] as Character[]
   }),
   getters: {
     isLoaded: (state) => state.loaded,
     getTiles: (state) => state.tiles,
-    getPlayers: (state) => state.players
+    getCharacters: (state) => state.characters
   },
   actions: {
     loadTiles(tiles: any) {
       this.tiles = tiles
       this.loaded = true
     },
-    addPlayers(player: any) {
-      this.players = player
+    setCharacters(characters: Character[]) {
+      this.characters = characters
     },
-    addPlayer(player: any) {
-      this.players[player.id] = player
-      console.log('Player added:', player)
+    addCharacter(character: Character) {
+      this.characters.push(character)
     },
-    removePlayer(playerId: any) {
-      delete this.players[playerId]
+    removeCharacter(character: Character) {
+      this.characters = this.characters.filter((c: Character) => c.id !== character.id)
+    },
+    updateCharacter(character: Character) {
+      const index = this.characters.findIndex((c: Character) => c.id === character.id)
+      this.characters[index] = character
     }
   }
 })