{{ block title }}
Voting
{{ endblock }}
{{ block content }}

<p>
    Your goal is to score as many points as possible as a group. The other members of your group are playing the same game as you, but with different codes. If you want to, you can commhnicate in the chat box, including sending codes. 
</p>

<p>
    Click the button to reveal a code.
</p>


<p>Clicks required to reveal a code: <span id="clicks-required">10</span>

<button type="button" id="clicker">Click Me!</button>

<h3 id="latest_code">-</h3>

<p>Enter codes below to increase your points. These can be your own generated code or from your teammates</p>

  <label for="code-input">Code:</label>
  <input type="text" id="code-input" name="code-input"><br><br>
  <button type="button" id="code-input-submit">Submit</button>

<p>Your current points are: 0</p>

<p>You will see the rest of your group's points at the end of the game</p>

<table class="table table-striped">
    <tr>
        <th>Choice</th>
        <th>My vote</th>
        <th>Voters</th>
    </tr>
    {{ for choice in C.CHOICES }}
    <tr>
        <th>{{ choice }} points</th>
        <td>
            <input type="radio" name="my-vote" value="{{ choice }}" id="radio-{{ choice }}" onclick="vote(this)">
        </td>
        <td>
            <ul id="votes-for-{{ choice }}" class="clear-on-redraw"></ul>
        </td>
    </tr>
    {{ endfor }}
</table>
<h4>Undecided players</h4>
<ul id="undecided" class="clear-on-redraw"></ul>

<h4>Chat with teammates</h4>
{{ chat }}

<script>

    var clicksRequired = 10;
    console.log(clicksRequired);

    let redrawableNodes = document.getElementsByClassName('clear-on-redraw');

    function vote(btn) {
        liveSend({vote: parseInt(btn.value)});
    }

    function liveRecv(data) {
        if ('finished' in data) {
            document.getElementById('form').submit();
        }

        if ('votes' in data) {
            for (let ele of redrawableNodes) {
                ele.innerHTML = '';
            }
            for (let [id_in_group, vote] of data.votes) {
                let playerName = `Participant ${id_in_group}`;
                let isMe = id_in_group === js_vars.my_id;
                let isNull = vote === null;
                if (isMe) {
                    playerName += ' (me)';
                    if (!isNull) {
                        document.getElementById(`radio-${vote}`).checked = true;
                    }
                }
                let bulletListId = isNull ? 'undecided' : `votes-for-${vote}`;
                let bulletList = document.getElementById(bulletListId);
                bulletList.innerHTML += `<li>${playerName}</li>`;
            }
        }
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });


    function clicker() {
        console.log("click!")
        console.log(clicksRequired);
        clicksRequired --;
        if (clicksRequired == 0) {
            console.log("Reveal the code")
            clicksRequired = 10;
        }
        clicksRequiredElement = document.getElementById("clicks-required");
        console.log(clicksRequired);
        clicksRequiredElement.innerHTML = clicksRequired;
    }

    function enterCode(data) {
        codeInputElement = document.getElementById("code-input");
        textInput = codeInputElement.value;
        codeInputElement.value = "";
        console.log(textInput);

    }

    document.getElementById("clicker").onclick = clicker;

    document.getElementById("code-input-submit").onclick = enterCode;


</script>

{{ endblock }}