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>
|
|||
|
|
|
|||
|
|
|