<!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: 25px">
            <option value="default">Default</option>
            <option value="blueGreenMetal">Blue-Green Metal</option>
            <option value="diceOfRolling">Dice of Rolling</option>
            <option value="gemstone">Gemstone</option>
            <option value="gemstoneMarble">Marble Gemstone</option>
            <option value="rock">Rock</option>
            <option value="rust">Rust</option>
            <option value="smooth">Smooth</option>
            <option value="wooden">Wooden</option>
        </select>
        <color-picker id="themeColor"></color-picker>
        <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>
        </div>
        <div>
            <label for="scale">Dice-Scale </label>
            <input type="number" id="scale" style="width: 50px; margin-top: 20px" value="9"/>
            <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"/>
        </div>
        <div id="dice-box" style="height: 400px"></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.es.js";

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

    document.addEventListener("DOMContentLoaded", async () => {
        document.getElementById('preview').onclick = async () => {
            document.getElementById('dice-box').replaceChildren(...[])
            const diceBox = new DiceBox("#dice-box", {
                assetPath: "/vendor/assets/",
                theme: document.getElementById('theme').value,
                themeColor: document.getElementById('themeColor').value,
                scale: +document.getElementById('scale').value
            });
            await diceBox.init()
            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 +
                    "&themeColor=" + encodeURIComponent(document.getElementById('themeColor').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
        }
    })
</script>
</body>
</html>
