I made this to roll for images in 4chan threads. I'm not sure why myself...
Version au
// ==UserScript==
// @name 4chan Image Roll Script
// @namespace http://tampermonkey.net/
// @version 4.20
// @description I made this to roll for images in 4chan threads. I'm not sure why myself...
// @author Taylor aka Dildoer the Cocknight
// @match http://boards.4chan.org/*
// @match https://boards.4chan.org/*
// @grant none
// ==/UserScript==
(function() {
//add CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".selectedIMG{ background-image: url(\"http://www.pngmart.com/files/3/Left-Arrow-PNG-File.png\"); animation: blinker 1s linear infinite; background-repeat: no-repeat; background-position: center; width: 100%!important; background-size: 10% 100%; } #rollBtn { position: fixed; bottom: 0; right: 0; opacity: .5; margin: 5px; font-size:15px; border-radius: 50%; } #rollFlash { position: fixed; bottom: 0; right: 0; margin: 30px; animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0; } }";
document.body.appendChild(css);
//add a function called imgRoll()
function imgRoll() {
//check if .selectedIMG is there
if (document.querySelector(".selectedIMG") !== null ) {
document.querySelector(".selectedIMG").classList.remove("selectedIMG");
}
var images = document.querySelectorAll('.fileThumb');
var randomGen = Math.floor(Math.random() * images.length);
var totalNum = images.length - 1;
console.log('You rolled number ' + randomGen + ' out of ' + totalNum);
console.log(images[randomGen]);
//flash message
function flashMessage() {
//check if #rollFlash exists
if (document.querySelector("#rollFlash") !== null ) {
document.querySelector("#rollFlash").remove();
}
var flashItem = document.createElement("span");
var textnode = document.createTextNode('You rolled number ' + randomGen + ' out of ' + totalNum);
flashItem.id = "rollFlash";
flashItem.appendChild(textnode);
var beforeBtn = document.getElementById("rollBtn");
beforeBtn.before(flashItem);
//turn it into a timeout so it's an actual flash message
setTimeout(function(){
document.querySelector("#rollFlash").remove();
document.querySelector(".selectedIMG").classList.remove("selectedIMG");
}, 5000);
}
//Add selectedIMG class (Blinking arrow), then scroll to the selected image
images[randomGen].classList.add("selectedIMG");
images[randomGen].scrollIntoView({ block: 'center', behavior: 'smooth' });
flashMessage();
}
//create a roll button
var btn = document.createElement("BUTTON");
var textRoll = document.createTextNode("⚄");
btn.id = 'rollBtn';
btn.appendChild(textRoll);
document.body.appendChild(btn);
//make the button roll
document.getElementById("rollBtn").onclick = imgRoll;
})();