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>