wew

src/components/World.vue

@@ -1,5 +1,5 @@
 <template>
-  <TilemapLayer v-if="isMapLoaded" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tilemap="map" :tileset="serverMapData.tiles" />
+  <TilemapLayer v-if="isMapLoaded" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tilemap="tileMap" :tileset="mapStore.map" />
 <!--  <Controls :layer="layer" />-->
 </template>
 
@@ -17,19 +17,59 @@ 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 { storeToRefs } from 'pinia'
 
-onBeforeMount(() => {
-  socket.socket?.emit('get_map');
-  socket.socket?.on('map', (map) => {
-    // Get map from server
-    serverMapData.value = map;
-    isMapLoaded.value = true;
-    map.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
-  });
-});
+const mapStore = useMapStore();
+/**
+ * {
+ *     "$id": "map",
+ *     "map": {
+ *         "_object": {
+ *             "map": null
+ *         },
+ *         "_key": "map",
+ *         "__v_isRef": true
+ *     },
+ *     "_isOptionsAPI": true
+ * }
+ */
+
+/**
+ *
+ * {
+ *     "$id": "map",
+ *     "map": {
+ *         "_object": {
+ *             "map": null
+ *         },
+ *         "_key": "map",
+ *         "__v_isRef": true
+ *     },
+ *     "_isOptionsAPI": true
+ * }
+ */
+// check mapstore change
+// const { map } = storeToRefs(mapStore);
+// watch(map, (newVal, oldVal) => {
+//   console.log('mapstore changed', newVal, oldVal);
+// })
+
+watch(mapStore, (newVal, oldVal) => {
+  console.log('mapstore changed', storeToRefs(newVal), storeToRefs(oldVal));
+})
+
+  const socket = useSocketStore();
+onMounted(() => {
+  socket.getMap();
+})
+
+
+// mapStore.$subscribe((mutation, state) => {
+//   mapStore.map.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
+// })
 
 const isMapLoaded = ref(false);
-const socket = useSocketStore();
 const serverMapData = ref([]);
 const scene = useScene()
 
@@ -42,13 +82,13 @@ const mapData = new Phaser.Tilemaps.MapData({
   orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
   format: Phaser.Tilemaps.Formats.ARRAY_2D,
 });
-const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
-const tileset: (Tileset|null) = map.addTilesetImage('default', 'tiles');
-const layer:TilemapLayer = map.createBlankLayer('layer', tileset, 0, config.tile_size.y);
+const tileMap = new Phaser.Tilemaps.Tilemap(scene, mapData);
+const tileset: (Tileset|null) = tileMap.addTilesetImage('default', 'tiles');
+const layer:TilemapLayer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y);
 
 // center camera
-const centerY = (map.height * map.tileHeight) / 2
-const centerX = (map.width * map.tileWidth) / 2
+const centerY = (tileMap.height * tileMap.tileHeight) / 2
+const centerX = (tileMap.width * tileMap.tileWidth) / 2
 scene.cameras.main.centerOn(centerX, centerY)
 
 /**

src/stores/map.ts

@@ -3,11 +3,12 @@ import Map from '@/engine/Map/Map'
 
 export const useMapStore = defineStore('map', {
   state: () => ({
-    map: null as Map | null,
+    map: null as any | null,
   }),
 
   actions: {
-    setMap(map: Map) {
+    setMap(map: any) {
+      console.log('Setting map:', map);
       this.map = map;
     }
   }

src/stores/socket.ts

@@ -9,6 +9,10 @@ import { defineStore } from 'pinia';
 import { io, Socket } from 'socket.io-client';
 import config from '@/config';
 import axios from 'axios';
+import { useMapStore } from '@/stores/map';
+
+
+
 
 export const useSocketStore = defineStore('socket', {
   state: () => ({
@@ -59,7 +63,6 @@ export const useSocketStore = defineStore('socket', {
       this.socket.on('message', (message) => {
         console.log('Received message:', message);
       });
-
       // Handle more socket events as needed
     },
 
@@ -68,6 +71,17 @@ export const useSocketStore = defineStore('socket', {
         this.socket.disconnect();
         this.socket = null;
       }
+    },
+
+    getMap() {
+      if (this.socket) {
+        this.socket.emit('get_map');
+        this.socket.on('map', (map) => {
+          const mapStore = useMapStore();
+          // Get map from server
+          mapStore.setMap(map);
+        });
+      }
     }
   }
 });