stash

src/components/World.vue

@@ -1,17 +1,17 @@
 <template>
-  <TilemapLayer v-if="mapStore.isLoaded" :tilemap="tileMap" :tileset="mapStore.getTiles" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
+  <TilemapLayer v-if="zoneStore.isLoaded" :tilemap="tileMap" :tileset="zoneStore.getTiles" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
   <Controls :layer="layer" />
   <Player :layer="layer" />
-  <Container v-if="mapStore.isLoaded">
-    <Player :layer="layer" v-for="player in mapStore.getPlayers" :key="player.id" :player="player" />
+  <Container v-if="zoneStore.isLoaded && zoneStore.getPlayers.length > 0">
+    <Player :layer="layer" v-for="player in zoneStore.getPlayers" :key="player.id" :player="player" />
   </Container>
 </template>
 
 <script setup lang="ts">
 /**
  * 1 tile is 64x32
- * the map is 10x10
- * so the map is 640x320
+ * the zone is 10x10
+ * so the zone is 640x320
  */
 import { Container, refObj, TilemapLayer, useScene } from 'phavuer'
 import Player from '@/components/sprites/player/Player.vue'
@@ -20,12 +20,12 @@ import { onBeforeMount, onMounted, reactive, ref, type Ref, toRaw, watch } from
 import Tileset = Phaser.Tilemaps.Tileset
 import Controls from '@/components/Controls.vue'
 import { useSocketStore } from '@/stores/socket'
-import { useMapStore } from '@/stores/map'
+import { useZoneStore } from '@/stores/zone'
 
 // Phavuer logic
 let scene = useScene()
 let tilemapLayer = ref();
-let mapData = new Phaser.Tilemaps.MapData({
+let zoneData = new Phaser.Tilemaps.MapData({
   width: 10, // @TODO : get this from the server
   height: 10, // @TODO : get this from the server
   tileWidth: config.tile_size.x,
@@ -33,7 +33,7 @@ let mapData = new Phaser.Tilemaps.MapData({
   orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
   format: Phaser.Tilemaps.Formats.ARRAY_2D,
 });
-let tileMap = new Phaser.Tilemaps.Tilemap(scene, mapData);
+let tileMap = new Phaser.Tilemaps.Tilemap(scene, zoneData);
 let tileset: any = tileMap.addTilesetImage('default', 'tiles');
 let layer: (typeof TilemapLayer|null) = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y);
 
@@ -43,28 +43,29 @@ const centerX = (tileMap.width * tileMap.tileWidth) / 2
 scene.cameras.main.centerOn(centerX, centerY)
 
 // Multiplayer / server logics
-const mapStore = useMapStore();
+const zoneStore = useZoneStore();
 const socket = useSocketStore();
 
-// Watch for changes in the mapStore and update the layer
-watch (() => mapStore.loaded, () => {
-  mapStore.getTiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
+// Watch for changes in the zoneStore and update the layer
+watch (() => zoneStore.loaded, () => {
+  zoneStore.getTiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
 }, { deep: true })
 
 
-// Load the map from the server
+// Load the zone from the server
 onBeforeMount(() => {
-  socket.socket?.emit('get_map');
+  socket.socket?.emit('player:connect');
+  socket.socket?.emit('player:getMap');
 })
 
-// Listen for the map event from the server and load the map
-socket.socket?.on('map', (data) => {
-  mapStore.loadTiles(data.tiles)
+// Listen for the zone event from the server and load the zone
+socket.socket?.on('zone', (data) => {
+  zoneStore.loadTiles(data.tiles)
 
 
   /**
    * @TODO
-   * bug , when 2nd player joins, the first player is not added to the map
+   * bug , when 2nd player joins, the first player is not added to the zone
    */
 
   console.log(data.players);
@@ -74,13 +75,17 @@ socket.socket?.on('map', (data) => {
   // remove self from the players list
   delete data.players[socket.socket?.id];
 
-  mapStore.addPlayers(data.players);
+  zoneStore.addPlayers(data.players);
 })
 
 // Listen for player join events
 socket.socket?.on('player_join', (data) => {
   console.log('player_join', data)
-  mapStore.addPlayer(data);
+  if (data.id === socket.socket?.id) {
+    console.log('self');
+    return;
+  }
+  zoneStore.addPlayer(data);
 })
 
 socket.socket?.on('ping', (data) => {

src/config.ts

@@ -1,6 +1,6 @@
 export default {
   name: 'New Quest',
-  server_endpoint: 'https://680760d68d724d.lhr.life',
+  server_endpoint: 'http://localhost:4000',
   development: true,
   width: 960,
   height: 540,

src/stores/socket.ts

@@ -5,7 +5,7 @@
  * https://pinia.vuejs.org/
  */
 import { defineStore } from 'pinia';
-import {useMapStore} from '@/stores/map'
+import {useZoneStore} from '@/stores/zone'
 import { io, Socket } from 'socket.io-client';
 import config from '@/config';
 import axios from 'axios';

src/stores/zone.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 
-export const useMapStore = defineStore('gameMap', {
+export const useZoneStore = defineStore('zone', {
   state: () => ({
     loaded: false,
     tiles: undefined,
@@ -16,14 +16,14 @@ export const useMapStore = defineStore('gameMap', {
       this.tiles = tiles;
       this.loaded = true;
     },
-    addPlayers(player) {
+    addPlayers(player: any) {
       this.players = player;
     },
-    addPlayer(player) {
+    addPlayer(player: any) {
       this.players[player.id] = player;
       console.log('Player added:', player);
     },
-    removePlayer(playerId) {
+    removePlayer(playerId: any) {
       delete this.players[playerId];
     }
   }