function request(url, callback) {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                callback(xhr.responseText);
            }
        }
    };

    xhr.open('GET', url, true);
    xhr.send(null);
}

function refreshElement(element, url) {
    request(url, (response) => { element.innerHTML = response });
}

function isRunning(callback) {
    request('is-running', (response) => {
        callback(response === 'yes');
    });
}

function refresh() {
    refreshElement(document.getElementById('leaderboard'), 'leaderboard');
    refreshElement(document.getElementById('battles'), 'battles');
}


function watch() {
    isRunning((running) => {
        if (running) {
            setTimeout(watch, 1000);
        } else {
            isCurrentlyRunning = false;
            refresh();
            runningElement.style.display = "None";
        }
    });
}

function updateDots() {
    dotsElement.innerHTML += ".";
    if (dotsElement.innerHTML === "....") {
        dotsElement.innerHTML = ".";
    }
    if (isCurrentlyRunning) {
        setTimeout(updateDots, 500);
    }
}

let runningElement = document.getElementById('running');
let dotsElement = document.getElementById('dots');
let isCurrentlyRunning = runningElement.style.display === '';

if (isCurrentlyRunning) {
    watch();
    updateDots();
}