☰

4chan Image Roll Script

I made this to roll for images in 4chan threads. I'm not sure why myself...

As of 2018-11-11. See the latest version.

  1. // ==UserScript==
  2. // @name         4chan Image Roll Script
  3. // @namespace    http://tampermonkey.net/
  4. // @version      4.20
  5. // @description  I made this to roll for images in 4chan threads. I'm not sure why myself...
  6. // @author       Taylor aka Dildoer the Cocknight
  7. // @match        http://boards.4chan.org/*
  8. // @match        https://boards.4chan.org/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.  
  14. //add CSS
  15. var css = document.createElement("style");
  16. css.type = "text/css";
  17. 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; } }";
  18. document.body.appendChild(css);
  19.  
  20. //add a function called imgRoll()
  21. function imgRoll() {
  22. //check if .selectedIMG is there
  23. if (document.querySelector(".selectedIMG") !== null ) {
  24. document.querySelector(".selectedIMG").classList.remove("selectedIMG");
  25. }
  26.  
  27. var images = document.querySelectorAll('.fileThumb');
  28. var randomGen = Math.floor(Math.random() * images.length);
  29. var totalNum = images.length - 1;
  30.  
  31. console.log('You rolled number ' + randomGen + ' out of ' + totalNum);
  32. console.log(images[randomGen]);
  33.  
  34.  
  35. //flash message
  36.     function flashMessage() {
  37.     //check if #rollFlash exists
  38.     if (document.querySelector("#rollFlash") !== null ) {
  39.         document.querySelector("#rollFlash").remove();
  40.     }
  41.  
  42.     var flashItem = document.createElement("span");
  43.     var textnode = document.createTextNode('You rolled number ' + randomGen + ' out of ' + totalNum);
  44.     flashItem.id = "rollFlash";
  45.     flashItem.appendChild(textnode);
  46.     var beforeBtn = document.getElementById("rollBtn");
  47.     beforeBtn.before(flashItem);
  48.  
  49.     //turn it into a timeout so it's an actual flash message
  50.         setTimeout(function(){
  51.             document.querySelector("#rollFlash").remove();
  52.             document.querySelector(".selectedIMG").classList.remove("selectedIMG");
  53.         }, 5000);
  54. }
  55.  
  56. //Add selectedIMG class (Blinking arrow), then scroll to the selected image
  57. images[randomGen].classList.add("selectedIMG");
  58. images[randomGen].scrollIntoView({ block: 'center', behavior: 'smooth' });
  59. flashMessage();
  60. }
  61.  
  62. //create a roll button
  63.     var btn = document.createElement("BUTTON");
  64.     var textRoll = document.createTextNode("⚄");
  65.     btn.id = 'rollBtn';
  66.     btn.appendChild(textRoll);
  67.     document.body.appendChild(btn);
  68.  
  69. //make the button roll
  70. document.getElementById("rollBtn").onclick = imgRoll;
  71.  
  72. })();