Raw Source Toggle Dropdown

• Minified Source

syrupyy / Template Overlays for Mosaic

// ==UserScript==
// @name         Template Overlays for Mosaic
// @namespace    https://syrupyy.dev/
// @version      1.0
// @description  Show example image for building pixel art on Ludwig's Mogul Mosaic
// @author       syrupyy
// @license      MIT
// @match        https://mosaic.ludwig.gg/*
// @grant        none
// ==/UserScript==

(function() {
    "use strict";
    // Set your image URL here or with the URL https://mosaic.ludwig.gg/?url=[image url]
    var url = "https://comic.studio/template.png";
    // Set image scale only if you're using an image with a resolution higher/lower than the canvas (can also be set with ?scale=[multiplier])
    // For example, if your image is four times the size of the canvas, you'd set this to 4
    var scale = 1;

    var params = new URLSearchParams(window.location.search);
    if(params.get("url") !== null) url = params.get("url");
    if(params.get("scale") !== null) scale = params.get("scale");
    function updateTemplate() {
        if(document.querySelectorAll(".max-w-fit:not([style*=NaN])").length === 0) { // Not yet connected
            setTimeout(updateTemplate, 200); // Wait a bit to check if connected
            return;
        }
        if(document.querySelectorAll(".max-w-fit img").length === 0) { // Create image element if not already added
            var img = document.createElement("img");
            img.setAttribute("style", "position:absolute;top:0;pointer-events:none;image-rendering:pixelated;opacity:0.4;transform:scale(" + (1 / scale) + ");transform-origin:0 0");
            document.querySelector(".max-w-fit").appendChild(img);
        }
        document.querySelector(".max-w-fit img").src = url + "?" + new Date().getTime(); // Query string added to bypass cache, feel free to turn this off if unnecessary
        setTimeout(updateTemplate, 60000); // Update image every minute
    }
    if(url != "") updateTemplate();
})();