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