Refresh LoL Esports' schedule page until the Worlds show begins!

lolesports-wait-for-live.user.js

// ==UserScript==
// @name         Watch the Worlds show as soon as it goes live
// @namespace    http://tampermonkey.net/
// @version      1.1.0
// @description  Refresh LoL Esports' schedule page until the Worlds show begins!
// @author       Eric NICOLAS (ccjmne) <ccjmne@gmail.com>
// @match        https://lolesports.com/schedule*
// @downloadUrl  https://gist.githubusercontent.com/ccjmne/a14bac46ead2af80823ba5f162569c3a/raw/lolesports-wait-for-live.user.js
// @updateurl    https://gist.githubusercontent.com/ccjmne/a14bac46ead2af80823ba5f162569c3a/raw/lolesports-wait-for-live.user.js
// @icon         https://www.google.com/s2/favicons?sz=64&domain=lolesports.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict'

    const REFRESH_AFTER      = 60_000 * 15 // 15 minutes
    const MOUSEMOVE_DEBOUNCE = 1_000 // 1 second

    const feedback = document.createElement('div')
    feedback.style.background   = '#00c8c8'
    feedback.style.color        = 'black'
    feedback.style.position     = 'fixed'
    feedback.style.top          = '0'
    feedback.style.left         = '50%'
    feedback.style.transform    = 'translate(-50%)'
    feedback.style.zIndex       = '99999'
    feedback.style.padding      = '10px 20px'
    feedback.style.borderRadius = '0 0 8px 8px'
    feedback.style.boxShadow    = 'rgb(10, 14, 19) 0px 3px 6px, rgba(0, 200, 300, .75) 0px 3px 6px'
    feedback.style.transition   = 'transform 100ms ease-out'

    function update(countdown) {
        feedback.textContent = countdown > 0
            ? `Refreshing in ${countdown >= 60 ? `${Math.floor(countdown / 60)}' ` : ''}${countdown % 60 ? `${countdown % 60}"` : ''}`
            : 'Refreshing...'
    }

    feedback.addEventListener('mouseenter', () => {
        feedback.style.transform = 'translate(-50%, calc(-100% + 10px))'
        new Promise(resolve => {
            let x, y, timeout = setTimeout(resolve, MOUSEMOVE_DEBOUNCE)
            window.addEventListener('mousemove', ({ clientX, clientY }) => {
                if (x !== clientX || y !== clientY) {
                    clearTimeout(timeout)
                    timeout = setTimeout(resolve, MOUSEMOVE_DEBOUNCE)
                    x = clientX
                    y = clientY
                }
            })
        }).then(() => (feedback.style.transform = 'translate(-50%)'))
    })

    const until = performance.now() + REFRESH_AFTER
    const _ = setInterval(() => {
        const anchor = document.querySelector('a[href*=live][href*=worlds]')
        const remaining = Math.ceil((until - performance.now()) / 1000)
        update(remaining)

        if (remaining <= 0) {
            clearInterval(_)
            window.location.reload()
        }

        if (anchor !== null) {
            clearInterval(_)
            feedback.textContent = 'Have a nice show!'
            setTimeout(() => (feedback.style.transform = 'translate(-50%, calc(-100% - 10px))'), 10_000) // hide after 10 seconds
            anchor.click()
        }
    }, 100)

    update(REFRESH_AFTER / 1000)
    document.body.append(feedback)
})()