{{ block title }}
    正式回合
{{ 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' }}
            先加到目標數字的人 <span style="color: red;">贏</span>。
        {{ else }}
            先加到目標數字的人 <span style="color: red;">輸</span>。
        {{ endif }}
    </p>
    
    <!-- <p id="news">&nbsp;</p> -->

    <div class="row">
        <div class="column">
            <h2>當前數字:</h2>
            <p id="current_number" style="font-size: 30px;"></p>  
        </div>
        <div class="column">
            <h2>目標數字:</h2>
            <p style="font-size: 30px;">{{ subsession.target }}</p>
        </div>
    </div>

<input type="hidden" name="start_timestamp" id="start_timestamp" />
<input type="hidden" name="end_timestamp" id="end_timestamp" />
    <!-- <p>Current number:</p>
    <div><p id="current_number" style="font-size: 30px;"></p></div> -->
    <p>選擇加上多少:</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);
        document.getElementById("start_timestamp").value=performance.now();
    }

    function liveRecv(data) {
        if (data.game_over) {
            document.getElementById("end_timestamp").value=performance.now();
            setTimeout(() => { document.getElementById('form').submit(); }, 1000);
        }
        let lastActor;
        let btnDisabledStatus;
        
        // player_turn == 1 means it is the player's turn
        if (data.player_turn === 1 & data.current_number === 0) {
            lastActor = '電腦';
            btnDisabledStatus = '';
            turn_notification = '遊戲開始，現在輪到你做決策。';
        } else if (data.player_turn === 1) {
            lastActor = '電腦';
            btnDisabledStatus = '';
            turn_notification = '現在輪到你做決策。';
        }
        else {
            lastActor = '你';
            btnDisabledStatus = 'disabled';
            turn_notification = '現在輪到電腦做決策，請耐心等待。';
        }

        // potential bug
        if (data.game_over) {
            turn_notification = '遊戲結束';
        }

        // Disabling or enabling all btn 
        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} 在前一個輪次選擇加  ${news.number}。`;
        }
        if (data.player_turn === 0 && data.game_over == false) {
                setTimeout(() => { liveSend('computer_turn'); }, 1000);
            }
    }

    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 }}