rordenerena / Trello seguimiento firefox

// ==UserScript==
// @name     Trello seguimiento firefox
// @version  1
// @grant    none
// @match		 https://trello.com/*
// @require  https://code.jquery.com/jquery-3.6.0.min.js
// @license     MIT
// ==/UserScript==

    var width = 18;
    var height = 30;
    var cols = parseInt(100 / width);

    function haz() {
        if ($(".roe").length == 0) {
            let text = "";
            let counter = 0;
            $(".roe").remove();
            $(".roeboard").removeClass("roeboard");
            $(".roelist-wrapper").removeClass("roelist-wrapper");

            $("#board").addClass("roeboard");
            $(".list-wrapper").addClass("roelist-wrapper");
            // $(".list-wrapper").resizable();

            $("h2.list-header-name-assist").each(function (index, element) {
                let eltext = $(element).text();
                eltext = eltext.split("]")[0];

                let bro = $(element).parent().parent().parent();

                if (text == "") {
                    text = eltext;
                } else if (text != eltext) {
                    text = eltext;
                    let space = (cols - (counter % cols)) * width % (cols * width);
                    /*console.log(cols + " - (" + counter + " % " + cols + ") * " + width + " = " + space);*/

                    let sp = $("<div class=\"roe js-list list-wrapper\" style=\"position:relative;float:left;width:" + space + "vw;height: " + height + "vh;\">");
                    let line = $("<div class=\"roe js-list list-wrapper\" style=\"position:relative;margin-top: 10px;float:left;width:95vw;background-color: white;height: 20px;font-weight: bold; font-size: 1.5em;text-align:center;\">").text(text.split("[")[1]);
                    bro.before(sp);
                    bro.before(line);
                    counter = 0;
                }
                counter++;
            });
        }
    }
    var bPausa = true;

    var parapisha = function () {
        bPausa = !bPausa;
        if (bPausa) {
            $(".roe").remove();
            $(".roeboard").removeClass("roeboard");
            $(".roelist-wrapper").removeClass("roelist-wrapper");
        }
    }



    setTimeout(function () {
        var style = $("<style>");
      
        style.text(`
        :root {
            --roe-width: ${width};
            --roe-height: ${height}vh;
            --roe-cols: ${cols};
        }

        .roeboard {
            user-select: none !important;
            white-space: nowrap !important;
            margin-bottom: 8px !important;
            overflow-x: visible !important;
            overflow-y: visible !important;
            padding-bottom: 8px !important;
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
        }

        .roelist-wrapper {
            width: var(--roe-width)vw !important;
            margin-right: 4px !important;
            margin-left: 8px !important;
            height: var(--roe-height) !important;
            box-sizing: border-box !important;
            display: inline-block !important;
            vertical-align: top !important;
            white-space: nowrap !important;
            float: left !important;
            margin-top: 10px !important;
        }
        `);
        $("head").append(style);
        let btnPause = $("<button>").attr("type", "button").css({
            position: "fixed",
            top: "0px",
            left: "55%",
            zIndex: 99
        }).click(parapisha).text("Play/Pause custom");
        $("body").append(btnPause);

        setInterval(() => {
            if (!bPausa) {
                haz();
            }
        }, 1000);

    }, 5000);