<html>
    <head>
        <title>Charcuterie</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <script type="text/javascript">
        <!--
            let username = "Unknown Ape";

            function playSound(sound) {
                const http = new XMLHttpRequest();
                http.open("POST", `${window.location.origin}/play/${sound}`);
                http.send();
                let action = `${sound}'ed`;
                displayMessage(`You ${action}`);
                socket.send(JSON.stringify({
                    action: action,
                    show: true,
                    actor: username,
                }));
                return false;
            }

            let timeoutHandle;
            let runTimer = false;
            function countdown(minutes) {
                document.getElementById("timer").className = "text-success";
                runTimer = true;
                var seconds = 60;
                var mins = minutes
                function tick() {
                    if (!runTimer) {
                        return;
                    }
                    var counter = document.getElementById("timer");
                    var current_minutes = mins-1

                    if (current_minutes == 0) {
                        counter.className = "text-danger";
                    }
                    seconds--;
                    counter.innerHTML =
                    current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
                    if( seconds > 0 ) {
                        timeoutHandle=setTimeout(tick, 1000);
                    } else {

                        if(mins > 1){

                        // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
                        setTimeout(function () { countdown(mins - 1); }, 1000);

                        }
                    }
                }
                tick();
            }

            function gainEntry() {
                wsConnect();
                username = document.getElementById("username").value;
                document.getElementById("entry").style = "display: none;"
                document.getElementById("board").style = "display: block;"
            }

            function wsConnect() {
                const socket = new WebSocket(`ws://${window.location.hostname}:9078`);
                window.socket = socket;

                socket.onopen = (event) => {
                    console.log('Websocket connected!')
                    socket.send(JSON.stringify({
                        action: "connected",
                        show: true,
                        actor: username,
                    }));
                }
                socket.onerror = (err) => {
                    console.error('Websocket encountered an error:', err)
                    socket.close()
                }
                socket.onclose = (event) => {
                    console.log('Websocket connection lost, retrying..')
                    setTimeout(() => { wsConnect(); }, 5000);
                }

                socket.onmessage = (event) => {
                    const data = JSON.parse(event.data)
                    console.log(data);

                    if (data.action == "start_timer") {
                        countdown(data.time);
                        displayMessage(`${data.actor} started the timer`);
                    }
                    if (data.action == "stop_timer") {
                        runTimer = false;
                        displayMessage(`${data.actor} stopped the timer`);
                    }

                    if (data.show) {
                        displayMessage(`${data.actor} ${data.action}`);
                    }
                };
            }
            function displayMessage(message) {
                const messages = document.getElementById("messages");
                let m = document.createElement('div');
                m.appendChild(document.createTextNode(message));
                messages.insertBefore(m, messages.firstChild);
            }
        -->
        </script>

        {{#if admin}}
            <script type="text/javascript">
            <!--
            function startTimer() {
                window.socket.send(JSON.stringify({
                    actor: username,
                    action: 'start_timer',
                    time: 5,
                }));
                countdown(5);
            }
            function stopTimer() {
                window.socket.send(JSON.stringify({
                    actor: username,
                    action: 'stop_timer',
                }));
                runTimer = false;
            }
            -->
            </script>
        {{else}}
        {{/if}}
    </head>
    <body>
        <div class="container">
            <center>
                <img src="/assets/board.png" />
                <br/>
                A sound board for Meet, get it?
            </center>

            <br clear="all"/>

            <div id="entry" class="container">
                <div class="container">
                    <form action="/" method="GET" onsubmit="gainEntry(); return false;">
                        <input class="w-25" id="username" placeholder="Enter your name"/>
                        <input type="submit" value="Join"/>
                    </form>
                </div>
            </div>

            <div id="board" style="display: none;" class="container">
                <div class="row">
                    <div class="col-8">
                        {{#each sounds}}
                            <input class="w-25 m-2 btn btn-primary" type="button" onclick="return playSound('{{this}}');" value="{{this}}"/>
                        {{/each}}
                    </div>
                    <div class="col-4">
                        <div class="row">
                            Time remaining:&nbsp;
                            <div id="timer" style="font-weight: bold;" class="text-success"></div>
                        </div>
                        <div class="row">
                            <div id="messages"></div>
                        </div>
                    </div>
                </div>

                {{#if admin}}
                    <div class="mt-5 container">
                        <input class="btn btn-danger" type="button" onclick="startTimer();" value="Start time"/>
                        <input class="btn btn-danger" type="button" onclick="stopTimer();" value="Stop time"/>
                        <input class="btn btn-primary" type="button" onclick="return playSound('factorywhistle');" value="Play Factory Whistle"/>
                    </div>
                {{else}}
                {{/if}}
            </div>
        </div>
    </body>
</html>


<!-- 
vim: ft=html
-->
