AO3: [Wrangling] Random Bin Button!!

because what wrangler doesn't need a lil fun in their lives ;)

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

ستحتاج إلى تثبيت إضافة مثل Stylus لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتتمكن من تثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

(لدي بالفعل مثبت أنماط للمستخدم، دعني أقم بتثبيته!)

// ==UserScript==
// @name         AO3: [Wrangling] Random Bin Button!!
// @description  because what wrangler doesn't need a lil fun in their lives ;)
// @version      1.0.3

// @author       owlwinter
// @namespace    N/A
// @license      MIT license

// @match        *://*.archiveofourown.org/tag_wranglers/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const array = f => Array.prototype.slice.call(f, 0)

    //adds random bin button to page
    const unwrangled_label = document.querySelector("#user-page > div.assigned.module > table > thead > tr > th:nth-child(3)");
    const btn = document.createElement("button")
    btn.innerText = "Random bin"
    btn.style.fontSize = "0.627rem"
    btn.style.float = "right"
    unwrangled_label.appendChild(btn)

    let t = 10 //time between each bin selected during the choosing bin animation loop
    let last = null //last bin selected by the choosing bin animation loop (not neccessarily the final winning bin)
    let interval = null; //interval winning bin will pulse at
    let choosing = false; //If button animation is curently ongoing

    //When button is clicked
    btn.addEventListener("click", function(e) {
        //Don't let user click button while our animation is already ongoing
        if (choosing) {
            return;
        }
        choosing = true;
        //resetting anything changed from previous random bin click
        t = 10;
        if (interval != null) {
            clearInterval(interval)
        }
        if (last != null) {
            last.style.backgroundColor = ""
        }
        e.preventDefault()

        //gets all the unwrangled bins (that aren't empty)
        const l = array(document.getElementsByTagName("td")).filter(o => o.title.indexOf("unwrangled") != -1 && o.children.length > 0)

        //let the games begin !!! may the odds be ever in your favor
        const fun = function fun() {
            //This makes the animation get slower and slower (by a factor of 1.4 times slower each loop)
            //So the closer we get to having selected our winning random bin, the longer the currently selected bin is highlighted
            t = t * 1.4

            //Resets the last bin that was temporarily highlighted in the 'choosing bin' animation'
            if (last != null) {
                last.style.backgroundColor = ""
            }

            //Selects the next random unwrangled bin to temporarily highlight in the 'choosing bin' animation', which is highlighted yellow
            last = l[Math.round(Math.random() * (l.length - 1))]
            last.style.backgroundColor = "yellow"

            //The first bin highlighed for more than 500 ms is our winner!
            if (t > 500) {
                //From then on, every 500 ms, the winning bin will pulse between yellow and lime to indicate the victor status
                interval = setInterval(() => {
                    last.style.backgroundColor = last.style.backgroundColor == "lime" ? "yellow" : "lime";
                }, 500);
                choosing = false;
            } else {
                //If the 'random bin' animation hasn't stayed on a bin for 500+ ms yet, we will loop this so that the animation continues
                //Waits t ms until the next iteration of the animation
                //Since we are increasing t each time we loop, this will make the animation get slower and slower
                setTimeout(fun, t)
            }
        }
        //What calls our fun function the first time
        setTimeout(fun, t);
    });

    // Your code here...
})();