@@ -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
}
\ No newline at end of file
diff --git a/src/components/World.vue b/src/components/World.vue
index 356f57b..9425997 100644
--- 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
diff --git a/src/components/game/Chat.vue b/src/components/game/Chat.vue
new file mode 100644
index 0000000..024f7ab
--- /dev/null
+++ b/src/components/game/Chat.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/game/Hud.vue b/src/components/game/Hud.vue
new file mode 100644
index 0000000..04a0f45
--- /dev/null
+++ b/src/components/game/Hud.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/game/Menu.vue b/src/components/game/Menu.vue
new file mode 100644
index 0000000..04a0f45
--- /dev/null
+++ b/src/components/game/Menu.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/screens/CharacterSelection.vue b/src/components/screens/CharacterSelection.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/stores/socket.ts b/src/stores/socket.ts
index 7f61f63..ebf2732 100644
--- 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 = 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;
}
},
}