<!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">
    import DiceBox from "/vendor/dice-box/dice-box.es.js";
    const evtSource = new EventSource(window.location.protocol + "//" + window.location.hostname + ':' + window.location.port + "/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: 7
    });

    document.addEventListener("DOMContentLoaded", async() => {
        await diceBox.init()

        evtSource.addEventListener("message", function (event) {
            let data = JSON.parse(event.data);
            diceBox.onRollComplete = (rollResult) => {
                console.log(rollResult)
                let httpRequest = new XMLHttpRequest();
                httpRequest.open('POST',window.location.protocol + '//' + window.location.hostname + ':' + window.location.port + '/dice/' + data.room + '/results')
                httpRequest.setRequestHeader('Content-Type', 'application/json')
                httpRequest.send(JSON.stringify({
                    name: data.name,
                    results: rollResult,
                } ))
            }
            diceBox.roll(data.roll, { theme: data.theme?.length > 0 ? data.theme : 'default', themeColor: data.themeColor.length > 0 ? data.themeColor : '#4545FF' });


        })
    })
</script>
</body>
</html>
