87 lines
2.6 KiB
HTML
87 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Overlay</title>
|
|
<style>
|
|
html,
|
|
body {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
#dice-box {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
background-size: cover;
|
|
}
|
|
|
|
#dice-box canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
</style>
|
|
</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()
|
|
|
|
evtSource.addEventListener("message", function (event) {
|
|
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) {
|
|
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>
|