71 lines
2.2 KiB
HTML
71 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Dice-Tower - Overlay</title>
|
|
<link rel="icon" type="image/png" href="/favicon.png">
|
|
<link rel="stylesheet" href="/overlay/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="dice-box"></div>
|
|
<script type="module">
|
|
function url() {
|
|
return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
|
|
}
|
|
|
|
import DiceBox from "/vendor/dice-box/dice-box.es.js";
|
|
|
|
const evtSource = new EventSource(url() + "/dice/{diceid??}/stream");
|
|
const diceBox = new DiceBox("#dice-box", {
|
|
assetPath: "/vendor/assets/",
|
|
theme: 'default',
|
|
preloadThemes: [
|
|
'default',
|
|
'blueGreenMetal',
|
|
'diceOfRolling',
|
|
'gemstone',
|
|
'gemstoneMarble',
|
|
'rock',
|
|
'rust',
|
|
'smooth',
|
|
'wooden'
|
|
],
|
|
scale: {scale}
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
await diceBox.init()
|
|
|
|
let timeout = 0;
|
|
evtSource.addEventListener("message", function (event) {
|
|
clearInterval(timeout);
|
|
let data = JSON.parse(event.data);
|
|
diceBox.onRollComplete = (rollResult) => {
|
|
let httpRequest = new XMLHttpRequest();
|
|
httpRequest.open('POST', url() + '/dice/' + data.room + '/results')
|
|
httpRequest.setRequestHeader('Content-Type', 'application/json')
|
|
httpRequest.send(JSON.stringify({
|
|
name: data.name,
|
|
user: data.user,
|
|
themeColor: data.themeColor,
|
|
results: rollResult,
|
|
}))
|
|
if ({clearAfter} >
|
|
0
|
|
)
|
|
{
|
|
timeout = setTimeout(() => diceBox.clear(), {clearAfter} * 1000
|
|
)
|
|
}
|
|
|
|
}
|
|
diceBox.roll(data.roll, {
|
|
theme: data.theme?.length > 0 ? data.theme : 'default',
|
|
themeColor: data.themeColor.length > 0 ? data.themeColor : '#4545FF'
|
|
});
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|