{{ block title }}
<span style="color: red;">練習回合</span>
{{ endblock }}
{{ block content }}
<link rel="stylesheet" href="{{ static 'CSS/background.css' }}">

<div class="card m-3">
    <div class="card-header">
        <h3>實驗指引</h3>
    </div>
    <div class="card-body" id="guide">
        <p>
            你可以看見在下方灰色區塊有一個「目標數字」以及「當前數字」<br>
            每次輪替時， 論到的玩家必須選擇在當前數字上加 1 或加 2。<br>
            在此練習回合中，你是先手。<br>
            點擊「知道了」，繼續了解如何贏得獎勵。
        </p>
    </div>
    <div class="card-footer">
        <button id="got_it" type="button" class="btn btn-info" onclick="liveSend('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' }}
            先加到目標數字的人 <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>


    <!-- <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');
    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 = '遊戲開始，現在輪到你做決策。';
        } else if (data.player_turn === 1) {
            lastActor = '電腦';
            turn_notification = '現在輪到你做決策。';
            if (data.guide_step < 2) {
                turn_notification = '遊戲開始，現在輪到你做決策。';
                btnDisabledStatus = 'disabled';
            } else if (data.guide_step === 2) {
                lastActor = '電腦';
                turn_notification = '遊戲開始，現在輪到你做決策。';
            } else {
                btnDisabledStatus = '';
            };
        } else {
            lastActor = '你';
            btnDisabledStatus = 'disabled';
            turn_notification = '現在輪到電腦做決策，請耐心等待。';
        };
    
        if (data.game_over) {
            turn_notification = '遊戲結束';
        };

        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>每一回合勝利條件皆相同: <br>"
                +"先加到目標數字的人 <span style=\"color: red;\">贏</span>。<br>"
                // +"In this practice round, the one who counts the target number <span style=\"color: red;\">WINS</span>.</p>";
        } else if (data.guide_step == 2) {
            guide.innerHTML = "<p>使用下方灰色數字紐於當前數字上選擇加上多少。<br>"
                +"本回合, 你可以選擇加 1 或 2。.<br>"+
                "請按加 2。</p> <p>注意：請不要連續點擊 \「2 \」按鈕。如果你這樣做，你可能會導致錯誤並輸掉這一回合。同樣，在遊戲過程中也不要連續點擊任何數字按鈕。</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>紅字顯示現在輪到電腦做決策。<br>"
                +"電腦和你一樣只能選擇加 1 或 2。<br>"
                +"點擊 \「知道了\」 並等待電腦做出決策。</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>請繼續決策直到遊戲結束。 <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} 在前一個輪次選擇加 ${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 }}