Added GUI components

src/components/Game.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="game-container">
+    <Hud />
+
     <Game :config="gameConfig" class="game" @create="bootGame">
       <Scene name="main" @preload="preloadScene" @create="bootScene">
         <World />
       </Scene>
     </Game>
+
+    <Chat />
+    <Hud />
   </div>
 </template>
 
@@ -14,6 +19,8 @@ import { Game, Scene } from 'phavuer'
 import World from '@/components/World.vue'
 import Pointer = Phaser.Input.Pointer
 import { useSocketStore } from '@/stores/socket'
+import Hud from '@/components/game/Hud.vue'
+import Chat from '@/components/game/Chat.vue'
 
 const socket = useSocketStore();
 
@@ -65,5 +72,6 @@ const bootScene = (scene: Phaser.Scene) => {
   justify-content: center;
   align-items: center;
   height: 100vh;
+  padding:30px
 }
 </style>

src/components/World.vue

@@ -47,35 +47,41 @@ const zoneStore = useZoneStore();
 const socket = useSocketStore();
 
 // Watch for changes in the zoneStore and update the layer
-watch (() => zoneStore.loaded, () => {
+watch (() => zoneStore.loaded, () => { // @TODO : change to tiles for when loading other maps
   zoneStore.getTiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
 }, { deep: true })
 
 
 // Load the zone from the server
 onBeforeMount(() => {
-  socket.socket?.emit('player:connect');
-  socket.socket?.emit('player:getMap');
+  socket.socket?.emit('character:connect');
+  socket.socket?.emit('character:zone:load');
 })
 
 // Listen for the zone event from the server and load the zone
-socket.socket?.on('zone', (data) => {
-  zoneStore.loadTiles(data.tiles)
+socket.socket?.on('character:zone:load', (data) => {
+  console.log('character:zone:load', data.data);
 
+  zoneStore.loadTiles(data.data.tiles)
+  socket.socket?.emit('character:zone:load:players', { zoneId: data.data.id });
 
   /**
    * @TODO
    * bug , when 2nd player joins, the first player is not added to the zone
    */
 
-  console.log(data.players);
+  // console.log(data.players);
+  // console.log(data.players[1]); // key is user id
+  //
+  // // remove self from the players list
+  // delete data.players[socket.socket?.id];
+  //
+  // zoneStore.addPlayers(data.players);
+})
 
-  console.log(data.players[1]); // key is user id
-
-  // remove self from the players list
-  delete data.players[socket.socket?.id];
-
-  zoneStore.addPlayers(data.players);
+socket.socket?.on('character:zone:load:players', (data) => {
+  console.log('character:zone:load:players', data.data);
+  // zoneStore.addPlayers(data.players);
 })
 
 // Listen for player join events

src/components/game/Chat.vue

@@ -0,0 +1,33 @@
+<template>
+<div class="chat-wrapper">
+  <input />
+</div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+.chat-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 20px;
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  input {
+    width: 32rem;
+    height: 3rem;
+    border-radius: 1rem;
+    opacity: 0.8;
+    font-size: 1.2rem;
+    padding: 0 1rem;
+    color: black;
+  }
+}
+
+</style>

src/components/game/Hud.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/game/Menu.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/stores/socket.ts

@@ -4,20 +4,18 @@
  * https://runthatline.com/pinia-watch-state-getters-inside-vue-components/
  * https://pinia.vuejs.org/
  */
-import { defineStore } from 'pinia';
-import {useZoneStore} from '@/stores/zone'
+import { defineStore, type StoreDefinition } from 'pinia'
 import { io, Socket } from 'socket.io-client';
 import config from '@/config';
 import axios from 'axios';
 
-export const useSocketStore = defineStore('socket', {
+export const useSocketStore: StoreDefinition<any> = defineStore('socket', {
   state: () => ({
     isAuthenticated: false,
     socket: null as Socket | null,
   }),
   getters: {
-    auth: (state) => state.isAuthenticated,
-    sockett: (state) => state.socket,
+    auth: (state: any) => state.isAuthenticated,
   },
   actions: {
     async register(username: string, password: string) {
@@ -55,10 +53,6 @@ export const useSocketStore = defineStore('socket', {
         transports: ['websocket']
       });
 
-      this.socket.on('connect', () => {
-        console.log('Socket connected!');
-      });
-
       this.socket.on('message', (message) => {
         console.log('Received message:', message);
       });
@@ -69,6 +63,7 @@ export const useSocketStore = defineStore('socket', {
       if (this.socket) {
         this.socket.disconnect();
         this.socket = null;
+        this.isAuthenticated = false;
       }
     },
   }