{{ block title }}
Game
{{ endblock }}
{{ block content }}

<div oncopy="return false" oncut="return false" onpaste="return false">


<div class="container">

<div class="row">

<div col-12>

<p>Get as many points as you can as a group!</p>

</div>
</div>

<div class="row">

<div class="col-md-4">

<div class="card">
  <div class="card-body">

<h4>Click To Reveal Codes</h4>

<h6><span id="clicks-required">40</span> clicks required</h6>

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

<p>Code:</p>
<h3 id="latest-code">-</h3>

</div>
</div>
</div>

<div class="col-md-4">

<div class="card">
  <div class="card-body">

<h4>Enter Codes for Points</h4>

  <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 points</p>
<h4 id="current-score">0</h4>

</div>
</div>
</div>

<div class="col-md-4">
<div class="card">
  <div class="card-body">
<h4>Chat with teammates</h4>
{{ chat }}

</div>
</div>
</div>
</div>

</div>

</div>

<style>
    .otree-chat__input {
        width: 100%;
    }

</style>

<script>

    // Create a set of codes completed, to check against for each player. 
    var codesFound = [];


    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) {
            var newCode = generateCode(3);
            document.getElementById("latest-code").innerHTML = newCode;
            
            clicksRequired = 10;
        }
        clicksRequiredElement = document.getElementById("clicks-required");
        console.log(clicksRequired);
        clicksRequiredElement.innerHTML = clicksRequired;
    }

    function enterCode(data) {
        codeInputElement = document.getElementById("code-input");
        codeEntered = parseInt(codeInputElement.value);
        codeInputElement.value = "";
        console.log(codeEntered);
        if ((codeEntered % 31 == 0) && (!codesFound.includes(codeEntered))) {
            console.log("Correct");
            scoreElement = document.getElementById("current-score");
            console.log(scoreElement)
            console.log(scoreElement.value)
            var currentScore = parseInt(scoreElement.textContent);
            console.log(currentScore);
            currentScore ++ ;
            scoreElement.innerHTML = currentScore;

            codesFound.push(codeEntered);

        } else {
            console.log("Incorrect")
        }
    }

    function randomIntFromInterval(min, max) { // min and max included 
      return Math.floor(Math.random() * (max - min + 1) + min)
    }

    function generateCode(length) {
        var secretPrime = 31;

        // Maybe genearte a new secretPrime for each group and round. 
        // So that players cannot use the same codes in different rounds

        minValue = Math.pow(10, (length-1))
        maxValue = Math.pow(10, length) 

        minFactor = Math.floor(minValue/secretPrime);
        maxFactor = Math.floor(maxValue/secretPrime) + 1;

        return randomIntFromInterval(minFactor, maxFactor) * secretPrime;
    }

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

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


    // Do nt allow copying and pasting
    $('#email').bind("cut copy paste",function(e) {
        e.preventDefault();
    });


</script>

{{ endblock }}