42 lines
2.2 KiB
HTML
42 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Results</title>
|
|
</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" && "{user}" === "all" || "{name}" === data.name && "{user}" === data.user || "{name}" === "all" && "{user}" === data.user || "{name}" === data.name && "{user}" === "all") {
|
|
let name = document.getElementById(data.user + '-' + data.name) ?? document.createElement('div');
|
|
name.id = data.user + '-' + data.name;
|
|
name.replaceChildren(...[]);
|
|
let node = document.createElement('p');
|
|
let resultText = ''
|
|
if (!data.results) {
|
|
resultText = ' rolling...'
|
|
} else {
|
|
data.results.forEach(result => {
|
|
let values = []
|
|
result.rolls.forEach(roll => {
|
|
values.push(roll.value);
|
|
})
|
|
resultText += '<br/>  D' + result.sides + ': [' + values.map(value => value === 1 ? '<strong style="color: red">' + value + '</strong>' : value === result.sides ? '<strong style="color: 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 style="font-size: x-large">' + result.value + '</strong> '
|
|
})
|
|
}
|
|
node.innerHTML = '<strong style="text-shadow: 2px 2px 10px ' + data.themeColor + ';">' + data.name + ':</strong> 🎲 ' + resultText
|
|
name.appendChild(node)
|
|
document.getElementById('results').insertBefore(name, document.getElementById('results').firstChild);
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|