tried to un-spaghetti my code

package-lock.json

@@ -1633,9 +1633,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.12.8",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.8.tgz",
-      "integrity": "sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==",
+      "version": "20.12.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.10.tgz",
+      "integrity": "sha512-Eem5pH9pmWBHoGAT8Dr5fdc5rYA+4NAovdM4EktRPVAAiJhmWWfQrA0cFhAbOsQdSfIHjAud6YdkbL69+zSKjw==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -1973,30 +1973,30 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0.tgz",
-      "integrity": "sha512-a8WG9+4OdeNDW4ywABZIM6S6UN7em8uIlM/BZ2pWQUYrVmX+m8sj/X+QadvO+Li/t/LjAqbWJQtVgxdpEWLALQ==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.1.tgz",
+      "integrity": "sha512-iHJAZKcYldZgyS8gx6DfIZApViVBeqbf6iPhqoZpG5A6F4zsZiFldKfwaKaBA3/wnOTWE2i8VUbXywI1WywCPg==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "2.2.0"
+        "@volar/source-map": "2.2.1"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0.tgz",
-      "integrity": "sha512-HQlPRlHOVqCCHK8wI76ZldHkEwKsjp7E6idUc36Ekni+KJDNrqgSqPvyHQixybXPHNU7CI9Uxd9/IkxO7LuNBw==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.1.tgz",
+      "integrity": "sha512-w1Bgpguhbp7YTr7VUFu6gb4iAZjeEPsOX4zpgiuvlldbzvIWDWy4t0jVifsIsxZ99HAu+c3swiME7wt+GeNqhA==",
       "dev": true,
       "dependencies": {
         "muggle-string": "^0.4.0"
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0.tgz",
-      "integrity": "sha512-wC6l4zLiiCLxF+FGaHCbWlQYf4vMsnRxYhcI6WgvaNppOD6r1g+Ef1RKRJUApALWU46Yy/JDU/TbdV6w/X6Liw==",
+      "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==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "2.2.0",
+        "@volar/language-core": "2.2.1",
         "path-browserify": "^1.0.1"
       }
     },
@@ -3047,9 +3047,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.756",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.756.tgz",
-      "integrity": "sha512-RJKZ9+vEBMeiPAvKNWyZjuYyUqMndcP1f335oHqn3BEQbs2NFtVrnK5+6Xg5wSM9TknNNpWghGDUCKGYF+xWXw==",
+      "version": "1.4.757",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.757.tgz",
+      "integrity": "sha512-jftDaCknYSSt/+KKeXzH3LX5E2CvRLm75P3Hj+J/dv3CL0qUYcOt13d5FN1NiL5IJbbhzHrb3BomeG2tkSlZmw==",
       "dev": true
     },
     "node_modules/emoji-regex": {

src/components/World.vue

@@ -1,6 +1,10 @@
 <template>
-  <TilemapLayer v-if="isMapLoaded" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tilemap="tileMap" :tileset="mapStore.map" />
-<!--  <Controls :layer="layer" />-->
+  <TilemapLayer v-if="mapStore.isLoaded" :tilemap="tileMap" :tileset="mapStore.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>
 </template>
 
 <script setup lang="ts">
@@ -9,8 +13,7 @@
  * the map is 10x10
  * so the map is 640x320
  */
-
-import { refObj, TilemapLayer, useScene } from 'phavuer'
+import { Container, refObj, TilemapLayer, useScene } from 'phavuer'
 import Player from '@/components/sprites/player/Player.vue'
 import config from '@/config'
 import { onBeforeMount, onMounted, reactive, ref, type Ref, toRaw, watch } from 'vue'
@@ -18,79 +21,53 @@ 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'
 
-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 serverMapData = ref([]);
-const scene = useScene()
-
-const tilemapLayer = ref();
-const mapData = new Phaser.Tilemaps.MapData({
-  width: 10,
-  height: 10,
+// Phavuer logic
+let scene = useScene()
+let tilemapLayer = ref();
+let mapData = 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,
   tileHeight: config.tile_size.y,
   orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
   format: Phaser.Tilemaps.Formats.ARRAY_2D,
 });
-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);
+let tileMap = new Phaser.Tilemaps.Tilemap(scene, mapData);
+let tileset: (Tileset|null) = tileMap.addTilesetImage('default', 'tiles');
+let layer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y);
 
 // center camera
 const centerY = (tileMap.height * tileMap.tileHeight) / 2
 const centerX = (tileMap.width * tileMap.tileWidth) / 2
 scene.cameras.main.centerOn(centerX, centerY)
 
+// Multiplayer / server logics
+const mapStore = useMapStore();
+const socket = useSocketStore();
+
+watch (() => mapStore.loaded, () => {
+  mapStore.getTiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
+}, { deep: true })
+
+onBeforeMount(() => {
+  socket.socket?.emit('get_map');
+})
+
+socket.socket?.on('map', (data) => {
+  mapStore.loadTiles(data.tiles)
+  mapStore.addPlayers(data.players);
+})
+
+socket.socket?.on('player_join', (data) => {
+  console.log('player_join', data)
+  mapStore.addPlayer(data);
+})
+
+socket.socket?.on('ping', (data) => {
+  console.log('ping', data)
+})
+
 /**
  * Resources
  * https://clintbellanger.net/articles/isometric_math/

src/components/sprites/player/Player.vue

@@ -1,5 +1,5 @@
 <template>
-  <Sprite ref="sprite" texture="IMap" :x="position.x" :y="position.y" />
+  <Sprite ref="sprite" texture="player" :x="position.x" :y="position.y" />
 </template>
 
 <script lang="ts" setup>
@@ -27,10 +27,13 @@ const scene = useScene()
 const position = reactive({ x: 0, y: 0 });
 
 if (props.player !== undefined) {
+  console.log('player', props.player);
   position.x = props.player?.coords.x;
   position.y = props.player?.coords.y;
 }
 
+const pointer_tile = ref(undefined);
+
 function onPointerClick(pointer: Phaser.Input.Pointer) {
   const px = scene.cameras.main.worldView.x + pointer.x;
   const py = scene.cameras.main.worldView.y + pointer.y;

src/stores/map.ts

@@ -1,15 +1,30 @@
 import { defineStore } from 'pinia';
-import Map from '@/engine/Map/Map'
 
-export const useMapStore = defineStore('map', {
+export const useMapStore = defineStore('gameMap', {
   state: () => ({
-    map: null as any | null,
+    loaded: false,
+    tiles: null,
+    players: {}
   }),
-
+  getters: {
+    isLoaded: (state) => state.loaded,
+    getTiles: (state) => state.tiles,
+    getPlayers: (state) => state.players
+  },
   actions: {
-    setMap(map: any) {
-      console.log('Setting map:', map);
-      this.map = map;
+    loadTiles(tiles) {
+      this.tiles = tiles;
+      this.loaded = true;
+    },
+    addPlayers(player) {
+      this.players = player;
+    },
+    addPlayer(player) {
+      this.players[player.id] = player;
+      console.log('Player added:', player);
+    },
+    removePlayer(playerId) {
+      delete this.players[playerId];
     }
   }
 });

src/stores/socket.ts

@@ -4,22 +4,20 @@
  * https://runthatline.com/pinia-watch-state-getters-inside-vue-components/
  * https://pinia.vuejs.org/
  */
-
 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: () => ({
     isAuthenticated: false,
     socket: null as Socket | null,
   }),
-
+  getters: {
+    auth: (state) => state.isAuthenticated,
+    sockett: (state) => state.socket,
+  },
   actions: {
     async register(username: string, password: string) {
       if ( this.isAuthenticated ) return console.log('User already authenticated');