From bb712ddc60e499e6d971e31d218b004cb60119e1 Mon Sep 17 00:00:00 2001
From: Alexander Borg <borg@servernet.se>
Date: Sun, 7 Sep 2025 14:24:28 +0200
Subject: [PATCH] Fix jwt-token

---
 client/src/pages/MapView.jsx | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/MapView.jsx b/client/src/pages/MapView.jsx
index f0fc1be..cba9a0b 100644
--- a/client/src/pages/MapView.jsx
+++ b/client/src/pages/MapView.jsx
@@ -422,18 +422,33 @@ const MapView = () => {
                   const radius = getRssiRadius(detection.rssi);
                   console.log('MapView: Ring radius:', radius, 'for RSSI:', detection.rssi);
                   
-                  // Color based on threat level and RSSI strength
-                  const getRingColor = (rssi, droneType) => {
+                  // Color based on threat level and multiple drone differentiation
+                  const getRingColor = (rssi, droneType, droneIndex, totalDrones) => {
                     // Orlan drones (type 1) always red
                     if (droneType === 1) return '#dc2626'; // red-600
                     
-                    // Other drones based on RSSI
+                    // If multiple drones, use different colors to distinguish them
+                    if (totalDrones > 1) {
+                      const colors = [
+                        '#dc2626', // red-600
+                        '#ea580c', // orange-600
+                        '#16a34a', // green-600
+                        '#7c3aed', // violet-600
+                        '#0284c7', // sky-600
+                        '#db2777', // pink-600
+                        '#059669', // emerald-600
+                        '#7c2d12'  // amber-800
+                      ];
+                      return colors[droneIndex % colors.length];
+                    }
+                    
+                    // Single drone - color based on RSSI strength
                     if (rssi > -60) return '#dc2626';  // red-600 - close
                     if (rssi > -70) return '#ea580c';  // orange-600 - medium
                     return '#16a34a';                  // green-600 - far
                   };
 
-                  const ringColor = getRingColor(detection.rssi, detection.drone_type);
+                  const ringColor = getRingColor(detection.rssi, detection.drone_type, droneIndex, totalDrones);
                   
                   // Different visual styles for multiple drones at same detector
                   const getDashPattern = (droneType, droneIndex, totalDrones) => {
@@ -616,10 +631,11 @@ const MapView = () => {
                     <span className="text-gray-700">Far Range (&lt;-70dBm)</span>
                   </div>
                   <div className="border-t border-gray-200 mt-2 pt-2">
-                    <div className="text-xs text-gray-600 mb-1">Multiple Drones:</div>
+                    <div className="text-xs text-gray-600 mb-1">Multiple Drones at Same Detector:</div>
+                    <div className="text-xs text-gray-500 mb-1">• Different colors to distinguish drones</div>
                     <div className="text-xs text-gray-500 mb-1">• Different dash patterns</div>
                     <div className="text-xs text-gray-500 mb-1">• Drone ID labels shown</div>
-                    <div className="text-xs text-gray-500 mb-1">• Slight position offsets</div>
+                    <div className="text-xs text-gray-500 mb-1">• Slight position offsets for visibility</div>
                   </div>
                   <div className="text-xs text-gray-500 mt-2">
                     Ring size = estimated distance from detector