<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dice-Tower - Results</title>
    <link rel="stylesheet" href="/vendor/font-awesome/css/fontawesome.css">
    <link rel="stylesheet" href="/vendor/font-awesome/css/all.css">
    <link rel="icon" type="image/png" href="/favicon.png">
</head>
<body>
<div id="results" style="font-size: x-large"></div>
<script type="module">
    function url() {
        return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
    }

    const evtSource = new EventSource(url() + '/dice/{room}/results');
    evtSource.addEventListener('message', function (event) {
        let data = JSON.parse(event.data);
        if ("{name}" === "all" || "{name}" === data.name) {
            let name = document.getElementById(data.name) ?? document.createElement('div');
            name.id = data.name;
            name.replaceChildren(...[]);
            let node = document.createElement('p');
            let resultText = ''
            if (!data.results) {
                resultText = ' <i class="fa-solid fa-dice"></i>'
            } else {
                data.results.forEach(result => {
                    let values = []
                    result.rolls.forEach(roll => {
                        values.push(roll.value);
                    })
                    resultText += '<br/><strong>&ensp; D' + result.sides + '</strong>: [' + values.map(value => value === 1 ? '<strong style="text-shadow: 2px 2px 10px red">' + value + '</strong>' : value === result.sides ? '<strong style="text-shadow: 2px 2px 10px green">' + value + '</strong>' : value).join(' + ') + (result.modifier > 0 ? ' <a style="text-decoration: underline">+' + result.modifier + '</a>' : result.modifier < 0 ? ' <a style="text-decoration: underline">' + result.modifier + '</a>' : '') + '] = <strong>' + result.value + '</strong> '
                })
            }
            node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.faceColor + ';">' + data.name + ':</strong> ' + resultText
            name.appendChild(node)
            document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild);
        }
    })
</script>
</body>
</html>
