49 lines
1.5 KiB
HTML
49 lines
1.5 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-threejs.es.js";
|
|
|
|
const evtSource = new EventSource(url() + "/dice/{diceid??}/stream");
|
|
const diceBox = new DiceBox("#dice-box", {
|
|
assetPath: "/vendor/dice-box/",
|
|
light_intensity: 2,
|
|
gravity_multiplier: 600,
|
|
baseScale: {scale} * 10,
|
|
strength: Math.floor(Math.random() * 4),
|
|
});
|
|
diceBox.initialize();
|
|
let timeout = 0;
|
|
evtSource.addEventListener("message", function (event) {
|
|
clearInterval(timeout);
|
|
let data = JSON.parse(event.data);
|
|
diceBox.onRollComplete = () => {
|
|
if ({clearAfter} > 0) {
|
|
timeout = setTimeout(() => diceBox.clearDice(), {clearAfter} * 1000)
|
|
}
|
|
}
|
|
diceBox.updateConfig({
|
|
theme_customColorset: {
|
|
texture: data.theme,
|
|
background: data.faceColor,
|
|
foreground: data.numberColor
|
|
}
|
|
}).then(() => {
|
|
diceBox.roll(data.roll.filter(it => it.split('@')[0].split('d')[1] !== "2").join('&'));
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|