template tool for r/place with hololive template

userscript.user.js

// ==UserScript==
// @name         Hololive combo
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Spread the love
// @author       oralekin
// @match        https://hot-potato.reddit.com/embed*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @grant        none
// ==/UserScript==
if (window.top !== window.self) {
    const urls = [
        "https://raw.githubusercontent.com/gaudi99/hololive-template-picture/main/hololive%20placetemplate-1.png.png",
        "https://cdn.mirai.gg/tmp/dotted-place-template.png",
    ];

    const images = [];

    window.addEventListener('load', () => {
        const camera = document.querySelector("mona-lisa-embed").shadowRoot.querySelector("mona-lisa-camera");
        const canvas = camera.querySelector("mona-lisa-canvas");
        for(const url of urls) {
            const image = document.createElement("img");
            image.src = url;
            image.onload = () => {
                image.style = `position: absolute; left: 0; top: 0; width: ${image.width/3}px; height: ${image.height/3}px; image-rendering: pixelated; z-index: 1`;
                image.onload = null;
            };
            images.push(image);
            canvas.shadowRoot.querySelector('.container').appendChild(image);
            console.log(image);
        }

        window.addEventListener('keyup', (e) => {
            for(const image of images) {
                if (e.ctrlKey && e.key === 'i') {
                    image.src = "https://cdn.mirai.gg/tmp/dotted-place-template.png?" + new Date().getTime();
                }
                if (e.ctrlKey && e.key === 'b') {
                    image.hidden = !image.hidden;
                }
            }
        }, false);

        const waitForPreview = setInterval(() => {
            const preview = camera.querySelector("mona-lisa-pixel-preview");
            if (preview) {
              clearInterval(waitForPreview);
              const style = document.createElement('style')
              style.innerHTML = '.pixel { clip-path: polygon(-20% -20%, -20% 120%, 37% 120%, 37% 37%, 62% 37%, 62% 62%, 37% 62%, 37% 120%, 120% 120%, 120% -20%); }'
              preview.shadowRoot.appendChild(style);
            }
        }, 100);
    });
}