Wizzard/radarflow2-kvm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add: Player focus dropdown menu

Browse Source
This commit is contained in:
Wizzard 2025-03-15 18:10:42 -04:00
parent cb9462ce9b
commit 3a69f285f3
3 changed files with 167 additions and 158 deletions

13
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 />
<label for="moneyDisplay">Display Money</label>
<div class="player-focus">
<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>

283
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") {
localYaw = data.Player.yaw;
localPlayerPos = data.Player.pos;
if (data.Player !== undefined) {
if (data.Player.playerType === "Local") {
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) {
const playerMapPos = mapCoordinates(localPlayerPos);
if (playerCentered && focusedPlayerPos) {
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) {
if (!map) return;
function updatePlayerDropdown() {
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) {
const playerMapPos = mapCoordinates(localPlayerPos);
} else if (playerCentered && focusedPlayerPos) {
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}`);
let mapPos = mapCoordinates(pos);
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);
}
const transformed = mapAndTransformCoordinates(pos);
const mapPos = transformed.pos;
const textSize = transformed.textSize * 0.8;
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);
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);
}
const transformed = mapAndTransformCoordinates(pos);
const mapPos = transformed.pos;
const textSize = transformed.textSize * 0.8;
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);
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);
}
const transformed = mapAndTransformCoordinates(pos);
const mapPos = transformed.pos;
const textSize = transformed.textSize * 0.8;
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);
let size;
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);
}
const transformed = mapAndTransformCoordinates(pos);
const mapPos = transformed.pos;
const size = transformed.textSize * 0.7;
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);
let circleRadius, distance, radius, arrowWidth;
const transformed = mapAndTransformCoordinates(pos);
const mapPos = transformed.pos;
const circleRadius = transformed.textSize * 0.6;
const distance = circleRadius + 2;
const radius = distance + 5;
const arrowWidth = 35;
if (zoomSet) {
mapPos = boundingCoordinates(mapPos, boundingRect);
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;
}
const isFocusedPlayer = playerName === focusedPlayerName ||
(focusedPlayerName === "YOU" && playerType === "Local");
let adjustedYaw = yaw;
if (rotateMap) {
const canvasCenter = { x: canvas.width / 2, y: canvas.height / 2 };
mapPos = rotatePoint(canvasCenter.x, canvasCenter.y, mapPos.x, mapPos.y, localYaw + 270);
if (playerType === "Local") {
if (isFocusedPlayer) {
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;

29
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;
}