Easily download chunk images from wplace.live using multi-point selection and highlighting
当前为
// ==UserScript==
// @name Wplace chunk downloader
// @namespace http://tampermonkey.net/
// @version 2.2.1
// @description Easily download chunk images from wplace.live using multi-point selection and highlighting
// @author NotNotWaldo
// @match https://wplace.live/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=wplace.live
// @license MIT
// @run-at document-end
// @grant none
// ==/UserScript==
// Code below, feel free to read in horror
(() => {
// Global vals because I'm way too lazy
// These variables are for handling the highlighting feature
let isHightlightOn = false;
let downloadingState = false; // the downloading state ensures that the highlight wont be also printed when downloading the images of chunk
let highlightedChunksLinksArr = []; // array for the highlighted chunks
// the coords of chunks that are selected by the points you've set
let mlChunkCoords = {
firstChunk: { x: null, y: null },
secondChunk: { x: null, y: null },
};
let mlPixelCoords = {
firstPixel: { x: null, y: null },
secondPixel: { x: null, y: null },
};
// variables for the currently selected chunks
let chunkX = null;
let chunkY = null;
let pixelX = null;
let pixelY = null;
let chunkUrl = null;
// for the dragging mechanic
let isPointing = false;
let regionDlSafety = true;
// just a template for chunk img
const chunkTemplateUrl = `https://backend.wplace.live/files/s0/tiles/`;
// variables for the download bar
let currImgsDownloaded = null;
let totalImgsToBeDownloaded = null;
// for lazily waiting for something
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
let multipleChunksDownloaderElem = document.createElement("div");
multipleChunksDownloaderElem.className = "mulChunksDownloader";
multipleChunksDownloaderElem.innerHTML = `
<div class="chunk-downloader">
<!-- Multiple Chunk Downloader -->
<div class="mainHead section-header">
<span>Wplace Chunks Downloader</span>
<button class="collapse-btn">–</button>
</div>
<div class="mainCollapsible expanded">
<div class="infoSection section">
<div class="section-header coords">
<span class="chunkSelectedInfo">Chunk selected: X: null, Y: null</span>
</div>
<div class="btn-row">
<button class="downloadChunkBtn btn btn-primary">Download chunk</button>
<button class="viewChunkBtn btn">View chunk image</button>
</div>
</div>
<div class="mulChunkSection section">
<div class="section-header">
<span>Multiple Chunks Downloader</span>
<button class="collapse-btn">+</button>
</div>
<div class="collapsible collapsed">
<div class="coords">
<span>1st X: null, Y: null</span>
<span>2nd X: null, Y: null</span>
</div>
<div class="btn-row">
<button class="setPointBtn btn btn-primary">Set point</button>
<button class="removePointBtn btn">Remove points</button>
</div>
<div class="btn-row">
<button class="downloadBtn btn btn-primary">Download chunks</button>
<button class="highlightBtn btn">Highlight chunks</button>
</div>
<div class="regionDownloadSection section">
<div class="section-header">
<span>Pixel Region Downloader</span>
<button class="collapse-btn">+</button>
</div>
<div class="collapsible collapsed">
<div class="pixelCoords">
<span>1st X: null, Y: null</span>
<span>2nd X: null, Y: null</span>
</div>
<div class="btn-row">
<button class="downloadRegionBtn btn btn-primary">Download Region</button>
<button class="downloadRegionSafetyBtn btn">Turn off safety</button>
</div>
</div>
</div>
</div>
</div>
<!-- Manual Chunk Download -->
<div class="manualChunkSection section">
<div class="section-header">
<span>Manual Chunk Downloader</span>
<button class="collapse-btn">+</button>
</div>
<div class="collapsible collapsed">
<input class="coordsInput input-box" type="text" name="chunksCoords" placeholder="firstX, firstY, secX, secY, safety">
</input>
<div class="btn-row" style="grid-template-columns: 1fr;">
<button class="manualDownloadBtn btn btn-primary">Download</button>
</div>
</div>
</div>
<div class="downloadBarCon">
<div class="download-bar">
<div class="download-progress"></div>
<span class="download-text">0 / 0</span>
</div>
</div>
</div>
</div>
`;
let style = document.createElement("style");
style.textContent = `
.mulChunksDownloader {
position: fixed;
top: auto;
bottom: 12px;
left: 12px;
z-index: 49;
}
.mulChunksDownloader .chunk-downloader {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border: 1px solid #e5e7eb;
font-family: sans-serif;
padding: 16px;
width: 360px;
font-size: 14px;
color: #111827;
}
.mulChunksDownloader .section {
margin-bottom: 16px;
}
.mulChunksDownloader .mainHead {
margin: 0px;
}
.mulChunksDownloader .infoSection {
margin-top: 16px;
}
.mulChunksDownloader .regionDownloadSection {
margin-top: 16px;
margin-bottom: 0px;
}
.mulChunksDownloader .pixelCoords {
display: flex;
justify-content: space-around;
align-items: center;
gap: 8px;
font-size: 14px;
padding: 4px 12px;
border-radius: 9999px;
background: #f3f4f6;
}
.mulChunksDownloader .section-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
margin-bottom: 3px;
}
.mulChunksDownloader .mainHead {
cursor: move;
}
.mulChunksDownloader .collapse-btn {
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 6px;
width: 24px;
height: 24px;
font-size: 14px;
color: #4b5563;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.mulChunksDownloader .collapse-btn:hover {
background: #e5e7eb;
}
.mulChunksDownloader .coords {
display: flex;
justify-content: space-around;
align-items: center;
gap: 8px;
font-size: 14px;
padding: 4px 12px;
border-radius: 9999px;
background: #f3f4f6;
}
.mulChunksDownloader .btn-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 8px;
}
.mulChunksDownloader .btn {
border-radius: 9999px;
padding: 6px 12px;
cursor: pointer;
border: 1px solid #d1d5db;
background: #f3f4f6;
color: #374151;
text-align: center;
font-size: 13px;
}
.mulChunksDownloader .btn:hover {
background: #e5e7eb;
}
.mulChunksDownloader .btn-primary {
background: #2563eb;
border: none;
color: white;
}
.mulChunksDownloader .btn-primary:hover {
background: #1d4ed8;
}
.mulChunksDownloader .input-box {
width: 100%;
border-radius: 9999px;
background: #f3f4f6;
border: 1px solid #d1d5db;
padding: 6px 12px;
font-size: 0.875rem;
margin: 8px 0;
outline: none;
transition: border 0.2s, box-shadow 0.2s;
}
.mulChunksDownloader .input-box:focus {
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
background: white;
}
.mulChunksDownloader .collapsible {
overflow: hidden;
transition: max-height 0.3s ease;
}
.mulChunksDownloader .collapsible.collapsed {
max-height: 0;
}
.mulChunksDownloader .collapsible.expanded {
max-height: 1000px;
}
.mulChunksDownloader button:disabled {
background-color: #4b5563; /* darken */
color: #9ca3af;
cursor: not-allowed;
opacity: 0.7;
}
.mulChunksDownloader .download-bar {
position: relative;
width: 100%;
height: 24px;
background-color: #e0e0e0; /* light gray background */
border-radius: 6px;
overflow: hidden;
margin-top: 10px;
}
.mulChunksDownloader .download-progress {
height: 100%;
width: 0%;
background-color: #007bff; /* bootstrap blue */
transition: width 0.3s ease;
}
.mulChunksDownloader .download-text {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
font-weight: bold;
color: white;
line-height: 24px;
}
.mulChunksDownloader .mainCollapsible {
overflow: hidden;
transition: max-height 0.3s ease;
}
.mulChunksDownloader .mainCollapsible.collapsed {
max-height: 0;
}
.mulChunksDownloader .mainCollapsible.expanded {
max-height: 2000px; /* large enough to fit all content */
}
`;
document.head.appendChild(style);
document.body.appendChild(multipleChunksDownloaderElem);
// === COLLAPSING MECHANISM SECTION ===
let collapseSection = (btn, target) => {
let isCollapsed = btn.dataset.collapsed === "true";
if (!isCollapsed) {
target.classList.remove("expanded");
target.classList.add("collapsed");
btn.dataset.collapsed = "true";
btn.textContent = "+";
} else {
target.classList.remove("collapsed");
target.classList.add("expanded");
btn.dataset.collapsed = "false";
btn.textContent = "–";
}
};
// Main collapse
let mainHead = multipleChunksDownloaderElem.querySelector(".mainHead");
const mainCollapsible =
multipleChunksDownloaderElem.querySelector(".mainCollapsible");
const mainCollapseBtn = multipleChunksDownloaderElem.querySelector(
".mainHead .collapse-btn"
);
mainCollapseBtn.dataset.collapsed = "false";
mainCollapseBtn.addEventListener("click", () => {
collapseSection(mainCollapseBtn, mainCollapsible);
});
// Multiple Chunks Section collapse
let mulChunkSection =
multipleChunksDownloaderElem.querySelector(".mulChunkSection");
let mulChunkCollapseBtn = mulChunkSection.querySelector(".collapse-btn");
let mulChunkCollapsible = mulChunkSection.querySelector(".collapsible");
mulChunkCollapseBtn.dataset.collapsed = "true";
mulChunkCollapseBtn.addEventListener("click", () => {
collapseSection(mulChunkCollapseBtn, mulChunkCollapsible);
});
// Manual Chunks Section collapse
let manualChunkSection = multipleChunksDownloaderElem.querySelector(
".manualChunkSection"
);
let manualCollapseBtn = manualChunkSection.querySelector(".collapse-btn");
let manualCollapsible = manualChunkSection.querySelector(".collapsible");
manualCollapseBtn.dataset.collapsed = "true"; // starts collapsed
manualCollapseBtn.addEventListener("click", () => {
collapseSection(manualCollapseBtn, manualCollapsible);
});
let regionDownloadSection = mulChunkSection.querySelector(
".regionDownloadSection"
);
let rgDlSectionCollapseBtn =
regionDownloadSection.querySelector(".collapse-btn");
let rgDlSectionCollapsible =
regionDownloadSection.querySelector(".collapsible");
rgDlSectionCollapseBtn.dataset.collapsed = "true";
rgDlSectionCollapseBtn.addEventListener("click", () => {
collapseSection(rgDlSectionCollapseBtn, rgDlSectionCollapsible);
});
// === COLLAPSING MECHANISM SECTION END ===
// for the dragging mechanism
let isDragging = false;
let offsetX = 0;
let offsetY = 0;
mainHead.addEventListener("mousedown", (e) => {
isDragging = true;
// Calculates click offset inside the box
const rect = multipleChunksDownloaderElem.getBoundingClientRect();
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
// Prevent accidental text selection
e.preventDefault();
});
document.addEventListener("mousemove", (e) => {
if (!isDragging) return;
multipleChunksDownloaderElem.style.top = `${e.clientY - offsetY}px`;
multipleChunksDownloaderElem.style.left = `${e.clientX - offsetX}px`;
multipleChunksDownloaderElem.style.bottom = "auto"; // stop sticking to bottom
multipleChunksDownloaderElem.style.right = "auto"; // stop sticking to left
multipleChunksDownloaderElem.style.position = "fixed";
});
document.addEventListener("mouseup", () => {
isDragging = false;
});
// for displaying info about points and currently selected chunk
let infoSection = multipleChunksDownloaderElem.querySelector(".infoSection");
let downloadChunkBtn = infoSection.querySelector(".downloadChunkBtn");
downloadChunkBtn.addEventListener("click", async () => {
if (chunkX == null) return;
multipleChunksDlUrl({
firstChunk: { x: chunkX, y: chunkY },
secondChunk: { x: chunkX, y: chunkY },
});
});
let viewChunkBtn = infoSection.querySelector(".viewChunkBtn");
viewChunkBtn.addEventListener("click", (event) => {
if (chunkX == null) return;
window.open(chunkUrl, "_blank");
});
// to update the infos displayed
const refreshSetPointsInfo = () => {
let coordsCon = mulChunkSection.querySelector(".coords");
let currentCoords = infoSection.querySelector("span");
currentCoords.textContent = `Chunk selected: X: ${chunkX}, Y: ${chunkY}`;
let infoChildren = coordsCon.querySelectorAll("span");
infoChildren[0].textContent = `1st X: ${mlChunkCoords.firstChunk.x}, Y: ${mlChunkCoords.firstChunk.y}`;
infoChildren[1].textContent = `2nd X: ${mlChunkCoords.secondChunk.x}, Y: ${mlChunkCoords.secondChunk.y}`;
let pixelCoordsCon = regionDownloadSection.querySelector(".pixelCoords");
let pixelinfoChildren = pixelCoordsCon.querySelectorAll("span");
pixelinfoChildren[0].textContent = `1st X: ${mlPixelCoords.firstPixel.x}, Y: ${mlPixelCoords.firstPixel.y}`;
pixelinfoChildren[1].textContent = `2nd X: ${mlPixelCoords.secondPixel.x}, Y: ${mlPixelCoords.secondPixel.y}`;
};
// for the multiple chunk downloader elems/buttons
let setPointBtn = mulChunkSection.querySelector(".setPointBtn");
setPointBtn.addEventListener("click", async () => {
if (chunkX == null) return;
// for checking if there is a chunk coords value to be set
if (mlChunkCoords.firstChunk.x == null) {
// yes I'm lazy
mlChunkCoords.firstChunk = { x: chunkX, y: chunkY };
mlPixelCoords.firstPixel = { x: pixelX, y: pixelY };
} else if (mlChunkCoords.secondChunk.x == null) {
mlChunkCoords.secondChunk = { x: chunkX, y: chunkY };
mlPixelCoords.secondPixel = { x: pixelX, y: pixelY };
} else {
mlChunkCoords.firstChunk = mlChunkCoords.secondChunk;
mlChunkCoords.secondChunk = { x: chunkX, y: chunkY };
mlPixelCoords.firstPixel = mlPixelCoords.secondPixel;
mlPixelCoords.secondPixel = { x: pixelX, y: pixelY };
}
if (isHightlightOn) {
highlightedChunksLinksArr.length = 0;
let organizedCoords = await mlCoordsOrganizer(mlChunkCoords);
highlightedChunksLinksArr.push(
...getLinksFromChunkCoords(organizedCoords)
);
}
refreshSetPointsInfo();
updateButtons();
});
let removePointsBtn = mulChunkSection.querySelector(".removePointBtn");
removePointsBtn.addEventListener("click", async () => {
mlChunkCoords = {
firstChunk: { x: null, y: null },
secondChunk: { x: null, y: null },
};
mlPixelCoords = {
firstPixel: { x: null, y: null },
secondPixel: { x: null, y: null },
};
highlightedChunksLinksArr.length = 0;
isHightlightOn = false;
let highlightBtn = mulChunkSection.querySelector(".highlightBtn");
highlightBtn.textContent = "Highlight chunks";
refreshSetPointsInfo();
updateButtons();
});
let highlightBtn = mulChunkSection.querySelector(".highlightBtn");
highlightBtn.addEventListener("click", async () => {
console.log("Trying to hightlight chunks");
if (mlChunkCoords.firstChunk.x == null) return;
if (!isHightlightOn) {
let organizedCoords = await mlCoordsOrganizer(mlChunkCoords);
console.log(Object.keys(organizedCoords));
highlightedChunksLinksArr.push(
...getLinksFromChunkCoords(organizedCoords)
);
console.log(`Turned on hightlight`);
isHightlightOn = !isHightlightOn;
highlightBtn.textContent = "Unhighlight chunks";
} else {
highlightedChunksLinksArr.length = 0;
console.log(`Turned off highlight`);
isHightlightOn = !isHightlightOn;
highlightBtn.textContent = "Highlight chunks";
}
});
let downloadBtn = mulChunkSection.querySelector(".downloadBtn");
downloadBtn.addEventListener("click", async () => {
let tempCoords = structuredClone(mlChunkCoords);
if (
mlChunkCoords.firstChunk.x == null &&
mlChunkCoords.secondChunk.x == null
) {
return;
}
if (mlChunkCoords.secondChunk.x == null) {
tempCoords.secondChunk.x = mlChunkCoords.firstChunk.x;
tempCoords.secondChunk.y = mlChunkCoords.firstChunk.y;
}
console.log(
`downloading chunks: ${tempCoords.firstChunk.x}, ${tempCoords.firstChunk.y} | ${tempCoords.secondChunk.x}, ${tempCoords.secondChunk.y}`
);
multipleChunksDlUrl(mlChunkCoords);
});
// for the region download elems/buttons
let downloadRegionBtn =
regionDownloadSection.querySelector(".downloadRegionBtn");
downloadRegionBtn.addEventListener("click", (event) => {
console.log("Clicked region download");
if (
downloadingState ||
mlPixelCoords.firstPixel.x == null ||
mlPixelCoords.secondPixel.x == null
)
return;
regionDl(mlChunkCoords, mlPixelCoords, regionDlSafety);
});
let downloadRegionSafetyBtn = regionDownloadSection.querySelector(
".downloadRegionSafetyBtn"
);
downloadRegionSafetyBtn.addEventListener("click", (event) => {
regionDlSafety = !regionDlSafety;
updateButtons();
console.log("Clicked safety button");
});
// for the manual downloading
let coordsInput = manualChunkSection.querySelector(".coordsInput");
coordsInput.addEventListener("keydown", (event) => {
if (event.key === "Enter" && !event.repeat) {
manualDownload();
}
});
let manualDownloadBtn =
manualChunkSection.querySelector(".manualDownloadBtn");
manualDownloadBtn.addEventListener("click", () => {
manualDownload();
});
let manualDownload = () => {
if (downloadingState) return;
let coordsText = coordsInput.value;
// Split and trim whitespace from each value
let splitUpVal = coordsText.split(",").map((v) => v.trim());
// Helper: convert string to boolean or null if invalid
const toBoolean = (str) => {
if (str.toLowerCase() === "true") return true;
if (str.toLowerCase() === "false") return false;
return null;
};
if (splitUpVal.length !== 4 && splitUpVal.length !== 5) {
console.log("You must input 4 or 5 arguments (comma-separated).");
return;
}
// Validate first 4 args as integers
for (let i = 0; i < 4; i++) {
if (!Number.isInteger(Number(splitUpVal[i]))) {
console.log(
"First 4 arguments must all be integers. Also make sure that there is no space in between numbers. Example of what not to do: ..., 34 6, ..."
);
return;
}
}
// organizing before sending data
let tempCoords = {
firstChunk: { x: Number(splitUpVal[0]), y: Number(splitUpVal[1]) },
secondChunk: { x: Number(splitUpVal[2]), y: Number(splitUpVal[3]) },
};
// With 5th arg (boolean)
if (splitUpVal.length === 5) {
let inputBool = toBoolean(splitUpVal[4]);
if (inputBool === null) {
console.log("The fifth argument only accepts 'true' or 'false'.");
return;
}
multipleChunksDlUrl(tempCoords, inputBool);
} else {
// Only 4 args
multipleChunksDlUrl(tempCoords);
}
};
let updateButtons = () => {
let marker = document.querySelector(".maplibregl-marker");
if (!marker) {
isPointing = false;
chunkX = null;
chunkY = null;
pixelX = null;
pixelY = null;
chunkUrl = null;
refreshSetPointsInfo();
}
setPointBtn.disabled = !isPointing;
downloadChunkBtn.disabled = !isPointing || downloadingState;
viewChunkBtn.disabled = !isPointing;
downloadBtn.disabled =
downloadingState || mlChunkCoords.firstChunk.x == null;
downloadRegionBtn.disabled =
downloadingState ||
mlPixelCoords.firstPixel.x == null ||
mlPixelCoords.secondPixel.x == null;
manualDownloadBtn.disabled = downloadingState;
let noFirstChunk = mlChunkCoords.firstChunk.x == null;
highlightBtn.disabled = noFirstChunk;
removePointsBtn.disabled = noFirstChunk;
if (regionDlSafety) downloadRegionSafetyBtn.textContent = `Turn off safety`;
else downloadRegionSafetyBtn.textContent = `Turn on safety`;
};
// for the download bar
let updateDownloadBar = () => {
const progressElem = document.querySelector(".download-progress");
const textElem = document.querySelector(".download-text");
if (!progressElem || !textElem || totalImgsToBeDownloaded === 0) return;
const percent = Math.min(
100,
(currImgsDownloaded / totalImgsToBeDownloaded) * 100
);
progressElem.style.width = percent + "%";
textElem.textContent = `${currImgsDownloaded} / ${totalImgsToBeDownloaded}`;
};
updateButtons();
const mlCoordsOrganizer = (mlCoords) => {
console.log(mlCoords);
let { firstChunk, secondChunk } = structuredClone(mlCoords);
// checks if the second point is empty. If yes, it copies the val of first point onto the second
if (secondChunk.x == null || secondChunk.y == null) {
secondChunk = { ...firstChunk };
return { firstChunk, secondChunk };
}
// making sure that the coords that will be sent would be appropriate
// turns the first point to be the topleft corner and the second the bottom right
const result = {
firstChunk: {
x: Math.min(firstChunk.x, secondChunk.x),
y: Math.min(firstChunk.y, secondChunk.y),
},
secondChunk: {
x: Math.max(firstChunk.x, secondChunk.x),
y: Math.max(firstChunk.y, secondChunk.y),
},
};
return result;
};
// For other overlay scripts / to protect this script too lol
const nativeFetch = window.fetch.bind(window);
function makeFetchWrapper(fetchImpl) {
const wrapper = async (resource, init) => {
const url = new URL(
typeof resource === "string" ? resource : resource.url || "",
location.href // ensure absolute URL resolution
);
const isTile = url.pathname.endsWith(".png");
const x = url.searchParams.get("x");
const y = url.searchParams.get("y");
// Always call the currently wrapped fetch implementation
const res = await wrapper._target(resource, init);
// Highlight Tile logic
if (
isTile &&
isHightlightOn &&
highlightedChunksLinksArr.includes(url.href) &&
!downloadingState
) {
const cloned = res.clone();
const blob = await cloned.blob();
const bmp = await createImageBitmap(blob);
const canvas = document.createElement("canvas");
canvas.width = bmp.width;
canvas.height = bmp.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(bmp, 0, 0);
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
const modifiedBlob = await new Promise((resolve) =>
canvas.toBlob(resolve, "image/png")
);
const headers = new Headers(res.headers);
headers.delete("content-length");
headers.delete("content-encoding");
return new Response(modifiedBlob, {
status: res.status,
statusText: res.statusText,
headers,
});
}
// Point Selection logic / settintg event listeners for "exit point" btns
if (x != null && y != null) {
const pathnames = url.pathname.split("/");
chunkX = Number(pathnames.at(-2));
chunkY = Number(pathnames.at(-1));
pixelX = Number(x);
pixelY = Number(y);
chunkUrl = `https://backend.wplace.live/files/s0/tiles/${chunkX}/${chunkY}.png`;
isPointing = true;
updateButtons();
refreshSetPointsInfo();
console.log(`Pressed on ChunkX: ${chunkX}, ChunkY: ${chunkY}`);
const parent = document
.querySelector(".rounded-t-box")
?.querySelector("div");
if (parent) {
const pixelBtns = parent.querySelector(".hide-scrollbar");
let exitBtn = parent.querySelector(
"div.px-3:nth-child(1) > button:nth-child(2)"
);
let exitPointEvent = () => {
isPointing = false;
chunkX = null;
chunkY = null;
chunkUrl = null;
updateButtons();
refreshSetPointsInfo();
};
if (exitBtn) {
exitBtn.addEventListener("click", exitPointEvent);
}
let paintBtn = pixelBtns?.querySelector("button:nth-child(1)");
if (paintBtn) {
paintBtn.addEventListener("click", async () => {
console.log("clicked the paint button");
let retryCount = 0;
while (true) {
let newParent = document.querySelector(".rounded-t-box");
let addPaintBtn = newParent.querySelector(
"div:nth-child(1) > div:nth-child(3) > div:nth-child(2) > button:nth-child(1)"
);
let exitPaintBtn = newParent.querySelector(
"div:nth-child(1) > div:nth-child(1) > button.btn-circle:nth-child(3)"
);
if (addPaintBtn) {
addPaintBtn.addEventListener("click", exitPointEvent);
}
if (exitPaintBtn) {
exitPaintBtn.addEventListener("click", exitPointEvent);
}
if (addPaintBtn && exitPaintBtn) break;
if (retryCount++ >= 50) {
console.error("Unable to find paint buttons in time");
break;
}
await sleep(100);
}
});
}
} else {
console.error("Parent element not found");
}
}
// Default: return original response untouched
return res;
};
wrapper._target = fetchImpl;
return wrapper;
}
// Installs the first wrapper around the native fetch
let myFetchWrapper = makeFetchWrapper(nativeFetch);
// Trap window.fetch so other scripts can patch safely << for Wplace Overlay Pro and other overlays
Object.defineProperty(window, "fetch", {
configurable: true,
get() {
return myFetchWrapper;
},
set(fn) {
console.log("Another script patched fetch, wrapping it.");
// Wrap the new fetch so recursion never happens
myFetchWrapper = makeFetchWrapper(fn);
},
});
// gonna need to optimize the code below, later.
const multipleChunksDlUrl = async (chunkCoords, safety = true) => {
if (downloadingState) return;
let organizedChunkCoords = mlCoordsOrganizer(chunkCoords);
let topleftX = organizedChunkCoords.firstChunk.x;
let topleftY = organizedChunkCoords.firstChunk.y;
let botRightX = organizedChunkCoords.secondChunk.x;
let botRightY = organizedChunkCoords.secondChunk.y;
let linksResultArr = getLinksFromChunkCoords(organizedChunkCoords);
downloadingState = true;
updateButtons();
let safetyThreshold = 70;
let chunkWidth = 1 + Number(botRightX - topleftX);
let imgsAmount = linksResultArr.length;
if (linksResultArr.length > safetyThreshold) {
if (safety) {
console.warn(
`You were about to download ${linksResultArr.length} images but was prevented by this precaution. If you intentionally wanted to download that much, you can type '${topLeftX}, ${topLeftY}, ${botRightX}, ${botRightY}, false' onto the manual chunk downloader. Good luck.`
);
return;
} else {
console.log("Better pray to God...");
}
}
totalImgsToBeDownloaded = imgsAmount;
currImgsDownloaded = 0;
updateDownloadBar();
let resultCanvas = await stitchImages(linksResultArr, chunkWidth);
let canvasName = `ch-${topleftX}, ${topleftY}, ${botRightX}, ${botRightY} time-${Date.now()}`;
canvasDownloader(resultCanvas, canvasName);
};
// region downloader
const regionDl = async (chunkCoords, pixelCoords, safety = true) => {
let organizedChunkCoords = mlCoordsOrganizer(chunkCoords);
let topleftX = organizedChunkCoords.firstChunk.x;
let topleftY = organizedChunkCoords.firstChunk.y;
let botRightX = organizedChunkCoords.secondChunk.x;
let botRightY = organizedChunkCoords.secondChunk.y;
let linksResultArr = getLinksFromChunkCoords(organizedChunkCoords);
downloadingState = true;
updateButtons();
let safetyThreshold = 70;
let chunkWidth = 1 + Number(botRightX - topleftX);
let imgsAmount = linksResultArr.length;
if (linksResultArr.length > safetyThreshold) {
if (safety) {
console.warn(
`You were about to download ${linksResultArr.length} images but was prevented by this precaution. If you intentionally wanted to download that much, Turn off the 'safety' under the Region Download section. Good luck.`
);
return;
} else {
console.log("Better pray to God...");
}
}
totalImgsToBeDownloaded = imgsAmount;
currImgsDownloaded = 0;
updateDownloadBar();
console.log(
`First point coords: Chunkx: ${topleftX}, ChunkY: ${topleftY}, PixelX: ${pixelCoords.firstPixel.x}, PixelY: ${pixelCoords.firstPixel.y}`
);
console.log(
`Second point coords: Chunkx: ${botRightX}, ChunkY: ${botRightY}, PixelX: ${pixelCoords.secondPixel.x}, PixelY: ${pixelCoords.secondPixel.y}`
);
let baseCanvas = await stitchImages(linksResultArr, chunkWidth);
console.log(
`canvas - Width: ${baseCanvas.width}, Height: ${baseCanvas.height}`
);
// translating the pixel coords onto canvas coords
let toCanvasCoord = (chunk, pixel, origin, tileSize) => {
return {
x: (chunk.x - origin.x) * tileSize + pixel.x,
y: (chunk.y - origin.y) * tileSize + pixel.y,
};
};
// Basically the "organizedChunkCoords.firstChunk" serves as the "topleft corner" or the 0,0 coords
// then we extract how far away are the points (on the amount of chunk tiles) from the topleft corner
// then we multiply it by 1000
// then the result would be then added by the pixel's coordinate (on the current chunk it is on) to get its coords on canvas.
let tileWidthAndHeight = 1000; // the width and height of a chunk, hopefully wont change lol
let canvasPixelCoords = {
firstPixel: toCanvasCoord(
chunkCoords.firstChunk,
pixelCoords.firstPixel,
organizedChunkCoords.firstChunk,
tileWidthAndHeight
),
secondPixel: toCanvasCoord(
chunkCoords.secondChunk,
pixelCoords.secondPixel,
organizedChunkCoords.firstChunk,
tileWidthAndHeight
),
};
console.log(chunkCoords);
console.log(pixelCoords);
console.log(canvasPixelCoords);
let organizedCanvasPixelCoords = pixelCoordsOrganizer(canvasPixelCoords);
// sets the width and height of the region
let regionWidth =
1 +
(organizedCanvasPixelCoords.secondPixel.x -
organizedCanvasPixelCoords.firstPixel.x);
let regionHeight =
1 +
(organizedCanvasPixelCoords.secondPixel.y -
organizedCanvasPixelCoords.firstPixel.y);
// creates a new canvas so the data can be put into it
let regionCanvas = document.createElement("canvas");
regionCanvas.width = regionWidth;
regionCanvas.height = regionHeight;
let regionCtx = regionCanvas.getContext("2d");
// copy the region onto the new canvas
regionCtx.drawImage(
baseCanvas,
organizedCanvasPixelCoords.firstPixel.x, // source x
organizedCanvasPixelCoords.firstPixel.y, // source y
regionWidth, // source width
regionHeight, // source height
0, // destination x
0, // destination y
regionWidth, // destination width
regionHeight // destination height
);
let canvasName = `ch-${organizedChunkCoords.firstChunk.x}, ${
organizedChunkCoords.firstChunk.y
}, ${organizedChunkCoords.secondChunk.x}, ${
organizedChunkCoords.secondChunk.y
} px-${organizedCanvasPixelCoords.firstPixel.x}, ${
organizedCanvasPixelCoords.firstPixel.y
}, ${organizedCanvasPixelCoords.secondPixel.x}, ${
organizedCanvasPixelCoords.secondPixel.y
} time-${Date.now()}`;
// finally download the resulting canvas
await canvasDownloader(regionCanvas, canvasName);
};
let pixelCoordsOrganizer = (pixelCoords) => {
let { firstPixel, secondPixel } = structuredClone(pixelCoords);
const result = {
firstPixel: {
x: Math.min(firstPixel.x, secondPixel.x),
y: Math.min(firstPixel.y, secondPixel.y),
},
secondPixel: {
x: Math.max(firstPixel.x, secondPixel.x),
y: Math.max(firstPixel.y, secondPixel.y),
},
};
return result;
};
let getLinksFromChunkCoords = (chunkCoords) => {
console.log("getting the links from chunk coords.");
console.log(
"tempChunkCoords: " +
`First chunk {x: ${chunkCoords.firstChunk.x}, y: ${chunkCoords.firstChunk.y}}, Second chunk {x: ${chunkCoords.secondChunk.x}, y: ${chunkCoords.secondChunk.y}}`
);
let topleftX = chunkCoords.firstChunk.x,
topleftY = chunkCoords.firstChunk.y,
botRightX = chunkCoords.secondChunk.x,
botRightY = chunkCoords.secondChunk.y;
if (botRightX == null) {
botRightX = topleftX;
botRightY = topleftY;
}
let chunkWidth = 1 + Number(botRightX - topleftX);
let chunkHeight = 1 + Number(botRightY - topleftY);
console.log("chunkWidth: " + chunkWidth);
console.log("chunkHeight: " + chunkHeight);
let linksArr = [];
for (let j = 0; j < chunkHeight; j++) {
for (let i = 0; i < chunkWidth; i++) {
linksArr.push(
chunkTemplateUrl +
(Number(i) + Number(topleftX)) +
"/" +
(Number(j) + Number(topleftY)) +
".png"
);
}
}
return linksArr;
};
async function stitchImages(images, width) {
// Creates a temp 1000x1000 image
const resizeImage = (img, maxWidth = 1000, maxHeight = 1000) => {
if (img.width <= maxWidth && img.height <= maxHeight) {
return img; // no need to resize
}
const scale = Math.min(maxWidth / img.width, maxHeight / img.height);
const newWidth = Math.floor(img.width * scale);
const newHeight = Math.floor(img.height * scale);
const c = document.createElement("canvas");
c.width = newWidth;
c.height = newHeight;
const ctx = c.getContext("2d");
ctx.drawImage(img, 0, 0, newWidth, newHeight);
const resized = new Image();
resized.src = c.toDataURL(); // safe because already same-origin blob
return new Promise((resolve) => {
resized.onload = () => resolve(resized);
});
};
const createBlank = () => {
const c = document.createElement("canvas");
c.width = 1000;
c.height = 1000;
const ctx = c.getContext("2d");
ctx.fillStyle = "rgba(0,0,0,0)"; // or transparent
ctx.fillRect(0, 0, c.width, c.height);
return new Promise((resolve) => {
c.toBlob((blob) => {
const img = new Image();
img.src = URL.createObjectURL(blob);
img.onload = () => resolve(img);
});
});
};
async function loadImagesWithDelay(images, delay = 100) {
const loadedImages = [];
for (const src of images) {
let img;
while (true) {
// keep retrying until successful
try {
const res = await fetch(src, { mode: "cors" });
if (res.status === 429) {
console.warn("Rate limited! Cooling down for 10s...");
await sleep(10000); // 10 second cooldown, i dont know if this should be lessened to 5s
continue; // retry this same image
}
if (!res.ok) {
throw new Error(`HTTP ${res.status}`);
}
// Convert response to blob and load into Image
const blob = await res.blob();
img = await new Promise((resolve) => {
const image = new Image();
image.crossOrigin = "anonymous";
image.onload = () => resolve(image);
image.onerror = async () => {
console.warn("Failed to decode image, using blank:", src);
const blank = await createBlank();
resolve(blank);
};
image.src = URL.createObjectURL(blob);
});
img = await resizeImage(img, 1000, 1000);
break; // success, exit retry loop
} catch (err) {
console.warn("Fetch failed, using blank:", src, err);
img = await createBlank();
break;
}
}
loadedImages.push(img);
currImgsDownloaded++;
updateDownloadBar();
// cooldown between normal downloads
await sleep(delay);
}
return loadedImages;
}
// usage
const loadedImages = await loadImagesWithDelay(images, 150);
// # of columns/rows
const columns = width;
const rows = Math.ceil(loadedImages.length / columns);
const imgWidth = 1000;
const imgHeight = 1000;
const canvas = document.createElement("canvas");
canvas.width = imgWidth * columns;
canvas.height = imgHeight * rows;
const ctx = canvas.getContext("2d");
// this draw images in order: left to right, top to bottom
loadedImages.forEach((img, index) => {
const x = (index % columns) * imgWidth;
const y = Math.floor(index / columns) * imgHeight;
ctx.drawImage(img, x, y);
});
return canvas;
}
let canvasDownloader = async (canvasToBeDownloaded, name) => {
canvasToBeDownloaded.toBlob((blob) => {
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = name + ".png";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
// to enable the highlight to stay after downloading
downloadingState = false;
updateButtons();
}, "image/png");
};
})();
// Sry for horrible coding lmao
// No one just can win against Javascript that easily...