From aab18e53d7075adbd37497674a02a5cddfa25ae2 Mon Sep 17 00:00:00 2001
From: ikhsanheriyawan <ikhsanheriyawan2404@gmail.com>
Date: Wed, 12 Jul 2023 14:31:28 +0700
Subject: [PATCH] Fix: pergerakan realtime multiplayer

---
 dist/Helper.js       |  4 +++-
 dist/MapLeaflet.js   |  3 +--
 dist/Player.js       |  2 --
 dist/PlayerDetail.js |  2 --
 dist/multiplayers.js | 23 +++++++++++++++++------
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/dist/Helper.js b/dist/Helper.js
index 0ee3ee2..a55f2c4 100644
--- 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
index f734aa0..73f8b7d 100644
--- 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
index 9c5ed61..c4dcc29 100644
--- 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
index 1be83d6..df55394 100644
--- 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
index 1d58226..6c64e0d 100644
--- 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,7 +59,6 @@ class ColyClient {
 
       this.room.onStateChange.once((state) => {
         state.Message.$items.forEach((messages, key) => {
-          console.log(messages)
           Helper.displayMessage(messages);
         });
 
@@ -66,9 +66,6 @@ class ColyClient {
         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);
       });