/**
* CHAMPIONS OF LUNERARIA - Tactical Radar 3-Lane Visualizer (Studio Grade)
* Holographic military MOBA radar with dynamic SVG pulse waves,
* contour elevation guides, and live tactical landmark inspector.
*/
const TACTICAL_REGIONS = {
mid: {
id: 'mid',
title: 'Mid-Lane (Zentralplattform)',
type: 'Direkte Offensive',
length: '61,16 Meter',
elevation: 'Plateau (Höhe 0 m)',
threat: 'Höchste Konfrontationsdichte',
preview: 'assets/img/hero-overview.png',
desc: 'Die kürzeste und blutigste Route. Führt geradlinig über die uralte Runensteinplattform direkt über die Symmetriekluft. Der Verlust der beiden Mid-Türme legt sofort die Flanken zur eigenen Basis frei.'
},
top: {
id: 'top',
title: 'Top-Lane (Hochlandkamm)',
type: 'Flankenkorridor',
length: '96,82 Meter',
elevation: 'Hochland (+8 m bis +14 m)',
threat: 'Flankenüberfälle & Grotte',
preview: 'assets/img/tuerme.png',
desc: 'Zieht im Nordwesten durch zerklüftetes Felsmassiv. Wegen des Höhenprofils und der direkten Anbindung an den Zugang zur Bossgrotte Mondschlund der ideale Pfad für Assassinen wie Sylvara.'
},
bot: {
id: 'bot',
title: 'Bottom-Lane (Deltabrücke)',
type: 'Weitfeld-Belagerung',
length: '96,82 Meter',
elevation: 'Tiefland / Flussdelta (-4 m)',
threat: 'Belagerungs- & Fernkampfzone',
preview: 'assets/img/aufmarsch.jpg',
desc: 'Führt durch die weite Flussniederung und über die massive Deltabrücke. Weitläufige Sichtachsen begünstigen Belagerungsmaschinen wie die Glasballiste und dichte Schützenformationen.'
},
grotto: {
id: 'grotto',
title: 'Bossgrotte „Mondschlund“',
type: 'Neutrales Primärziel',
length: 'Zentrales Terrassengebiet',
elevation: 'Grottensenke (+4 m)',
threat: 'Superboss Schlundkrone (6.800 HP)',
preview: 'assets/img/bosskampf.jpg',
desc: 'Auf der zentralen Symmetrieachse gelegen. Die Bezwingung der Schlundkrone schaltet eine mächtige Boss-Entsendung frei, die auf einer Wunsch-Lane als Belagerungskoloss gegen den feindlichen Ancient vorrückt.'
},
blue_ancient: {
id: 'blue_ancient',
title: 'Mondherz-Ancient (Team Blau)',
type: 'Festungskern West',
length: 'Hauptquartier',
elevation: 'Basisplateau (+6 m)',
threat: '10.000 HP · 16 Verteidiger',
preview: 'assets/img/ancient.png',
desc: 'Der pulsierende Saumkern des blauen Bündnisses, geschützt durch 2 Basistürme und drei Torriegel. Fällt dieser Kristall im Kampf, endet die Schlacht augenblicklich mit der Niederlage von Team Blau.'
},
red_ancient: {
id: 'red_ancient',
title: 'Mondherz-Ancient (Team Rot)',
type: 'Festungskern Ost',
length: 'Hauptquartier',
elevation: 'Basisplateau (+6 m)',
threat: '10.000 HP · 16 Verteidiger',
preview: 'assets/img/ancient-fall.jpg',
desc: 'Das exakt spiegelgleiche Gegenstück im Osten. Identische Verteidigungsradien, Schussfrequenzen der Türme und Aufmarschlinien garantieren 100 % faire Wettkampfbedingungen ohne Seitenvorteil.'
}
};
function renderStudioRadar(containerId) {
const container = document.getElementById(containerId);
if (!container) return;
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 880 540');
svg.setAttribute('class', 'radar-hud-svg');
svg.setAttribute('aria-label', 'Taktische Radaransicht des 3-Lane Schlachtfelds');
svg.innerHTML = `
MID-PLATEAU
MONDSCHLUND
BLAUER ANCIENT
ROTER ANCIENT
`;
container.appendChild(svg);
// Inspector logic
const titleEl = document.getElementById('dossierTitle');
const badgeEl = document.getElementById('dossierBadge');
const lengthEl = document.getElementById('dossierLength');
const elevationEl = document.getElementById('dossierElevation');
const descEl = document.getElementById('dossierDesc');
const previewEl = document.getElementById('dossierPreviewImg');
function updateDossier(key) {
const data = TACTICAL_REGIONS[key];
if (!data) return;
if (titleEl) titleEl.textContent = data.title;
if (badgeEl) badgeEl.textContent = data.type;
if (lengthEl) lengthEl.textContent = data.length;
if (elevationEl) elevationEl.textContent = data.elevation;
if (descEl) descEl.textContent = data.desc;
if (previewEl && data.preview) previewEl.src = data.preview;
document.querySelectorAll('.radar-zone-btn').forEach(btn => {
btn.classList.toggle('is-active', btn.dataset.target === key);
});
}
svg.querySelectorAll('.radar-interactive-target').forEach(node => {
node.addEventListener('click', () => {
updateDossier(node.dataset.target);
});
});
document.querySelectorAll('.radar-zone-btn').forEach(btn => {
btn.addEventListener('click', () => {
updateDossier(btn.dataset.target);
});
});
}
document.addEventListener('DOMContentLoaded', () => {
renderStudioRadar('radarScreenContainer');
});