☰

df2profiler 地圖繪製器

透過點擊地圖來繪製顏色的簡易地圖繪製器

目前為 2024-03-23 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         df2profiler map drawer
// @name:zh-TW   df2profiler 地圖繪製器
// @namespace    http://tampermonkey.net/
// @version      0.1.0
// @description  a simple map drawer for df2profiler.com by clicking on the map to draw color on area
// @description:zh-TW 透過點擊地圖來繪製顏色的簡易地圖繪製器
// @author       Archer_Wn
// @match        https://df2profiler.com/gamemap/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=df2profiler.com
// @grant        none
// @license      MIT
// ==/UserScript==

// Options
const color = "rgba(255, 255, 0, 0.3)"; // default color for drawing
const pvpColor = "rgba(255, 0, 0, 0.4)"; // color for pvp area
const outpostColor = "rgba(0, 255, 0, 0.4)"; // color for outpost area
const chunkSize = 6; // echo chunk have (chunkSize * chunkSize) cells

(function () {
  "use strict";
  const tbody = document.querySelector("#map tbody");
  tbody.addEventListener("click", (e) => {
    const cell = e.target.closest("td");
    if (!cell) return;

    if (cell.style.backgroundColor === color) {
      cell.style.backgroundColor = "";
    } else {
      cell.style.backgroundColor = color;
    }
  });

  // screenshot button
  const navbarLinks = document.querySelector("#navbar-links");
  const screenshotBtn = document.createElement("button");
  screenshotBtn.textContent = "Screenshot Map";
  screenshotBtn.style.padding = "0 1rem";
  screenshotBtn.style.margin = "0.3rem 0rem";
  screenshotBtn.style.borderRadius =
    navbarLinks.getBoundingClientRect().height / 2 + "px";
  screenshotBtn.style.marginLeft = "auto";
  screenshotBtn.style.cursor = "pointer";
  navbarLinks.appendChild(screenshotBtn);

  screenshotBtn.addEventListener("click", () => {
    const backgroundImgUrl = window
      .getComputedStyle(document.querySelector("#map"))
      .getPropertyValue("background-image");
    const canvas = document.createElement("canvas");
    canvas.width = tbody.clientWidth;
    canvas.height = tbody.clientHeight;
    const ctx = canvas.getContext("2d");
    const img = new Image();
    img.src = backgroundImgUrl.slice(5, -2);

    img.onload = () => {
      // draw background image
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

      // draw pvp area
      const pvpCells = tbody.querySelectorAll(".pvpZone");
      pvpCells.forEach((cell) => {
        const rect = cell.getBoundingClientRect();
        const x = rect.left - tbody.getBoundingClientRect().left;
        const y = rect.top - tbody.getBoundingClientRect().top;
        ctx.fillStyle = pvpColor;
        ctx.fillRect(x, y, rect.width, rect.height);
      });

      // draw outpost area
      const outpostCells = tbody.querySelectorAll(".outpost");
      outpostCells.forEach((cell) => {
        const rect = cell.getBoundingClientRect();
        const x = rect.left - tbody.getBoundingClientRect().left;
        const y = rect.top - tbody.getBoundingClientRect().top;
        ctx.fillStyle = outpostColor;
        ctx.fillRect(x, y, rect.width, rect.height);
      });

      // draw area
      const cells = tbody.querySelectorAll("td");
      cells.forEach((cell) => {
        if (cell.style.backgroundColor === "") return;
        const rect = cell.getBoundingClientRect();
        const x = rect.left - tbody.getBoundingClientRect().left;
        const y = rect.top - tbody.getBoundingClientRect().top;
        ctx.fillStyle = cell.style.backgroundColor;
        ctx.fillRect(x, y, rect.width, rect.height);
      });

      // draw grid (6x6 cells)
      const td = tbody.querySelector("td");
      const chunkWidth = td.clientWidth * chunkSize;
      const chunkHeight = td.clientHeight * chunkSize;
      ctx.strokeStyle = "white";
      ctx.lineWidth = 1;
      ctx.beginPath();
      for (let x = chunkWidth; x < canvas.width; x += chunkWidth) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
      }
      for (let y = chunkHeight; y < canvas.height; y += chunkHeight) {
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
      }
      ctx.stroke();

      // download image
      const a = document.createElement("a");
      a.href = canvas.toDataURL("image/png");
      a.download = "map.png";
      a.click();
    };
  });

  // Your code here...
})();