127 lines
3.0 KiB
JavaScript
127 lines
3.0 KiB
JavaScript
// 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;
|
||
}
|
||
}
|
||
|