Thimen24 Timers Grease/Tamper - Monkey

// ==UserScript==
// @name        Thimen24 Timers
// @author      NepSuss
// @version     2
// @grant       none
// @include     http*://www.twitch.tv/thimen24*
// @include     https://www.twitch.tv/popout/thimen24/*
// ==/UserScript==

//Put the commands you want timer for inside here.
//Don't include '!'
const cooldowns = {
    /*
    command: cooldown(in minutes)
    */
    'gamble': 5,
    'heist': 7,
    'give': 1,
    'request': 1
};


/*DO NOT CHANGE ANYTHING BELOW THIS POINT IF YOU DON'T KNOW WHAT YOU ARE DOING*/
window.onload = ()=>{// When page is fully loaded
    //Find known elements on the page
    const $chatMsg = document.querySelector('textarea[data-a-target=chat-input]');
    const $sndBtn = document.querySelector('button[data-a-target=chat-send-button]');
    const $container = document.querySelector('div[data-test-selector=chat-input-buttons-container]');

    //Create our own timer element
    const $timerDiv = document.createElement('div');
    $timerDiv.className = "tw-align-content-center tw-align-items-center tw-flex tw-flex-row";
    $container.insertBefore($timerDiv, $container.children[$container.children.length-1]);

    //Functuon for updating color when a command is used
    const updateColor = () => {
        let cmd = $chatMsg.value.match(RegExp("^!("+Object.keys(cooldowns).join('|')+")"));
        if(cmd){
            localStorage[cmd[1]] = Date.now() + (cooldowns[cmd[1]] * 6e4);
            let el = document.getElementById(cmd[1]);
            el.style.color = "darkred";
            el.style.fontWeight = "normal";
        }
    };

    //For each of the commands defined in 'cooldowns'
    Object.keys(cooldowns).forEach(e=>{

      //If localstorage[command] is undefined
      if(!localStorage[e]){
        //Set it to max cooldown the first time the script is ran
        localStorage[e] = Date.now() + cooldowns[e] * 6e4;
      }

      //Creation of a div element for this command
        let el = document.createElement('div');

        //Set attributes for the command element
        el.id = e;
        el.className = "tw-relative";
        el.innerText = "!"+e;
        el.style.margin = "0 .5em";
        el.style.color = localStorage[e] > Date.now() ? 'darkred':'green';
        el.style.fontWeight = localStorage[e] > Date.now() ? 'normal':'bold';

        //Append(insert) this element to our timer element
        $timerDiv.appendChild(el);
    });

    //Attatch eventlisteners too see if a command is used
    $sndBtn.addEventListener('click',updateColor);//If the purple "Chat" button is clicked, run the updateColor function
    $chatMsg.addEventListener('keydown', e=>{//If a key is pressed inside the textarea  (chat-input)
        if(e.keyCode === 13) updateColor(); //If te keycode is 13 (Enter key is pressed), run the updateColor function
    });

    setInterval(()=>{//Run theese lines for all the command divs in an interval of 1000ms (1e3) too see if a
        Object.keys(cooldowns).forEach(e=>{
            if(localStorage[e] < Date.now()){
                let el = document.getElementById(e);
                el.style.color = "green";
                el.style.fontWeight = "bold";
            }
        });
    },1e3);
};