Update templates/map.html

templates/map.html

@@ -131,91 +131,84 @@
     let currentZoom = 3;
 
 
-    // const ws = new WebSocket(`wss://sebastiankay-eft-group-map-websocket.hf.space/${client_id}`)
-    const ws = new WebSocket(`wss://sebastiankay-eft-group-map-websocket.hf.space/ws`)
-    ws.onmessage = function (event) {
-      console.log(event.data);
-      const data = JSON.parse(event.data);
-      if (data.type === "coordinates") {
-        const parsedData = data.data;
-        localStorage.setItem("last_marker", JSON.stringify(parsedData));
-        loadLocalData();
-      }
-      if (data.type === "location_map") {
-        const map_name = data.data.map.toLowerCase().replaceAll(" ", "-")
-        localStorage.setItem("last_map_name", data.data.map.toLowerCase().replaceAll(" ", "-"));
-        localStorage.removeItem("last_marker")
-        if (!location.pathname.includes(map_name)) location.pathname = `/map/${map_name}`
-        else location.reload()
-      }
-      if (data.type == "new_rade_data") {
-        console.log(data.data)
-        const parsedData = JSON.parse(data.data);
-        localStorage.setItem("rade_data", JSON.stringify(parsedData));
-        loadLocalData();
-      }
+    // Initialize WebSocket connection
+    const ws = new WebSocket(`wss://sebastiankay-eft-group-map-websocket.hf.space/ws`);
+        
+    // WebSocket event handlers
+    ws.onmessage = function(event) {
+        console.log(event.data);
+        const data = JSON.parse(event.data);
+    
+        switch (data.type) {
+            case "coordinates":
+                const parsedData = data.data;
+                localStorage.setItem("last_marker", JSON.stringify(parsedData));
+                loadLocalData();
+                break;
+    
+            case "location_map":
+                const map_name = data.data.map.toLowerCase().replaceAll(" ", "-");
+                localStorage.setItem("last_map_name", map_name);
+                localStorage.removeItem("last_marker");
+                removeAllMarkers(); // Clear all markers when the map changes
+                if (!location.pathname.includes(map_name)) {
+                    location.pathname = `/map/${map_name}`;
+                } else {
+                    location.reload();
+                }
+                break;
+    
+            case "new_rade_data":
+                console.log(data.data);
+                const radeData = JSON.parse(data.data);
+                localStorage.setItem("rade_data", JSON.stringify(radeData));
+                loadLocalData();
+                break;
+        }
     };
-
-    ws.onopen = function (event) {
-      //console.log(JSON.stringify({ type: "test_msg", data: "Test Message" }));
-      ws.send(JSON.stringify({ type: "join", group: wsgroup }));
+    
+    ws.onopen = function(event) {
+        ws.send(JSON.stringify({ type: "join", group: wsgroup }));
     };
-
+    
+    // Function to remove all markers
     function removeAllMarkers() {
-        // Iterate over all player markers
         for (const playername in playerMarkers) {
             if (playerMarkers.hasOwnProperty(playername)) {
-                // Remove the marker from the map
                 map.removeLayer(playerMarkers[playername]);
             }
         }
-        // Clear the playerMarkers object
         Object.keys(playerMarkers).forEach(key => delete playerMarkers[key]);
         console.log("Alle Marker wurden entfernt.");
     }
-
+    
+    // Function to load and display local marker data
     function loadLocalData() {
-
-      const map_name = localStorage.getItem("last_map_name")
-      if (map_name) {
-        if (!location.pathname.includes(map_name)) localStorage.removeItem("last_marker")
-      } else localStorage.removeItem("last_marker")
-
-      const markerData = JSON.parse(localStorage.getItem("last_marker"))
-      console.log(markerData)
-      if (markerData) {
-        // Alten Marker entfernen
-        // if (currentMarker) {
-        //   map.removeLayer(currentMarker);
-        //   currentMarker = null;
-        // }
-        // Neuen Marker hinzufügen
-        addMarker(markerData.x, markerData.y, markerData.z, markerData.timestamp, markerData.preview ? markerData.preview : false, markerData.actualmap ? markerData.actualmap : false, markerData.playername ? markerData.playername : false, markerData.markercolor ? markerData.markercolor : false);
-      }
-
-      const radeData = localStorage.getItem("rade_data");
-      if (radeData) {
-        const parsedData = JSON.parse(radeData);
-        // Process the loaded radeData as needed
-        console.log(parsedData);
-
-        if (parseInt(parsedData.rade_end_time) > Math.floor(new Date().getTime() / 1000.0)) {
-          // Rade is not over yet
-          console.log("Rade is not over yet")
-
-          const new_html = `
-                    <div class="rade-time"><i class="fa-solid fa-door-open"></i> <h3 id="rade_time_remain" data-seconds="${parseInt(parsedData.rade_end_time) - Math.floor(new Date().getTime() / 1000.0)}" data-rade-end="${parsedData.rade_end_time}" data-rade-start="${parsedData.rade_start_time}" class="rade-time-remain">${parsedData.remaining_time}</h3></div>
-                    <ul>
-                        ${parsedData.extraction_exit_names.map(name => `<li><span class="tag exit">EXIT</span> ${name}</li>`).join('')}
-                        ${parsedData.extraction_transit_names.map(name => `<li><span class="tag transit">TRANSIT</span> ${name.replaceAll("Transit ", "")}</li>`).join('')}
-                    </ul>
-                    `
-          addNewRadeData(new_html)
-        } else console.log("Rade is over")
-      }
-
-
-    };
+        const map_name = localStorage.getItem("last_map_name");
+        if (map_name) {
+            if (!location.pathname.includes(map_name)) {
+                localStorage.removeItem("last_marker");
+            }
+        } else {
+            localStorage.removeItem("last_marker");
+        }
+    
+        const markerData = localStorage.getItem("last_marker");
+        if (markerData) {
+            const parsedData = JSON.parse(markerData);
+            // Use the new addMarker function with all required parameters
+            addMarker(
+                parsedData.x,
+                parsedData.y,
+                parsedData.z,
+                parsedData.timestamp,
+                parsedData.playername || "Unnamed Player",
+                parsedData.preview || false,
+                parsedData.actualmap || false,
+                parsedData.markercolor || false
+            );
+        }
+    }
 
     const images = {
       'container_bank-cash-register': 'container_cash-register',