{{ block title }}
    Practice Round
{{ endblock }}
{{ block content }}
<div class="card m-3">
    <div class="card-header">
        <h3>How to Play</h3>
    </div>
    <div class="card-body" id="guide">
        <p>
            You can see a target number and a current number in the gray game area below.<br>
            In each turn, the turn player add at least 1 but no more than an upper bound to the current number.<br>
            Click "Got it" to see how to win the game.
        </p>
    </div>
    <div class="card-footer">
        <button id="got_it" type="button" class="btn btn-info" onclick="liveSend('got_it')">Got it</button>
    </div>
</div>

<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');
    let guide = document.getElementById('guide');
    let got_it = document.getElementById('got_it');


    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.guide_step == 0) {
            btnDisabledStatus = 'disabled';
            turn_notification = 'This is your turn.';
        } else if (data.player_turn === 1) {
            lastActor = 'The computer';
            turn_notification = 'This is your turn.';
            if (data.guide_step < 2) {
                btnDisabledStatus = 'disabled';
            } else {
                btnDisabledStatus = '';
            };
        } 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'
            }
        }
        
        
        if (data.guide_step == 1) {
            guide.innerHTML = "<p>The winning condition varies round by round.<br>"
                +"You can find the winning condition in the first line of the gray game area.<br>"
                +"In this practice round, the one who counts to the target number <span style=\"color: red;\">WINS</span>.</p>";
        } else if (data.guide_step == 2) {
            guide.innerHTML = "<p>Use the gray buttons to add number to the current number.<br>"
                +"In this round, you can add a positive integer between 1 and 5.<br>"+
                "Try to add 3.</p>";
            got_it.btnDisabledStatus = 'disabled';
            got_it.style.visibility = 'hidden';
            if (data.guide_error != ''){
                alert(data.guide_error); 
            }
        } else if (data.guide_step == 3) {
            guide.innerHTML = "<p>The red text, <span style=\"color: red;\">Waiting for the computer</span>, shows it's the computer's turn.<br>"
                +"The computer, just like you, must add at least one but no more than the same upper bound.<br>"
                +"Click \"Got it\" and wait until it make its move.</p>";
            got_it.btnDisabledStatus = '';
            got_it.style.visibility = '';
        } else if (data.guide_step == 4) {
            got_it.btnDisabledStatus = 'disabled';
            got_it.style.visibility = 'hidden';
        } else if (data.guide_step == 5) {
            guide.innerHTML = "<p>Continue playing and finish this practice round.<br></p>";
            got_it.btnDisabledStatus = 'disabled';
            got_it.style.visibility = 'hidden';
        }

        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 && data.guide_step >= 4) {
            setTimeout(() => { liveSend('computer_turn'); }, 2000);
            
        }
    }

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

<style>
    .card {background-color: lightyellow;}
    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 }}