Skip to content

Instantly share code, notes, and snippets.

@Wetbikeboy2500

Wetbikeboy2500/userscript.user.js

Forked from oralekin/userscript.user.js
Last active April 4, 2022 17:44
Show Gist options
  • Save Wetbikeboy2500/e4e41f5799669ac05bbfab2cba3c2ea8 to your computer and use it in GitHub Desktop.
Save Wetbikeboy2500/e4e41f5799669ac05bbfab2cba3c2ea8 to your computer and use it in GitHub Desktop.
Download ZIP
osu! Logo Template for 2022 /r/place
Raw
userscript.user.js
// ==UserScript==
// @name osu! Logo template
// @namespace http://tampermonkey.net/
// @version 0.7
// @description try to take over the canvas!
// @author oralekin, LittleEndu, ekgame, Wieku, DeadRote, Wetbikeboy2500
// @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");
image.setAttribute('id', 'overlay')
let 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);
addReload(canvas);
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);
}
function addReload(canvas) {
//copy icon
let buttonIcon = document.querySelector("mona-lisa-embed").shadowRoot.querySelector('mona-lisa-close-button').shadowRoot.querySelector('mona-lisa-icon-button').cloneNode(true);
//Change the icon to a reload
buttonIcon.addEventListener('click', () => {
const overlay = canvas.shadowRoot.querySelector('.container').querySelector('#overlay');
overlay.parentNode.removeChild(overlay);
window.requestAnimationFrame(() => {
const image = document.createElement("img");
image.setAttribute('id', 'overlay')
//generate url safe hash
//this does cache busting
let hash = "";
for (let i = 0; i < 10; i++) {
hash += Math.floor(Math.random() * 10);
}
undotted = "https://cdn.discordapp.com/attachments/939592132556124230/960307248633094184/dotted-place-template.1-1.png?v=" + hash;
image.src = "https://cdn.mirai.gg/tmp/dotted-place-template.png?v=" + hash;
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`;
};
canvas.shadowRoot.querySelector('.container').appendChild(image);
});
});
//Set the position
let reloadButton = document.createElement('div');
reloadButton.setAttribute('id', 'reloadButton');
reloadButton.style = `
display: none;
position: fixed;
left: calc(var(--sail) + 68px);
top: calc(var(--sait) + 8px);
`;
//Add everything together
reloadButton.appendChild(buttonIcon);
document.querySelector("mona-lisa-embed").shadowRoot.appendChild(reloadButton);
window.requestAnimationFrame(() => {
const root = document.querySelector("mona-lisa-embed").shadowRoot.querySelector('#reloadButton').querySelector('mona-lisa-icon-button').querySelector('icon-close').shadowRoot;
root.querySelector('path').setAttribute('d', 'M 15 3 C 12.031398 3 9.3028202 4.0834384 7.2070312 5.875 A 1.0001 1.0001 0 1 0 8.5058594 7.3945312 C 10.25407 5.9000929 12.516602 5 15 5 C 20.19656 5 24.450989 8.9379267 24.951172 14 L 22 14 L 26 20 L 30 14 L 26.949219 14 C 26.437925 7.8516588 21.277839 3 15 3 z M 4 10 L 0 16 L 3.0507812 16 C 3.562075 22.148341 8.7221607 27 15 27 C 17.968602 27 20.69718 25.916562 22.792969 24.125 A 1.0001 1.0001 0 1 0 21.494141 22.605469 C 19.74593 24.099907 17.483398 25 15 25 C 9.80344 25 5.5490109 21.062074 5.0488281 16 L 8 16 L 4 10 z');
root.querySelector('svg').setAttribute('viewBox', '0 0 30 30');
reloadButton.style.display = 'block';
});
}
//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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment