{{ block title }}
    Main Game
{{ endblock }}
{{ block content }}
<p id="turn" style="color:red; font-size: 26px;"></p>
<p id="news">&nbsp;</p>

<div class="card bg-light m-3">
    <div class="card-body">
    <p>
        {{ if subsession.mode == 'last_win' }}
            Whoever counts to the target number <span style="color: red;">WINS</span>.
        {{ else }}
            Whoever counts to the target number <span style="color: red;">LOSES</span>.
        {{ endif }}
    </p>
    
    <!-- <p id="news">&nbsp;</p> -->

    <div class="row">
        <div class="column">
            <h2>Current number:</h2>
            <p id="current_number" style="font-size: 30px;"></p>  
        </div>
        <div class="column">
            <h2>Target number:</h2>
            <p style="font-size: 30px;">{{ subsession.target }}</p>
        </div>
    </div>


    <!-- <p>Current number:</p>
    <div><p id="current_number" style="font-size: 30px;"></p></div> -->
    <p>How much to add:</p>
    <div id="choice"></div>
    <!-- style="font-size: 18px;" -->
    </div>
</div>

<script>
    let newsEle = document.getElementById('news');
    let newsTurn = document.getElementById('turn');
    let current_number = document.getElementById('current_number');

    for (let i = 1; i < js_vars.choice+1; i++) {
        var btn = document.createElement('button');
        btn.className='btn btn-secondary'
        btn.type="button"
        btn.innerHTML = i;
        btn.id = i;
        btn.onclick = function() { liveSend(i); }
        document.getElementById("choice").appendChild(btn);
    }

    function liveRecv(data) {
        if (data.game_over) {
            setTimeout(() => { document.getElementById('form').submit(); }, 2000);
        }
        let lastActor;
        let btnDisabledStatus;
        
        if (data.player_turn === 1) {
            lastActor = 'The computer';
            btnDisabledStatus = '';
            turn_notification = 'This is your turn.';
        } else {
            lastActor = 'You';
            btnDisabledStatus = 'disabled';
            turn_notification = 'Waiting for the computer.';
        }

        if (data.game_over) {
            turn_notification = 'The game is over.';
        }

        for (let btn of document.getElementsByClassName('btn-secondary')) {
            btn.disabled = btnDisabledStatus;
        }

        for (let i = 1; i < js_vars.choice+1; i++) {
            btn = document.getElementById(i)
            if (i > data.remain) {
                btn.disabled = 'disabled'
            }
        }
        newsTurn.innerText = `${turn_notification}`;
        current_number.innerText = data.current_number;
        let news = data.news;
        if (news) {
            newsEle.innerText = `${lastActor} added ${news.number}`;
        }
        if (data.player_turn === 0 && data.game_over == false) {
                setTimeout(() => { liveSend('computer_turn'); }, 2000);
            }
    }

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

<style>
    p{font-size: 18px;}
    button {margin: 3px;}
    /* Create two equal columns that floats next to each other */
    .column {
    float: center;
    width: 50%;
    padding-left: 20px;
    padding-bottom: 20px;
    }

    /* Clear floats after the columns */
    .row:after {
    content: "";
    display: table;
    clear: both;
    }
</style>

{{ endblock }}