Add: Player focus dropdown menu

webradar/index.html

@@ -28,6 +28,10 @@
                     <input type="checkbox" onclick="toggleGuns()" id="gunsCheck" name="guns" />
                     <label for="gunsCheck">Weapons</label>
                 </div>
+                <div>
+                    <input type="checkbox" onclick="toggleDisplayMoney()" id="moneyDisplay" name="money-display" checked />
+                    <label for="moneyDisplay">Display Money</label>
+                </div>
                 <div>
                     <input type="checkbox" onclick="toggleRotate()" id="rotateCheck" name="rotate" checked />
                     <label for="rotateCheck">Rotate Map</label>
@@ -36,9 +40,12 @@
                     <input type="checkbox" onclick="toggleCentered()" id="centerCheck" name="center" checked />
                     <label for="centerCheck">Player Centered</label>
                 </div>
-                <div>
+
-                    <input type="checkbox" onclick="toggleDisplayMoney()" id="moneyDisplay" name="money-display" checked />
+                <div class="player-focus">
-                    <label for="moneyDisplay">Display Money</label>
+                    <label for="playerSelect">Focus Player:</label>
+                    <select id="playerSelect" onchange="changePlayerFocus()">
+                        <option value="local">YOU</option>
+                    </select>
                 </div>
 
                 <button id="showDangerousBtn" onclick="toggleDangerousOptions()">Show Dangerous Options</button>

webradar/script.js

@@ -13,12 +13,18 @@ playerCentered = true
 drawStats = true
 drawNames = true
 drawGuns = true
-drawMoney = true;
+drawMoney = true
+
+let focusedPlayerYaw = 0;
 
 // Common
 canvas = null
 ctx = null
 
+let focusedPlayerName = "YOU"
+let focusedPlayerPos = null
+let playerList = {}
+
 // radarflow specific
 radarData = null
 freq = 0
@@ -181,13 +187,38 @@ function render() {
             update = false;
 
             localPlayerPos = null;
+            focusedPlayerPos = null;
+            focusedPlayerYaw = 0;
+
             if (entityData != null) {
+                playerList = {};
+
                 entityData.forEach((data) => {
-                    if (data.Player !== undefined && data.Player.playerType === "Local") {
+                    if (data.Player !== undefined) {
-                        localYaw = data.Player.yaw;
+                        if (data.Player.playerType === "Local") {
-                        localPlayerPos = data.Player.pos;
+                            localYaw = data.Player.yaw;
+                            localPlayerPos = data.Player.pos;
+
+                            playerList["YOU"] = {
+                                pos: data.Player.pos,
+                                yaw: data.Player.yaw
+                            };
+                        } else {
+                            playerList[data.Player.playerName] = {
+                                pos: data.Player.pos,
+                                yaw: data.Player.yaw
+                            };
+                        }
+
+                        if (data.Player.playerName === focusedPlayerName ||
+                            (focusedPlayerName === "YOU" && data.Player.playerType === "Local")) {
+                            focusedPlayerPos = data.Player.pos;
+                            focusedPlayerYaw = data.Player.yaw;
+                        }
                     }
                 });
+
+                updatePlayerDropdown();
             }
 
             if (entityData != null && map != null && image != null && shouldZoom && !playerCentered) {
@@ -277,7 +308,6 @@ function render() {
                         }
 
                         if (drawMoney && !data.Player.isDormant && typeof data.Player.money === 'number') {
-                            console.log(`[radarflow] Drawing money for ${data.Player.playerName}: $${data.Player.money}`);
                             drawPlayerMoney(
                                 data.Player.pos,
                                 data.Player.playerType,
@@ -385,14 +415,14 @@ function drawImage() {
 
     ctx.save();
 
-    if (rotateMap) {
+    if (rotateMap && focusedPlayerPos) {
         ctx.translate(canvas.width / 2, canvas.height / 2);
-        ctx.rotate(degreesToRadians(localYaw + 270));
+        ctx.rotate(degreesToRadians(focusedPlayerYaw + 270));
         ctx.translate(-canvas.width / 2, -canvas.height / 2);
     }
 
-    if (playerCentered && localPlayerPos) {
+    if (playerCentered && focusedPlayerPos) {
-        const playerMapPos = mapCoordinates(localPlayerPos);
+        const playerMapPos = mapCoordinates(focusedPlayerPos);
         const zoomLevel = 0.5;
         const viewWidth = image.width * zoomLevel;
         const viewHeight = image.height * zoomLevel;
@@ -413,35 +443,82 @@ function drawImage() {
     ctx.restore();
 }
 
-function drawPlayerName(pos, playerName, playerType, hasAwp, hasBomb, isScoped) {
+function updatePlayerDropdown() {
-    if (!map) return;
+    const dropdown = document.getElementById('playerSelect');
+    const currentValue = dropdown.value;
 
+    while (dropdown.options.length > 1) {
+        dropdown.remove(1);
+    }
+
+    for (const playerName in playerList) {
+        if (playerName !== "YOU") {
+            const option = document.createElement('option');
+            option.value = playerName;
+            option.textContent = playerName;
+            dropdown.appendChild(option);
+        }
+    }
+
+    if (Object.keys(playerList).includes(currentValue)) {
+        dropdown.value = currentValue;
+    } else {
+        dropdown.value = "local";
+        focusedPlayerName = "YOU";
+        if (playerList["YOU"]) {
+            focusedPlayerPos = playerList["YOU"].pos;
+            focusedPlayerYaw = playerList["YOU"].yaw;
+        }
+    }
+}
+
+function changePlayerFocus() {
+    const dropdown = document.getElementById('playerSelect');
+    if (dropdown.value === "local") {
+        focusedPlayerName = "YOU";
+    } else {
+        focusedPlayerName = dropdown.value;
+    }
+    console.log(`[radarflow] Changed focus to player: ${focusedPlayerName}`);
+    update = true;
+}
+
+function mapAndTransformCoordinates(pos) {
     let mapPos = mapCoordinates(pos);
-    let textSize;
+    let textSize = 12;
 
     if (zoomSet) {
         mapPos = boundingCoordinates(mapPos, boundingRect);
         textSize = boundingScale(12, boundingRect);
-    } else if (playerCentered && localPlayerPos) {
+    } else if (playerCentered && focusedPlayerPos) {
-        const playerMapPos = mapCoordinates(localPlayerPos);
+        const playerMapPos = mapCoordinates(focusedPlayerPos);
         const zoomLevel = 0.5;
         const viewWidth = image.width * zoomLevel;
         const viewHeight = image.height * zoomLevel;
 
         mapPos.x = (mapPos.x - (playerMapPos.x - viewWidth / 2)) * canvas.width / viewWidth;
         mapPos.y = (mapPos.y - (playerMapPos.y - viewHeight / 2)) * canvas.height / viewHeight;
-        textSize = 12;
     } else {
         mapPos.x = mapPos.x * canvas.width / image.width;
         mapPos.y = mapPos.y * canvas.height / image.height;
-        textSize = 12;
     }
 
     if (rotateMap) {
         const canvasCenter = { x: canvas.width / 2, y: canvas.height / 2 };
-        mapPos = rotatePoint(canvasCenter.x, canvasCenter.y, mapPos.x, mapPos.y, localYaw + 270);
+        const rotationYaw = focusedPlayerName === "YOU" ? localYaw : focusedPlayerYaw;
+        mapPos = rotatePoint(canvasCenter.x, canvasCenter.y, mapPos.x, mapPos.y, rotationYaw + 270);
     }
 
+    return { pos: mapPos, textSize: textSize };
+}
+
+function drawPlayerName(pos, playerName, playerType, hasAwp, hasBomb, isScoped) {
+    if (!map) return;
+
+    const transformed = mapAndTransformCoordinates(pos);
+    const mapPos = transformed.pos;
+    const textSize = transformed.textSize;
+
     const textY = mapPos.y + 20;
 
     let displayName = playerName;
@@ -471,33 +548,9 @@ function drawPlayerName(pos, playerName, playerType, hasAwp, hasBomb, isScoped)
 function drawPlayerMoney(pos, playerType, money, hasBomb) {
     if (!map) return;
 
-    console.log(`[radarflow] Drawing money: $${money} for ${playerType}`);
+    const transformed = mapAndTransformCoordinates(pos);
-
+    const mapPos = transformed.pos;
-    let mapPos = mapCoordinates(pos);
+    const textSize = transformed.textSize * 0.8;
-    let textSize;
-
-    if (zoomSet) {
-        mapPos = boundingCoordinates(mapPos, boundingRect);
-        textSize = boundingScale(10, boundingRect);
-    } else if (playerCentered && localPlayerPos) {
-        const playerMapPos = mapCoordinates(localPlayerPos);
-        const zoomLevel = 0.5;
-        const viewWidth = image.width * zoomLevel;
-        const viewHeight = image.height * zoomLevel;
-
-        mapPos.x = (mapPos.x - (playerMapPos.x - viewWidth / 2)) * canvas.width / viewWidth;
-        mapPos.y = (mapPos.y - (playerMapPos.y - viewHeight / 2)) * canvas.height / viewHeight;
-        textSize = 10;
-    } else {
-        mapPos.x = mapPos.x * canvas.width / image.width;
-        mapPos.y = mapPos.y * canvas.height / image.height;
-        textSize = 10;
-    }
-
-    if (rotateMap) {
-        const canvasCenter = { x: canvas.width / 2, y: canvas.height / 2 };
-        mapPos = rotatePoint(canvasCenter.x, canvasCenter.y, mapPos.x, mapPos.y, localYaw + 270);
-    }
 
     let extraOffset = 0;
     if (drawNames) extraOffset += 15;
@@ -529,31 +582,9 @@ function drawPlayerMoney(pos, playerType, money, hasBomb) {
 function drawPlayerWeapon(pos, playerType, weaponId) {
     if (!map) return;
 
-    let mapPos = mapCoordinates(pos);
+    const transformed = mapAndTransformCoordinates(pos);
-    let textSize;
+    const mapPos = transformed.pos;
-
+    const textSize = transformed.textSize * 0.8;
-    if (zoomSet) {
-        mapPos = boundingCoordinates(mapPos, boundingRect);
-        textSize = boundingScale(10, boundingRect);
-    } else if (playerCentered && localPlayerPos) {
-        const playerMapPos = mapCoordinates(localPlayerPos);
-        const zoomLevel = 0.5;
-        const viewWidth = image.width * zoomLevel;
-        const viewHeight = image.height * zoomLevel;
-
-        mapPos.x = (mapPos.x - (playerMapPos.x - viewWidth / 2)) * canvas.width / viewWidth;
-        mapPos.y = (mapPos.y - (playerMapPos.y - viewHeight / 2)) * canvas.height / viewHeight;
-        textSize = 10;
-    } else {
-        mapPos.x = mapPos.x * canvas.width / image.width;
-        mapPos.y = mapPos.y * canvas.height / image.height;
-        textSize = 10;
-    }
-
-    if (rotateMap) {
-        const canvasCenter = { x: canvas.width / 2, y: canvas.height / 2 };
-        mapPos = rotatePoint(canvasCenter.x, canvasCenter.y, mapPos.x, mapPos.y, localYaw + 270);
-    }
 
     const textY = mapPos.y + (drawNames ? 35 : 20);
 
@@ -578,31 +609,9 @@ function drawPlayerWeapon(pos, playerType, weaponId) {
 function drawPlayerBomb(pos, playerType) {
     if (!map) return;
 
-    let mapPos = mapCoordinates(pos);
+    const transformed = mapAndTransformCoordinates(pos);
-    let textSize;
+    const mapPos = transformed.pos;
-
+    const textSize = transformed.textSize * 0.8;
-    if (zoomSet) {
-        mapPos = boundingCoordinates(mapPos, boundingRect);
-        textSize = boundingScale(10, boundingRect);
-    } else if (playerCentered && localPlayerPos) {
-        const playerMapPos = mapCoordinates(localPlayerPos);
-        const zoomLevel = 0.5;
-        const viewWidth = image.width * zoomLevel;
-        const viewHeight = image.height * zoomLevel;
-
-        mapPos.x = (mapPos.x - (playerMapPos.x - viewWidth / 2)) * canvas.width / viewWidth;
-        mapPos.y = (mapPos.y - (playerMapPos.y - viewHeight / 2)) * canvas.height / viewHeight;
-        textSize = 10;
-    } else {
-        mapPos.x = mapPos.x * canvas.width / image.width;
-        mapPos.y = mapPos.y * canvas.height / image.height;
-        textSize = 10;
-    }
-
-    if (rotateMap) {
-        const canvasCenter = { x: canvas.width / 2, y: canvas.height / 2 };
-        mapPos = rotatePoint(canvasCenter.x, canvasCenter.y, mapPos.x, mapPos.y, localYaw + 270);
-    }
 
     const textY = mapPos.y + (drawNames ? (drawGuns ? 50 : 35) : (drawGuns ? 35 : 20));
 
@@ -621,31 +630,9 @@ function drawBomb(pos, planted) {
     if (map == null)
         return
 
-    let mapPos = mapCoordinates(pos);
+    const transformed = mapAndTransformCoordinates(pos);
-    let size;
+    const mapPos = transformed.pos;
-
+    const size = transformed.textSize * 0.7;
-    if (zoomSet) {
-        mapPos = boundingCoordinates(mapPos, boundingRect);
-        size = boundingScale(8, boundingRect);
-    } else if (playerCentered && localPlayerPos) {
-        const playerMapPos = mapCoordinates(localPlayerPos);
-        const zoomLevel = 0.5;
-        const viewWidth = image.width * zoomLevel;
-        const viewHeight = image.height * zoomLevel;
-
-        mapPos.x = (mapPos.x - (playerMapPos.x - viewWidth / 2)) * canvas.width / viewWidth;
-        mapPos.y = (mapPos.y - (playerMapPos.y - viewHeight / 2)) * canvas.height / viewHeight;
-        size = 8;
-    } else {
-        mapPos.x = mapPos.x * canvas.width / image.width;
-        mapPos.y = mapPos.y * canvas.height / image.height;
-        size = 8;
-    }
-
-    if (rotateMap) {
-        const canvasCenter = { x: canvas.width / 2, y: canvas.height / 2 };
-        mapPos = rotatePoint(canvasCenter.x, canvasCenter.y, mapPos.x, mapPos.y, localYaw + 270);
-    }
 
     ctx.beginPath();
     ctx.arc(mapPos.x, mapPos.y, size, 0, 2 * Math.PI);
@@ -677,47 +664,22 @@ function drawEntity(pos, fillStyle, dormant, hasBomb, yaw, hasAwp, playerType, i
     if (map == null)
         return
 
-    let mapPos = mapCoordinates(pos);
+    const transformed = mapAndTransformCoordinates(pos);
-    let circleRadius, distance, radius, arrowWidth;
+    const mapPos = transformed.pos;
+    const circleRadius = transformed.textSize * 0.6;
+    const distance = circleRadius + 2;
+    const radius = distance + 5;
+    const arrowWidth = 35;
 
-    if (zoomSet) {
+    const isFocusedPlayer = playerName === focusedPlayerName ||
-        mapPos = boundingCoordinates(mapPos, boundingRect);
+        (focusedPlayerName === "YOU" && playerType === "Local");
-        circleRadius = boundingScale(7, boundingRect);
-        distance = circleRadius + boundingScale(2, boundingRect);
-        radius = distance + boundingScale(2, boundingRect);
-        arrowWidth = 35;
-    } else if (playerCentered && localPlayerPos) {
-        const playerMapPos = mapCoordinates(localPlayerPos);
-        const zoomLevel = 0.5;
-        const viewWidth = image.width * zoomLevel;
-        const viewHeight = image.height * zoomLevel;
-
-        mapPos.x = (mapPos.x - (playerMapPos.x - viewWidth / 2)) * canvas.width / viewWidth;
-        mapPos.y = (mapPos.y - (playerMapPos.y - viewHeight / 2)) * canvas.height / viewHeight;
-
-        circleRadius = 7;
-        distance = circleRadius + 2;
-        radius = distance + 5;
-        arrowWidth = 35;
-    } else {
-        mapPos.x = mapPos.x * canvas.width / image.width;
-        mapPos.y = mapPos.y * canvas.height / image.height;
-
-        circleRadius = 7;
-        distance = circleRadius + 2;
-        radius = distance + 5;
-        arrowWidth = 35;
-    }
 
     let adjustedYaw = yaw;
     if (rotateMap) {
-        const canvasCenter = { x: canvas.width / 2, y: canvas.height / 2 };
+        if (isFocusedPlayer) {
-        mapPos = rotatePoint(canvasCenter.x, canvasCenter.y, mapPos.x, mapPos.y, localYaw + 270);
-
-        if (playerType === "Local") {
             adjustedYaw = 90;
         } else {
-            adjustedYaw = (yaw + 180) - localYaw + 270;
+            adjustedYaw = (yaw + 180) - focusedPlayerYaw + 270;
         }
     }
 
@@ -727,6 +689,14 @@ function drawEntity(pos, fillStyle, dormant, hasBomb, yaw, hasAwp, playerType, i
         ctx.fillStyle = fillStyle;
         ctx.fillText("?", mapPos.x, mapPos.y);
     } else {
+        if (isFocusedPlayer) {
+            ctx.beginPath();
+            ctx.arc(mapPos.x, mapPos.y, circleRadius + 4, 0, 2 * Math.PI);
+            ctx.fillStyle = "#FFFFFF";
+            ctx.fill();
+            ctx.closePath();
+        }
+
         if (hasAwp) {
             ctx.beginPath();
             ctx.arc(mapPos.x, mapPos.y, circleRadius, 0, 2 * Math.PI);
@@ -915,14 +885,17 @@ function connect() {
 }
 
 addEventListener("DOMContentLoaded", (e) => {
+    const savedDrawMoney = localStorage.getItem('drawMoney');
+    drawMoney = savedDrawMoney !== null ? savedDrawMoney === 'true' : true;
+
     document.getElementById("zoomCheck").checked = false;
     document.getElementById("statsCheck").checked = true;
     document.getElementById("namesCheck").checked = true;
     document.getElementById("gunsCheck").checked = true;
+    document.getElementById("moneyDisplay").checked = drawMoney;
     document.getElementById("moneyReveal").checked = false;
     document.getElementById("rotateCheck").checked = true;
     document.getElementById("centerCheck").checked = true;
-    document.getElementById("moneyDisplay").checked = true;
 
     canvas = document.getElementById('canvas');
     canvas.width = 1024;

webradar/styles.css

@@ -118,4 +118,33 @@ canvas {
         cursor: pointer;
         z-index: 101;
     }
+}
+
+#playerSelect {
+    background-color: #333;
+    color: #fff;
+    border: 1px solid #555;
+    padding: 5px;
+    border-radius: 4px;
+    margin-left: 5px;
+    cursor: pointer;
+    min-width: 150px;
+}
+
+#playerSelect:hover {
+    background-color: #444;
+}
+
+#playerSelect option {
+    background-color: #333;
+    color: #fff;
+    padding: 5px;
+}
+
+#playerSelect option:hover {
+    background-color: #444;
+}
+
+.player-focus {
+    margin-top: 10px;
 }