{{ block title }}

{{ endblock }}
{{ block content }}
<div class="instruction">
    <ul>
        <li>There are 21 coins and two players.</li>
        <li>The players alternate in taking turns to remove some coins.</li>
        <li>Each time it is a player's turn, she/he has to remove 1,2,3 coins; this is the player's choice at each move.</li>
        <li>The player who removes the last coin is the <b>winner</b>.</li>
    </ul>

<p>{{ if first_mover }}
    You are the FIRST mover.
    {{ else }}
    You are the LAST mover.
    {{ endif }}
</p>
</div>
<p></p>
    <p id="news"></p>
    <p id="numUpdate">21 coins remained.</p>
    <div id="coinContainer"></div>
    <p id = "turn">
        {{ if first_mover }} Now it's your turn. Please make a choice.
        {{ else }} Please wait for the other player.
        {{ endif }}
    </p>
    <p>How many coins to remove:</p>
    <button type="button" id="remove1" >1</button>
    <button type="button" id="remove2" >2</button>
    <button type="button" id="remove3" >3</button>

    <script>

        let newsEle = document.getElementById('news');
        let numUpdate = document.getElementById('numUpdate');
        let turn = document.getElementById('turn');

        function display(data){
            let parent = document.getElementById('coinContainer');
            for (let i = 0; i<data.current_number; i++){
                let child = document.createElement('div');
                child.className='coin';
                parent.append(child);
            }
        }

        function remove1(){
            let parent = document.getElementById('coinContainer');
                for (let j = 0; j<1; j++){
                parent.lastElementChild.remove();
            }
        }
        function remove2(){
            let parent = document.getElementById('coinContainer');
                for (let j = 0; j<2; j++){
                parent.lastElementChild.remove();
            }
        }
        function remove3(){
            let parent = document.getElementById('coinContainer');
                for (let j = 0; j<3; j++){
                parent.lastElementChild.remove();
            }
        }

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

            let lastActor;
            let btnDisabledStatus;
            let turnNotice;
            if (data.whose_turn === js_vars.my_id) {
                lastActor = 'The other player';
                btnDisabledStatus = '';
                turnNotice = 'Now it\'s your turn. Please make a choice.'
            } else {
                lastActor = 'You';
                btnDisabledStatus = 'disabled';
                turnNotice = 'Please wait for the other player.'
            }
            document.getElementById('remove1').disabled = btnDisabledStatus;
            document.getElementById('remove2').disabled = btnDisabledStatus;
            document.getElementById('remove3').disabled = btnDisabledStatus;

            document.getElementById('remove1').onclick = function(){
            liveSend(1);
            remove1();
            }
            document.getElementById('remove2').onclick = function(){
            liveSend(2);
            remove2();
            }
            document.getElementById('remove3').onclick = function(){
            liveSend(3);
            remove3();
            }

            let news = data.news;
            if (news) {
                newsEle.innerText = `${lastActor} removed ${news.number} coin(s).`;
                numUpdate.innerText = `${data.current_number} coin(s) remained.`;
                turn.innerText = `${turnNotice}`;
                if (data.whose_turn === js_vars.my_id) {
                    if (news.number === 1) {
                        remove1();
                    }
                    if (news.number === 2) {
                        remove2();
                    }
                    if (news.number === 3) {
                        remove3();
                    }
                }
            }
        }

        window.onload = () => {
                display();
        }
        window.addEventListener('DOMContentLoaded', (event) => {
            liveSend(null);
        });
    </script>

<style>
    .instruction{
        background-color: #F0F0F0;
        padding: 10px;
        border-style: solid;
        border-color: #D8D8D8;
        border-width: thin;
    }
    #coinContainer{
        width: 210px;
        height: 120px;
    }
    .coin{
        background-color: dodgerblue;
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    button{
        width: 60px;
        height: 60px;
        font-size: xx-large;
        border-radius: 5px;
    }
</style>

{{ endblock }}