WIP: Web radar implementation in progress — currently broken
The web radar component is undergoing refactoring and is non-functional. Core memory reading and overlay systems remain operational.
This commit is contained in:
67
+216
-117
@@ -1,134 +1,233 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>DayZ Web Map</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<title>DayZ Web Radar</title>
|
||||
<link rel="stylesheet" href="style.css?v=7">
|
||||
</head>
|
||||
<body>
|
||||
<button class="settings-toggle" id="settingsToggle" type="button" aria-label="Open filters">☰</button>
|
||||
<div class="top-right-toggles">
|
||||
<button class="players-toggle" id="labelSettingsToggle" type="button" aria-label="Open label settings">Labels</button>
|
||||
<button class="players-toggle" id="playersToggle" type="button" aria-label="Open players">Players</button>
|
||||
<button class="loot-toggle" id="lootToggle" type="button" aria-label="Open loot">Loot</button>
|
||||
</div>
|
||||
<aside class="label-settings-panel" id="labelSettingsPanel">
|
||||
<div class="label-settings-header">
|
||||
<div>
|
||||
<strong>Label Settings</strong>
|
||||
<div class="label-settings-subtitle">Tune ordinary loot label placement without touching filters.</div>
|
||||
</div>
|
||||
<div class="label-settings-actions">
|
||||
<button class="collapse-button" id="labelSettingsReset" type="button">Reset</button>
|
||||
<button class="collapse-button" id="labelSettingsClose" type="button" aria-label="Close label settings">✕</button>
|
||||
</div>
|
||||
|
||||
<!-- ── Header bar ─────────────────────────────────────────────────── -->
|
||||
<header class="app-header" id="appHeader">
|
||||
<button class="header-btn" id="sidebarToggle" title="Toggle sidebar (Esc)">☰</button>
|
||||
<div class="header-server">
|
||||
<span class="conn-dot" id="connectionDot"></span>
|
||||
<span class="header-server-name" id="serverBadge">connecting…</span>
|
||||
</div>
|
||||
<div class="label-settings-body" id="labelSettingsBody">
|
||||
<label class="setting-card" for="ordinaryLootSpread">
|
||||
<span class="setting-title">Ordinary loot spread</span>
|
||||
<span class="setting-value" id="ordinaryLootSpreadValue">2.0x</span>
|
||||
<input type="range" id="ordinaryLootSpread" min="1" max="4" step="0.1" value="2">
|
||||
<span class="setting-help">Controls how far regular loot labels may move away from the point to avoid collisions.</span>
|
||||
</label>
|
||||
<label class="setting-card" for="groupedLootSpread">
|
||||
<span class="setting-title">Grouped loot spread</span>
|
||||
<span class="setting-value" id="groupedLootSpreadValue">2.0x</span>
|
||||
<input type="range" id="groupedLootSpread" min="1" max="4" step="0.1" value="2">
|
||||
<span class="setting-help">Controls how far merged same-name loot labels may sit from the cluster center.</span>
|
||||
</label>
|
||||
<label class="setting-card" for="sameLootMergeRadius">
|
||||
<span class="setting-title">Same-name merge radius</span>
|
||||
<span class="setting-value" id="sameLootMergeRadiusValue">110 px</span>
|
||||
<input type="range" id="sameLootMergeRadius" min="20" max="240" step="5" value="110">
|
||||
<span class="setting-help">Items with the same name inside this screen radius share one text label with multiple connector lines.</span>
|
||||
</label>
|
||||
<label class="setting-card" for="lineAnchorMode">
|
||||
<span class="setting-title">Line anchor on text</span>
|
||||
<select id="lineAnchorMode">
|
||||
<option value="auto-nearest">Auto nearest</option>
|
||||
<option value="top-left">Top left</option>
|
||||
<option value="bottom-center">Bottom center</option>
|
||||
<option value="top-center">Top center</option>
|
||||
<option value="top-right">Top right</option>
|
||||
<option value="middle-left">Middle left</option>
|
||||
<option value="middle-right">Middle right</option>
|
||||
<option value="bottom-left">Bottom left</option>
|
||||
<option value="bottom-right">Bottom right</option>
|
||||
</select>
|
||||
<span class="setting-help">Chooses from which corner or side midpoint of the text the connector line starts. Auto nearest selects the closest standard point on the text rectangle to the item point.</span>
|
||||
</label>
|
||||
<label class="setting-card toggle-setting">
|
||||
<span class="setting-title">Merge same-name loot labels</span>
|
||||
<input type="checkbox" id="mergeSameLootLabels" checked>
|
||||
<span class="setting-help">When enabled, nearby ordinary loot with the same name is shown as one label with several lines.</span>
|
||||
</label>
|
||||
<div class="header-counts">
|
||||
<button class="count-badge" id="badge-players" data-key="showPlayers" title="Toggle players (P)">P <span>–</span></button>
|
||||
<button class="count-badge" id="badge-zombies" data-key="showZombies" title="Toggle zombies (Z)">Z <span>–</span></button>
|
||||
<button class="count-badge" id="badge-animals" data-key="showAnimals" title="Toggle animals (A)">A <span>–</span></button>
|
||||
<button class="count-badge" id="badge-vehicles" data-key="showVehicles" title="Toggle vehicles (V)">V <span>–</span></button>
|
||||
<button class="count-badge" id="badge-bullets" data-key="showBullets" title="Toggle bullets (B)">B <span>–</span></button>
|
||||
<button class="count-badge" id="badge-loot" data-key="showLoot" title="Toggle loot (L)">L <span>–</span></button>
|
||||
</div>
|
||||
<button class="header-btn combat-btn" id="combatToggle" title="Combat mode (C)">⚔ Combat</button>
|
||||
<button class="header-btn mode3d-btn" id="toggle3d" title="3D map mode" disabled>3D</button>
|
||||
</header>
|
||||
|
||||
<!-- ── Sidebar ────────────────────────────────────────────────────── -->
|
||||
<aside class="sidebar" id="sidebar">
|
||||
|
||||
<!-- Tab icons column -->
|
||||
<nav class="sidebar-nav">
|
||||
<button class="tab-btn active" data-tab="tab-map" title="Map">🗺</button>
|
||||
<button class="tab-btn" data-tab="tab-entities" title="Entities">👤</button>
|
||||
<button class="tab-btn" data-tab="tab-loot" title="Loot">📦</button>
|
||||
<button class="tab-btn" data-tab="tab-settings" title="Settings">⚙</button>
|
||||
</nav>
|
||||
|
||||
<!-- Tab panels -->
|
||||
<div class="sidebar-content" id="sidebarContent">
|
||||
|
||||
<!-- Tab: Map -------------------------------------------------- -->
|
||||
<section class="tab-panel active" id="tab-map">
|
||||
<div class="tab-status-row">
|
||||
<span id="status" class="status-text">Connecting…</span>
|
||||
</div>
|
||||
<div id="serverInfo" class="server-info-text"></div>
|
||||
|
||||
<div class="tab-section">
|
||||
<label class="toggle-row"><input type="checkbox" id="followPlayer"><span>Follow player <kbd>F</kbd></span></label>
|
||||
<label class="toggle-row"><input type="checkbox" id="showLabels" checked><span>Labels</span></label>
|
||||
<label class="toggle-row"><input type="checkbox" id="showPOIs" checked><span>Locations</span></label>
|
||||
<label class="toggle-row"><input type="checkbox" id="showGrid"><span>Grid <kbd>G</kbd></span></label>
|
||||
<label class="toggle-row"><input type="checkbox" id="showSatellite"><span>Satellite</span></label>
|
||||
<label class="toggle-row"><input type="checkbox" id="showSatmap"><span>Sat map</span></label>
|
||||
<label class="toggle-row"><input type="checkbox" id="showDistanceRings"><span>Distance rings</span></label>
|
||||
<label class="toggle-row"><input type="checkbox" id="showMinimap"><span>Minimap</span></label>
|
||||
</div>
|
||||
|
||||
<div class="tab-section">
|
||||
<div class="section-label">Distance filter</div>
|
||||
<div class="range-with-value">
|
||||
<input type="range" id="distanceFilter" min="0" max="5000" step="50" value="2000">
|
||||
<span id="distanceValue" class="range-val">2000 m</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tab: Entities --------------------------------------------- -->
|
||||
<section class="tab-panel" id="tab-entities">
|
||||
<div class="preset-bar">
|
||||
<button class="preset-btn" data-preset="0" title="Load combat preset (1) — Shift+click to overwrite">Combat</button>
|
||||
<button class="preset-btn" data-preset="1" title="Load loot run preset (2) — Shift+click to overwrite">Loot</button>
|
||||
<button class="preset-btn" data-preset="2" title="Load full preset (3) — Shift+click to overwrite">Full</button>
|
||||
<button class="preset-btn" data-preset="3" title="Load custom preset (4) — Shift+click to overwrite">Custom</button>
|
||||
</div>
|
||||
<div class="quick-bar">
|
||||
<button class="quick-btn" id="showAllEntities">All</button>
|
||||
<button class="quick-btn" id="hideAllEntities">None</button>
|
||||
</div>
|
||||
<div id="entityFilterList" class="filter-list"></div>
|
||||
|
||||
<div class="tab-section">
|
||||
<div class="section-label">Players on server</div>
|
||||
<div class="players-list" id="playersList"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tab: Loot ------------------------------------------------- -->
|
||||
<section class="tab-panel" id="tab-loot">
|
||||
<div class="loot-search-bar">
|
||||
<input type="search" id="lootSearch" placeholder="Search loot…" autocomplete="off" spellcheck="false">
|
||||
</div>
|
||||
<div class="tab-section">
|
||||
<label class="toggle-row"><input type="checkbox" id="showLoot" checked><span>Show all loot</span></label>
|
||||
</div>
|
||||
<div id="lootFilterList" class="filter-list loot-filter-list"></div>
|
||||
<div class="tab-section">
|
||||
<div id="lootInfo" class="loot-info-text"></div>
|
||||
<div class="loot-list" id="lootList"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tab: Settings --------------------------------------------- -->
|
||||
<section class="tab-panel" id="tab-settings">
|
||||
<div class="tab-section">
|
||||
<div class="section-label">Label placement</div>
|
||||
|
||||
<label class="setting-row">
|
||||
<span class="setting-name">Ordinary loot spread</span>
|
||||
<span id="ordinaryLootSpreadValue" class="setting-val">2.0x</span>
|
||||
<input type="range" id="ordinaryLootSpread" min="1" max="4" step="0.1" value="2">
|
||||
</label>
|
||||
<label class="setting-row">
|
||||
<span class="setting-name">Grouped loot spread</span>
|
||||
<span id="groupedLootSpreadValue" class="setting-val">2.0x</span>
|
||||
<input type="range" id="groupedLootSpread" min="1" max="4" step="0.1" value="2">
|
||||
</label>
|
||||
<label class="setting-row">
|
||||
<span class="setting-name">Same-name merge radius</span>
|
||||
<span id="sameLootMergeRadiusValue" class="setting-val">110 px</span>
|
||||
<input type="range" id="sameLootMergeRadius" min="20" max="240" step="5" value="110">
|
||||
</label>
|
||||
<label class="setting-row">
|
||||
<span class="setting-name">Line anchor</span>
|
||||
<select id="lineAnchorMode">
|
||||
<option value="auto-nearest">Auto nearest</option>
|
||||
<option value="top-left">Top left</option>
|
||||
<option value="bottom-center">Bottom center</option>
|
||||
<option value="top-center">Top center</option>
|
||||
<option value="top-right">Top right</option>
|
||||
<option value="middle-left">Middle left</option>
|
||||
<option value="middle-right">Middle right</option>
|
||||
<option value="bottom-left">Bottom left</option>
|
||||
<option value="bottom-right">Bottom right</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="setting-row toggle-row">
|
||||
<span class="setting-name">Merge same-name loot</span>
|
||||
<input type="checkbox" id="mergeSameLootLabels" checked>
|
||||
</label>
|
||||
<button class="btn-sm" id="labelSettingsReset">Reset defaults</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-section">
|
||||
<div class="section-label">Default text size</div>
|
||||
<div class="range-with-value">
|
||||
<input type="range" id="textSize" min="10" max="24" step="1" value="14">
|
||||
<span id="textSizeValue" class="range-val">14 px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-section">
|
||||
<div class="section-label">Theme</div>
|
||||
<div class="theme-bar">
|
||||
<button class="theme-btn active" data-theme="dark">Dark</button>
|
||||
<button class="theme-btn" data-theme="darker">Darker</button>
|
||||
<button class="theme-btn" data-theme="solarized">Solarized</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-section shortcuts-section">
|
||||
<div class="section-label">Keyboard shortcuts</div>
|
||||
<div class="shortcut-grid">
|
||||
<kbd>P</kbd><span>Players</span>
|
||||
<kbd>Z</kbd><span>Zombies</span>
|
||||
<kbd>A</kbd><span>Animals</span>
|
||||
<kbd>V</kbd><span>Vehicles</span>
|
||||
<kbd>L</kbd><span>Loot</span>
|
||||
<kbd>B</kbd><span>Bullets</span>
|
||||
<kbd>C</kbd><span>Combat mode</span>
|
||||
<kbd>F</kbd><span>Follow player</span>
|
||||
<kbd>G</kbd><span>Grid overlay</span>
|
||||
<kbd>M</kbd><span>Measure tool</span>
|
||||
<kbd>Space</kbd><span>Re-center</span>
|
||||
<kbd>Esc</kbd><span>Close / cancel</span>
|
||||
<kbd>1–4</kbd><span>Load preset</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div><!-- /sidebar-content -->
|
||||
</aside>
|
||||
<aside class="players-panel" id="playersPanel">
|
||||
<div class="players-panel-header">
|
||||
<strong>Players</strong>
|
||||
<button class="collapse-button" id="playersClose" type="button" aria-label="Close players">✕</button>
|
||||
|
||||
<!-- ── Map viewport ───────────────────────────────────────────────── -->
|
||||
<main class="viewport" id="viewport">
|
||||
<!-- 3D canvas — hidden until 3D mode is activated -->
|
||||
<canvas id="canvas3d"></canvas>
|
||||
|
||||
<div class="canvas" id="canvas">
|
||||
<div id="tiles"></div>
|
||||
<div id="sat-tiles"></div>
|
||||
<div id="topo-tiles"></div>
|
||||
<svg id="paths"></svg>
|
||||
<div id="itemLabels"></div>
|
||||
<div id="markers"></div>
|
||||
</div>
|
||||
<div class="players-server" id="serverInfo">Server: loading...</div>
|
||||
<div class="players-list" id="playersList"></div>
|
||||
</aside>
|
||||
<aside class="loot-panel" id="lootPanel">
|
||||
<div class="players-panel-header">
|
||||
<strong>Ground Loot</strong>
|
||||
<button class="collapse-button" id="lootClose" type="button" aria-label="Close loot">✕</button>
|
||||
|
||||
<!-- Minimap (bottom-right corner of viewport) -->
|
||||
<div class="minimap" id="minimapEl" style="display:none">
|
||||
<img class="minimap-img" id="minimapImg" alt="">
|
||||
<canvas class="minimap-canvas" id="minimapCanvas"></canvas>
|
||||
</div>
|
||||
<div class="players-server" id="lootInfo">Loot: loading...</div>
|
||||
<div class="loot-list" id="lootList"></div>
|
||||
</aside>
|
||||
<div class="shell">
|
||||
<aside class="panel" id="settingsPanel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h1>DayZ Web Map</h1>
|
||||
<div id="status">Connecting...</div>
|
||||
<div id="serverBadge" class="server-badge">Server: loading...</div>
|
||||
</div>
|
||||
<button class="collapse-button" id="collapseButton" type="button" aria-label="Hide filters">✕</button>
|
||||
</div>
|
||||
<div class="panel-body" id="settingsPanelBody">
|
||||
<div class="group">
|
||||
<div class="group-title">Controls</div>
|
||||
<label class="toggle-row"><input type="checkbox" id="followPlayer"><span>Follow player</span></label>
|
||||
<label class="toggle-row"><input type="checkbox" id="showLabels" checked><span>Global labels</span></label>
|
||||
<label class="toggle-row"><input type="checkbox" id="showLoot" checked><span>All loot</span></label>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="group-title">Entity Filters</div>
|
||||
<div id="entityFilterList" class="filter-list"></div>
|
||||
</div>
|
||||
<!-- Right-click context menu -->
|
||||
<div class="ctx-menu" id="ctxMenu">
|
||||
<button class="ctx-item" id="ctxAddWaypoint">Add waypoint</button>
|
||||
<button class="ctx-item" id="ctxCopyCoords">Copy coordinates</button>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div class="group-title">Loot Filters</div>
|
||||
<div id="lootFilterList" class="filter-list"></div>
|
||||
</div>
|
||||
<!-- Screen-space measurement overlay -->
|
||||
<canvas class="measure-layer" id="measureLayer"></canvas>
|
||||
</main>
|
||||
|
||||
<div class="group">
|
||||
<div class="group-title">Display</div>
|
||||
<label class="range-row" for="distanceFilter"><span>Distance filter</span><input type="range" id="distanceFilter" min="0" max="5000" step="50" value="2000"></label>
|
||||
<div id="distanceValue">2000 m</div>
|
||||
<label class="range-row" for="textSize"><span>Default text size</span><input type="range" id="textSize" min="10" max="24" step="1" value="14"></label>
|
||||
<div id="textSizeValue">14 px</div>
|
||||
</div>
|
||||
<!-- ── Coord bar ──────────────────────────────────────────────────── -->
|
||||
<footer class="coord-bar" id="coordBar">
|
||||
<span id="coordDisplay">–</span>
|
||||
<span class="coord-sep">|</span>
|
||||
<span id="gridDisplay">–</span>
|
||||
<span class="coord-sep">|</span>
|
||||
<span id="zoomDisplay">–</span>
|
||||
<span class="coord-bar-spacer"></span>
|
||||
<button class="measure-toggle-btn" id="measureToggle" title="Measure distance (M)">⟺ Measure</button>
|
||||
</footer>
|
||||
|
||||
<div class="hint">Drag to move. Use wheel or pinch to zoom. Open a filter card to tune color, marker size, text size and labels.</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="viewport" id="viewport">
|
||||
<div class="canvas" id="canvas">
|
||||
<div id="tiles"></div>
|
||||
<svg id="paths"></svg>
|
||||
<div id="itemLabels"></div>
|
||||
<div id="markers"></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="/app.js"></script>
|
||||
<!-- ── Toast notifications ────────────────────────────────────────── -->
|
||||
<div class="toast-stack" id="toastStack"></div>
|
||||
|
||||
<script src="app.js?v=7"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user