109 lines
3.0 KiB
HTML
109 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>MapViewer – Spielleiter</title>
|
||
<link rel="stylesheet" href="style.css" />
|
||
|
||
<style>
|
||
body.paused {
|
||
outline: 8px solid rgba(0, 150, 255, 0.75);
|
||
outline-offset: -8px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<!-- Weltkarte Button unten links -->
|
||
<button id="mapToggleButton" title="Weltkarte anzeigen"
|
||
style="
|
||
position: fixed;
|
||
bottom: 15px;
|
||
left: 15px;
|
||
width: 100px;
|
||
height: 100px;
|
||
font-size: 60px;
|
||
background-color: #444;
|
||
color: green;
|
||
border: none;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
z-index: 9999;">
|
||
🗺
|
||
</button>
|
||
|
||
<body>
|
||
<div id="controls">
|
||
<label><input type="checkbox" id="toggleFog"></label>
|
||
<button id="fogMode">Modus: Radierer</button><br>
|
||
<button id="fogClear">Alles aufdecken</button>
|
||
<button id="fogFull">Alles vernebeln</button><br>
|
||
<label>Pinselgröße: <input type="range" id="brushSize" min="1" max="5" value="1" /></label>
|
||
|
||
|
||
<div style="background:#ccc; padding:10px; margin-top:10px;">
|
||
<label><input type="checkbox" id="toggleHexgrid" checked> Hexgrid anzeigen</label><br>
|
||
<label>Grid-Skalierung: <input type="range" id="gridScaleSlider" min="0.1" max="4.0" step="0.1" value="1"></label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Battlemap-Auswahl Buttons -->
|
||
<div id="battlemap-buttons" style="position: absolute; top: 175px; left: 10px; background: rgba(255,255,255,0.8); padding: 10px; border-radius: 10px; z-index: 9999;">
|
||
<strong>Battle Maps:</strong>
|
||
</div>
|
||
|
||
<canvas id="mapCanvas"></canvas>
|
||
|
||
<iframe id="worldmap-iframe"
|
||
src="https://map.arenos.danielnagel.at"
|
||
style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 130px); z-index: 8000; border: none;">
|
||
</iframe>
|
||
|
||
|
||
<script src="master.js">
|
||
|
||
</script>
|
||
|
||
<script>
|
||
let paused = false;
|
||
document.addEventListener("keydown", (e) => {
|
||
if (e.code === "Space") {
|
||
paused = !paused;
|
||
document.body.classList.toggle("paused", paused);
|
||
localStorage.setItem("pauseActive", paused);
|
||
}
|
||
});
|
||
|
||
// === Dynamische Standardmaps laden ===
|
||
fetch('/list-maps')
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
const controlDiv = document.getElementById('battlemap-buttons');
|
||
const container = document.createElement('div');
|
||
container.style.marginTop = '5px';
|
||
container.style.background = '#ccc';
|
||
container.style.padding = '5px';
|
||
|
||
data.forEach(file => {
|
||
const button = document.createElement('button');
|
||
button.textContent = file;
|
||
button.style.display = 'block';
|
||
button.style.marginBottom = '5px';
|
||
|
||
button.addEventListener('click', () => {
|
||
LoadImageMap(`standard_maps/${file}`);
|
||
});
|
||
|
||
container.appendChild(button);
|
||
});
|
||
|
||
controlDiv.appendChild(container);
|
||
})
|
||
.catch(err => console.error('Fehler beim Laden der Battlemap-Liste:', err));
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|