Added GUI components

package-lock.json

@@ -1973,30 +1973,30 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.2.1",
+      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.2.tgz",
-      "integrity": "sha512-iHJAZKcYldZgyS8gx6DfIZApViVBeqbf6iPhqoZpG5A6F4zsZiFldKfwaKaBA3/wnOTWE2i8VUbXywI1WywCPg==",
+      "integrity": "sha512-GuvEL4JdxbnLVhPLICncCGT+tVW4cIz9GxXNeDofNnJ4iNTKhr5suGVsA1GLOne9PbraSjn8PlLt+pvLxuRVeQ==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "2.2.1"
+        "@volar/source-map": "2.2.2"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.2.1",
+      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.2.tgz",
-      "integrity": "sha512-w1Bgpguhbp7YTr7VUFu6gb4iAZjeEPsOX4zpgiuvlldbzvIWDWy4t0jVifsIsxZ99HAu+c3swiME7wt+GeNqhA==",
+      "integrity": "sha512-vUwvZuSW6iN4JI9QRinh9EjFasx1TUtnaWMKwgWx08xz1PyYuNkLlWlrZXBZ5GGBhML0u230M/7X+AHY2h9yKg==",
       "dev": true,
       "dependencies": {
         "muggle-string": "^0.4.0"
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "2.2.1",
+      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.2.tgz",
-      "integrity": "sha512-Z/tqluR7Hz5/5dCqQp7wo9C/6tSv/IYl+tTzgzUt2NjTq95bKSsuO4E+V06D0c+3aP9x5S9jggLqw451hpnc6Q==",
+      "integrity": "sha512-WcwOREz7+uOrpjUrKhOMaOKKmyPdtqF95HWX7SE0d9hhBB1KkfahxhaAex5U9Bn43LfINHlycLoYCNEtfeKm0g==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "2.2.1",
+        "@volar/language-core": "2.2.2",
         "path-browserify": "^1.0.1"
       }
     },
@@ -2202,12 +2202,12 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "2.0.16",
+      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.16.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.17.tgz",
-      "integrity": "sha512-Bc2sexRH99pznOph8mLw2BlRZ9edm7tW51kcBXgx8adAoOcZUWJj3UNSsdQ6H9Y8meGz7BoazVrVo/jUukIsPw==",
+      "integrity": "sha512-tHw2J6G9yL4kn3jN5MftOHEq86Y6qnuohBQ1OHkJ73fAv3OYgwDI1cfX7ds0OEJEycOMG64BA3ql5bDgDa41zw==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "~2.2.0",
+        "@volar/language-core": "~2.2.2",
         "@vue/compiler-dom": "^3.4.0",
         "@vue/shared": "^3.4.0",
         "computeds": "^0.0.1",
@@ -3047,9 +3047,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.761",
+      "version": "1.4.763",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.761.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.763.tgz",
-      "integrity": "sha512-PIbxpiJGx6Bb8dQaonNc6CGTRlVntdLg/2nMa1YhnrwYOORY9a3ZgGN0UQYE6lAcj/lkyduJN7BPt/JiY+jAQQ==",
+      "integrity": "sha512-k4J8NrtJ9QrvHLRo8Q18OncqBCB7tIUyqxRcJnlonQ0ioHKYB988GcDFF3ZePmnb8eHEopDs/wPHR/iGAFgoUQ==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -3681,9 +3681,9 @@
       }
     },
     "node_modules/glob": {
-      "version": "10.3.14",
+      "version": "10.3.15",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.14.tgz",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
-      "integrity": "sha512-4fkAqu93xe9Mk7le9v0y3VrPDqLKHarNi2s4Pv7f2yOvfhWfhc7hRPHC/JyqMqb8B/Dt/eGS4n7ykwf3fOsl8g==",
+      "integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
       "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -3696,7 +3696,7 @@
         "glob": "dist/esm/bin.mjs"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=16 || 14 >=14.18"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -4850,16 +4850,16 @@
       }
     },
     "node_modules/path-scurry": {
-      "version": "1.11.0",
+      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-LNHTaVkzaYaLGlO+0u3rQTz7QrHTFOuKyba9JMTQutkmtNew8dw8wOD7mTU/5fCPZzCWpfW0XnQKzY61P0aTaw==",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": ">=16 || 14 >=14.18"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -5014,13 +5014,13 @@
       }
     },
     "node_modules/pkg-types": {
-      "version": "1.1.0",
+      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.1.tgz",
-      "integrity": "sha512-/RpmvKdxKf8uILTtoOhAgf30wYbP2Qw+L9p3Rvshx1JZVX+XQNZQFjlbmGHEGIm4CkVPlSn+NXmIM8+9oWQaSA==",
+      "integrity": "sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==",
       "dev": true,
       "dependencies": {
         "confbox": "^0.1.7",
-        "mlly": "^1.6.1",
+        "mlly": "^1.7.0",
         "pathe": "^1.1.2"
       }
     },
@@ -5386,9 +5386,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.77.0",
+      "version": "1.77.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.1.tgz",
-      "integrity": "sha512-eGj4HNfXqBWtSnvItNkn7B6icqH14i3CiCGbzMKs3BAPTq62pp9NBYsBgyN4cA+qssqo9r26lW4JSvlaUUWbgw==",
+      "integrity": "sha512-OMEyfirt9XEfyvocduUIOlUSkWOXS/LAt6oblR/ISXCTukyavjex+zQNm51pPCOiFKY1QpWvEH1EeCkgyV3I6w==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -5415,9 +5415,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.6.1",
+      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-f/vbBsu+fOiYt+lmwZV0rVwJScl46HppnOA1ZvIuBWKOTlllpyJ3bfVax76/OrhCH38dyxoDIA8K7uB963IYgA==",
+      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
       "dev": true,
       "bin": {
         "semver": "bin/semver.js"
@@ -6198,9 +6198,9 @@
       }
     },
     "node_modules/vue-component-type-helpers": {
-      "version": "2.0.16",
+      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.16.tgz",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.17.tgz",
-      "integrity": "sha512-qisL/iAfdO++7w+SsfYQJVPj6QKvxp4i1MMxvsNO41z/8zu3KuAw9LkhKUfP/kcOWGDxESp+pQObWppXusejCA==",
+      "integrity": "sha512-2car49m8ciqg/JjgMBkx7o/Fd2A7fHESxNqL/2vJYFLXm4VwYO4yH0rexOi4a35vwNgDyvt17B07Vj126l9rAQ==",
       "dev": true
     },
     "node_modules/vue-eslint-parser": {
@@ -6238,13 +6238,13 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "2.0.16",
+      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.16.tgz",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.17.tgz",
-      "integrity": "sha512-/gHAWJa216PeEhfxtAToIbxdWgw01wuQzo48ZUqMYVEyNqDp+OYV9xMO5HaPS2P3Ls0+EsjguMZLY4cGobX4Ew==",
+      "integrity": "sha512-RRZsiCBD1hvATQb321xV+SkRDKsK5hgFQ4WXy5wuYsyyjz8xAK4DjxHkpH7PFoJKUbZTbeW8KzhejzXZS49Tzw==",
       "dev": true,
       "dependencies": {
-        "@volar/typescript": "~2.2.0",
+        "@volar/typescript": "~2.2.2",
-        "@vue/language-core": "2.0.16",
+        "@vue/language-core": "2.0.17",
         "semver": "^7.5.4"
       },
       "bin": {

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('character:connect');
-  socket.socket?.emit('player:getMap');
+  socket.socket?.emit('character:zone:load');
 })
 
 // Listen for the zone event from the server and load the zone
-socket.socket?.on('zone', (data) => {
+socket.socket?.on('character:zone:load', (data) => {
-  zoneStore.loadTiles(data.tiles)
+  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
+socket.socket?.on('character:zone:load:players', (data) => {
-
+  console.log('character:zone:load:players', data.data);
-  // remove self from the players list
+  // zoneStore.addPlayers(data.players);
-  delete data.players[socket.socket?.id];
-
-  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 { defineStore, type StoreDefinition } from 'pinia'
-import {useZoneStore} from '@/stores/zone'
 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,
+    auth: (state: any) => state.isAuthenticated,
-    sockett: (state) => state.socket,
   },
   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;
       }
     },
   }