dice-tower/src/main/resources/META-INF/resources/app.js

function addDice() {
    let amount = +document.getElementById('dice-amount').innerText
    document.getElementById('dice-amount').innerText = `${amount + 1}`
}

function removeDice() {
    let amount = +document.getElementById('dice-amount').innerText
    if (amount > 1) {
        document.getElementById('dice-amount').innerText = `${amount - 1}`
    }
}

function url() {
    return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
}

function start(event = undefined) {
    if ((!event || event.keyCode === 13) && document.getElementById('name').value.length > 0 && document.getElementById('room').value.length > 0) {
        document.getElementById('overlayId').value = url() + '/overlay/' + document.getElementById('room').value + ':' + localStorage.getItem('userId') + '?scale=7&clearAfter=30';
        document.getElementById('resultsId').value = url() + '/overlay/' + document.getElementById('room').value + '/results';
        document.getElementById('myResultsId').value = document.getElementById('resultsId').value + '?name=' + encodeURIComponent(document.getElementById('name').value) + '&user=' + localStorage.getItem('userId');
        document.getElementById('resultFrame').src = document.getElementById('myResultsId').value;
        document.getElementById('roll').hidden = false;
        document.getElementById('start-container').hidden = true;
        document.getElementById('options-container').hidden = false;
        document.getElementById('dice-tower').hidden = false;
        document.getElementById('name').hidden = true;
        document.getElementById('room').hidden = true;
        document.getElementById('how-to').hidden = true;
        document.getElementById('chatOverlay').hidden = true;
        document.getElementById('results').hidden = false;
        document.getElementById('all-results').hidden = !document.getElementById('gm').checked;
        document.getElementById('all-results-urls').style.display = document.getElementById('gm').checked ? 'fles' : 'none';
        document.getElementById('nameH').innerHTML = '<strong style="font-size:x-large;">' + document.getElementById('name').value + '</strong>';
        document.getElementById('save-dice-hint-name').innerHTML = '<strong>' + document.getElementById('name').value + '</strong>';
        document.getElementById('roomLabel').hidden = true;
        document.getElementById('nameLabel').hidden = true;
        document.getElementById('nameH').hidden = false;
        document.getElementById('room-hint').innerHTML = '<p>Room: <strong style="font-size:medium;">' + document.getElementById('room').value + '</strong></p>';
        document.getElementById('overlayLabel').innerHTML = 'Dice-Overlay for <strong>' + document.getElementById('name').value + '</strong>';
        document.title = document.getElementById('name').value + ' - Dice-Tower';

        localStorage.setItem('last-name', document.getElementById('name').value)
        localStorage.setItem('last-room', document.getElementById('room').value)
        localStorage.setItem('last-gm', document.getElementById('gm').checked)

        if (localStorage.getItem(document.getElementById('name').value + "-theme")) {
            document.getElementById('theme').value = localStorage.getItem(document.getElementById('name').value + "-theme")
        }
        if (localStorage.getItem(document.getElementById('name').value + "-themeColor")) {
            document.getElementById('themeColor').setColor(localStorage.getItem(document.getElementById('name').value + "-themeColor"));
        }

        if (!localStorage.getItem(document.getElementById('name').value + '-started')) {
            document.getElementById('urls-overlay').showPopover();
        }

        localStorage.setItem(document.getElementById('name').value + '-started', "true")

        let httpRequest = new XMLHttpRequest();
        httpRequest.open('POST', url() + '/dice/' + document.getElementById('room').value + '/register')
        httpRequest.setRequestHeader('Content-Type', 'application/json')
        httpRequest.send(JSON.stringify({
            name: document.getElementById('name').value,
            overlay: document.getElementById('overlayId').value,
            id: document.getElementById('room').value + ':' + localStorage.getItem('userId')
        }))
        if (document.getElementById('gm').checked) {
            document.getElementById('resultSwitch').checked = true;
            document.getElementById('resultFrame').src = document.getElementById('resultsId').value;
            const evtSource = new EventSource(url() + '/dice/' + document.getElementById('room').value + '/users');
            evtSource.addEventListener('message', function (event) {
                let data = JSON.parse(event.data);
                if (data.id !== document.getElementById('room').value + ':' + localStorage.getItem('userId')) {
                    let overlays = document.getElementById('overlay-urls');
                    let newOverlay = document.getElementById(data.id) ?? document.createElement('div');
                    newOverlay.replaceChildren(...[]);
                    newOverlay.id = data.id;
                    newOverlay.style.display = "flex";
                    newOverlay.style.flexDirection = "row";
                    newOverlay.style.justifyContent = "space-between";
                    newOverlay.style.alignItems = "baseline";
                    let newLabel = document.createElement('label');
                    newLabel.for = data.id + 'url';
                    newLabel.innerHTML = "Dice-Overlay for <strong>" + data.name + "</strong>";
                    let newInput = document.getElementById('overlayId').cloneNode();
                    newInput.type = "text";
                    newInput.readOnly = true;
                    newInput.id = data.id + 'url';
                    newInput.style.flexGrow = '1';
                    newInput.value = data.overlay;
                    newInput.onclick = () => copyToClipboard(newInput.id)
                    newOverlay.appendChild(newLabel);
                    newOverlay.appendChild(newInput);
                    overlays.appendChild(newOverlay);
                }
                configurePopover();
            });
        }
    }
}

function rollEasy(dice) {
    document.getElementById('command').value = document.getElementById('dice-amount').innerText + dice;
    roll();
}

function roll(event) {
    if ((!event || event.keyCode === 13) && document.getElementById('command').value?.length > 0) {
        let httpRequest = new XMLHttpRequest();
        httpRequest.open('POST', url() + '/dice/' + document.getElementById('room').value + ':' + localStorage.getItem(`userId`))
        httpRequest.setRequestHeader('Content-Type', 'application/json')
        httpRequest.send(JSON.stringify({
            name: document.getElementById('name').value,
            command: document.getElementById('command').value,
            themeColor: document.getElementById('themeColor').value,
            theme: document.getElementById('theme').value
        }))
    }
}

function saveDice() {
    localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
    localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value)
}

function configurePopover() {

    const popover = document.querySelectorAll("[popovertarget][data-trigger='hover']");
    popover.forEach((e) => {

        const target = document.querySelector("#" + e.getAttribute("popovertarget"));
        e.addEventListener("mouseover", () => {
            showSnackbar(target.innerHTML);
        });
        e.addEventListener("mouseout", () => {
            hideSnackbar();
        });

    });
}

function copyToClipboard(id) {
    let copyText = document.getElementById(id);
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(copyText.value).then(() => {
        showSnackbar("<i class='fa-regular fa-copy'></i> Link copied to clipboard: <br/>" + copyText.value);
    })
}

function showSnackbar(message) {
    let snackbar = document.getElementById("snackbar");
    let snackbarContainer = document.getElementById("snackbar-container");
    snackbar.innerHTML = message;
    snackbar.className = "show";
    snackbarContainer.className = "show";
}

function hideSnackbar() {
    let snackbar = document.getElementById("snackbar");
    let snackbarContainer = document.getElementById("snackbar-container");
    snackbar.className = snackbar.className.replace("show", "");
    snackbarContainer.className = snackbarContainer.className.replace("show", "");
}

document.addEventListener("DOMContentLoaded", async () => {
    if (localStorage.getItem('last-name') && localStorage.getItem('last-room')) {
        document.getElementById('name').value = localStorage.getItem('last-name');
        document.getElementById('room').value = localStorage.getItem('last-room');
        document.getElementById('gm').checked = localStorage.getItem('last-gm') === 'true';
    }

    document.getElementById('resultSwitch').addEventListener('change', function () {
        if (!this.checked) {
            document.getElementById('resultFrame').src = document.getElementById('myResultsId').value;
        } else {
            document.getElementById('resultFrame').src = document.getElementById('resultsId').value;
        }
    })

    document.getElementById('chatOverlayLink').href = url() + '/chatoverlay'

    configurePopover();
})