Added GUI components

2024-05-12 21:24:29 +02:00 · 2024-05-12 21:24:29 +02:00 · 36f38b4c94
commit 36f38b4c94
parent 70d7371351
8 changed files with 129 additions and 65 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1973,30 +1973,30 @@
      }
    },
    "node_modules/@volar/language-core": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.1.tgz",
-      "integrity": "sha512-iHJAZKcYldZgyS8gx6DfIZApViVBeqbf6iPhqoZpG5A6F4zsZiFldKfwaKaBA3/wnOTWE2i8VUbXywI1WywCPg==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.2.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.1.tgz",
-      "integrity": "sha512-w1Bgpguhbp7YTr7VUFu6gb4iAZjeEPsOX4zpgiuvlldbzvIWDWy4t0jVifsIsxZ99HAu+c3swiME7wt+GeNqhA==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.2.tgz",
+      "integrity": "sha512-vUwvZuSW6iN4JI9QRinh9EjFasx1TUtnaWMKwgWx08xz1PyYuNkLlWlrZXBZ5GGBhML0u230M/7X+AHY2h9yKg==",
      "dev": true,
      "dependencies": {
        "muggle-string": "^0.4.0"
      }
    },
    "node_modules/@volar/typescript": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.1.tgz",
-      "integrity": "sha512-Z/tqluR7Hz5/5dCqQp7wo9C/6tSv/IYl+tTzgzUt2NjTq95bKSsuO4E+V06D0c+3aP9x5S9jggLqw451hpnc6Q==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.2.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.16.tgz",
-      "integrity": "sha512-Bc2sexRH99pznOph8mLw2BlRZ9edm7tW51kcBXgx8adAoOcZUWJj3UNSsdQ6H9Y8meGz7BoazVrVo/jUukIsPw==",
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.17.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.761.tgz",
-      "integrity": "sha512-PIbxpiJGx6Bb8dQaonNc6CGTRlVntdLg/2nMa1YhnrwYOORY9a3ZgGN0UQYE6lAcj/lkyduJN7BPt/JiY+jAQQ==",
+      "version": "1.4.763",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.763.tgz",
+      "integrity": "sha512-k4J8NrtJ9QrvHLRo8Q18OncqBCB7tIUyqxRcJnlonQ0ioHKYB988GcDFF3ZePmnb8eHEopDs/wPHR/iGAFgoUQ==",
      "dev": true
    },
    "node_modules/emoji-regex": {
@ -3681,9 +3681,9 @@
      }
    },
    "node_modules/glob": {
-      "version": "10.3.14",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.14.tgz",
-      "integrity": "sha512-4fkAqu93xe9Mk7le9v0y3VrPDqLKHarNi2s4Pv7f2yOvfhWfhc7hRPHC/JyqMqb8B/Dt/eGS4n7ykwf3fOsl8g==",
+      "version": "10.3.15",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.0.tgz",
-      "integrity": "sha512-LNHTaVkzaYaLGlO+0u3rQTz7QrHTFOuKyba9JMTQutkmtNew8dw8wOD7mTU/5fCPZzCWpfW0XnQKzY61P0aTaw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.0.tgz",
-      "integrity": "sha512-/RpmvKdxKf8uILTtoOhAgf30wYbP2Qw+L9p3Rvshx1JZVX+XQNZQFjlbmGHEGIm4CkVPlSn+NXmIM8+9oWQaSA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.1.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.0.tgz",
-      "integrity": "sha512-eGj4HNfXqBWtSnvItNkn7B6icqH14i3CiCGbzMKs3BAPTq62pp9NBYsBgyN4cA+qssqo9r26lW4JSvlaUUWbgw==",
+      "version": "1.77.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.1.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.1.tgz",
-      "integrity": "sha512-f/vbBsu+fOiYt+lmwZV0rVwJScl46HppnOA1ZvIuBWKOTlllpyJ3bfVax76/OrhCH38dyxoDIA8K7uB963IYgA==",
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.16.tgz",
-      "integrity": "sha512-qisL/iAfdO++7w+SsfYQJVPj6QKvxp4i1MMxvsNO41z/8zu3KuAw9LkhKUfP/kcOWGDxESp+pQObWppXusejCA==",
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.17.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.16.tgz",
-      "integrity": "sha512-/gHAWJa216PeEhfxtAToIbxdWgw01wuQzo48ZUqMYVEyNqDp+OYV9xMO5HaPS2P3Ls0+EsjguMZLY4cGobX4Ew==",
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.17.tgz",
+      "integrity": "sha512-RRZsiCBD1hvATQb321xV+SkRDKsK5hgFQ4WXy5wuYsyyjz8xAK4DjxHkpH7PFoJKUbZTbeW8KzhejzXZS49Tzw==",
      "dev": true,
      "dependencies": {
-        "@volar/typescript": "~2.2.0",
-        "@vue/language-core": "2.0.16",
+        "@volar/typescript": "~2.2.2",
+        "@vue/language-core": "2.0.17",
        "semver": "^7.5.4"
      },
      "bin": {
--- a/src/components/Game.vue
+++ b/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>
--- a/src/components/World.vue
+++ b/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
--- a/src/components/game/Chat.vue
+++ b/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>
--- a/src/components/game/Hud.vue
+++ b/src/components/game/Hud.vue
@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/src/components/game/Menu.vue
+++ b/src/components/game/Menu.vue
@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/src/components/screens/CharacterSelection.vue
+++ b/src/components/screens/CharacterSelection.vue
--- a/src/stores/socket.ts
+++ b/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;
      }
    },
  }