Fix: pergerakan multiplayer dan positioning icon

dist/MapLeaflet.js

@@ -10,7 +10,7 @@ class MapLeaflet {
 
         this.allObjectMap = [];
 
-        this.optionMaps = {}
+        // this.optionMaps = {}
 
         // this.center = null;
         this.zoom = 17;

dist/Player.js

@@ -41,6 +41,8 @@ class EntityPlayer {
 
     removePlayer(playerId) {
         const index = this.#players.findIndex(player => player.id === playerId);
+        // remove marker
+        this.#players[index].marker.remove();
         if (index !== -1) {
             this.#players.splice(index, 1);
             console.log(`Player with ID ${playerId} has been removed.`);

dist/PlayerDetail.js

@@ -13,7 +13,6 @@ class PlayerDetail {
         }
         this.marker = objects.marker;
 
-        Leaflet.map.setView([this.position.lat, this.position.long], Leaflet.zoom);
     }
 
     // plotIcon = () => {

dist/multiplayers.js

@@ -68,16 +68,25 @@ class ColyClient {
         });
 
         state.Player.$items.forEach((player, key) => {
-          let dataPlayer = player;
-          const center = [dataPlayer.position.lat, dataPlayer.position.long];
-          dataPlayer.marker = L.marker(center, {icon: Leaflet.avatarIcon});
-          Player.addPlayer(dataPlayer);
+          if (player.id == localStorage.getItem('player_id')) {
+            console.log('wak')
+            Leaflet.map.setView([
+              player.position.lat,
+              player.position.long
+            ], Leaflet.zoom);
+            // Leaflet.marker = L.marker([
+            //   player.position.lat,
+            //   player.position.long
+            // ], {icon: Leaflet.avatarIcon}).addTo(Leaflet.map);
+          }
         });
 
         state.Player.onAdd((player, key) => {
           console.log("onadd")
           let dataPlayer = player;
           const center = [dataPlayer.position.lat, dataPlayer.position.long];
+          Leaflet.center = center;
+
           dataPlayer.marker = L.marker(center, {icon: Leaflet.avatarIcon});
           Player.addPlayer(dataPlayer);
         })
@@ -92,11 +101,6 @@ class ColyClient {
 
       })
 
-
-      this.room.state.Player.onAdd = (players, key) => {
-        console.log('onadd')
-      }
-
       this.room.onMessage("send_message", (message) => {
         if (message.message.trim() !== '') {
           toastr.info(`ada pesan masuk`);

game.html

@@ -125,7 +125,6 @@
     // // change location view
     // Leaflet.map.setView(Leaflet.center, 17);
     // // set marker
-    // Leaflet.marker = L.marker(Leaflet.center, {icon: Leaflet.avatarIcon}).addTo(Leaflet.map);
 
     </script>
 </body>