Init
Initialer Load vom alten Projekt.
This commit is contained in:
commit
c0beeeff92
BIN
hexgrid.png
Normal file
BIN
hexgrid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
108
index.html
Normal file
108
index.html
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<!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>
|
||||
|
||||
|
||||
287
master.js
Normal file
287
master.js
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
const canvas = document.getElementById("mapCanvas");
|
||||
const fogCanvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const fogCtx = fogCanvas.getContext("2d");
|
||||
const iframe = document.getElementById("worldmap-iframe");
|
||||
|
||||
let image = null;
|
||||
let offsetX = 0, offsetY = 0;
|
||||
let scale = 1;
|
||||
let isDragging = false;
|
||||
let startX, startY;
|
||||
let fogEnabled = false;
|
||||
let fogMode = "erase";
|
||||
let brushSize = 50;
|
||||
let mouseX = 0, mouseY = 0;
|
||||
|
||||
const channel = new BroadcastChannel("mapsync");
|
||||
let MapX = 0;
|
||||
let MapY = 0;
|
||||
let MapZoom = 2;
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
draw();
|
||||
if (fogEnabled) drawBrushPreview(mouseX, mouseY);
|
||||
}
|
||||
window.addEventListener("resize", resizeCanvas);
|
||||
resizeCanvas();
|
||||
|
||||
// === Fog Controls ===
|
||||
document.getElementById("toggleFog").addEventListener("change", (e) => {
|
||||
fogEnabled = e.target.checked;
|
||||
channel.postMessage({ type: "fogEnabled", enabled: fogEnabled });
|
||||
draw();
|
||||
if (fogEnabled) drawBrushPreview(mouseX, mouseY);
|
||||
});
|
||||
|
||||
document.getElementById("fogMode").addEventListener("click", () => {
|
||||
fogMode = fogMode === "erase" ? "paint" : "erase";
|
||||
document.getElementById("fogMode").innerText = fogMode === "erase" ? "Modus: Radierer" : "Modus: Nebel";
|
||||
});
|
||||
|
||||
document.getElementById("fogClear").addEventListener("click", () => {
|
||||
const btn = document.getElementById("fogClear");
|
||||
btn.disabled = true;
|
||||
setTimeout(() => btn.disabled = false, 1000);
|
||||
fogCtx.clearRect(0, 0, fogCanvas.width, fogCanvas.height);
|
||||
syncFog(); draw();
|
||||
if (fogEnabled) drawBrushPreview(mouseX, mouseY);
|
||||
});
|
||||
|
||||
document.getElementById("fogFull").addEventListener("click", () => {
|
||||
const btn = document.getElementById("fogFull");
|
||||
btn.disabled = true;
|
||||
setTimeout(() => btn.disabled = false, 1000);
|
||||
fogCtx.fillStyle = "rgba(50, 50, 50, 1)";
|
||||
fogCtx.fillRect(0, 0, fogCanvas.width, fogCanvas.height);
|
||||
syncFog(); draw();
|
||||
if (fogEnabled) drawBrushPreview(mouseX, mouseY);
|
||||
});
|
||||
|
||||
document.getElementById("brushSize").addEventListener("input", (e) => {
|
||||
brushSize = 50 * parseInt(e.target.value);
|
||||
});
|
||||
|
||||
// === Mouse Interaktion ===
|
||||
canvas.addEventListener("dragover", e => e.preventDefault());
|
||||
canvas.addEventListener("drop", e => {
|
||||
e.preventDefault();
|
||||
const file = e.dataTransfer.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.onload = evt => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
image = img;
|
||||
//Fog auf Größe des Geladenen Bildes anpassen.
|
||||
fogCanvas.width = img.width;
|
||||
fogCanvas.height = img.height;
|
||||
fogCtx.clearRect(0, 0, fogCanvas.width, fogCanvas.height);
|
||||
draw();
|
||||
if (fogEnabled) drawBrushPreview(mouseX, mouseY);
|
||||
channel.postMessage({ type: "mapData", data: evt.target.result });
|
||||
channel.postMessage({ type: "fogEnabled", enabled: fogEnabled });
|
||||
syncFog();
|
||||
};
|
||||
img.src = evt.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
function LoadImageMap(i) {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
image = img;
|
||||
fogCanvas.width = img.width;
|
||||
fogCanvas.height = img.height;
|
||||
fogCtx.clearRect(0, 0, fogCanvas.width, fogCanvas.height);
|
||||
draw();
|
||||
if (fogEnabled) drawBrushPreview(mouseX, mouseY);
|
||||
channel.postMessage({ type: "mapData", data: i });
|
||||
channel.postMessage({ type: "fogEnabled", enabled: fogEnabled });
|
||||
syncFog();
|
||||
};
|
||||
img.src = i;
|
||||
}
|
||||
|
||||
window.LoadImageMap = LoadImageMap;
|
||||
|
||||
canvas.addEventListener("mousedown", e => {
|
||||
if (e.button === 1) {
|
||||
isDragging = true;
|
||||
startX = e.clientX - offsetX;
|
||||
startY = e.clientY - offsetY;
|
||||
}
|
||||
});
|
||||
canvas.addEventListener("mouseup", () => { isDragging = false; });
|
||||
canvas.addEventListener("mouseout", () => { isDragging = false; });
|
||||
canvas.addEventListener("mousemove", e => {
|
||||
mouseX = e.clientX;
|
||||
mouseY = e.clientY;
|
||||
if (fogEnabled) draw();
|
||||
if (isDragging) {
|
||||
offsetX = e.clientX - startX;
|
||||
offsetY = e.clientY - startY;
|
||||
syncView();
|
||||
draw();
|
||||
if (fogEnabled) drawBrushPreview(mouseX, mouseY);
|
||||
} else if (fogEnabled && e.buttons === 1) {
|
||||
const x = (mouseX - offsetX) / scale;
|
||||
const y = (mouseY - offsetY) / scale;
|
||||
fogCtx.globalCompositeOperation = fogMode === "erase" ? "destination-out" : "source-over";
|
||||
fogCtx.fillStyle = "rgba(50, 50, 50, 0.9)";
|
||||
fogCtx.beginPath();
|
||||
fogCtx.arc(x, y, brushSize, 0, 2 * Math.PI);
|
||||
fogCtx.fill();
|
||||
syncFog(); draw();
|
||||
drawBrushPreview(mouseX, mouseY);
|
||||
}
|
||||
});
|
||||
|
||||
canvas.addEventListener("wheel", e => {
|
||||
e.preventDefault();
|
||||
const worldX = (e.clientX - offsetX) / scale;
|
||||
const worldY = (e.clientY - offsetY) / scale;
|
||||
const zoomFactor = e.deltaY < 0 ? 1.1 : 0.9;
|
||||
scale *= zoomFactor;
|
||||
offsetX = e.clientX - worldX * scale;
|
||||
offsetY = e.clientY - worldY * scale;
|
||||
syncView(); draw();
|
||||
if (fogEnabled) drawBrushPreview(mouseX, mouseY);
|
||||
});
|
||||
|
||||
function syncView() {
|
||||
channel.postMessage({ type: "viewData", offsetX, offsetY, scale });
|
||||
}
|
||||
|
||||
function syncFog() {
|
||||
const fogURL = fogCanvas.toDataURL("image/png");
|
||||
channel.postMessage({ type: "fogData", data: fogURL });
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.setTransform(scale, 0, 0, scale, offsetX, offsetY);
|
||||
ctx.clearRect(-offsetX / scale, -offsetY / scale, canvas.width / scale, canvas.height / scale);
|
||||
if (image) ctx.drawImage(image, 0, 0);
|
||||
if (fogEnabled && fogCanvas.width && fogCanvas.height) {
|
||||
ctx.globalAlpha = 0.4;
|
||||
ctx.drawImage(fogCanvas, 0, 0);
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
if (fogEnabled) drawBrushPreview(mouseX, mouseY);
|
||||
}
|
||||
|
||||
function drawBrushPreview(mouseX, mouseY) {
|
||||
const worldX = (mouseX - offsetX) / scale;
|
||||
const worldY = (mouseY - offsetY) / scale;
|
||||
ctx.save();
|
||||
ctx.setTransform(scale, 0, 0, scale, offsetX, offsetY);
|
||||
ctx.strokeStyle = "rgba(255,255,255,0.8)";
|
||||
ctx.lineWidth = 2 / scale;
|
||||
ctx.beginPath();
|
||||
ctx.arc(worldX, worldY, brushSize, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", (e) => {
|
||||
if (e.key.toLowerCase() === "f") {
|
||||
fogEnabled = !fogEnabled;
|
||||
document.getElementById("toggleFog").checked = fogEnabled;
|
||||
channel.postMessage({ type: "fogEnabled", enabled: fogEnabled });
|
||||
draw();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("toggleHexgrid").addEventListener("change", (e) => {
|
||||
channel.postMessage({ type: "hexgrid", enabled: e.target.checked });
|
||||
});
|
||||
|
||||
document.getElementById("gridScaleSlider").addEventListener("input", (e) => {
|
||||
const scale = parseFloat(e.target.value);
|
||||
channel.postMessage({ type: "hexgridScale", scale });
|
||||
});
|
||||
|
||||
|
||||
|
||||
// === Weltkarte Funktionen ===
|
||||
let worldMapMode = false;
|
||||
let previousImageSrc = null;
|
||||
|
||||
// === Leaflet View Update Intervall ===
|
||||
setInterval(() => {
|
||||
const iframe = document.getElementById("worldmap-iframe");
|
||||
if (iframe?.contentWindow && worldMapMode) {
|
||||
iframe.contentWindow.postMessage("getView", "*");
|
||||
}
|
||||
}, 500);
|
||||
|
||||
window.addEventListener("message", (event) => {
|
||||
const data = event.data;
|
||||
if (data?.type === "viewData") {
|
||||
MapX = data.center.lng;
|
||||
MapY = data.center.lat;
|
||||
MapZoom = data.zoom;
|
||||
channel.postMessage({ type: "MapCoord", MapX, MapY, MapZoom}); //Dem Slave die Karten Werte schicken.
|
||||
}
|
||||
});
|
||||
|
||||
const mapButton = document.getElementById("mapToggleButton");
|
||||
if (mapButton) {
|
||||
mapButton.addEventListener("click", () => {
|
||||
if (!worldMapMode) {
|
||||
previousImageSrc = image?.src || "pause.png";
|
||||
loadMap();
|
||||
channel.postMessage({ type: "mapMode", enabled: true });
|
||||
mapButton.textContent = "↩️";
|
||||
worldMapMode = true;
|
||||
syncWorldMapView();
|
||||
} else {
|
||||
restoreImage(previousImageSrc);
|
||||
channel.postMessage({ type: "mapMode", enabled: false });
|
||||
mapButton.textContent = "🗺";
|
||||
worldMapMode = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//Laden der iframe WorldMap
|
||||
function loadMap() {
|
||||
const iframe = document.getElementById("worldmap-iframe");
|
||||
if (!iframe) return;
|
||||
iframe.style.display = "block";
|
||||
if (iframe.contentWindow) {
|
||||
iframe.contentWindow.postMessage({ action: "syncRequest" }, "*");
|
||||
} else {
|
||||
iframe.onload = () => {
|
||||
iframe.contentWindow.postMessage({ action: "syncRequest" }, "*");
|
||||
};
|
||||
}
|
||||
}
|
||||
//Nach dem schließen der iframe WorldMap, wieder die letzte Map herstellen.
|
||||
function restoreImage(src) {
|
||||
const iframe = document.getElementById("worldmap-iframe");
|
||||
const canvas = document.getElementById("mapCanvas");
|
||||
|
||||
if (iframe) iframe.style.display = "none";
|
||||
if (canvas) canvas.style.display = "block";
|
||||
if (!src) return;
|
||||
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
image = img;
|
||||
fogCanvas.width = img.width;
|
||||
fogCanvas.height = img.height;
|
||||
fogCtx.clearRect(0, 0, fogCanvas.width, fogCanvas.height);
|
||||
draw();
|
||||
};
|
||||
img.src = src;
|
||||
}
|
||||
|
||||
function syncWorldMapView() {
|
||||
const iframe = document.getElementById("worldmap-iframe");
|
||||
if (worldMapMode && iframe?.contentWindow) {
|
||||
iframe.contentWindow.postMessage("getView", "*");
|
||||
}
|
||||
}
|
||||
26
server_launcher.py
Normal file
26
server_launcher.py
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import http.server
|
||||
import socketserver
|
||||
import os
|
||||
import json
|
||||
|
||||
PORT = 8000
|
||||
os.chdir(os.path.dirname(__file__))
|
||||
|
||||
class CustomHandler(http.server.SimpleHTTPRequestHandler):
|
||||
def do_GET(self):
|
||||
if self.path == '/list-maps':
|
||||
try:
|
||||
files = os.listdir('standard_maps')
|
||||
image_files = [f for f in files if f.lower().endswith(('.png', '.jpg', '.jpeg'))]
|
||||
self.send_response(200)
|
||||
self.send_header('Content-Type', 'application/json')
|
||||
self.end_headers()
|
||||
self.wfile.write(json.dumps(image_files).encode('utf-8'))
|
||||
except Exception as e:
|
||||
self.send_error(500, f"Fehler: {str(e)}")
|
||||
else:
|
||||
super().do_GET()
|
||||
|
||||
with socketserver.TCPServer(("", PORT), CustomHandler) as httpd:
|
||||
print(f"Starte Server auf Port {PORT}...")
|
||||
httpd.serve_forever()
|
||||
126
slave.js
Normal file
126
slave.js
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
// slave.js – synchronisiert Ansicht mit master.js (mit direkter URL-Übergabe an Leaflet)
|
||||
|
||||
const canvas = document.getElementById("mapCanvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
let image = null;
|
||||
let fogImage = null;
|
||||
let hexGrid = new Image();
|
||||
hexGrid.src = "hexgrid.png";
|
||||
|
||||
let offsetX = 0, offsetY = 0;
|
||||
let scale = 1;
|
||||
let fogEnabled = false;
|
||||
let hexgridEnabled = false;
|
||||
let hexgridScale = 1;
|
||||
|
||||
let MapX = 0;
|
||||
let MapY = 0;
|
||||
let MapZoom = 2;
|
||||
|
||||
const channel = new BroadcastChannel("mapsync");
|
||||
|
||||
channel.onmessage = (event) => {
|
||||
const msg = event.data;
|
||||
|
||||
if (msg.type === "mapData") {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
image = img;
|
||||
draw();
|
||||
};
|
||||
img.src = msg.data;
|
||||
|
||||
} else if (msg.type === "hexgrid") {
|
||||
hexgridEnabled = msg.enabled;
|
||||
draw();
|
||||
|
||||
} else if (msg.type === "hexgridScale") {
|
||||
hexgridScale = msg.scale;
|
||||
draw();
|
||||
|
||||
} else if (msg.type === "viewData") {
|
||||
offsetX = msg.offsetX;
|
||||
offsetY = msg.offsetY;
|
||||
scale = msg.scale;
|
||||
draw();
|
||||
|
||||
} else if (msg.type === "fogData") {
|
||||
const fog = new Image();
|
||||
fog.onload = () => {
|
||||
fogImage = fog;
|
||||
draw();
|
||||
};
|
||||
fog.src = msg.data;
|
||||
|
||||
} else if (msg.type === "fogEnabled") {
|
||||
fogEnabled = msg.enabled;
|
||||
draw();
|
||||
|
||||
} else if (msg.type === "mapMode") {
|
||||
const iframe = document.getElementById("worldmap-iframe");
|
||||
const canvas = document.getElementById("mapCanvas");
|
||||
|
||||
if (msg.enabled) {
|
||||
iframe.style.display = "block";
|
||||
canvas.style.display = "none";
|
||||
} else {
|
||||
iframe.style.display = "none";
|
||||
canvas.style.display = "block";
|
||||
}
|
||||
|
||||
} else if (msg.type === "MapCoord") {
|
||||
MapX = msg.MapX;
|
||||
MapY = msg.MapY;
|
||||
MapZoom = msg.MapZoom;
|
||||
|
||||
const iframe = document.getElementById("worldmap-iframe");
|
||||
if (iframe && iframe.contentWindow) {
|
||||
iframe.contentWindow.postMessage({
|
||||
type: "setView",
|
||||
center: [MapY, MapX],
|
||||
zoom: MapZoom
|
||||
}, "*");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
draw();
|
||||
}
|
||||
window.addEventListener("resize", resizeCanvas);
|
||||
resizeCanvas();
|
||||
|
||||
function draw() {
|
||||
if (!image) return;
|
||||
ctx.setTransform(scale, 0, 0, scale, offsetX, offsetY);
|
||||
ctx.clearRect(-offsetX / scale, -offsetY / scale, canvas.width / scale, canvas.height / scale);
|
||||
ctx.drawImage(image, 0, 0);
|
||||
|
||||
if (hexgridEnabled && hexGrid.complete) {
|
||||
ctx.save();
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
ctx.globalAlpha = 0.5;
|
||||
|
||||
const scaleMod = 0.2;
|
||||
const gridWidth = hexGrid.width * (hexgridScale * scaleMod);
|
||||
const gridHeight = hexGrid.height * (hexgridScale * scaleMod);
|
||||
|
||||
const dx = (canvas.width - gridWidth) / 2;
|
||||
const dy = (canvas.height - gridHeight) / 2;
|
||||
|
||||
ctx.drawImage(hexGrid, dx, dy, gridWidth, gridHeight);
|
||||
ctx.restore();
|
||||
|
||||
ctx.setTransform(scale, 0, 0, scale, offsetX, offsetY);
|
||||
}
|
||||
|
||||
if (fogEnabled && fogImage) {
|
||||
ctx.globalAlpha = 1.0;
|
||||
ctx.drawImage(fogImage, 0, 0);
|
||||
ctx.globalAlpha = 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
44
spieler.html
Normal file
44
spieler.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>MapViewer - Spieler</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
|
||||
<style>
|
||||
#pauseScreen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #000;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
}
|
||||
#pauseScreen img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body><div id="pauseScreen"><img src="pause.png" alt="Pause"></div>
|
||||
<canvas id="mapCanvas"></canvas>
|
||||
<script src="slave.js"></script>
|
||||
|
||||
<iframe id="worldmap-iframe"
|
||||
src="https://map.arenos.danielnagel.at"
|
||||
style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9000; border: none;">
|
||||
</iframe>
|
||||
|
||||
|
||||
<script>
|
||||
const pauseScreen = document.getElementById("pauseScreen");
|
||||
function checkPauseState() {
|
||||
const paused = localStorage.getItem("pauseActive") === "true";
|
||||
pauseScreen.style.display = paused ? "block" : "none";
|
||||
requestAnimationFrame(checkPauseState);
|
||||
}
|
||||
requestAnimationFrame(checkPauseState);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
standard_maps/cave.png
Normal file
BIN
standard_maps/cave.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
standard_maps/city streets.png
Normal file
BIN
standard_maps/city streets.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
standard_maps/farm field.jpg
Normal file
BIN
standard_maps/farm field.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 MiB |
BIN
standard_maps/harbor.png
Normal file
BIN
standard_maps/harbor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
standard_maps/mansion garden.jpg
Normal file
BIN
standard_maps/mansion garden.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
standard_maps/roadside camp.jpg
Normal file
BIN
standard_maps/roadside camp.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 MiB |
BIN
standard_maps/street.png
Normal file
BIN
standard_maps/street.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
BIN
standard_maps/tavern.jpg
Normal file
BIN
standard_maps/tavern.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 MiB |
5
starte_viewer.bat
Normal file
5
starte_viewer.bat
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@echo off
|
||||
start /min python server_launcher.py
|
||||
timeout /t 2 >nul
|
||||
start http://localhost:8000/index.html
|
||||
start http://localhost:8000/spieler.html
|
||||
22
style.css
Normal file
22
style.css
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
#mapCanvas {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #111;
|
||||
cursor: grab;
|
||||
}
|
||||
#controls {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 10;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user