Greasy Fork is available in English.

r/PlaceTux Overlay

FLOSS forever!

// ==UserScript==
// @name         r/PlaceTux Overlay
// @namespace    https://github.com/r-PlaceTux/place_tux
// @homepageURL  https://github.com/r-PlaceTux/place_tux/tree/main/overlay
// @version      1.1.0
// @description  FLOSS forever!
// @author       r/PlaceTux
// @match        https://hot-potato.reddit.com/embed*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=reddit.com
// @grant        none
// @license      GPL-3.0
// ==/UserScript==
if (window.top !== window.self) {
  window.addEventListener('load', () => {
      // Load the image
      const image = document.createElement("img");
      const undotted = "https://r-placetux.github.io/place_tux/tux_combined_all_mask.png";
      image.src = "https://r-placetux.github.io/place_tux/tux_overlay.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("mona-lisa-embed").shadowRoot.querySelector("mona-lisa-camera");
      const layout = document.querySelector("mona-lisa-embed").shadowRoot;
      const canvas = camera.querySelector("mona-lisa-canvas");
      canvas.shadowRoot.querySelector('.container').appendChild(image);
    
      // 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("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);
            loadRegions()
            setTimeout(()=>{
                loadRegions();
                if(typeof regionInterval == "undefined") {
                    const regionInterval = setInterval(()=>{
                        loadRegions()
                    },5000)
                    }
            },1000)
          }
      }, 100);
      //Insert element after another element
      function insertAfter(newNode, referenceNode) {
          referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
      }

      //Slider initialization
      function initSlider(){
          let visSlider = document.createElement("div");

          visSlider.style = `
                   position: fixed;
                   left: calc(var(--sail) + 16px);
                   right: calc(var(--sair) + 16px);
                   display: flex;
                   flex-flow: row nowrap;
                   align-items: center;
                   justify-content: center;
                   height: 40px;
                   top: calc(var(--sait) + 48px);
                   text-shadow: black 1px 0 10px;
                   text-align:center;
              `;

          //Text
          let visText = document.createElement("div");
          visText.innerText = "Highlight zones";
          visSlider.appendChild(visText);

          let lineSeparator = document.createElement("br");
          visSlider.appendChild(lineSeparator);

          //Range slider input
          let visInput = document.createElement("input");
          visInput.setAttribute("type","range");
          visInput.setAttribute("id","visRange");
          visInput.setAttribute("name","range");
          visInput.setAttribute("min","0");
          visInput.setAttribute("max","100");
          visInput.setAttribute("step","1");
          visInput.value = 0;

          //Range slider label (name)
          let visLabel = document.createElement("label");
          visLabel.innerText = '0'


          visSlider.appendChild(visInput);
          visSlider.appendChild(visLabel);

          var inputEvtHasNeverFired = true;

          var rangeValue = {current: undefined, mostRecent: undefined};

          visInput.addEventListener("input", function(evt) {
              inputEvtHasNeverFired = false;
              rangeValue.current = evt.target.value;
              if (rangeValue.current !== rangeValue.mostRecent) {
                  visInput.value = rangeValue.current;
                  visLabel.innerText = rangeValue.current+'';
                  placeGlobal.visLevel = rangeValue.current/100;
                  placeGlobal.svgMask.style.opacity = placeGlobal.visLevel+'';
              }
              rangeValue.mostRecent = rangeValue.current;
          });

          let topControls = document.querySelector("mona-lisa-embed").shadowRoot.querySelector(".layout .top-controls");
          insertAfter(visSlider,topControls);
          placeGlobal.slider = visSlider;
      }

      //Generate SVG function
      function generateSVG(){
          let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute("width","2000px");
          svg.setAttribute("height","2000px");
          svg.style = `
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          opacity: `+placeGlobal.visLevel+`;`;

          let svgDefs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
          svg.appendChild(svgDefs);

          let mask = document.createElementNS('http://www.w3.org/2000/svg', 'mask');
          mask.setAttribute("id","osuplaceMask");
          svgDefs.appendChild(mask);

          let mainMask = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
          mainMask.setAttribute('x', "0");
          mainMask.setAttribute("y","0");
          mainMask.setAttribute('height', "100%");
          mainMask.setAttribute('width', "100%");
          mainMask.setAttribute('fill', 'white');
          mask.appendChild(mainMask);

          let imageMask = document.createElementNS("http://www.w3.org/2000/svg", 'image');
          imageMask.setAttribute('href',undotted)
          imageMask.setAttribute('x', "0");
          imageMask.setAttribute("y","0");
          imageMask.setAttribute('height', "100%");
          imageMask.setAttribute('width', "100%");
          mask.appendChild(imageMask);

          let svgBody = document.createElementNS('http://www.w3.org/2000/svg', 'g');
          svgBody.setAttribute("width","2000px");
          svgBody.setAttribute("height","2000px");
          svgBody.setAttribute("x","0");
          svgBody.setAttribute("y","0");
          svg.appendChild(svgBody);

          let bodyRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          bodyRect.setAttribute("width","2000px");
          bodyRect.setAttribute("height","2000px");
          bodyRect.setAttribute("x","0");
          bodyRect.setAttribute("y","0");
          bodyRect.setAttribute("fill","rgba(0,0,0,0.9)");
          bodyRect.setAttribute("mask","url(#osuplaceMask)")
          svgBody.appendChild(bodyRect);

          return svg
      }

      //Global variables
      var placeGlobal = {
          visLevel: 0,
          slider: null,
          svgMask: null
      }

      //Load mask
      function loadRegions(){
          if(placeGlobal.svgMask != null){
              placeGlobal.svgMask.remove();
          }

          let svgClipBody = generateSVG();

          placeGlobal.svgMask = svgClipBody;

          //Generate slider UI

          //if(placeGlobal.slider == null ){
              let sliderState = layout.contains(layout.querySelector('#visRange'));
              if(!sliderState){
                  initSlider();
              }
          //}

          canvas.shadowRoot.querySelector('.container').appendChild(svgClipBody);
      }

  }, false);
}