<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dice-Tower - Chatoverlay</title>
    <link rel="stylesheet" href="/vendor/w3css/4/w3.css">
    <link rel="stylesheet" href="/vendor/font-awesome/css/fontawesome.css">
    <link rel="stylesheet" href="/vendor/font-awesome/css/all.css">
    <link rel="stylesheet" href="/style.css">
    <link rel="icon" type="image/png" href="/favicon.png">
    <script src="/vendor/color-picker.js"></script>
</head>
<body class="w3-theme-l1">

<div class="w3-container w3-content"
     style="height: 95vh; display: flex; flex-direction: column; justify-content: space-between;  padding: 25px">
    <h1 style="text-align: center"><i class="fa-solid fa-dice-d20"></i> Dice-Tower - Chatoverlay <i
            class="fa-solid fa-dice-d20"></i></h1>
    <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; text-align: center;">
        <p>Allows Chat to roll a given amount of one dice</p>
        <p>Example: "!roll 5d20"</p>
    </div>
    <div class="w3-panel w3-theme-l4 w3-card w3-display-container"
         style="padding: 25px; text-align: center; margin-bottom: auto;">
        <label for="theme">Theme </label>
        <select name="theme" id="theme" style="margin: 0 25px"></select>

        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline">
            <div style="flex-grow: 1; padding: 0 10px">
                <color-picker id="faceColor" name="Face" value="black"></color-picker>
            </div>
            <div style="flex-grow: 1; padding: 10px 0">
                <color-picker id="numberColor" name="Numbers" value="white"></color-picker>
            </div>
        </div>
        <div>
            <label for="channel">Channel </label>
            <input type="text" id="channel" style="width: 400px; margin-top: 20px" value="arindy"/>
            <label for="cmd">Command !</label>
            <input type="text" id="cmd" style="width: 100px; margin-top: 20px; margin-left: 0" value="roll"/>
        </div>
        <div>
            <label class="checkbox" id="modsAllowed-container">Allow mods to roll
                <input type="checkbox" id="modsAllowed">
                <span class="checkmark"></span>
            </label>
            <label class="checkbox" id="vipAllowed-container">Allow VIPs to roll
                <input type="checkbox" id="vipAllowed">
                <span class="checkmark"></span>
            </label>
            <label class="checkbox" id="subsAllowed-container">Allow subs to roll
                <input type="checkbox" id="subsAllowed">
                <span class="checkmark"></span>
            </label>
            <label class="checkbox" id="allAllowed-container">Allow everyone to roll (yes, everyone!!)
                <input type="checkbox" id="allAllowed">
                <span class="checkmark"></span>
            </label>
        </div>
        <div>
            <label for="scale">Dice-Scale </label>
            <input type="number" id="scale" style="width: 50px; margin-top: 20px" value="15"/>
            <label for="maxDice">Max number of dice </label>
            <input type="number" id="maxDice" style="width: 50px; margin-top: 20px" value="20"/>
        </div>
        <div>
            <label for="clearAfter">Clear dice after (in seconds)</label>
            <input type="number" id="clearAfter" style="width: 50px; margin-top: 20px" value="10"/>
            <label for="timeout">Command-timeout (in seconds)</label>
            <input type="number" id="timeout" style="width: 50px; margin-top: 20px" value="60"/>
            <label class="checkbox" id="showResults-container">Show Results Overlay
                <input type="checkbox" id="showResults" checked>
                <span class="checkmark"></span>
            </label>
        </div>

        <div id="dice-box" style="width: 850px; height: 400px">
            <div id="app"></div>
        </div>
        <button style="margin: 10px" id="preview">Preview <i class="fa-solid fa-magnifying-glass"></i></button>
        <button style="margin: 10px" id="generate">Generate overlay-link <i class="fa-solid fa-link"></i></button>
        <div>
            <input type="text" readonly id="link" style="width: 80%; margin-top: 20px"
                   onclick="copyToClipboard(this.id)"/>
        </div>
    </div>
</div>
<div id="snackbar-container">
    <div id="snackbar">.. they see them rolling</div>
</div>
<script>
    function copyToClipboard(id) {
        let copyText = document.getElementById(id)
        if (copyText.value.length > 0) {
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value).then(() => {
                showSnackbar("<i class='fa-regular fa-copy'></i> Link copied to clipboard: <br/>" + copyText.value);
            })
        }
    }

    function showSnackbar(message) {
        let snackbar = document.getElementById("snackbar");
        let snackbarContainer = document.getElementById("snackbar-container");
        snackbar.innerHTML = message;
        snackbar.className = "show";
        snackbarContainer.className = "show";
        setTimeout(() => {
            snackbar.className = "";
            snackbarContainer.className = "";
        }, 3000)
    }
</script>
<script type="module">
    import DiceBox from "/vendor/dice-box/dice-box-threejs.es.js";
    let diceBox

    const Themes = {
        cloudy: {
            name: "Clouds (Transparent)"
        },
        cloudy_2: {
            name: "Clouds"
        },
        fire: {
            name: "Fire"
        },
        marble: {
            name: "Marble"
        },
        water: {
            name: "Water"
        },
        ice: {
            name: "Ice"
        },
        paper: {
            name: "Paper"
        },
        speckles: {
            name: "Speckles"
        },
        glitter: {
            name: "Glitter"
        },
        glitter_2: {
            name: "Glitter (Transparent)"
        },
        stars: {
            name: "Stars"
        },
        stainedglass: {
            name: "Stained Glass"
        },
        wood: {
            name: "Wood"
        },
        metal: {
            name: "Stainless Steel"
        },
        skulls: {
            name: "Skulls"
        },
        leopard: {
            name: "Leopard"
        },
        tiger: {
            name: "Tiger"
        },
        cheetah: {
            name: "Cheetah"
        },
        dragon: {
            name: "Dragon"
        },
        lizard: {
            name: "Lizard"
        },
        bird: {
            name: "Bird"
        },
        astral: {
            name: "Astral Sea"
        },
        bronze01: {
            name: "Bronze 1"
        },
        bronze02: {
            name: "Bronze 2"
        },
        bronze03: {
            name: "Bronze 3"
        },
        bronze03a: {
            name: "Bronze 3a"
        },
        bronze03b: {
            name: "Bronze 3b"
        },
        bronze04: {
            name: "Bronze 4"
        },
        none: {
            name: "none"
        }
    }

    function url() {
        return window.location.protocol + '//' + window.location.hostname + (window.location.port?.length > 0 ? ':' + window.location.port : '');
    }

    document.addEventListener("DOMContentLoaded", async () => {
        const themeSelector = document.getElementById('theme');
        for (const theme in Themes) {
            let option = document.createElement('option');
            option.value = theme;
            option.innerText = Themes[theme].name;
            themeSelector.appendChild(option);
        }
        themeSelector.value = 'cloudy';
        document.getElementById('preview').onclick = async () => {
            document.getElementById('app').replaceChildren(...[])
            diceBox = new DiceBox("#app", {
                assetPath: "/vendor/dice-box/",
                light_intensity: 2,
                gravity_multiplier: 600,
                baseScale: 120,
                strength: Math.floor(Math.random() * 4),
            });
            await diceBox.initialize();
            diceBox.clearDice();
            await diceBox.updateConfig({
                theme_customColorset: {
                    background: document.getElementById('faceColor').value,
                    foreground: document.getElementById('numberColor').value,
                    texture: document.getElementById('theme').value
                }
            });
            await diceBox.roll('1d2 & 1d4 & 1d6 & 1d8 & 1d10 & 1d12 & 1d20 & 1d100');
        }
        document.getElementById('generate').onclick = async () => {
            document.getElementById('link').value = url() +
                    "/chatoverlay/" + document.getElementById('channel').value +
                    "?cmd=" + document.getElementById('cmd').value +
                    "&theme=" + document.getElementById('theme').value +
                    "&faceColor=" + encodeURIComponent(document.getElementById('faceColor').value) +
                    "&numberColor=" + encodeURIComponent(document.getElementById('numberColor').value) +
                    "&scale=" + document.getElementById('scale').value +
                    "&maxDice=" + document.getElementById('maxDice').value +
                    "&clearAfter=" + document.getElementById('clearAfter').value +
                    "&timeout=" + document.getElementById('timeout').value +
                    "&modsAllowed=" + document.getElementById('modsAllowed').checked +
                    "&vipAllowed=" + document.getElementById('vipAllowed').checked +
                    "&subsAllowed=" + document.getElementById('subsAllowed').checked +
                    "&allAllowed=" + document.getElementById('allAllowed').checked +
                    "&showResults=" + document.getElementById('showResults').checked
        }
    })
</script>
</body>
</html>
