Last active
June 19, 2022 15:53
-
-
Save oralekin/240d536d13d0a87ecf2474658115621b to your computer and use it in GitHub Desktop.
osu! Logo Template for 2022 /r/place
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name osu! Logo template | |
| // @namespace http://tampermonkey.net/ | |
| // @version 0.6 | |
| // @description try to take over the canvas! | |
| // @author oralekin, LittleEndu, ekgame, Wieku, DeadRote | |
| // @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) { | |
| window.addEventListener('load', () => { | |
| // Load the image | |
| const image = document.createElement("img"); | |
| const undotted = "https://cdn.discordapp.com/attachments/939592132556124230/960307248633094184/dotted-place-template.1-1.png"; | |
| image.src = "https://cdn.mirai.gg/tmp/dotted-place-template.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.6)"); | |
| 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); | |
| } |
I added a settings menu with the option to customize the url: https://gist.github.com/kebien6020/9eda7b69d0a147532bb99258538f9d4d
It opens from a blue dot at the bottom right
Did the same as well throughout the day
https://gist.github.com/Igneom/1a63744cbaba5980fee2bdcf8f6ac55e
It's giving me "To protect your security, hot-potato.reddit.com will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window.", which then doesn't load either
I added a refresh button that doesn't require reload. I attached random numbers to the url for cache busting. It uses the image code to rebuild which could be nicer. Doesn't require any special permissions. https://gist.github.com/Wetbikeboy2500/e4e41f5799669ac05bbfab2cba3c2ea8
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I added a settings menu with the option to customize the url: https://gist.github.com/kebien6020/9eda7b69d0a147532bb99258538f9d4d
It opens from a blue dot at the bottom right