<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dice-Tower</title>
    <meta name="version" content="{version}">
    <link rel="manifest" href="manifest.json" />
    <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>
    <script type="module" src="/dice-preview.js"></script>
    <script type="text/javascript" src="/app.js"></script>

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Dice-Tower">
    <meta name="twitter:image" content="{http:request.scheme}://{http:request.authority}/rich.png">
    <meta name="description" content="Easy to use online dice rolling with customizable overlays.">
    <meta name="twitter:description" content="Easy to use online dice rolling with customizable overlays.">
    <meta property="og:url" content="{http:request.absoluteURI}">
    <meta property="og:image" content="{http:request.scheme}://{http:request.authority}/rich.png">
    <meta property="og:description" content="Easy to use online dice rolling with customizable overlays.">
    <meta property="og:title" content="Dice-Tower">
    <meta property="og:site_name" content="Dice-Tower">
    <meta property="og:type" content="website">
    <meta property="twitter:url" content="{http:request.absoluteURI}">
    <meta property="twitter:domain" content="{http:request.authority}">
</head>
<body class="w3-theme-l1">
<script>
    if (!localStorage.getItem("userId")) {
        localStorage.setItem("userId", self.crypto.randomUUID());
    }
    addEventListener("beforeinstallprompt", (event) => {
        event.preventDefault()
        let install = document.createElement('button');
        install.id = 'install'
        install.style.position = 'absolute'
        install.style.top = '25px'
        install.style.right = '25px'
        install.innerHTML = 'Install Dice-Tower'
        install.onclick = () => event.prompt()
        document.body.appendChild(install)
    });
</script>
<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 <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; margin-bottom: auto;">
        <h2 id="nameH" popovertarget="room-hint" data-trigger="hover" style="margin: 0" hidden>Name</h2>
        <div>
            <label for="name" id="nameLabel">Name </label>
            <input type="text" id="name" style="width: 50%; margin-top: 20px" required onkeyup="start(event)"/>
        </div>
        <div>
            <label for="room" id="roomLabel">Room </label>
            <input type="text" id="room" style="width: 50%" required onkeyup="start(event)"/>
        </div>
        <div id="start-container">
            <div>
                <button id="start" onclick="start()" style="align-self: center; margin-top: 20px">Join <i
                        class="fa-solid fa-right-to-bracket"></i></button>
                <label class="checkbox" id="gm-container">Join as GM
                    <input type="checkbox" id="gm">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>
        <div id="options-container" hidden style="position: absolute; right: 25px; top: 5px">
            <button id="customize" popovertarget="customize-overlay" style="align-self: center; margin-top: 20px"><i class="fa-solid fa-palette"></i>
            </button>
            <button id="urls" popovertarget="urls-overlay" style="align-self: center; margin-top: 20px"><i class="fa-solid fa-link"></i></button>
        </div>
    </div>
    <div id="dice-tower" hidden class="w3-panel w3-theme-l4 w3-card w3-display-container"
         style="padding: 25px; margin-bottom: auto">

        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 10px; padding-right: 25px; padding-left: 25px">
            <label style="font-size: large; font-weight: bold; margin: 10px">Roll </label>
            <button style="border: transparent; border-radius: 100%; font-size: large; font-weight: bold; height: 50px; width: 50px"
                    onclick="removeDice()">-
            </button>
            <label style="font-size: large; font-weight: bold" id="dice-amount">1</label>
            <button style="border: transparent; border-radius: 100%; font-size: large; font-weight: bold; height: 50px; width: 50px"
                    onclick="addDice()">+
            </button>
            <!--<button style="font-size: large; font-weight: bold;" onclick="rollEasy('d2')">D2</button><-->
            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d4')">D4</button>
            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d6')">D6</button>
            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d8')">D8</button>
            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d10')">D10</button>
            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d12')">D12</button>
            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d20')">D20</button>
            <button style="font-size: large; font-weight: bold;" onclick="rollEasy('d100')">D100</button>
        </div>
        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 20px 25px 0;">
            <label for="command">Command </label>
            <input popovertarget="command-hint" data-trigger="hover" type="text" id="command" style="flex-grow: 1" onkeyup="roll(event)"/>
            <button hidden id="roll" onclick="roll()">Roll <i class="fa-solid fa-dice"></i></button>
            <div style="margin: 20px 25px" id="all-results">
                <label for="resultSwitch">Show all results </label>
                <label class="switch">
                    <input type="checkbox" id="resultSwitch">
                    <span class="slider"></span>
                </label>
            </div>
        </div>


    </div>
    <div id="results" hidden class="w3-panel w3-theme-l6 w3-card w3-display-container"
         style="padding: 25px; flex-grow: 1; margin-bottom: auto">
        <iframe id="resultFrame" title="results" style="width: 100%; height: 100%; overflow: hidden; border: 0"></iframe>
        <label for="resultDiceSwitch" style="position: absolute; top: 25px; right: 95px">Show dice </label>
        <label class="switch" style="position: absolute; top: 25px; right: 25px; z-index: 5">
            <input type="checkbox" id="resultDiceSwitch">
            <span class="slider"></span>
        </label>
        <div id="results-dice" hidden>
            <iframe id="diceFrame" title="dice" style="width: 50%; height: 100%; overflow: hidden; border: 0; z-index: 4; position: absolute; top: 0; left: 50%"></iframe>
        </div>
    </div>

    <div popover id="urls-overlay" class="tooltip" style="width: 600px">
        <div id="overlay-urls">
            <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
                <label for="overlayId" id="overlayLabel">Dice-Overlay </label>
                <input popovertarget="overlay-hint" data-trigger="hover" type="text" readonly id="overlayId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
            </div>
        </div>
        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;"
             hidden id="all-results-urls">
            <label for="resultsId">All-Results-Overlay </label>
            <input popovertarget="all-results-hint" data-trigger="hover"  type="text" readonly id="resultsId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
        </div>
        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;">
            <label for="myResultsId">My-Results-Overlay </label>
            <input popovertarget="my-results-hint" data-trigger="hover" type="text" readonly id="myResultsId" style="flex-grow: 1" onclick="copyToClipboard(this.id)"/>
        </div>
    </div>
    <div popover id="customize-overlay" class="tooltip" style="width: 680px;">
        <div style="text-align: center;">
            <label for="theme">Theme </label>
            <select name="theme" id="theme" style="margin: 0 25px"></select>
        </div>
        <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="#8d8981"></color-picker>
            </div>
            <div style="flex-grow: 1; padding: 10px 0">
                <color-picker id="numberColor" name="Numbers" value="black"></color-picker>
            </div>
        </div>
        <div id="dice-box">
            <div id="app"></div>
        </div>

        <button style="margin: 10px" id="preview">Preview <i class="fa-solid fa-magnifying-glass"></i></button>
        <button popovertarget="save-dice-hint" data-trigger="hover" style="margin: 10px" onclick="saveDice()">Save <i class="fa-solid fa-floppy-disk"></i></button>
    </div>
    <div hidden id="overlay-hint">
        <div style="text-align: left">
            <p>Query Params you can Change:</p>
            <ul>
                <li><strong>scale</strong> changes the size of the dice (any value over 1)</li>
                <li><strong>clearAfter</strong> time until dice are cleared (in seconds; remove param or set -1 to keep the
                    dice)
                </li>
            </ul>
        </div>
    </div>

    <div hidden id="all-results-hint">
        <p>Shows all Results in this room</p>
    </div>
    <div hidden id="my-results-hint">
        <p>Shows only my Results in this room</p>
    </div>
    <div hidden id="save-dice-hint">
        <p>This saves your current theme and theme color for <a id="save-dice-hint-name"></a></p>
    </div>
    <div hidden id="command-hint">
        <p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
    </div>
    <div hidden id="room-hint">
        <p>How is your character called?</p>
    </div>
    <div hidden id="madeby-hint">
        <p>
            made by Arindy<br/>
            Click to go to source
        </p>
    </div>

    <div style="margin-top: 20px" id="how-to">
        <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px;">
            <h2 style="text-align: center">How-To</h2>
            <ul>
                <li>
                    Join a room by entering your character name and the name of the room
                </li>
                <li>Open your Dice-Overlay either in a new Tab or as a browser source in OBS</li>
                <ul>
                    <li>You can configure your Overlay with query parameters (for more information hover over the link)
                    </li>
                </ul>
                <li>Configure your dice</li>
                <li>Save your dice configuration</li>
                <li>Start rolling</li>
            </ul>
        </div>
    </div>
    <div style="margin-top: 20px; flex-grow: 1" id="chatOverlay">
        <div class="w3-panel w3-theme-l4 w3-card w3-display-container" style="padding: 25px; margin-bottom: auto">
        If you are looking for a way to let your twitch chat roll click <a href target="_blank" id="chatOverlayLink">here</a>
        </div>
    </div>
</div>
<div id="snackbar-container">
    <div id="snackbar">.. they see them rolling</div>
</div>
</body>
<footer class="w3-theme-l1 w3-center">
    <a popovertarget="madeby-hint" data-trigger="hover" href="https://git.arindy.de/arindy/dice-tower" target="_blank" class="w3-hover-text-black">Version {version}</a>
</footer>
</html>
