Fix: pergerakan realtime multiplayer

Ikhsanheriyawan2404 · Jul 12, 2023 · aab18e5 · aab18e5
1 parent 5d0fd0c
commit aab18e5
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 13 deletions.
diff --git a/dist/Helper.js b/dist/Helper.js
@@ -57,6 +57,8 @@ class HelperManager {
     }
 
     moveMap(direction) {
+        const player = Player.getPlayer(localStorage.getItem('player_id'));
+        // console.log(player)
         var step = 0.005; // Adjust the step size as needed
         var currentCenter = this.Leaflet.map.getCenter();
 
@@ -78,7 +80,7 @@ class HelperManager {
         }
         colyClient.room.send('move', {
             player_id: colyClient.options.id,
-            id: localStorage.getItem('player_id'),
+            id: player.id,
             position: {
                 lat: this.Leaflet.map.getCenter().lat,
                 long: this.Leaflet.map.getCenter().lng

diff --git a/dist/MapLeaflet.js b/dist/MapLeaflet.js
@@ -10,7 +10,7 @@ class MapLeaflet {
 
         this.allObjectMap = [];
 
-        // this.optionMaps = {}
+        this.optionMaps = {}
 
         // this.center = null;
         this.zoom = 17;
@@ -64,7 +64,6 @@ class MapLeaflet {
         } else if (object.type == "wall" || object.type == "weather") {
             switch (properties.type) {
                 case "polyline":
-                    console.log(properties.poly)
                     objectMap = L.polyline(properties.poly, {
                         color: 'red',
                         weight: 3,

diff --git a/dist/Player.js b/dist/Player.js
@@ -24,8 +24,6 @@ class EntityPlayer {
 
         const newPlayer = new PlayerDetail(player);
         this.#players.push(newPlayer);
-
-        return player;
     }
 
     getPlayer(id) {

diff --git a/dist/PlayerDetail.js b/dist/PlayerDetail.js
@@ -27,12 +27,10 @@ class PlayerDetail {
     // }
 
     moveIcon = (lat, long) => {
-        // push to maps
         const center = [
             lat,
             long,
         ];
-        // Leaflet.map.s
         this.marker.setLatLng(center).addTo(Leaflet.map);        
     }
 

diff --git a/dist/multiplayers.js b/dist/multiplayers.js
@@ -34,6 +34,7 @@ class ColyClient {
       colyClient.room = room;
       localStorage.setItem("player_id", room.sessionId)
       this.addListeners();
+      console.log("JOIN SUCCESS", room);
     }).catch(e => {
       console.log("JOIN ERROR", e);
     });
@@ -58,17 +59,13 @@ class ColyClient {
 
       this.room.onStateChange.once((state) => {
         state.Message.$items.forEach((messages, key) => {
-          console.log(messages)
           Helper.displayMessage(messages);
         });
 
 
         state.ObjectMap.$items.forEach((object, key) => {
           Leaflet.plotObject(object);
         });
-      });
-
-      this.room.onStateChange((state) => {
 
         state.Player.$items.forEach((player, key) => {
           let dataPlayer = player;
@@ -77,6 +74,22 @@ class ColyClient {
           Player.addPlayer(dataPlayer);
         });
 
+        state.Player.onAdd((player, key) => {
+          console.log("onadd")
+          let dataPlayer = player;
+          const center = [dataPlayer.position.lat, dataPlayer.position.long];
+          dataPlayer.marker = L.marker(center, {icon: Leaflet.avatarIcon});
+          Player.addPlayer(dataPlayer);
+        })
+
+      });
+
+      this.room.onStateChange((state) => {
+
+        // state.Player.$items.forEach((player, key) => {
+        //   console.log("perubahan")
+        // });
+
       })
 
 
@@ -97,8 +110,6 @@ class ColyClient {
 
 
       this.room.onMessage("move", (message) => {
-        console.log(message.player_id, "bergerak")
-        console.log(message.position.lat, message.position.long)
         let player = Player.getPlayer(message.id)
         player.moveIcon(message.position.lat, message.position.long);
       });