67
2425 lines
90 KiB
JavaScript
2425 lines
90 KiB
JavaScript
const storageKey = "dayz-web-map-settings";
|
|
const params = new URLSearchParams(window.location.search);
|
|
const password = params.get("password") || "";
|
|
const favoriteLootColor = "#ef4444";
|
|
const favoriteLootFilterDefinition = { key: "favoriteLoot", label: "Favorites", visibleKey: "showFavoriteLoot", kind: "loot", category: "favorite", color: favoriteLootColor, markerSize: 10, textSize: 14, showLabel: true };
|
|
const lootPalette = ["#f43f5e", "#f59e0b", "#22c55e", "#eab308", "#84cc16", "#ec4899", "#0ea5e9", "#14b8a6", "#c084fc", "#f97316", "#d946ef", "#dc2626", "#fbbf24", "#fb923c", "#0891b2", "#64748b"];
|
|
const entityFilterDefinitions = [
|
|
{ key: "players", label: "Players", visibleKey: "showPlayers", kind: "players", color: "#ff6b35", markerSize: 12, textSize: 14, showLabel: true, directionLength: 28 },
|
|
{ key: "zombies", label: "Zombies", visibleKey: "showZombies", kind: "zombies", color: "#65a30d", markerSize: 12, textSize: 14, showLabel: true },
|
|
{ key: "animals", label: "Animals", visibleKey: "showAnimals", kind: "animals", color: "#38bdf8", markerSize: 12, textSize: 14, showLabel: true },
|
|
{ key: "vehicles", label: "Vehicles", visibleKey: "showVehicles", kind: "vehicles", color: "#a855f7", markerSize: 14, textSize: 14, showLabel: true },
|
|
{ key: "bullets", label: "Bullets", visibleKey: "showBullets", kind: "bullets", color: "#facc15", markerSize: 6, textSize: 12, showLabel: false, showTrajectory: true, showPrediction: true, phantomLifetimeMs: 5000, predictionDistance: 250 },
|
|
{ key: "otherEntities", label: "Other Entity", visibleKey: "showOtherEntities", kind: "otherEntities", color: "#475569", markerSize: 10, textSize: 14, showLabel: true }
|
|
];
|
|
const previousDefaultFilterColors = {
|
|
players: "#f97316",
|
|
zombies: "#22c55e",
|
|
animals: "#60a5fa",
|
|
vehicles: "#a855f7",
|
|
bullets: "#f8fafc",
|
|
otherEntities: "#94a3b8",
|
|
isHouse: "#fb7185",
|
|
isWeapon: "#4ade80",
|
|
isAmmo: "#f59e0b",
|
|
isFood: "#a3e635",
|
|
isClothing: "#fde047",
|
|
isBackpack: "#f0abfc",
|
|
isMedical: "#e5e7eb",
|
|
isVehiclePart: "#38bdf8",
|
|
isTool: "#22d3ee",
|
|
isCrafting: "#2dd4bf",
|
|
isConsumables: "#f43f5e",
|
|
isOptics: "#94a3b8",
|
|
isMelee: "#fb7185",
|
|
isWeaponAttachments: "#4ade80",
|
|
isExplosives: "#f59e0b",
|
|
isForBuilding: "#a3e635",
|
|
isOtherLoot: "#fde047"
|
|
};
|
|
let filterDefinitions = [...entityFilterDefinitions];
|
|
|
|
const defaultSettings = {
|
|
settingsCollapsed: false,
|
|
labelSettingsOpen: false,
|
|
followPlayer: false,
|
|
showPlayers: true,
|
|
showZombies: true,
|
|
showAnimals: true,
|
|
showLoot: true,
|
|
showVehicles: true,
|
|
showBullets: true,
|
|
showOtherEntities: true,
|
|
showFavoriteLoot: true,
|
|
showLabels: true,
|
|
distanceFilter: 2000,
|
|
textSize: 14,
|
|
ordinaryLootSpread: 2,
|
|
groupedLootSpread: 2,
|
|
sameLootMergeRadius: 110,
|
|
lineAnchorMode: "bottom-center",
|
|
mergeSameLootLabels: true,
|
|
favoriteLootNames: [],
|
|
filterStyles: {},
|
|
filterExpanded: {}
|
|
};
|
|
|
|
const savedSettings = (() => {
|
|
try {
|
|
const parsed = JSON.parse(localStorage.getItem(storageKey) || "{}");
|
|
return {
|
|
...defaultSettings,
|
|
...parsed,
|
|
filterStyles: { ...(defaultSettings.filterStyles || {}), ...(parsed.filterStyles || {}) },
|
|
filterExpanded: { ...(defaultSettings.filterExpanded || {}), ...(parsed.filterExpanded || {}) }
|
|
};
|
|
} catch {
|
|
return { ...defaultSettings };
|
|
}
|
|
})();
|
|
|
|
const state = {
|
|
settings: savedSettings,
|
|
scale: 0.6,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
dragging: false,
|
|
lastX: 0,
|
|
lastY: 0,
|
|
bootstrap: null,
|
|
lastSnapshot: null,
|
|
tileState: {},
|
|
initialCentered: false,
|
|
eventSource: null,
|
|
fallbackPollTimer: null,
|
|
reconnectTimer: null,
|
|
activePointers: new Map(),
|
|
pinchDistance: 0,
|
|
bulletVisuals: new Map(),
|
|
bulletAnimationFrame: null
|
|
};
|
|
|
|
const elements = {
|
|
status: document.getElementById("status"),
|
|
viewport: document.getElementById("viewport"),
|
|
canvas: document.getElementById("canvas"),
|
|
tiles: document.getElementById("tiles"),
|
|
paths: document.getElementById("paths"),
|
|
itemLabels: document.getElementById("itemLabels"),
|
|
markers: document.getElementById("markers"),
|
|
playersToggle: document.getElementById("playersToggle"),
|
|
playersPanel: document.getElementById("playersPanel"),
|
|
playersClose: document.getElementById("playersClose"),
|
|
playersList: document.getElementById("playersList"),
|
|
lootToggle: document.getElementById("lootToggle"),
|
|
lootPanel: document.getElementById("lootPanel"),
|
|
lootClose: document.getElementById("lootClose"),
|
|
lootInfo: document.getElementById("lootInfo"),
|
|
lootList: document.getElementById("lootList"),
|
|
serverInfo: document.getElementById("serverInfo"),
|
|
serverBadge: document.getElementById("serverBadge"),
|
|
settingsPanel: document.getElementById("settingsPanel"),
|
|
settingsPanelBody: document.getElementById("settingsPanelBody"),
|
|
settingsToggle: document.getElementById("settingsToggle"),
|
|
collapseButton: document.getElementById("collapseButton"),
|
|
labelSettingsToggle: document.getElementById("labelSettingsToggle"),
|
|
labelSettingsPanel: document.getElementById("labelSettingsPanel"),
|
|
labelSettingsBody: document.getElementById("labelSettingsBody"),
|
|
labelSettingsClose: document.getElementById("labelSettingsClose"),
|
|
labelSettingsReset: document.getElementById("labelSettingsReset"),
|
|
entityFilterList: document.getElementById("entityFilterList"),
|
|
lootFilterList: document.getElementById("lootFilterList"),
|
|
followPlayer: document.getElementById("followPlayer"),
|
|
showLoot: document.getElementById("showLoot"),
|
|
showLabels: document.getElementById("showLabels"),
|
|
distanceFilter: document.getElementById("distanceFilter"),
|
|
distanceValue: document.getElementById("distanceValue"),
|
|
textSize: document.getElementById("textSize"),
|
|
textSizeValue: document.getElementById("textSizeValue"),
|
|
ordinaryLootSpread: document.getElementById("ordinaryLootSpread"),
|
|
ordinaryLootSpreadValue: document.getElementById("ordinaryLootSpreadValue"),
|
|
groupedLootSpread: document.getElementById("groupedLootSpread"),
|
|
groupedLootSpreadValue: document.getElementById("groupedLootSpreadValue"),
|
|
sameLootMergeRadius: document.getElementById("sameLootMergeRadius"),
|
|
sameLootMergeRadiusValue: document.getElementById("sameLootMergeRadiusValue"),
|
|
lineAnchorMode: document.getElementById("lineAnchorMode"),
|
|
mergeSameLootLabels: document.getElementById("mergeSameLootLabels")
|
|
};
|
|
|
|
let filtersByKey = {};
|
|
const filterKeyByKind = {
|
|
players: "players",
|
|
zombies: "zombies",
|
|
animals: "animals",
|
|
vehicles: "vehicles",
|
|
bullets: "bullets",
|
|
otherEntities: "otherEntities"
|
|
};
|
|
let lootFilterKeyByCategory = {};
|
|
const minMapScale = 0.02;
|
|
const maxMapScale = 1.5;
|
|
const textMeasureCanvas = document.createElement("canvas");
|
|
const textMeasureContext = textMeasureCanvas.getContext("2d");
|
|
|
|
function rebuildFilterCaches() {
|
|
filtersByKey = Object.fromEntries(filterDefinitions.map((definition) => [definition.key, definition]));
|
|
lootFilterKeyByCategory = Object.fromEntries(
|
|
filterDefinitions
|
|
.filter((definition) => definition.kind === "loot")
|
|
.map((definition) => [definition.category, definition.key])
|
|
);
|
|
}
|
|
|
|
function buildLootFilterDefinitions(dynamicFilters) {
|
|
return [favoriteLootFilterDefinition]
|
|
.concat((dynamicFilters || [])
|
|
.filter((definition) => definition.kind === "loot")
|
|
.sort((lhs, rhs) => Number((lhs.key || "").toLowerCase() === "isotherloot") - Number((rhs.key || "").toLowerCase() === "isotherloot"))
|
|
.map((definition, index) => ({
|
|
key: definition.key,
|
|
label: definition.label || definition.key,
|
|
visibleKey: definition.key,
|
|
kind: "loot",
|
|
category: definition.category || definition.key,
|
|
color: definition.color || lootPalette[index % lootPalette.length],
|
|
markerSize: 8,
|
|
textSize: 14,
|
|
showLabel: true
|
|
})));
|
|
}
|
|
|
|
function sanitize(text) {
|
|
return String(text ?? "")
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """);
|
|
}
|
|
|
|
function renderSafeMultilineHtml(lines) {
|
|
return (Array.isArray(lines) ? lines : [String(lines || "")])
|
|
.filter((line) => String(line || "").trim().length > 0)
|
|
.map((line) => sanitize(line))
|
|
.join("<br>");
|
|
}
|
|
|
|
function normalizeInlineText(value) {
|
|
return String(value || "")
|
|
.replace(/\s*\r?\n\s*/g, " ")
|
|
.replace(/\s+/g, " ")
|
|
.replace(/\s*-\s*/g, "-")
|
|
.trim();
|
|
}
|
|
|
|
function getEntityLabelLines(item) {
|
|
const baseLabel = normalizeInlineText(item?.label || "Unknown");
|
|
const handItem = normalizeInlineText(item?.handItem || "");
|
|
const distanceText = Number.isFinite(Number(item?.distance)) && Number(item.distance) >= 0 ? ` ${Math.round(Number(item.distance))}m` : "";
|
|
const firstLine = item?.dead
|
|
? `💀${baseLabel}${distanceText}🪦`
|
|
: `${baseLabel}${distanceText}`;
|
|
|
|
return handItem.length > 0
|
|
? [firstLine.trim(), `🖐️${handItem}🔫`]
|
|
: [firstLine.trim()];
|
|
}
|
|
|
|
function ensureFilterSettings() {
|
|
for (const definition of filterDefinitions) {
|
|
const current = state.settings.filterStyles[definition.key] || {};
|
|
const currentColor = String(current.color || "").toLowerCase();
|
|
const previousDefaultColor = previousDefaultFilterColors[definition.key];
|
|
state.settings.filterStyles[definition.key] = {
|
|
color: !currentColor || currentColor === previousDefaultColor ? definition.color : current.color,
|
|
markerSize: Number(current.markerSize || definition.markerSize),
|
|
textSize: Number(current.textSize || definition.textSize),
|
|
showLabel: current.showLabel !== false
|
|
};
|
|
if (definition.key === "players") {
|
|
const rawDirectionLength = Number(current.directionLength || definition.directionLength || 28);
|
|
const safeDirectionLength = Number.isFinite(rawDirectionLength) ? rawDirectionLength : 28;
|
|
state.settings.filterStyles[definition.key].directionLength = Math.min(60, Math.max(10, safeDirectionLength));
|
|
}
|
|
if (definition.key === "bullets") {
|
|
const rawPhantomLifetimeMs = Number(current.phantomLifetimeMs || definition.phantomLifetimeMs || 5000);
|
|
const rawPredictionDistance = Number(current.predictionDistance || definition.predictionDistance || 250);
|
|
state.settings.filterStyles[definition.key].showTrajectory = current.showTrajectory !== false;
|
|
state.settings.filterStyles[definition.key].showPrediction = current.showPrediction !== false;
|
|
state.settings.filterStyles[definition.key].phantomLifetimeMs = Math.min(60000, Math.max(0, Number.isFinite(rawPhantomLifetimeMs) ? rawPhantomLifetimeMs : 5000));
|
|
state.settings.filterStyles[definition.key].predictionDistance = Math.min(1000, Math.max(25, Number.isFinite(rawPredictionDistance) ? rawPredictionDistance : 250));
|
|
}
|
|
state.settings.filterExpanded[definition.key] = !!state.settings.filterExpanded[definition.key];
|
|
if (typeof state.settings[definition.visibleKey] !== "boolean") {
|
|
state.settings[definition.visibleKey] = true;
|
|
}
|
|
}
|
|
if (!Array.isArray(state.settings.favoriteLootNames)) {
|
|
state.settings.favoriteLootNames = [];
|
|
}
|
|
state.settings.favoriteLootNames = Array.from(new Set(state.settings.favoriteLootNames.map((value) => String(value || "").trim().toLowerCase()).filter(Boolean)));
|
|
state.settings.ordinaryLootSpread = Math.min(4, Math.max(1, Number(state.settings.ordinaryLootSpread || defaultSettings.ordinaryLootSpread)));
|
|
state.settings.groupedLootSpread = Math.min(4, Math.max(1, Number(state.settings.groupedLootSpread || defaultSettings.groupedLootSpread)));
|
|
state.settings.sameLootMergeRadius = Math.min(240, Math.max(20, Number(state.settings.sameLootMergeRadius || defaultSettings.sameLootMergeRadius)));
|
|
state.settings.lineAnchorMode = ["auto-nearest", "top-left", "top-center", "top-right", "middle-left", "middle-right", "bottom-left", "bottom-center", "bottom-right"].includes(state.settings.lineAnchorMode)
|
|
? state.settings.lineAnchorMode
|
|
: defaultSettings.lineAnchorMode;
|
|
state.settings.mergeSameLootLabels = state.settings.mergeSameLootLabels !== false;
|
|
state.settings.labelSettingsOpen = !!state.settings.labelSettingsOpen;
|
|
}
|
|
|
|
function persistSettings() {
|
|
localStorage.setItem(storageKey, JSON.stringify(state.settings));
|
|
}
|
|
|
|
function normalizeLootName(name) {
|
|
return String(name || "").trim().toLowerCase();
|
|
}
|
|
|
|
function getFavoriteLootNames() {
|
|
return new Set(state.settings.favoriteLootNames || []);
|
|
}
|
|
|
|
function isFavoriteLoot(item) {
|
|
return !!(item && getFavoriteLootNames().has(normalizeLootName(item.label)));
|
|
}
|
|
|
|
function toggleFavoriteLoot(itemName) {
|
|
const normalized = normalizeLootName(itemName);
|
|
if (!normalized) {
|
|
return;
|
|
}
|
|
const favorites = getFavoriteLootNames();
|
|
if (favorites.has(normalized)) {
|
|
favorites.delete(normalized);
|
|
} else {
|
|
favorites.add(normalized);
|
|
}
|
|
state.settings.favoriteLootNames = Array.from(favorites);
|
|
persistSettings();
|
|
render();
|
|
}
|
|
|
|
function apiUrl(path) {
|
|
return password ? `${path}?password=${encodeURIComponent(password)}` : path;
|
|
}
|
|
|
|
function tileUrl(tileX, tileY, retry = 0) {
|
|
const query = new URLSearchParams({ x: String(tileX), y: String(tileY), retry: String(retry) });
|
|
if (state.bootstrap?.mapId) {
|
|
query.set("mapId", state.bootstrap.mapId);
|
|
}
|
|
if (password) {
|
|
query.set("password", password);
|
|
}
|
|
return `/tile?${query.toString()}`;
|
|
}
|
|
|
|
function getViewportMetrics() {
|
|
const rect = elements.viewport.getBoundingClientRect();
|
|
const mapSize = Number(state.bootstrap?.mapSize || 0);
|
|
return {
|
|
width: Math.max(0, rect.width),
|
|
height: Math.max(0, rect.height),
|
|
mapSize
|
|
};
|
|
}
|
|
|
|
function constrainViewState() {
|
|
const metrics = getViewportMetrics();
|
|
if (metrics.mapSize <= 0 || metrics.width <= 0 || metrics.height <= 0) {
|
|
return;
|
|
}
|
|
|
|
const minScaleForWidth = metrics.width / metrics.mapSize;
|
|
const minScaleForHeight = metrics.height / metrics.mapSize;
|
|
const effectiveMinScale = Math.max(minMapScale, minScaleForWidth, minScaleForHeight);
|
|
state.scale = Math.min(maxMapScale, Math.max(effectiveMinScale, state.scale));
|
|
|
|
const scaledMapWidth = metrics.mapSize * state.scale;
|
|
const scaledMapHeight = metrics.mapSize * state.scale;
|
|
const minOffsetX = metrics.width - scaledMapWidth;
|
|
const minOffsetY = metrics.height - scaledMapHeight;
|
|
|
|
state.offsetX = clampNumber(state.offsetX, Math.min(minOffsetX, 0), 0);
|
|
state.offsetY = clampNumber(state.offsetY, Math.min(minOffsetY, 0), 0);
|
|
}
|
|
|
|
function applyTransform() {
|
|
constrainViewState();
|
|
elements.canvas.style.transform = `translate(${state.offsetX}px, ${state.offsetY}px) scale(${state.scale})`;
|
|
updateVisibleTiles();
|
|
}
|
|
|
|
function applyMapMetadata(metadata, clearTiles = false) {
|
|
if (!metadata) {
|
|
return false;
|
|
}
|
|
|
|
const previous = state.bootstrap;
|
|
const next = {
|
|
...(previous || {}),
|
|
...metadata,
|
|
mapId: metadata.mapId || previous?.mapId || "",
|
|
mapName: metadata.mapName || previous?.mapName || "",
|
|
mapSize: Number(metadata.mapSize || previous?.mapSize || 0),
|
|
tileSize: Number(metadata.tileSize || previous?.tileSize || 512),
|
|
tileCountX: Number(metadata.tileCountX || previous?.tileCountX || 0),
|
|
tileCountY: Number(metadata.tileCountY || previous?.tileCountY || 0)
|
|
};
|
|
const changed = !previous
|
|
|| previous.mapId !== next.mapId
|
|
|| previous.mapName !== next.mapName
|
|
|| previous.mapSize !== next.mapSize
|
|
|| previous.tileSize !== next.tileSize
|
|
|| previous.tileCountX !== next.tileCountX
|
|
|| previous.tileCountY !== next.tileCountY;
|
|
|
|
state.bootstrap = next;
|
|
elements.canvas.style.width = `${next.mapSize}px`;
|
|
elements.canvas.style.height = `${next.mapSize}px`;
|
|
elements.tiles.style.width = `${next.mapSize}px`;
|
|
elements.tiles.style.height = `${next.mapSize}px`;
|
|
elements.paths.setAttribute("viewBox", `0 0 ${next.mapSize} ${next.mapSize}`);
|
|
elements.paths.setAttribute("width", `${next.mapSize}`);
|
|
elements.paths.setAttribute("height", `${next.mapSize}`);
|
|
elements.itemLabels.style.width = `${next.mapSize}px`;
|
|
elements.itemLabels.style.height = `${next.mapSize}px`;
|
|
elements.markers.style.width = `${next.mapSize}px`;
|
|
elements.markers.style.height = `${next.mapSize}px`;
|
|
|
|
if (clearTiles || changed) {
|
|
state.tileState = {};
|
|
elements.tiles.replaceChildren();
|
|
}
|
|
|
|
applyTransform();
|
|
return changed;
|
|
}
|
|
|
|
function setSettingsCollapsed(collapsed) {
|
|
state.settings.settingsCollapsed = collapsed;
|
|
persistSettings();
|
|
elements.settingsPanel.classList.toggle("collapsed", collapsed);
|
|
elements.settingsToggle.classList.toggle("visible", collapsed);
|
|
}
|
|
|
|
function setPanelOpen(panelElement, open) {
|
|
if (open && panelElement === elements.playersPanel) {
|
|
elements.lootPanel.classList.remove("open");
|
|
}
|
|
if (open && panelElement === elements.lootPanel) {
|
|
elements.playersPanel.classList.remove("open");
|
|
}
|
|
panelElement.classList.toggle("open", open);
|
|
}
|
|
|
|
function setLabelSettingsOpen(open) {
|
|
state.settings.labelSettingsOpen = open;
|
|
persistSettings();
|
|
elements.labelSettingsPanel.classList.toggle("open", open);
|
|
}
|
|
|
|
function resetLabelSettings() {
|
|
state.settings.ordinaryLootSpread = defaultSettings.ordinaryLootSpread;
|
|
state.settings.groupedLootSpread = defaultSettings.groupedLootSpread;
|
|
state.settings.sameLootMergeRadius = defaultSettings.sameLootMergeRadius;
|
|
state.settings.lineAnchorMode = defaultSettings.lineAnchorMode;
|
|
state.settings.mergeSameLootLabels = defaultSettings.mergeSameLootLabels;
|
|
}
|
|
|
|
function syncLabelSettingsUi() {
|
|
elements.ordinaryLootSpread.value = String(state.settings.ordinaryLootSpread);
|
|
elements.ordinaryLootSpreadValue.textContent = `${Number(state.settings.ordinaryLootSpread).toFixed(1)}x`;
|
|
elements.groupedLootSpread.value = String(state.settings.groupedLootSpread);
|
|
elements.groupedLootSpreadValue.textContent = `${Number(state.settings.groupedLootSpread).toFixed(1)}x`;
|
|
elements.sameLootMergeRadius.value = String(state.settings.sameLootMergeRadius);
|
|
elements.sameLootMergeRadiusValue.textContent = `${Math.round(Number(state.settings.sameLootMergeRadius))} px`;
|
|
elements.lineAnchorMode.value = state.settings.lineAnchorMode;
|
|
elements.mergeSameLootLabels.checked = !!state.settings.mergeSameLootLabels;
|
|
elements.labelSettingsPanel.classList.toggle("open", !!state.settings.labelSettingsOpen);
|
|
}
|
|
|
|
function centerOn(point) {
|
|
if (!point) {
|
|
return;
|
|
}
|
|
const rect = elements.viewport.getBoundingClientRect();
|
|
state.offsetX = (rect.width / 2) - (point.x * state.scale);
|
|
state.offsetY = (rect.height / 2) - (point.y * state.scale);
|
|
applyTransform();
|
|
}
|
|
|
|
function getFilterDefinition(kind, item) {
|
|
if (kind === "loot") {
|
|
if (isFavoriteLoot(item)) {
|
|
return filtersByKey.favoriteLoot || null;
|
|
}
|
|
const filterKey = lootFilterKeyByCategory[item.lootCategory || "other"] || "lootOther";
|
|
return filtersByKey[filterKey] || null;
|
|
}
|
|
return filtersByKey[filterKeyByKind[kind]] || null;
|
|
}
|
|
|
|
function getLootCategoryDefinition(item) {
|
|
const filterKey = lootFilterKeyByCategory[item?.lootCategory || "other"] || "lootOther";
|
|
return filtersByKey[filterKey] || null;
|
|
}
|
|
|
|
function getMarkerColor(kind, item) {
|
|
const filterDefinition = getFilterDefinition(kind, item);
|
|
const filterStyle = filterDefinition ? state.settings.filterStyles[filterDefinition.key] : null;
|
|
return filterStyle ? filterStyle.color : (kind === "loot" && isFavoriteLoot(item) ? favoriteLootColor : "#f8fafc");
|
|
}
|
|
|
|
function isLootCategoryEnabled(category) {
|
|
if (!category) {
|
|
return true;
|
|
}
|
|
|
|
if (typeof state.settings[category] !== "boolean") {
|
|
state.settings[category] = true;
|
|
}
|
|
|
|
return state.settings[category];
|
|
}
|
|
|
|
function isItemVisibleByFilters(kind, item) {
|
|
if (!item) {
|
|
return false;
|
|
}
|
|
if (kind === "loot" && isFavoriteLoot(item)) {
|
|
return state.settings.showFavoriteLoot !== false;
|
|
}
|
|
if (state.settings.distanceFilter > 0 && item.distance > state.settings.distanceFilter) {
|
|
return false;
|
|
}
|
|
if (kind === "loot") {
|
|
if (!state.settings.showLoot) {
|
|
return false;
|
|
}
|
|
if (!isLootCategoryEnabled(item.lootCategory)) {
|
|
return false;
|
|
}
|
|
}
|
|
if (kind === "players" && !state.settings.showPlayers) {
|
|
return false;
|
|
}
|
|
if (kind === "zombies" && !state.settings.showZombies) {
|
|
return false;
|
|
}
|
|
if (kind === "animals" && !state.settings.showAnimals) {
|
|
return false;
|
|
}
|
|
if (kind === "vehicles" && !state.settings.showVehicles) {
|
|
return false;
|
|
}
|
|
if (kind === "bullets" && !state.settings.showBullets) {
|
|
return false;
|
|
}
|
|
if (kind === "otherEntities" && !state.settings.showOtherEntities) {
|
|
return false;
|
|
}
|
|
if (kind === "bullets") {
|
|
const phantomLifetimeMs = Number(state.settings.filterStyles?.bullets?.phantomLifetimeMs || 0);
|
|
if (item.isPhantom && phantomLifetimeMs >= 0) {
|
|
const lastSeenAtUtcMs = Number(item.lastSeenAtUtcMs || 0);
|
|
if (lastSeenAtUtcMs > 0 && (Date.now() - lastSeenAtUtcMs) > phantomLifetimeMs) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
if (kind === "players" && state.lastSnapshot?.localPlayer) {
|
|
const dx = item.x - state.lastSnapshot.localPlayer.x;
|
|
const dy = item.y - state.lastSnapshot.localPlayer.y;
|
|
if ((dx * dx + dy * dy) <= 9.0) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function getVisibleCollection(kind, list) {
|
|
return (list || []).filter((item) => isItemVisibleByFilters(kind, item));
|
|
}
|
|
|
|
function buildLabelText(item) {
|
|
const distanceText = Number.isFinite(Number(item?.distance)) && Number(item.distance) >= 0 ? ` ${Math.round(Number(item.distance))}m` : "";
|
|
if (item?.kind === "player") {
|
|
return getEntityLabelLines(item).join("\n");
|
|
}
|
|
return `${String(item?.label || "Unknown")}${distanceText}`;
|
|
}
|
|
|
|
function isEntityKind(kind) {
|
|
return kind !== "loot";
|
|
}
|
|
|
|
function getRenderPriority(kind, item) {
|
|
if (isEntityKind(kind)) {
|
|
return 3;
|
|
}
|
|
return isFavoriteLoot(item) ? 2 : 1;
|
|
}
|
|
|
|
function getLayerClass(kind, item) {
|
|
const priority = getRenderPriority(kind, item);
|
|
if (priority === 3) {
|
|
return "layer-entity";
|
|
}
|
|
if (priority === 2) {
|
|
return "layer-favorite";
|
|
}
|
|
return "layer-loot";
|
|
}
|
|
|
|
function getLabelConfig(kind, item) {
|
|
const filterDefinition = getFilterDefinition(kind, item);
|
|
const filterStyle = filterDefinition ? state.settings.filterStyles[filterDefinition.key] : null;
|
|
if (kind === "bullets") {
|
|
return {
|
|
filterDefinition,
|
|
filterStyle,
|
|
showLabel: false,
|
|
textSize: filterStyle ? filterStyle.textSize : state.settings.textSize
|
|
};
|
|
}
|
|
const showLabel = !!(state.settings.showLabels && item.label && (!filterStyle || filterStyle.showLabel));
|
|
return {
|
|
filterDefinition,
|
|
filterStyle,
|
|
showLabel,
|
|
textSize: filterStyle ? filterStyle.textSize : state.settings.textSize
|
|
};
|
|
}
|
|
|
|
function useFixedScreenLabel(kind, itemOrGroup) {
|
|
if (kind === "players") {
|
|
return true;
|
|
}
|
|
if (kind === "loot") {
|
|
if (Object.prototype.hasOwnProperty.call(itemOrGroup || {}, "priority")) {
|
|
return itemOrGroup?.priority === 2;
|
|
}
|
|
return isFavoriteLoot(itemOrGroup);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function clampScale(value) {
|
|
const metrics = getViewportMetrics();
|
|
if (metrics.mapSize <= 0 || metrics.width <= 0 || metrics.height <= 0) {
|
|
return Math.min(maxMapScale, Math.max(minMapScale, value));
|
|
}
|
|
|
|
const minScaleForWidth = metrics.width / metrics.mapSize;
|
|
const minScaleForHeight = metrics.height / metrics.mapSize;
|
|
return Math.min(maxMapScale, Math.max(minMapScale, minScaleForWidth, minScaleForHeight, value));
|
|
}
|
|
|
|
function zoomAt(clientX, clientY, nextScale) {
|
|
const rect = elements.viewport.getBoundingClientRect();
|
|
const localPlayer = state.settings.followPlayer && state.lastSnapshot?.hasLocalPlayer && state.lastSnapshot?.localPlayer
|
|
? state.lastSnapshot.localPlayer
|
|
: null;
|
|
const originX = localPlayer
|
|
? ((localPlayer.x * state.scale) + state.offsetX)
|
|
: (clientX - rect.left);
|
|
const originY = localPlayer
|
|
? ((localPlayer.y * state.scale) + state.offsetY)
|
|
: (clientY - rect.top);
|
|
const worldX = (originX - state.offsetX) / state.scale;
|
|
const worldY = (originY - state.offsetY) / state.scale;
|
|
state.scale = clampScale(nextScale);
|
|
state.offsetX = originX - (worldX * state.scale);
|
|
state.offsetY = originY - (worldY * state.scale);
|
|
applyTransform();
|
|
}
|
|
|
|
function getActivePointerPair() {
|
|
const pointers = Array.from(state.activePointers.values());
|
|
return pointers.length >= 2 ? [pointers[0], pointers[1]] : null;
|
|
}
|
|
|
|
function getPointerDistance(first, second) {
|
|
const dx = second.clientX - first.clientX;
|
|
const dy = second.clientY - first.clientY;
|
|
return Math.hypot(dx, dy);
|
|
}
|
|
|
|
function getPointerMidpoint(first, second) {
|
|
return {
|
|
clientX: (first.clientX + second.clientX) / 2,
|
|
clientY: (first.clientY + second.clientY) / 2
|
|
};
|
|
}
|
|
|
|
function updateMapDrag(clientX, clientY) {
|
|
state.offsetX += clientX - state.lastX;
|
|
state.offsetY += clientY - state.lastY;
|
|
state.lastX = clientX;
|
|
state.lastY = clientY;
|
|
applyTransform();
|
|
}
|
|
|
|
function getRectIntersectionArea(first, second) {
|
|
const width = Math.max(0, Math.min(first.right, second.right) - Math.max(first.left, second.left));
|
|
const height = Math.max(0, Math.min(first.bottom, second.bottom) - Math.max(first.top, second.top));
|
|
return width * height;
|
|
}
|
|
|
|
function getPlacementPenalty(rect, occupiedRects, viewportRect) {
|
|
let overlapArea = 0;
|
|
for (const occupied of occupiedRects) {
|
|
overlapArea += getRectIntersectionArea(rect, occupied);
|
|
}
|
|
|
|
const overflowX = Math.max(0, viewportRect.left - rect.left) + Math.max(0, rect.right - viewportRect.right);
|
|
const overflowY = Math.max(0, viewportRect.top - rect.top) + Math.max(0, rect.bottom - viewportRect.bottom);
|
|
return (overlapArea * 10) + ((overflowX + overflowY) * 120);
|
|
}
|
|
|
|
function estimateLabelSize(text, fontSize) {
|
|
const safeFontSize = Math.max(10, Number(fontSize) || 14);
|
|
const safeText = String(text || "");
|
|
const lines = safeText.split("\n");
|
|
const lineHeight = Math.max(1, Math.ceil(safeFontSize * 1.15));
|
|
if (textMeasureContext) {
|
|
textMeasureContext.font = `700 ${safeFontSize}px Arial, sans-serif`;
|
|
let width = 1;
|
|
let ascent = Math.ceil(safeFontSize * 0.8);
|
|
let descent = Math.ceil(safeFontSize * 0.2);
|
|
for (const line of lines) {
|
|
const metrics = textMeasureContext.measureText(line || " ");
|
|
width = Math.max(width, Math.ceil(metrics.width));
|
|
ascent = Math.max(ascent, Math.ceil(metrics.actualBoundingBoxAscent || (safeFontSize * 0.8)));
|
|
descent = Math.max(descent, Math.ceil(metrics.actualBoundingBoxDescent || (safeFontSize * 0.2)));
|
|
}
|
|
return {
|
|
width: Math.max(1, width),
|
|
height: Math.max(1, ascent + descent + ((lines.length - 1) * lineHeight))
|
|
};
|
|
}
|
|
|
|
const longestLineLength = lines.reduce((maxLength, line) => Math.max(maxLength, String(line || "").length), 0);
|
|
return {
|
|
width: Math.max(1, Math.round(longestLineLength * safeFontSize * 0.52)),
|
|
height: Math.max(1, Math.round(safeFontSize + ((lines.length - 1) * lineHeight)))
|
|
};
|
|
}
|
|
|
|
function getScaledLabelLayoutSize(kind, itemOrGroup, text, fontSize) {
|
|
const size = estimateLabelSize(text, fontSize);
|
|
if (!useFixedScreenLabel(kind, itemOrGroup)) {
|
|
return size;
|
|
}
|
|
|
|
const effectiveScale = Math.max(minMapScale, Number(state.scale) || 1);
|
|
return {
|
|
width: size.width / effectiveScale,
|
|
height: size.height / effectiveScale
|
|
};
|
|
}
|
|
|
|
function buildPinnedLabelCandidates(entry, size) {
|
|
const markerSize = entry.label.filterStyle ? entry.label.filterStyle.markerSize : (entry.kind === "vehicles" ? 14 : 12);
|
|
const radius = Math.max(6, markerSize * 0.7);
|
|
const gap = Math.max(2, Math.round(markerSize * 0.2));
|
|
const sideCandidates = {
|
|
"middle-right": { left: radius + gap, top: -Math.round(size.height / 2), distance: gap },
|
|
"middle-left": { left: -(size.width + radius + gap), top: -Math.round(size.height / 2), distance: gap },
|
|
"top-center": { left: -Math.round(size.width / 2), top: -(size.height + radius + gap), distance: gap },
|
|
"bottom-center": { left: -Math.round(size.width / 2), top: radius + gap, distance: gap }
|
|
};
|
|
|
|
return [
|
|
sideCandidates["middle-left"],
|
|
sideCandidates["middle-right"],
|
|
sideCandidates["top-center"],
|
|
sideCandidates["bottom-center"]
|
|
];
|
|
}
|
|
|
|
function buildScreenRect(screenX, screenY, candidate, size, scale) {
|
|
return {
|
|
left: screenX + (candidate.left * scale),
|
|
top: screenY + (candidate.top * scale),
|
|
right: screenX + ((candidate.left + size.width) * scale),
|
|
bottom: screenY + ((candidate.top + size.height) * scale)
|
|
};
|
|
}
|
|
|
|
function clampNumber(value, min, max) {
|
|
return Math.min(max, Math.max(min, value));
|
|
}
|
|
|
|
function isPointOutsideViewport(screenX, screenY, viewportRect) {
|
|
return screenX < viewportRect.left
|
|
|| screenX > viewportRect.right
|
|
|| screenY < viewportRect.top
|
|
|| screenY > viewportRect.bottom;
|
|
}
|
|
|
|
function getBlockedViewportRects() {
|
|
const viewportRect = elements.viewport.getBoundingClientRect();
|
|
const blockedElements = [];
|
|
if (!elements.settingsPanel.classList.contains("collapsed")) {
|
|
blockedElements.push(elements.settingsPanel);
|
|
}
|
|
if (elements.playersPanel.classList.contains("open")) {
|
|
blockedElements.push(elements.playersPanel);
|
|
}
|
|
if (elements.lootPanel.classList.contains("open")) {
|
|
blockedElements.push(elements.lootPanel);
|
|
}
|
|
if (elements.labelSettingsPanel.classList.contains("open")) {
|
|
blockedElements.push(elements.labelSettingsPanel);
|
|
}
|
|
|
|
return blockedElements
|
|
.map((element) => element.getBoundingClientRect())
|
|
.map((rect) => ({
|
|
left: rect.left - viewportRect.left,
|
|
top: rect.top - viewportRect.top,
|
|
right: rect.right - viewportRect.left,
|
|
bottom: rect.bottom - viewportRect.top
|
|
}));
|
|
}
|
|
|
|
function buildViewportEdgeCandidates(screenX, screenY, size, viewportRect) {
|
|
const padding = 10;
|
|
const labelScreenWidth = size.width * state.scale;
|
|
const labelScreenHeight = size.height * state.scale;
|
|
const availableLeft = viewportRect.left + padding;
|
|
const availableTop = viewportRect.top + padding;
|
|
const availableRight = viewportRect.right - labelScreenWidth - padding;
|
|
const availableBottom = viewportRect.bottom - labelScreenHeight - padding;
|
|
const overflowLeft = screenX < viewportRect.left ? viewportRect.left - screenX : Number.POSITIVE_INFINITY;
|
|
const overflowRight = screenX > viewportRect.right ? screenX - viewportRect.right : Number.POSITIVE_INFINITY;
|
|
const overflowTop = screenY < viewportRect.top ? viewportRect.top - screenY : Number.POSITIVE_INFINITY;
|
|
const overflowBottom = screenY > viewportRect.bottom ? screenY - viewportRect.bottom : Number.POSITIVE_INFINITY;
|
|
const edgeCandidates = [
|
|
{
|
|
edge: "left",
|
|
overflow: overflowLeft,
|
|
left: availableLeft,
|
|
top: clampNumber(screenY - (labelScreenHeight / 2), Math.min(availableTop, availableBottom), Math.max(availableTop, availableBottom))
|
|
},
|
|
{
|
|
edge: "right",
|
|
overflow: overflowRight,
|
|
left: availableRight,
|
|
top: clampNumber(screenY - (labelScreenHeight / 2), Math.min(availableTop, availableBottom), Math.max(availableTop, availableBottom))
|
|
},
|
|
{
|
|
edge: "top",
|
|
overflow: overflowTop,
|
|
left: clampNumber(screenX - (labelScreenWidth / 2), Math.min(availableLeft, availableRight), Math.max(availableLeft, availableRight)),
|
|
top: availableTop
|
|
},
|
|
{
|
|
edge: "bottom",
|
|
overflow: overflowBottom,
|
|
left: clampNumber(screenX - (labelScreenWidth / 2), Math.min(availableLeft, availableRight), Math.max(availableLeft, availableRight)),
|
|
top: availableBottom
|
|
}
|
|
];
|
|
|
|
return edgeCandidates
|
|
.sort((lhs, rhs) => lhs.overflow - rhs.overflow)
|
|
.map((candidate) => ({
|
|
left: (candidate.left - screenX) / state.scale,
|
|
top: (candidate.top - screenY) / state.scale,
|
|
anchorX: 0,
|
|
anchorY: 0,
|
|
distance: Number.isFinite(candidate.overflow) ? candidate.overflow : 100000
|
|
}));
|
|
}
|
|
|
|
function normalizeGroupLootLabel(label) {
|
|
return String(label || "").trim().toLowerCase();
|
|
}
|
|
|
|
function getLootGroupingKey(item) {
|
|
return `${normalizeGroupLootLabel(item?.label)}:${String(item?.lootCategory || "other").trim().toLowerCase()}`;
|
|
}
|
|
|
|
function canUsePriorityGrouping(entry) {
|
|
return getRenderPriority(entry.kind, entry.item) >= 2 && entry.kind !== "players";
|
|
}
|
|
|
|
function buildPriorityLabelGroups(entries) {
|
|
const groups = [];
|
|
const groupableEntries = entries
|
|
.filter((entry) => canUsePriorityGrouping(entry) && entry.label.showLabel)
|
|
.map((entry) => ({
|
|
entry,
|
|
key: `${entry.kind}:${getRenderPriority(entry.kind, entry.item)}:${entry.kind === "loot" ? getLootGroupingKey(entry.item) : normalizeGroupLootLabel(entry.item.label)}`,
|
|
screenX: (entry.item.x * state.scale) + state.offsetX,
|
|
screenY: (entry.item.y * state.scale) + state.offsetY
|
|
}))
|
|
.sort((lhs, rhs) => {
|
|
const byKey = lhs.key.localeCompare(rhs.key);
|
|
if (byKey !== 0) {
|
|
return byKey;
|
|
}
|
|
if (lhs.screenY !== rhs.screenY) {
|
|
return lhs.screenY - rhs.screenY;
|
|
}
|
|
return lhs.screenX - rhs.screenX;
|
|
});
|
|
|
|
const clusterDistance = Math.max(24, Math.round(Number(state.settings.sameLootMergeRadius || defaultSettings.sameLootMergeRadius) * 0.55));
|
|
|
|
for (const candidate of groupableEntries) {
|
|
let bestGroup = null;
|
|
let bestDistance = Number.POSITIVE_INFINITY;
|
|
|
|
for (const group of groups) {
|
|
if (group.key !== candidate.key) {
|
|
continue;
|
|
}
|
|
const dx = candidate.screenX - group.screenX;
|
|
const dy = candidate.screenY - group.screenY;
|
|
const distance = Math.hypot(dx, dy);
|
|
if (distance <= clusterDistance && distance < bestDistance) {
|
|
bestDistance = distance;
|
|
bestGroup = group;
|
|
}
|
|
}
|
|
|
|
if (!bestGroup) {
|
|
groups.push({
|
|
key: candidate.key,
|
|
kind: candidate.entry.kind,
|
|
priority: getRenderPriority(candidate.entry.kind, candidate.entry.item),
|
|
entries: [candidate.entry],
|
|
label: candidate.entry.label,
|
|
markerColor: candidate.entry.markerColor,
|
|
baseText: String(candidate.entry.item.label || "Unknown"),
|
|
anchorX: candidate.entry.item.x,
|
|
anchorY: candidate.entry.item.y,
|
|
screenX: candidate.screenX,
|
|
screenY: candidate.screenY,
|
|
labelText: String(candidate.entry.item.label || "Unknown"),
|
|
labelPlacement: null
|
|
});
|
|
continue;
|
|
}
|
|
|
|
bestGroup.entries.push(candidate.entry);
|
|
const count = bestGroup.entries.length;
|
|
bestGroup.anchorX = ((bestGroup.anchorX * (count - 1)) + candidate.entry.item.x) / count;
|
|
bestGroup.anchorY = ((bestGroup.anchorY * (count - 1)) + candidate.entry.item.y) / count;
|
|
bestGroup.screenX = ((bestGroup.screenX * (count - 1)) + candidate.screenX) / count;
|
|
bestGroup.screenY = ((bestGroup.screenY * (count - 1)) + candidate.screenY) / count;
|
|
}
|
|
|
|
for (const group of groups) {
|
|
let maxWorldRadius = 0;
|
|
for (const entry of group.entries) {
|
|
const worldDx = entry.item.x - group.anchorX;
|
|
const worldDy = entry.item.y - group.anchorY;
|
|
maxWorldRadius = Math.max(maxWorldRadius, Math.hypot(worldDx, worldDy));
|
|
}
|
|
group.clusterRadiusWorld = maxWorldRadius;
|
|
group.labelText = group.entries.length > 1 ? `${group.baseText} x${group.entries.length}` : group.baseText;
|
|
}
|
|
|
|
return {
|
|
groups: groups.filter((group) => group.entries.length > 1),
|
|
groupedEntries: new Set(groups.filter((group) => group.entries.length > 1).flatMap((group) => group.entries))
|
|
};
|
|
}
|
|
|
|
function buildOrdinaryLootLabelGroups(entries) {
|
|
if (!state.settings.mergeSameLootLabels) {
|
|
return entries
|
|
.filter((entry) => getRenderPriority(entry.kind, entry.item) === 1 && entry.label.showLabel)
|
|
.map((entry) => ({
|
|
labelKey: getLootGroupingKey(entry.item),
|
|
entries: [entry],
|
|
label: entry.label,
|
|
markerColor: entry.markerColor,
|
|
baseText: String(entry.item.label || "Unknown"),
|
|
anchorX: entry.item.x,
|
|
anchorY: entry.item.y,
|
|
screenX: (entry.item.x * state.scale) + state.offsetX,
|
|
screenY: (entry.item.y * state.scale) + state.offsetY,
|
|
clusterRadiusScreen: 0,
|
|
clusterRadiusWorld: 0,
|
|
labelText: String(entry.item.label || "Unknown"),
|
|
labelPlacement: null
|
|
}));
|
|
}
|
|
|
|
const groups = [];
|
|
const groupableEntries = entries
|
|
.filter((entry) => getRenderPriority(entry.kind, entry.item) === 1 && entry.label.showLabel)
|
|
.map((entry) => ({
|
|
entry,
|
|
labelKey: getLootGroupingKey(entry.item),
|
|
screenX: (entry.item.x * state.scale) + state.offsetX,
|
|
screenY: (entry.item.y * state.scale) + state.offsetY
|
|
}))
|
|
.sort((lhs, rhs) => {
|
|
const byLabel = lhs.labelKey.localeCompare(rhs.labelKey);
|
|
if (byLabel !== 0) {
|
|
return byLabel;
|
|
}
|
|
if (lhs.screenY !== rhs.screenY) {
|
|
return lhs.screenY - rhs.screenY;
|
|
}
|
|
return lhs.screenX - rhs.screenX;
|
|
});
|
|
|
|
const clusterDistance = Number(state.settings.sameLootMergeRadius || defaultSettings.sameLootMergeRadius);
|
|
|
|
for (const candidate of groupableEntries) {
|
|
let bestGroup = null;
|
|
let bestDistance = Number.POSITIVE_INFINITY;
|
|
|
|
for (const group of groups) {
|
|
if (group.labelKey !== candidate.labelKey) {
|
|
continue;
|
|
}
|
|
const dx = candidate.screenX - group.screenX;
|
|
const dy = candidate.screenY - group.screenY;
|
|
const distance = Math.hypot(dx, dy);
|
|
if (distance <= clusterDistance && distance < bestDistance) {
|
|
bestDistance = distance;
|
|
bestGroup = group;
|
|
}
|
|
}
|
|
|
|
if (!bestGroup) {
|
|
groups.push({
|
|
labelKey: candidate.labelKey,
|
|
entries: [candidate.entry],
|
|
label: candidate.entry.label,
|
|
markerColor: candidate.entry.markerColor,
|
|
baseText: String(candidate.entry.item.label || "Unknown"),
|
|
anchorX: candidate.entry.item.x,
|
|
anchorY: candidate.entry.item.y,
|
|
screenX: candidate.screenX,
|
|
screenY: candidate.screenY
|
|
});
|
|
continue;
|
|
}
|
|
|
|
bestGroup.entries.push(candidate.entry);
|
|
const count = bestGroup.entries.length;
|
|
bestGroup.anchorX = ((bestGroup.anchorX * (count - 1)) + candidate.entry.item.x) / count;
|
|
bestGroup.anchorY = ((bestGroup.anchorY * (count - 1)) + candidate.entry.item.y) / count;
|
|
bestGroup.screenX = ((bestGroup.screenX * (count - 1)) + candidate.screenX) / count;
|
|
bestGroup.screenY = ((bestGroup.screenY * (count - 1)) + candidate.screenY) / count;
|
|
}
|
|
|
|
for (const group of groups) {
|
|
let maxScreenRadius = 0;
|
|
let maxWorldRadius = 0;
|
|
for (const entry of group.entries) {
|
|
const screenDx = ((entry.item.x * state.scale) + state.offsetX) - group.screenX;
|
|
const screenDy = ((entry.item.y * state.scale) + state.offsetY) - group.screenY;
|
|
maxScreenRadius = Math.max(maxScreenRadius, Math.hypot(screenDx, screenDy));
|
|
|
|
const worldDx = entry.item.x - group.anchorX;
|
|
const worldDy = entry.item.y - group.anchorY;
|
|
maxWorldRadius = Math.max(maxWorldRadius, Math.hypot(worldDx, worldDy));
|
|
}
|
|
|
|
group.clusterRadiusScreen = maxScreenRadius;
|
|
group.clusterRadiusWorld = maxWorldRadius;
|
|
group.labelText = group.entries.length > 1 ? `${group.baseText} x${group.entries.length}` : group.baseText;
|
|
group.labelPlacement = null;
|
|
}
|
|
|
|
return groups;
|
|
}
|
|
|
|
function buildOrdinaryGroupLabelCandidates(group, size) {
|
|
const spreadMultiplier = Number(state.settings.ordinaryLootSpread || 1) * Number(state.settings.groupedLootSpread || 1);
|
|
const radius = Math.max(8, group.clusterRadiusWorld + 8);
|
|
const primaryGap = Math.round(14 * spreadMultiplier);
|
|
const secondaryGap = Math.round(26 * spreadMultiplier);
|
|
|
|
return [
|
|
{ left: radius + primaryGap, top: 2, anchorX: 2, anchorY: 0, distance: primaryGap },
|
|
{ left: radius + primaryGap, top: -size.height - 2, anchorX: 2, anchorY: size.height, distance: primaryGap },
|
|
{ left: -(size.width + radius + primaryGap), top: 2, anchorX: size.width - 2, anchorY: 0, distance: primaryGap },
|
|
{ left: -(size.width + radius + primaryGap), top: -size.height - 2, anchorX: size.width - 2, anchorY: size.height, distance: primaryGap },
|
|
{ left: radius + secondaryGap, top: secondaryGap, anchorX: 2, anchorY: 0, distance: secondaryGap + 6 },
|
|
{ left: radius + secondaryGap, top: -(size.height + secondaryGap), anchorX: 2, anchorY: size.height, distance: secondaryGap + 6 },
|
|
{ left: -(size.width + radius + secondaryGap), top: secondaryGap, anchorX: size.width - 2, anchorY: 0, distance: secondaryGap + 6 },
|
|
{ left: -(size.width + radius + secondaryGap), top: -(size.height + secondaryGap), anchorX: size.width - 2, anchorY: size.height, distance: secondaryGap + 6 }
|
|
];
|
|
}
|
|
|
|
function getLabelAnchorPoints(labelPlacement, labelSize) {
|
|
const width = labelSize.width;
|
|
const height = labelSize.height;
|
|
const left = labelPlacement.left;
|
|
const top = labelPlacement.top;
|
|
const middleX = left + (width / 2);
|
|
const middleY = top + (height / 2);
|
|
const right = left + width;
|
|
const bottom = top + height;
|
|
|
|
return {
|
|
"top-left": { x: left, y: top },
|
|
"top-center": { x: middleX, y: top },
|
|
"top-right": { x: right, y: top },
|
|
"middle-left": { x: left, y: middleY },
|
|
"middle-right": { x: right, y: middleY },
|
|
"bottom-left": { x: left, y: bottom },
|
|
"bottom-center": { x: middleX, y: bottom },
|
|
"bottom-right": { x: right, y: bottom }
|
|
};
|
|
}
|
|
|
|
function getLabelLineTarget(labelPlacement, labelSize, sourceX = 0, sourceY = 0) {
|
|
const anchorPoints = getLabelAnchorPoints(labelPlacement, labelSize);
|
|
if (state.settings.lineAnchorMode !== "auto-nearest") {
|
|
return anchorPoints[state.settings.lineAnchorMode] || anchorPoints[defaultSettings.lineAnchorMode];
|
|
}
|
|
|
|
let bestPoint = anchorPoints["bottom-center"];
|
|
let bestDistance = Number.POSITIVE_INFINITY;
|
|
|
|
for (const point of Object.values(anchorPoints)) {
|
|
const dx = point.x - sourceX;
|
|
const dy = point.y - sourceY;
|
|
const distance = (dx * dx) + (dy * dy);
|
|
if (distance < bestDistance) {
|
|
bestDistance = distance;
|
|
bestPoint = point;
|
|
}
|
|
}
|
|
|
|
return bestPoint;
|
|
}
|
|
|
|
function computeLabelPlacements(entries) {
|
|
const viewportRect = {
|
|
left: 0,
|
|
top: 0,
|
|
right: elements.viewport.clientWidth,
|
|
bottom: elements.viewport.clientHeight
|
|
};
|
|
const occupiedRects = [...getBlockedViewportRects()];
|
|
const priorityGrouping = buildPriorityLabelGroups(entries);
|
|
|
|
for (const entry of entries) {
|
|
entry.labelPlacement = null;
|
|
}
|
|
|
|
for (const entry of entries) {
|
|
if (!entry.label.showLabel) {
|
|
continue;
|
|
}
|
|
|
|
const priority = getRenderPriority(entry.kind, entry.item);
|
|
const nearAnchor = priority >= 2;
|
|
const size = getScaledLabelLayoutSize(entry.kind, entry.item, entry.labelText, entry.label.textSize);
|
|
const screenX = (entry.item.x * state.scale) + state.offsetX;
|
|
const screenY = (entry.item.y * state.scale) + state.offsetY;
|
|
const useViewportEdgePlacement = entry.kind === "players" && isPointOutsideViewport(screenX, screenY, viewportRect);
|
|
|
|
if (!nearAnchor) {
|
|
continue;
|
|
}
|
|
|
|
if (priorityGrouping.groupedEntries.has(entry)) {
|
|
continue;
|
|
}
|
|
|
|
const candidates = useViewportEdgePlacement
|
|
? buildViewportEdgeCandidates(screenX, screenY, size, viewportRect)
|
|
: buildPinnedLabelCandidates(entry, size);
|
|
let bestPlacement = null;
|
|
let bestScore = Number.POSITIVE_INFINITY;
|
|
|
|
for (const candidate of candidates) {
|
|
const rect = buildScreenRect(screenX, screenY, candidate, size, state.scale);
|
|
const penalty = getPlacementPenalty(rect, occupiedRects, viewportRect);
|
|
const score = penalty + (candidate.distance * (nearAnchor ? 16 : 8));
|
|
if (score < bestScore) {
|
|
bestScore = score;
|
|
bestPlacement = { ...candidate, rect };
|
|
}
|
|
}
|
|
|
|
if (!bestPlacement) {
|
|
entry.labelPlacement = null;
|
|
continue;
|
|
}
|
|
|
|
if (!nearAnchor && bestScore > 1400) {
|
|
entry.labelPlacement = null;
|
|
continue;
|
|
}
|
|
|
|
occupiedRects.push(bestPlacement.rect);
|
|
entry.labelPlacement = {
|
|
left: bestPlacement.left,
|
|
top: bestPlacement.top,
|
|
anchorX: bestPlacement.anchorX,
|
|
anchorY: bestPlacement.anchorY
|
|
};
|
|
}
|
|
|
|
for (const group of priorityGrouping.groups) {
|
|
const size = getScaledLabelLayoutSize(group.kind, group, group.labelText, group.label.textSize);
|
|
const groupEntry = group.entries[0];
|
|
const candidates = buildPinnedLabelCandidates(groupEntry, size);
|
|
let bestPlacement = null;
|
|
let bestScore = Number.POSITIVE_INFINITY;
|
|
|
|
for (const candidate of candidates) {
|
|
const rect = buildScreenRect(group.screenX, group.screenY, candidate, size, state.scale);
|
|
const penalty = getPlacementPenalty(rect, occupiedRects, viewportRect);
|
|
const score = penalty + (candidate.distance * 20);
|
|
if (score < bestScore) {
|
|
bestScore = score;
|
|
bestPlacement = { ...candidate, rect };
|
|
}
|
|
}
|
|
|
|
if (!bestPlacement) {
|
|
group.labelPlacement = null;
|
|
continue;
|
|
}
|
|
|
|
occupiedRects.push(bestPlacement.rect);
|
|
group.labelPlacement = {
|
|
left: bestPlacement.left,
|
|
top: bestPlacement.top,
|
|
anchorX: bestPlacement.anchorX,
|
|
anchorY: bestPlacement.anchorY
|
|
};
|
|
}
|
|
|
|
const groups = buildOrdinaryLootLabelGroups(entries);
|
|
|
|
for (const group of groups) {
|
|
const size = estimateLabelSize(group.labelText, group.label.textSize);
|
|
const candidates = buildOrdinaryGroupLabelCandidates(group, size);
|
|
let bestPlacement = null;
|
|
let bestScore = Number.POSITIVE_INFINITY;
|
|
|
|
for (const candidate of candidates) {
|
|
const rect = buildScreenRect(group.screenX, group.screenY, candidate, size, state.scale);
|
|
const penalty = getPlacementPenalty(rect, occupiedRects, viewportRect);
|
|
const score = penalty + (candidate.distance * 8);
|
|
if (score < bestScore) {
|
|
bestScore = score;
|
|
bestPlacement = { ...candidate, rect };
|
|
}
|
|
}
|
|
|
|
if (!bestPlacement) {
|
|
group.labelPlacement = null;
|
|
continue;
|
|
}
|
|
|
|
occupiedRects.push(bestPlacement.rect);
|
|
group.labelPlacement = {
|
|
left: bestPlacement.left,
|
|
top: bestPlacement.top,
|
|
anchorX: bestPlacement.anchorX,
|
|
anchorY: bestPlacement.anchorY
|
|
};
|
|
}
|
|
|
|
return {
|
|
ordinaryGroups: groups,
|
|
priorityGroups: priorityGrouping.groups
|
|
};
|
|
}
|
|
|
|
function renderFilterCards() {
|
|
const buildCard = (definition) => {
|
|
const style = state.settings.filterStyles[definition.key];
|
|
const visible = !!state.settings[definition.visibleKey];
|
|
const expanded = !!state.settings.filterExpanded[definition.key];
|
|
|
|
const card = document.createElement("section");
|
|
card.className = `filter-card${expanded ? " expanded" : ""}`;
|
|
const directionControl = definition.key === "players" ? `
|
|
<label class="mini-control">
|
|
<span>View line</span>
|
|
<input class="range-direction" type="range" min="10" max="60" step="1" value="${style.directionLength || 28}">
|
|
<strong class="value-direction">${style.directionLength || 28}px</strong>
|
|
</label>` : "";
|
|
const bulletControls = definition.key === "bullets" ? `
|
|
<label class="toggle-row compact bullet-toggle-trajectory">
|
|
<input type="checkbox" ${style.showTrajectory !== false ? "checked" : ""}>
|
|
<span>Show trajectory</span>
|
|
</label>
|
|
<label class="toggle-row compact bullet-toggle-prediction">
|
|
<input type="checkbox" ${style.showPrediction !== false ? "checked" : ""}>
|
|
<span>Show prediction</span>
|
|
</label>
|
|
<label class="mini-control">
|
|
<span>Phantom</span>
|
|
<input class="range-phantom" type="range" min="0" max="60000" step="250" value="${style.phantomLifetimeMs || 5000}">
|
|
<strong class="value-phantom">${style.phantomLifetimeMs || 5000}ms</strong>
|
|
</label>
|
|
<label class="mini-control">
|
|
<span>Prediction</span>
|
|
<input class="range-prediction" type="range" min="25" max="1000" step="25" value="${style.predictionDistance || 250}">
|
|
<strong class="value-prediction">${style.predictionDistance || 250}m</strong>
|
|
</label>` : "";
|
|
const textSizeControl = definition.key !== "bullets" ? `
|
|
<label class="mini-control">
|
|
<span>Text size</span>
|
|
<input class="range-text" type="range" min="10" max="24" step="1" value="${style.textSize}">
|
|
<strong class="value-text">${style.textSize}px</strong>
|
|
</label>` : "";
|
|
const showLabelControl = definition.key !== "bullets" ? `
|
|
<label class="toggle-row compact toggle-show-label">
|
|
<input type="checkbox" ${style.showLabel ? "checked" : ""}>
|
|
<span>Show label</span>
|
|
</label>` : "";
|
|
|
|
card.innerHTML = `
|
|
<div class="filter-row">
|
|
<label class="filter-main">
|
|
<input type="checkbox" ${visible ? "checked" : ""}>
|
|
<span class="filter-swatch" style="background:${style.color}"></span>
|
|
<span class="filter-name">${definition.label}</span>
|
|
</label>
|
|
<button class="filter-gear" type="button" aria-label="Configure ${definition.label}">⚙</button>
|
|
</div>
|
|
<div class="filter-extra">
|
|
<label class="mini-control">
|
|
<span>Color</span>
|
|
<input type="color" value="${style.color}">
|
|
</label>
|
|
<label class="mini-control">
|
|
<span>Marker size</span>
|
|
<input class="range-marker" type="range" min="4" max="26" step="1" value="${style.markerSize}">
|
|
<strong class="value-marker">${style.markerSize}px</strong>
|
|
</label>
|
|
${textSizeControl}
|
|
${directionControl}
|
|
${bulletControls}
|
|
${showLabelControl}
|
|
</div>`;
|
|
|
|
const visibleInput = card.querySelector(".filter-main input");
|
|
const gearButton = card.querySelector(".filter-gear");
|
|
const colorInput = card.querySelector('input[type="color"]');
|
|
const markerRange = card.querySelector(".range-marker");
|
|
const textRange = card.querySelector(".range-text");
|
|
const labelInput = card.querySelector(".toggle-show-label input");
|
|
const markerValue = card.querySelector(".value-marker");
|
|
const textValue = card.querySelector(".value-text");
|
|
const directionRange = card.querySelector(".range-direction");
|
|
const directionValue = card.querySelector(".value-direction");
|
|
const swatch = card.querySelector(".filter-swatch");
|
|
const trajectoryInput = card.querySelector(".bullet-toggle-trajectory input");
|
|
const predictionInput = card.querySelector(".bullet-toggle-prediction input");
|
|
const phantomRange = card.querySelector(".range-phantom");
|
|
const phantomValue = card.querySelector(".value-phantom");
|
|
const predictionRange = card.querySelector(".range-prediction");
|
|
const predictionValue = card.querySelector(".value-prediction");
|
|
|
|
visibleInput.addEventListener("change", () => {
|
|
state.settings[definition.visibleKey] = visibleInput.checked;
|
|
persistSettings();
|
|
render();
|
|
});
|
|
gearButton.addEventListener("click", () => {
|
|
state.settings.filterExpanded[definition.key] = !state.settings.filterExpanded[definition.key];
|
|
persistSettings();
|
|
renderFilterCards();
|
|
});
|
|
colorInput.addEventListener("input", () => {
|
|
state.settings.filterStyles[definition.key].color = colorInput.value;
|
|
persistSettings();
|
|
if (swatch) {
|
|
swatch.style.background = colorInput.value;
|
|
}
|
|
render();
|
|
});
|
|
markerRange.addEventListener("input", () => {
|
|
state.settings.filterStyles[definition.key].markerSize = Number(markerRange.value);
|
|
markerValue.textContent = `${markerRange.value}px`;
|
|
persistSettings();
|
|
render();
|
|
});
|
|
if (textRange && textValue) {
|
|
textRange.addEventListener("input", () => {
|
|
state.settings.filterStyles[definition.key].textSize = Number(textRange.value);
|
|
textValue.textContent = `${textRange.value}px`;
|
|
persistSettings();
|
|
render();
|
|
});
|
|
}
|
|
if (labelInput) {
|
|
labelInput.addEventListener("change", () => {
|
|
state.settings.filterStyles[definition.key].showLabel = labelInput.checked;
|
|
persistSettings();
|
|
render();
|
|
});
|
|
}
|
|
if (directionRange && directionValue) {
|
|
directionRange.addEventListener("input", () => {
|
|
state.settings.filterStyles[definition.key].directionLength = Number(directionRange.value);
|
|
directionValue.textContent = `${directionRange.value}px`;
|
|
persistSettings();
|
|
render();
|
|
});
|
|
}
|
|
if (trajectoryInput) {
|
|
trajectoryInput.addEventListener("change", () => {
|
|
state.settings.filterStyles[definition.key].showTrajectory = trajectoryInput.checked;
|
|
persistSettings();
|
|
render();
|
|
});
|
|
}
|
|
if (predictionInput) {
|
|
predictionInput.addEventListener("change", () => {
|
|
state.settings.filterStyles[definition.key].showPrediction = predictionInput.checked;
|
|
syncBulletVisuals(state.lastSnapshot?.bullets || []);
|
|
ensureBulletAnimation();
|
|
persistSettings();
|
|
render();
|
|
});
|
|
}
|
|
if (phantomRange && phantomValue) {
|
|
phantomRange.addEventListener("input", () => {
|
|
state.settings.filterStyles[definition.key].phantomLifetimeMs = Number(phantomRange.value);
|
|
phantomValue.textContent = `${phantomRange.value}ms`;
|
|
persistSettings();
|
|
render();
|
|
});
|
|
}
|
|
if (predictionRange && predictionValue) {
|
|
predictionRange.addEventListener("input", () => {
|
|
state.settings.filterStyles[definition.key].predictionDistance = Number(predictionRange.value);
|
|
predictionValue.textContent = `${predictionRange.value}m`;
|
|
syncBulletVisuals(state.lastSnapshot?.bullets || []);
|
|
ensureBulletAnimation();
|
|
persistSettings();
|
|
render();
|
|
});
|
|
}
|
|
return card;
|
|
};
|
|
|
|
elements.entityFilterList.replaceChildren(...filterDefinitions.filter((definition) => definition.kind !== "loot").map(buildCard));
|
|
elements.lootFilterList.replaceChildren(...filterDefinitions.filter((definition) => definition.kind === "loot").map(buildCard));
|
|
}
|
|
|
|
function renderPlayersList() {
|
|
if (!state.lastSnapshot) {
|
|
return;
|
|
}
|
|
|
|
const players = Array.isArray(state.lastSnapshot.playerList) ? state.lastSnapshot.playerList.slice() : [];
|
|
const visibleOnMapByFilters = (player) => {
|
|
if (!player.visibleOnMap) {
|
|
return false;
|
|
}
|
|
if (!state.settings.showPlayers) {
|
|
return false;
|
|
}
|
|
if (state.settings.distanceFilter > 0 && player.distance >= 0 && player.distance > state.settings.distanceFilter) {
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
const visiblePlayers = players.filter((player) => player.visibleOnMap && player.distance >= 0);
|
|
const maxDistance = visiblePlayers.reduce((value, player) => Math.max(value, Number(player.distance || 0)), 1);
|
|
const sortVisiblePlayers = (lhs, rhs) => {
|
|
if ((lhs.distance || 0) !== (rhs.distance || 0)) {
|
|
return (lhs.distance || 0) - (rhs.distance || 0);
|
|
}
|
|
return String(lhs.steamId || "").localeCompare(String(rhs.steamId || ""));
|
|
};
|
|
const sortHiddenPlayers = (lhs, rhs) => {
|
|
const byLabel = String(lhs.label || "").localeCompare(String(rhs.label || ""), undefined, { sensitivity: "base" });
|
|
if (byLabel !== 0) {
|
|
return byLabel;
|
|
}
|
|
return String(lhs.steamId || "").localeCompare(String(rhs.steamId || ""));
|
|
};
|
|
const renderPlayerRow = (player) => {
|
|
const normalized = player.visibleOnMap && player.distance >= 0
|
|
? Math.max(0, Math.min(1, 1 - ((player.distance || 0) / maxDistance)))
|
|
: 0;
|
|
const red = player.visibleOnMap ? 170 + Math.round(85 * normalized) : 180;
|
|
const greenBlue = player.visibleOnMap ? 35 + Math.round(60 * (1 - normalized)) : 140;
|
|
const nameColor = `rgb(${red},${greenBlue},${greenBlue})`;
|
|
const steamId = player.steamId && String(player.steamId).trim().length > 0 ? String(player.steamId) : "unknown";
|
|
const steamUrl = steamId !== "unknown" ? `https://steamcommunity.com/profiles/${encodeURIComponent(steamId)}` : "";
|
|
return `
|
|
<div class="players-row">
|
|
<div class="players-name" style="color:${nameColor}">${renderSafeMultilineHtml(getEntityLabelLines(player))}</div>
|
|
<div class="players-steam">${steamUrl ? `<a href="${steamUrl}" target="_blank" rel="noopener noreferrer">${sanitize(steamId)}</a>` : sanitize(steamId)}</div>
|
|
</div>`;
|
|
};
|
|
|
|
const visibleRows = players.filter(visibleOnMapByFilters).sort(sortVisiblePlayers).map(renderPlayerRow).join("");
|
|
const hiddenRows = players.filter((player) => !visibleOnMapByFilters(player)).sort(sortHiddenPlayers).map(renderPlayerRow).join("");
|
|
|
|
let rows = "";
|
|
if (visibleRows.length > 0) {
|
|
rows += '<div class="loot-section-title">Visible On Map</div>';
|
|
rows += visibleRows;
|
|
}
|
|
if (hiddenRows.length > 0) {
|
|
rows += `${rows.length > 0 ? '<div class="loot-section-title">Hidden / Off Map</div>' : '<div class="loot-section-title">Players</div>'}`;
|
|
rows += hiddenRows;
|
|
}
|
|
|
|
elements.playersList.innerHTML = rows || '<div class="players-empty">No players</div>';
|
|
}
|
|
|
|
function renderLootList() {
|
|
if (!state.lastSnapshot) {
|
|
elements.lootList.innerHTML = '<div class="players-empty">No loot</div>';
|
|
elements.lootInfo.textContent = "Loot: waiting for snapshot...";
|
|
return;
|
|
}
|
|
|
|
const categoryOrder = new Map(filterDefinitions.filter((definition) => definition.kind === "loot").map((definition, index) => [definition.category || "other", index]));
|
|
const sortLootItems = (lhs, rhs) => {
|
|
const lhsCategory = String(lhs.lootCategory || "other");
|
|
const rhsCategory = String(rhs.lootCategory || "other");
|
|
const byCategory = (categoryOrder.get(lhsCategory) ?? 999) - (categoryOrder.get(rhsCategory) ?? 999);
|
|
if (byCategory !== 0) {
|
|
return byCategory;
|
|
}
|
|
if ((lhs.distance || 0) !== (rhs.distance || 0)) {
|
|
return (lhs.distance || 0) - (rhs.distance || 0);
|
|
}
|
|
const byLabel = String(lhs.label || "").localeCompare(String(rhs.label || ""));
|
|
if (byLabel !== 0) {
|
|
return byLabel;
|
|
}
|
|
return String(lhs.id || "").localeCompare(String(rhs.id || ""));
|
|
};
|
|
|
|
const lootItems = getVisibleCollection("loot", state.lastSnapshot.loot || []).slice().sort(sortLootItems);
|
|
|
|
const favoriteItems = lootItems.filter((item) => isFavoriteLoot(item));
|
|
const regularItems = lootItems.filter((item) => !isFavoriteLoot(item));
|
|
|
|
elements.lootInfo.textContent = `Loot: ${lootItems.length} visible item${lootItems.length === 1 ? "" : "s"} (filters respected)`;
|
|
|
|
const renderRow = (item) => {
|
|
const favorite = isFavoriteLoot(item);
|
|
const color = getMarkerColor("loot", item);
|
|
const categoryLabel = getLootCategoryDefinition(item)?.label || "Other";
|
|
return `
|
|
<button class="loot-row${favorite ? " favorite" : ""}" type="button" data-loot-name="${sanitize(item.label || "")}" style="--loot-color:${color}">
|
|
<span class="loot-name">${sanitize(item.label || "Unknown")}</span>
|
|
<span class="loot-distance">${Math.round(Number(item.distance || 0))}m</span>
|
|
<span class="loot-meta">${sanitize(categoryLabel)}${favorite ? " • favorite" : ""}</span>
|
|
</button>`;
|
|
};
|
|
|
|
let rows = "";
|
|
if (favoriteItems.length > 0) {
|
|
let currentCategory = "";
|
|
rows += '<div class="loot-section-title">Favorites</div>';
|
|
for (const item of favoriteItems) {
|
|
const category = String(item.lootCategory || "other");
|
|
if (category !== currentCategory) {
|
|
currentCategory = category;
|
|
rows += `<div class="loot-group-title">${sanitize(getLootCategoryDefinition(item)?.label || "Other")}</div>`;
|
|
}
|
|
rows += renderRow(item);
|
|
}
|
|
}
|
|
if (regularItems.length > 0) {
|
|
let currentCategory = "";
|
|
if (rows.length > 0) {
|
|
rows += '<div class="loot-section-title">Visible Loot</div>';
|
|
}
|
|
for (const item of regularItems) {
|
|
const category = String(item.lootCategory || "other");
|
|
if (category !== currentCategory) {
|
|
currentCategory = category;
|
|
rows += `<div class="loot-group-title">${sanitize(getLootCategoryDefinition(item)?.label || "Other")}</div>`;
|
|
}
|
|
rows += renderRow(item);
|
|
}
|
|
}
|
|
elements.lootList.innerHTML = rows || '<div class="players-empty">No loot matches current filters</div>';
|
|
}
|
|
|
|
function createMarker(entry) {
|
|
const { kind, item, markerColor, labelText, label } = entry;
|
|
const filterStyle = label.filterStyle;
|
|
const markerSize = filterStyle ? filterStyle.markerSize : (kind === "vehicles" ? 14 : 12);
|
|
const borderSize = Math.max(1, Math.round(markerSize * 0.16));
|
|
const favorite = kind === "loot" && isFavoriteLoot(item);
|
|
const labelPlacement = entry.labelPlacement;
|
|
|
|
const marker = document.createElement("div");
|
|
marker.className = `entity ${getLayerClass(kind, item)}${kind === "players" ? " player-entity" : ""}${kind === "bullets" && item.isPhantom ? " bullet-phantom" : ""}${kind === "bullets" && item.isCompleted ? " bullet-completed" : ""}`;
|
|
marker.style.left = `${item.x}px`;
|
|
marker.style.top = `${item.y}px`;
|
|
|
|
const glyph = document.createElement("div");
|
|
glyph.className = `marker ${kind}${favorite ? " favorite" : ""}`;
|
|
glyph.style.width = `${markerSize}px`;
|
|
glyph.style.height = `${markerSize}px`;
|
|
glyph.style.background = markerColor;
|
|
glyph.style.borderWidth = `${borderSize}px`;
|
|
glyph.style.color = markerColor;
|
|
|
|
if (kind === "players") {
|
|
const direction = document.createElement("div");
|
|
direction.className = "direction entity-direction";
|
|
direction.style.transform = `translate(-50%, -100%) rotate(${180 - (item.rotation || 0)}deg)`;
|
|
direction.style.color = markerColor;
|
|
direction.style.height = `${Math.max(10, Number(filterStyle?.directionLength || 28))}px`;
|
|
marker.appendChild(direction);
|
|
}
|
|
|
|
marker.appendChild(glyph);
|
|
|
|
if (label.showLabel && labelPlacement && getRenderPriority(kind, item) >= 2) {
|
|
const labelNode = document.createElement("span");
|
|
labelNode.className = `label${favorite ? " favorite" : ""}`;
|
|
labelNode.textContent = labelText;
|
|
labelNode.style.fontSize = `${label.textSize}px`;
|
|
labelNode.style.color = markerColor;
|
|
labelNode.style.left = `${labelPlacement.left}px`;
|
|
labelNode.style.top = `${labelPlacement.top}px`;
|
|
if (useFixedScreenLabel(kind, item)) {
|
|
const effectiveScale = Math.max(minMapScale, Number(state.scale) || 1);
|
|
labelNode.style.transformOrigin = "0 0";
|
|
labelNode.style.transform = `scale(${1 / effectiveScale})`;
|
|
}
|
|
marker.appendChild(labelNode);
|
|
}
|
|
|
|
return marker;
|
|
}
|
|
|
|
function createPriorityLabelGroup(group) {
|
|
const labelPlacement = group.labelPlacement;
|
|
if (!labelPlacement) {
|
|
return null;
|
|
}
|
|
|
|
const marker = document.createElement("div");
|
|
marker.className = `entity ${group.priority >= 3 ? "layer-entity" : "layer-favorite"}`;
|
|
marker.style.left = `${group.anchorX}px`;
|
|
marker.style.top = `${group.anchorY}px`;
|
|
|
|
const labelNode = document.createElement("span");
|
|
labelNode.className = `label${group.priority === 2 ? " favorite" : ""}`;
|
|
labelNode.textContent = group.labelText;
|
|
labelNode.style.fontSize = `${group.label.textSize}px`;
|
|
labelNode.style.color = group.markerColor;
|
|
labelNode.style.left = `${labelPlacement.left}px`;
|
|
labelNode.style.top = `${labelPlacement.top}px`;
|
|
if (useFixedScreenLabel(group.kind, group)) {
|
|
const effectiveScale = Math.max(minMapScale, Number(state.scale) || 1);
|
|
labelNode.style.transformOrigin = "0 0";
|
|
labelNode.style.transform = `scale(${1 / effectiveScale})`;
|
|
}
|
|
marker.appendChild(labelNode);
|
|
|
|
const labelSize = getScaledLabelLayoutSize(group.kind, group, group.labelText, group.label.textSize);
|
|
for (const entry of group.entries) {
|
|
const labelLine = document.createElement("span");
|
|
labelLine.className = `label-line${group.priority === 2 ? " favorite" : ""}`;
|
|
const itemDx = entry.item.x - group.anchorX;
|
|
const itemDy = entry.item.y - group.anchorY;
|
|
const lineTarget = getLabelLineTarget(labelPlacement, labelSize, itemDx, itemDy);
|
|
const startX = itemDx;
|
|
const startY = itemDy;
|
|
const drawX = lineTarget.x - startX;
|
|
const drawY = lineTarget.y - startY;
|
|
const angle = Math.atan2(drawY, drawX) * (180 / Math.PI);
|
|
const length = Math.hypot(drawX, drawY);
|
|
labelLine.style.left = `${startX}px`;
|
|
labelLine.style.top = `${startY}px`;
|
|
labelLine.style.width = `${Math.max(4, length)}px`;
|
|
labelLine.style.transform = `rotate(${angle}deg)`;
|
|
labelLine.style.color = group.markerColor;
|
|
marker.appendChild(labelLine);
|
|
}
|
|
|
|
return marker;
|
|
}
|
|
|
|
function createLootLabelGroup(group) {
|
|
const labelPlacement = group.labelPlacement;
|
|
if (!labelPlacement) {
|
|
return null;
|
|
}
|
|
const labelSize = estimateLabelSize(group.labelText, group.label.textSize);
|
|
|
|
const marker = document.createElement("div");
|
|
marker.className = "item-label-anchor";
|
|
marker.style.left = `${group.anchorX}px`;
|
|
marker.style.top = `${group.anchorY}px`;
|
|
|
|
const labelNode = document.createElement("span");
|
|
labelNode.className = "label loot-label";
|
|
labelNode.textContent = group.labelText;
|
|
labelNode.style.fontSize = `${group.label.textSize}px`;
|
|
labelNode.style.color = group.markerColor;
|
|
labelNode.style.left = `${labelPlacement.left}px`;
|
|
labelNode.style.top = `${labelPlacement.top}px`;
|
|
marker.appendChild(labelNode);
|
|
|
|
for (const entry of group.entries) {
|
|
const labelLine = document.createElement("span");
|
|
labelLine.className = "label-line loot-line";
|
|
const itemDx = entry.item.x - group.anchorX;
|
|
const itemDy = entry.item.y - group.anchorY;
|
|
const lineTarget = getLabelLineTarget(labelPlacement, labelSize, itemDx, itemDy);
|
|
const startX = itemDx;
|
|
const startY = itemDy;
|
|
const drawX = lineTarget.x - startX;
|
|
const drawY = lineTarget.y - startY;
|
|
const angle = Math.atan2(drawY, drawX) * (180 / Math.PI);
|
|
const length = Math.hypot(drawX, drawY);
|
|
labelLine.style.left = `${startX}px`;
|
|
labelLine.style.top = `${startY}px`;
|
|
labelLine.style.width = `${Math.max(4, length)}px`;
|
|
labelLine.style.transform = `rotate(${angle}deg)`;
|
|
labelLine.style.color = group.markerColor;
|
|
marker.appendChild(labelLine);
|
|
}
|
|
|
|
return marker;
|
|
}
|
|
|
|
function buildRenderEntries() {
|
|
const collections = [
|
|
{ kind: "players", items: getVisibleCollection("players", state.lastSnapshot?.players || []) },
|
|
{ kind: "vehicles", items: getVisibleCollection("vehicles", state.lastSnapshot?.vehicles || []) },
|
|
{ kind: "zombies", items: getVisibleCollection("zombies", state.lastSnapshot?.zombies || []) },
|
|
{ kind: "animals", items: getVisibleCollection("animals", state.lastSnapshot?.animals || []) },
|
|
{ kind: "bullets", items: getVisibleCollection("bullets", state.lastSnapshot?.bullets || []) },
|
|
{ kind: "otherEntities", items: getVisibleCollection("otherEntities", state.lastSnapshot?.otherEntities || []) },
|
|
{ kind: "loot", items: getVisibleCollection("loot", state.lastSnapshot?.loot || []) }
|
|
];
|
|
|
|
const entries = [];
|
|
for (const collection of collections) {
|
|
for (const item of collection.items) {
|
|
entries.push({
|
|
kind: collection.kind,
|
|
item,
|
|
markerColor: getMarkerColor(collection.kind, item),
|
|
labelText: buildLabelText(item),
|
|
label: getLabelConfig(collection.kind, item)
|
|
});
|
|
}
|
|
}
|
|
entries.sort((lhs, rhs) => {
|
|
const priorityDiff = getRenderPriority(rhs.kind, rhs.item) - getRenderPriority(lhs.kind, lhs.item);
|
|
if (priorityDiff !== 0) {
|
|
return priorityDiff;
|
|
}
|
|
return Number(lhs.item?.distance || 0) - Number(rhs.item?.distance || 0);
|
|
});
|
|
return entries;
|
|
}
|
|
|
|
function createSvgNode(tagName) {
|
|
return document.createElementNS("http://www.w3.org/2000/svg", tagName);
|
|
}
|
|
|
|
function getBulletFilterStyle() {
|
|
return state.settings.filterStyles?.bullets || {};
|
|
}
|
|
|
|
function syncBulletVisuals(bullets) {
|
|
const now = performance.now();
|
|
const visibleIds = new Set();
|
|
const bulletStyle = getBulletFilterStyle();
|
|
const predictionLimit = bulletStyle.showPrediction === false ? 0 : Number(bulletStyle.predictionDistance || 250);
|
|
|
|
for (const bullet of bullets || []) {
|
|
visibleIds.add(bullet.id);
|
|
const visual = state.bulletVisuals.get(bullet.id) || { revealedDistance: 0, lastTick: now, targetDistance: 0, speed: 0 };
|
|
visual.lastTick = now;
|
|
visual.speed = Math.max(30, Number(bullet.predictionSpeed || 0));
|
|
visual.targetDistance = bullet.isCompleted ? 0 : predictionLimit;
|
|
if (visual.revealedDistance > visual.targetDistance) {
|
|
visual.revealedDistance = visual.targetDistance;
|
|
}
|
|
state.bulletVisuals.set(bullet.id, visual);
|
|
}
|
|
|
|
for (const id of Array.from(state.bulletVisuals.keys())) {
|
|
if (!visibleIds.has(id)) {
|
|
state.bulletVisuals.delete(id);
|
|
}
|
|
}
|
|
}
|
|
|
|
function advanceBulletVisuals(now) {
|
|
let needsFrame = false;
|
|
let changed = false;
|
|
|
|
for (const visual of state.bulletVisuals.values()) {
|
|
const elapsedSeconds = Math.max(0, (now - visual.lastTick) / 1000);
|
|
visual.lastTick = now;
|
|
if (visual.revealedDistance < visual.targetDistance) {
|
|
const nextDistance = Math.min(visual.targetDistance, visual.revealedDistance + (visual.speed * elapsedSeconds));
|
|
if (nextDistance !== visual.revealedDistance) {
|
|
visual.revealedDistance = nextDistance;
|
|
changed = true;
|
|
}
|
|
}
|
|
if (visual.revealedDistance + 0.5 < visual.targetDistance) {
|
|
needsFrame = true;
|
|
}
|
|
}
|
|
|
|
return { needsFrame, changed };
|
|
}
|
|
|
|
function ensureBulletAnimation() {
|
|
if (state.bulletAnimationFrame) {
|
|
return;
|
|
}
|
|
|
|
const hasPendingPrediction = Array.from(state.bulletVisuals.values()).some((visual) => visual.revealedDistance + 0.5 < visual.targetDistance);
|
|
if (!hasPendingPrediction) {
|
|
return;
|
|
}
|
|
|
|
const tick = (now) => {
|
|
state.bulletAnimationFrame = null;
|
|
const { needsFrame, changed } = advanceBulletVisuals(now);
|
|
if (changed) {
|
|
render();
|
|
}
|
|
if (needsFrame) {
|
|
state.bulletAnimationFrame = window.requestAnimationFrame(tick);
|
|
}
|
|
};
|
|
|
|
state.bulletAnimationFrame = window.requestAnimationFrame(tick);
|
|
}
|
|
|
|
function buildClippedLine(points, maxDistance) {
|
|
if (!Array.isArray(points) || points.length < 2 || maxDistance <= 0) {
|
|
return [];
|
|
}
|
|
|
|
const clipped = [points[0]];
|
|
let remaining = maxDistance;
|
|
for (let index = 1; index < points.length; index += 1) {
|
|
const previous = points[index - 1];
|
|
const current = points[index];
|
|
const dx = Number(current.x || 0) - Number(previous.x || 0);
|
|
const dy = Number(current.y || 0) - Number(previous.y || 0);
|
|
const segmentLength = Math.hypot(dx, dy);
|
|
if (segmentLength <= 0) {
|
|
continue;
|
|
}
|
|
if (remaining >= segmentLength) {
|
|
clipped.push(current);
|
|
remaining -= segmentLength;
|
|
continue;
|
|
}
|
|
const ratio = remaining / segmentLength;
|
|
clipped.push({ x: Number(previous.x || 0) + (dx * ratio), y: Number(previous.y || 0) + (dy * ratio) });
|
|
break;
|
|
}
|
|
|
|
return clipped;
|
|
}
|
|
|
|
function buildBulletPathNodes(bullets) {
|
|
const style = getBulletFilterStyle();
|
|
if (style.showTrajectory === false && style.showPrediction === false) {
|
|
return [];
|
|
}
|
|
|
|
const nodes = [];
|
|
for (const bullet of bullets || []) {
|
|
const color = getMarkerColor("bullets", bullet);
|
|
|
|
if (style.showTrajectory !== false && Array.isArray(bullet.path) && bullet.path.length >= 2) {
|
|
const actual = createSvgNode("polyline");
|
|
actual.setAttribute("class", `bullet-path-actual${bullet.isPhantom ? " bullet-path-phantom" : ""}`);
|
|
actual.setAttribute("stroke", color);
|
|
actual.setAttribute("points", bullet.path.map((point) => `${point.x},${point.y}`).join(" "));
|
|
nodes.push(actual);
|
|
}
|
|
|
|
if (style.showPrediction !== false && !bullet.isCompleted && Array.isArray(bullet.predictedPath) && bullet.predictedPath.length >= 2) {
|
|
const visual = state.bulletVisuals.get(bullet.id);
|
|
const clippedPoints = buildClippedLine(bullet.predictedPath, Number(visual?.revealedDistance || 0));
|
|
if (clippedPoints.length >= 2) {
|
|
const predicted = createSvgNode("polyline");
|
|
predicted.setAttribute("class", `bullet-path-predicted${bullet.isPhantom ? " bullet-path-phantom" : ""}`);
|
|
predicted.setAttribute("stroke", color);
|
|
predicted.setAttribute("points", clippedPoints.map((point) => `${point.x},${point.y}`).join(" "));
|
|
nodes.push(predicted);
|
|
}
|
|
}
|
|
}
|
|
|
|
return nodes;
|
|
}
|
|
|
|
function updateVisibleTiles() {
|
|
if (!state.bootstrap) {
|
|
return;
|
|
}
|
|
|
|
const rect = elements.viewport.getBoundingClientRect();
|
|
const left = Math.max(0, Math.floor((-state.offsetX) / state.scale));
|
|
const top = Math.max(0, Math.floor((-state.offsetY) / state.scale));
|
|
const right = Math.min(state.bootstrap.mapSize, Math.ceil((rect.width - state.offsetX) / state.scale));
|
|
const bottom = Math.min(state.bootstrap.mapSize, Math.ceil((rect.height - state.offsetY) / state.scale));
|
|
|
|
const tileSize = state.bootstrap.tileSize;
|
|
const preloadMargin = 2;
|
|
const keepMargin = 4;
|
|
const minTileX = Math.max(0, Math.floor(left / tileSize) - preloadMargin);
|
|
const minTileY = Math.max(0, Math.floor(top / tileSize) - preloadMargin);
|
|
const maxTileX = Math.min(state.bootstrap.tileCountX - 1, Math.floor(right / tileSize) + preloadMargin);
|
|
const maxTileY = Math.min(state.bootstrap.tileCountY - 1, Math.floor(bottom / tileSize) + preloadMargin);
|
|
|
|
const ensureTile = (tileX, tileY, key) => {
|
|
let img = elements.tiles.querySelector(`[data-key="${key}"]`);
|
|
if (!img) {
|
|
img = document.createElement("img");
|
|
img.className = "map-tile loading";
|
|
img.dataset.key = key;
|
|
img.dataset.x = String(tileX);
|
|
img.dataset.y = String(tileY);
|
|
img.dataset.retry = "0";
|
|
img.draggable = false;
|
|
img.style.left = `${tileX * tileSize}px`;
|
|
img.style.top = `${tileY * tileSize}px`;
|
|
img.style.width = `${tileSize}px`;
|
|
img.style.height = `${tileSize}px`;
|
|
|
|
const loadTile = (retryCount) => {
|
|
img.dataset.retry = String(retryCount);
|
|
img.classList.remove("failed", "loaded");
|
|
img.classList.add("loading");
|
|
img.src = tileUrl(tileX, tileY, retryCount);
|
|
};
|
|
|
|
img.addEventListener("load", () => {
|
|
state.tileState[key] = "loaded";
|
|
img.classList.remove("loading", "failed");
|
|
img.classList.add("loaded");
|
|
});
|
|
|
|
img.addEventListener("error", () => {
|
|
const nextRetry = Number(img.dataset.retry || "0") + 1;
|
|
state.tileState[key] = "failed";
|
|
img.classList.remove("loading");
|
|
img.classList.add("failed");
|
|
if (nextRetry <= 4) {
|
|
window.setTimeout(() => {
|
|
if (!document.body.contains(img)) {
|
|
return;
|
|
}
|
|
loadTile(nextRetry);
|
|
}, 300 * nextRetry);
|
|
}
|
|
});
|
|
|
|
loadTile(0);
|
|
elements.tiles.appendChild(img);
|
|
return;
|
|
}
|
|
|
|
if (img.classList.contains("failed")) {
|
|
const nextRetry = Number(img.dataset.retry || "0") + 1;
|
|
if (nextRetry <= 4) {
|
|
img.dataset.retry = String(nextRetry);
|
|
img.classList.remove("failed");
|
|
img.classList.add("loading");
|
|
img.src = tileUrl(tileX, tileY, nextRetry);
|
|
}
|
|
}
|
|
};
|
|
|
|
for (let tileY = minTileY; tileY <= maxTileY; tileY += 1) {
|
|
for (let tileX = minTileX; tileX <= maxTileX; tileX += 1) {
|
|
const key = `${tileX}:${tileY}`;
|
|
ensureTile(tileX, tileY, key);
|
|
}
|
|
}
|
|
|
|
for (const node of Array.from(elements.tiles.querySelectorAll(".map-tile"))) {
|
|
const tileX = Number(node.dataset.x || "0");
|
|
const tileY = Number(node.dataset.y || "0");
|
|
const keep = tileX >= Math.max(0, minTileX - keepMargin)
|
|
&& tileX <= Math.min(state.bootstrap.tileCountX - 1, maxTileX + keepMargin)
|
|
&& tileY >= Math.max(0, minTileY - keepMargin)
|
|
&& tileY <= Math.min(state.bootstrap.tileCountY - 1, maxTileY + keepMargin);
|
|
if (!keep) {
|
|
delete state.tileState[node.dataset.key];
|
|
node.remove();
|
|
}
|
|
}
|
|
}
|
|
|
|
function render() {
|
|
if (!state.lastSnapshot || !state.bootstrap) {
|
|
return;
|
|
}
|
|
|
|
if (state.settings.followPlayer && state.lastSnapshot.hasLocalPlayer && state.lastSnapshot.localPlayer) {
|
|
centerOn(state.lastSnapshot.localPlayer);
|
|
}
|
|
|
|
const markerNodes = [];
|
|
const itemLabelNodes = [];
|
|
const pathNodes = buildBulletPathNodes(getVisibleCollection("bullets", state.lastSnapshot?.bullets || []));
|
|
|
|
const localPlayer = state.lastSnapshot.hasLocalPlayer ? state.lastSnapshot.localPlayer : null;
|
|
if (localPlayer) {
|
|
const marker = document.createElement("div");
|
|
marker.className = "entity local-player-entity";
|
|
marker.style.left = `${localPlayer.x}px`;
|
|
marker.style.top = `${localPlayer.y}px`;
|
|
|
|
const glyph = document.createElement("div");
|
|
glyph.className = "marker local-player";
|
|
const direction = document.createElement("div");
|
|
direction.className = "direction entity-direction local-direction";
|
|
direction.style.transform = `translate(-50%, -100%) rotate(${180 - (localPlayer.cameraRotation || localPlayer.rotation || 0)}deg)`;
|
|
direction.style.height = `${Math.max(10, Number(state.settings.filterStyles?.players?.directionLength || 28))}px`;
|
|
marker.appendChild(direction);
|
|
marker.appendChild(glyph);
|
|
markerNodes.push(marker);
|
|
}
|
|
|
|
const entries = buildRenderEntries();
|
|
const labelGroups = computeLabelPlacements(entries);
|
|
|
|
for (const entry of entries) {
|
|
markerNodes.push(createMarker(entry));
|
|
}
|
|
|
|
for (const group of labelGroups.priorityGroups || []) {
|
|
const markerNode = createPriorityLabelGroup(group);
|
|
if (markerNode) {
|
|
markerNodes.push(markerNode);
|
|
}
|
|
}
|
|
|
|
for (const group of labelGroups.ordinaryGroups || []) {
|
|
const itemLabelNode = createLootLabelGroup(group);
|
|
if (itemLabelNode) {
|
|
itemLabelNodes.push(itemLabelNode);
|
|
}
|
|
}
|
|
|
|
elements.itemLabels.replaceChildren(...itemLabelNodes);
|
|
elements.paths.replaceChildren(...pathNodes);
|
|
elements.markers.replaceChildren(...markerNodes);
|
|
|
|
if (elements.playersPanel.classList.contains("open")) {
|
|
renderPlayersList();
|
|
}
|
|
|
|
if (elements.lootPanel.classList.contains("open")) {
|
|
renderLootList();
|
|
}
|
|
}
|
|
|
|
function stopFallbackPolling() {
|
|
if (state.fallbackPollTimer) {
|
|
window.clearInterval(state.fallbackPollTimer);
|
|
state.fallbackPollTimer = null;
|
|
}
|
|
}
|
|
|
|
function startFallbackPolling() {
|
|
if (state.fallbackPollTimer) {
|
|
return;
|
|
}
|
|
|
|
const poll = () => {
|
|
fetch(apiUrl("/api/state"), { cache: "no-store" })
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error(response.status === 401 ? "Unauthorized" : `HTTP ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((snapshot) => applySnapshot(snapshot))
|
|
.catch((error) => {
|
|
elements.status.textContent = error?.message || String(error);
|
|
});
|
|
};
|
|
|
|
poll();
|
|
state.fallbackPollTimer = window.setInterval(poll, 3000);
|
|
}
|
|
|
|
function clearReconnectTimer() {
|
|
if (state.reconnectTimer) {
|
|
window.clearTimeout(state.reconnectTimer);
|
|
state.reconnectTimer = null;
|
|
}
|
|
}
|
|
|
|
function scheduleReconnect() {
|
|
if (state.reconnectTimer) {
|
|
return;
|
|
}
|
|
state.reconnectTimer = window.setTimeout(() => {
|
|
state.reconnectTimer = null;
|
|
connectEvents();
|
|
}, 3000);
|
|
}
|
|
|
|
function applySnapshot(snapshot) {
|
|
const previousSnapshot = state.lastSnapshot;
|
|
state.lastSnapshot = snapshot;
|
|
const mapChanged = applyMapMetadata({
|
|
mapId: snapshot.mapId,
|
|
mapName: snapshot.mapName,
|
|
serverMapName: snapshot.serverMapName,
|
|
mapSize: snapshot.mapSize,
|
|
tileSize: snapshot.tileSize,
|
|
tileCountX: snapshot.tileCountX,
|
|
tileCountY: snapshot.tileCountY
|
|
});
|
|
if (snapshot.mapId) clearMapNotice();
|
|
if (mapChanged) {
|
|
state.initialCentered = false;
|
|
}
|
|
syncBulletVisuals(snapshot?.bullets || []);
|
|
ensureBulletAnimation();
|
|
|
|
const snapshotChanged = !previousSnapshot
|
|
|| previousSnapshot.cacheRefreshSequence !== snapshot.cacheRefreshSequence
|
|
|| previousSnapshot.fastCacheRefreshSequence !== snapshot.fastCacheRefreshSequence
|
|
|| previousSnapshot.slowCacheRefreshSequence !== snapshot.slowCacheRefreshSequence
|
|
|| previousSnapshot.status !== snapshot.status
|
|
|| previousSnapshot.serverName !== snapshot.serverName
|
|
|| previousSnapshot.mapName !== snapshot.mapName
|
|
|| previousSnapshot.serverMapName !== snapshot.serverMapName
|
|
|| previousSnapshot.gameVersion !== snapshot.gameVersion
|
|
|| previousSnapshot.hasLocalPlayer !== snapshot.hasLocalPlayer
|
|
|| mapChanged;
|
|
|
|
if (!state.initialCentered && snapshot.hasLocalPlayer && snapshot.localPlayer) {
|
|
centerOn(snapshot.localPlayer);
|
|
state.initialCentered = true;
|
|
}
|
|
|
|
const serverTitle = snapshot.serverName && snapshot.serverName.length > 0 ? snapshot.serverName : "Unavailable";
|
|
const versionText = snapshot.gameVersion && snapshot.gameVersion.length > 0 ? snapshot.gameVersion : "n/a";
|
|
const mapText = snapshot.serverMapName && snapshot.serverMapName.length > 0 ? snapshot.serverMapName : snapshot.mapName;
|
|
|
|
elements.serverInfo.textContent = `Server: ${serverTitle} | Map: ${mapText} | Version: ${versionText}`;
|
|
elements.serverBadge.textContent = `Server: ${serverTitle}`;
|
|
elements.status.textContent = snapshot.hasLocalPlayer ? `Live: ${snapshot.mapName}` : "Waiting for local player...";
|
|
|
|
if (!snapshotChanged) {
|
|
return;
|
|
}
|
|
|
|
render();
|
|
}
|
|
|
|
function showMapNotice(msg) {
|
|
const existing = document.getElementById("map-notice");
|
|
if (existing) existing.remove();
|
|
const el = document.createElement("div");
|
|
el.id = "map-notice";
|
|
el.style.cssText = [
|
|
"position:fixed", "top:0", "left:0", "right:0",
|
|
"background:#b91c1c", "color:#fff",
|
|
"padding:10px 16px", "font-size:13px",
|
|
"z-index:9999", "text-align:center",
|
|
"cursor:pointer"
|
|
].join(";");
|
|
el.textContent = msg + " (click to dismiss)";
|
|
el.addEventListener("click", () => el.remove());
|
|
document.body.prepend(el);
|
|
}
|
|
|
|
function clearMapNotice() {
|
|
const el = document.getElementById("map-notice");
|
|
if (el) el.remove();
|
|
}
|
|
|
|
async function bootstrap() {
|
|
const response = await fetch(apiUrl("/api/bootstrap"), { cache: "no-store" });
|
|
if (!response.ok) {
|
|
throw new Error(response.status === 401 ? "Unauthorized" : `HTTP ${response.status}`);
|
|
}
|
|
const bootstrapData = await response.json();
|
|
applyMapMetadata(bootstrapData, true);
|
|
|
|
// Surface missing-map-image problems immediately with a visible red banner.
|
|
const mapsWithImages = (bootstrapData.maps || []).filter(m => m.hasImage);
|
|
if (!bootstrapData.mapId) {
|
|
if (mapsWithImages.length === 0) {
|
|
showMapNotice(
|
|
"No map PNG found — place a PNG named after a map ID next to the exe in a maps/ folder " +
|
|
"(e.g. maps/chernarusplus.png). Open /api/debug for the exact expected path."
|
|
);
|
|
} else {
|
|
showMapNotice(
|
|
"Map PNGs exist (" + mapsWithImages.map(m => m.id).join(", ") + ") but server returned no mapId — " +
|
|
"open /api/debug for details."
|
|
);
|
|
}
|
|
}
|
|
|
|
filterDefinitions = [...entityFilterDefinitions, ...buildLootFilterDefinitions((state.bootstrap.filters || []).filter((definition) => definition.kind === "loot"))];
|
|
rebuildFilterCaches();
|
|
ensureFilterSettings();
|
|
renderFilterCards();
|
|
centerOn({ x: state.bootstrap.mapSize / 2, y: state.bootstrap.mapSize / 2 });
|
|
setSettingsCollapsed(!!state.settings.settingsCollapsed);
|
|
syncLabelSettingsUi();
|
|
}
|
|
|
|
function connectEvents() {
|
|
if (typeof window.EventSource !== "function") {
|
|
startFallbackPolling();
|
|
return;
|
|
}
|
|
|
|
clearReconnectTimer();
|
|
|
|
if (state.eventSource) {
|
|
state.eventSource.close();
|
|
}
|
|
|
|
const source = new EventSource(apiUrl("/events"));
|
|
state.eventSource = source;
|
|
|
|
source.addEventListener("state", (event) => {
|
|
stopFallbackPolling();
|
|
applySnapshot(JSON.parse(event.data));
|
|
});
|
|
|
|
source.onerror = () => {
|
|
if (state.eventSource === source) {
|
|
state.eventSource.close();
|
|
state.eventSource = null;
|
|
}
|
|
elements.status.textContent = "Connection lost";
|
|
startFallbackPolling();
|
|
scheduleReconnect();
|
|
};
|
|
}
|
|
|
|
function bindUi() {
|
|
for (const [key, element] of Object.entries({
|
|
followPlayer: elements.followPlayer,
|
|
showLoot: elements.showLoot,
|
|
showLabels: elements.showLabels
|
|
})) {
|
|
element.checked = !!state.settings[key];
|
|
element.addEventListener("change", () => {
|
|
state.settings[key] = element.checked;
|
|
persistSettings();
|
|
render();
|
|
});
|
|
}
|
|
|
|
elements.distanceFilter.value = String(state.settings.distanceFilter);
|
|
elements.distanceValue.textContent = `${state.settings.distanceFilter} m`;
|
|
elements.distanceFilter.addEventListener("input", () => {
|
|
state.settings.distanceFilter = Number(elements.distanceFilter.value);
|
|
elements.distanceValue.textContent = `${state.settings.distanceFilter} m`;
|
|
persistSettings();
|
|
render();
|
|
});
|
|
|
|
elements.textSize.value = String(state.settings.textSize);
|
|
elements.textSizeValue.textContent = `${state.settings.textSize} px`;
|
|
elements.textSize.addEventListener("input", () => {
|
|
state.settings.textSize = Number(elements.textSize.value);
|
|
elements.textSizeValue.textContent = `${state.settings.textSize} px`;
|
|
persistSettings();
|
|
render();
|
|
});
|
|
|
|
syncLabelSettingsUi();
|
|
elements.labelSettingsToggle.addEventListener("click", () => setLabelSettingsOpen(!elements.labelSettingsPanel.classList.contains("open")));
|
|
elements.labelSettingsClose.addEventListener("click", () => setLabelSettingsOpen(false));
|
|
elements.labelSettingsReset.addEventListener("click", () => {
|
|
resetLabelSettings();
|
|
ensureFilterSettings();
|
|
syncLabelSettingsUi();
|
|
persistSettings();
|
|
render();
|
|
});
|
|
|
|
elements.ordinaryLootSpread.addEventListener("input", () => {
|
|
state.settings.ordinaryLootSpread = Number(elements.ordinaryLootSpread.value);
|
|
syncLabelSettingsUi();
|
|
persistSettings();
|
|
render();
|
|
});
|
|
|
|
elements.groupedLootSpread.addEventListener("input", () => {
|
|
state.settings.groupedLootSpread = Number(elements.groupedLootSpread.value);
|
|
syncLabelSettingsUi();
|
|
persistSettings();
|
|
render();
|
|
});
|
|
|
|
elements.sameLootMergeRadius.addEventListener("input", () => {
|
|
state.settings.sameLootMergeRadius = Number(elements.sameLootMergeRadius.value);
|
|
syncLabelSettingsUi();
|
|
persistSettings();
|
|
render();
|
|
});
|
|
|
|
elements.lineAnchorMode.addEventListener("change", () => {
|
|
state.settings.lineAnchorMode = elements.lineAnchorMode.value;
|
|
syncLabelSettingsUi();
|
|
persistSettings();
|
|
render();
|
|
});
|
|
|
|
elements.mergeSameLootLabels.addEventListener("change", () => {
|
|
state.settings.mergeSameLootLabels = elements.mergeSameLootLabels.checked;
|
|
syncLabelSettingsUi();
|
|
persistSettings();
|
|
render();
|
|
});
|
|
|
|
elements.settingsToggle.addEventListener("click", () => setSettingsCollapsed(false));
|
|
elements.collapseButton.addEventListener("click", () => setSettingsCollapsed(!state.settings.settingsCollapsed));
|
|
elements.playersToggle.addEventListener("click", () => setPanelOpen(elements.playersPanel, !elements.playersPanel.classList.contains("open")));
|
|
elements.playersClose.addEventListener("click", () => setPanelOpen(elements.playersPanel, false));
|
|
elements.lootToggle.addEventListener("click", () => setPanelOpen(elements.lootPanel, !elements.lootPanel.classList.contains("open")));
|
|
elements.lootClose.addEventListener("click", () => setPanelOpen(elements.lootPanel, false));
|
|
elements.settingsPanelBody.addEventListener("wheel", (event) => event.stopPropagation(), { passive: true });
|
|
elements.labelSettingsBody.addEventListener("wheel", (event) => event.stopPropagation(), { passive: true });
|
|
elements.playersPanel.addEventListener("wheel", (event) => event.stopPropagation(), { passive: true });
|
|
elements.lootPanel.addEventListener("wheel", (event) => event.stopPropagation(), { passive: true });
|
|
elements.lootList.addEventListener("click", (event) => {
|
|
const row = event.target.closest(".loot-row");
|
|
if (!row) {
|
|
return;
|
|
}
|
|
toggleFavoriteLoot(row.dataset.lootName || "");
|
|
});
|
|
|
|
elements.viewport.addEventListener("pointerdown", (event) => {
|
|
if (event.pointerType === "mouse" && event.button !== 0) {
|
|
return;
|
|
}
|
|
elements.viewport.setPointerCapture(event.pointerId);
|
|
state.activePointers.set(event.pointerId, { clientX: event.clientX, clientY: event.clientY });
|
|
if (state.activePointers.size === 1) {
|
|
state.dragging = !state.settings.followPlayer;
|
|
state.lastX = event.clientX;
|
|
state.lastY = event.clientY;
|
|
state.pinchDistance = 0;
|
|
return;
|
|
}
|
|
const pointerPair = getActivePointerPair();
|
|
if (pointerPair) {
|
|
state.dragging = false;
|
|
state.pinchDistance = getPointerDistance(pointerPair[0], pointerPair[1]);
|
|
}
|
|
});
|
|
|
|
elements.viewport.addEventListener("pointermove", (event) => {
|
|
if (!state.activePointers.has(event.pointerId)) {
|
|
return;
|
|
}
|
|
|
|
state.activePointers.set(event.pointerId, { clientX: event.clientX, clientY: event.clientY });
|
|
const pointerPair = getActivePointerPair();
|
|
if (pointerPair) {
|
|
const nextDistance = getPointerDistance(pointerPair[0], pointerPair[1]);
|
|
if (state.pinchDistance > 0 && nextDistance > 0) {
|
|
const midpoint = getPointerMidpoint(pointerPair[0], pointerPair[1]);
|
|
zoomAt(midpoint.clientX, midpoint.clientY, state.scale * (nextDistance / state.pinchDistance));
|
|
}
|
|
state.pinchDistance = nextDistance;
|
|
return;
|
|
}
|
|
|
|
if (!state.dragging) {
|
|
return;
|
|
}
|
|
updateMapDrag(event.clientX, event.clientY);
|
|
});
|
|
|
|
const stopPointerGesture = (event) => {
|
|
state.activePointers.delete(event.pointerId);
|
|
if (state.activePointers.size === 0) {
|
|
state.dragging = false;
|
|
state.pinchDistance = 0;
|
|
return;
|
|
}
|
|
|
|
const [remainingPointer] = state.activePointers.values();
|
|
if (remainingPointer) {
|
|
state.dragging = true;
|
|
state.lastX = remainingPointer.clientX;
|
|
state.lastY = remainingPointer.clientY;
|
|
}
|
|
state.pinchDistance = 0;
|
|
};
|
|
|
|
elements.viewport.addEventListener("pointerup", stopPointerGesture);
|
|
elements.viewport.addEventListener("pointercancel", stopPointerGesture);
|
|
|
|
elements.viewport.addEventListener("wheel", (event) => {
|
|
if (event.target.closest("#settingsPanel") || event.target.closest("#playersPanel") || event.target.closest("#lootPanel")) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
zoomAt(event.clientX, event.clientY, state.scale * (event.deltaY < 0 ? 1.1 : 0.9));
|
|
}, { passive: false });
|
|
|
|
window.addEventListener("resize", () => {
|
|
if (state.settings.followPlayer && state.lastSnapshot?.hasLocalPlayer && state.lastSnapshot.localPlayer) {
|
|
centerOn(state.lastSnapshot.localPlayer);
|
|
return;
|
|
}
|
|
applyTransform();
|
|
});
|
|
}
|
|
|
|
rebuildFilterCaches();
|
|
ensureFilterSettings();
|
|
renderFilterCards();
|
|
bindUi();
|
|
|
|
bootstrap()
|
|
.then(() => fetch(apiUrl("/api/state"), { cache: "no-store" }))
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error("Unauthorized");
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((snapshot) => {
|
|
applySnapshot(snapshot);
|
|
connectEvents();
|
|
})
|
|
.catch((err) => {
|
|
const msg = (err && err.message) || "unknown error";
|
|
if (msg === "Unauthorized") {
|
|
document.body.innerHTML = '<div class="unauthorized">Unauthorized — check password</div>';
|
|
} else {
|
|
document.body.innerHTML =
|
|
`<div class="unauthorized">Failed to connect: ${msg}.<br>` +
|
|
`Is the server running? Open <a href="/api/debug" style="color:#93c5fd">/api/debug</a> for diagnostics.</div>`;
|
|
}
|
|
});
|