☰

Greasy Fork is available in English.

arkasvtc

Discord: @okunamayand, Github: https://github.com/okunamayanad/r-place-2023

// ==UserScript==
// @name         arkasvtc
// @namespace    https://okunamayanad.com/
// @version      1.2
// @description  Discord: @okunamayand, Github: https://github.com/okunamayanad/r-place-2023
// @author       okunamayanad
// @match        https://garlic-bread.reddit.com/embed*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @grant        none
// @license MIT
// ==/UserScript==

console.log("1");
if (window.top !== window.self) {
    console.log("2");
    // console.log("3");
    // Load the image
    const image = document.createElement("img");
    var d = new Date();
    image.src = "https://raw.githubusercontent.com/qweeren/r-place-2023/main/output.png";
    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`;
    };

    // Add the image as overlay
    const camera = document.querySelector("garlic-bread-embed").shadowRoot.querySelector("garlic-bread-camera");
    const canvas = camera.querySelector("garlic-bread-canvas");
    const container = canvas.shadowRoot.querySelector('.container')
    container.appendChild(image);

    console.log("container", container);

    // Add a style to put a hole in the pixel preview (to see the current or desired color)
    const waitForPreview = setInterval(() => {
        const preview = camera.querySelector("garlic-bread-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);
}