<!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>
