MapViewer/slave.js

// 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;
  }
}