a simple map drawer for df2profiler.com by clicking on the map to draw color on area
当前为
// ==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...
})();