{{ block title }}
    <span style="color: red;">Practice Round</span>
{{ endblock }}
    
{{ block content }}

<link rel="stylesheet" href="{{ static 'CSS/Monty_hall_style.css' }}">


<p id='guide'>
    請選擇一扇門並點擊「揭露一扇有山羊的門」。
</p>

<div class="card m-3">
    <div class="card-header">
        <h3>實驗指引</h3>
    </div>
    <div class="card-body" id="rules">
        <p>
            讓我們再試一次。<br>
            請選擇中間的門並點擊「揭露一扇有山羊的門」。
        </p>
    </div>
    <div class="card-footer">
        <button id="got_it" type="button" class="btn btn-info" onclick="liveSend('got_it')">知道了</button>
    </div>
</div>

<div id="door_series"></div>

<button id="next" type="button" class="btn btn-primary" onclick="liveSend('open')">揭露一扇有山羊的門</button>

<script>
    var width_unit = (720*js_vars.num_rows)/(js_vars.num_doors*12);
    let rules = document.getElementById('rules');
    let got_it = document.getElementById('got_it');

    // Create doors
    for (let i = 1; i < js_vars.num_doors+1; i++) {
        var bg = document.createElement("div");
        var door = document.createElement("div");
        if (i == js_vars.answer){
            bg.className='answer'
            door.className='door';
            door.onclick = function() { liveSend(i); }
        } else if (i == js_vars.another_door){
            bg.className='door_bg'
            door.className='door';
            door.onclick = function() { liveSend(i); }
        } else {
            bg.className='door_bg'
            door.className='transparent_door';
        }
        bg.style.width = width_unit*10 + 'px';
        bg.style.height = width_unit*10 + 'px';
        bg.style.marginLeft = width_unit + 'px';
        bg.style.marginRight = width_unit + 'px';

        door.id = i;
        door.style.width = width_unit*10 + 'px';
        door.style.height = width_unit*10 + 'px';

        bg.appendChild(door)
        document.getElementById("door_series").appendChild(bg);
    }

    got_it.btnDisabledStatus = 'disabled';
    got_it.style.visibility = 'hidden';

    function toggleDoor() {
        element.classList.toggle("doorOpen");
    };

    function Auto_submit() {
        for (let i = 1; i < js_vars.num_doors+1; i++){
                document.getElementById(i).classList.add("doorOpen");
            };
            setTimeout(() => { document.getElementById('form').submit(); }, 2000);
    };

    let next = document.getElementById('next');
    let guide = document.getElementById('guide');

    //////////////////
    // live section //
    //////////////////
    function liveRecv(data) {
        // open all doors when the game is over
        if (data.game_over === true) {
            next.btnDisabledStatus = 'disabled';
            next.style.visibility = 'hidden';
            for (let i = 1; i < js_vars.num_doors+1; i++){
                document.getElementById(i).classList.add("doorOpen");
            };
            setTimeout(() => { document.getElementById('form').submit(); }, 2000);
        };

        let current_choice;
        if (data.second_stage === false){
            current_choice = data.first_choice;
        } else {
            current_choice = data.final_choice;
        };

        if (data.guide_step == 0) {
            if (data.guide_error != ''){
                alert(data.guide_error); 
            };
        } else if (data.guide_step == 1) {
            rules.innerHTML = "<p>在這個練習回合，電腦打開的是另一扇非透明門，因此你只剩一扇門可以選。<br>"
                +"此外，因為兩隻山羊都被揭露了，你現在所選的門後必定為一輛車。<br>"
                +"在這樣的情況下，你無法選擇換門。<br>"
                +"因此，在你按下\「知道了\」後，3 秒後會自動跳轉至下一頁。</p>"
            got_it.btnDisabledStatus = '';
            got_it.style.visibility = '';
        } else if (data.guide_step == 2) {
            rules.innerHTML = "<p>請等待頁面自動跳轉。</p>";
            got_it.btnDisabledStatus = 'disabled';
            got_it.style.visibility = 'hidden';
        };

        if (data.second_stage === false) {
            if (data.first_choice == 101) {
                document.getElementById('next').disabled = 'disabled';
            } else {
                document.getElementById('next').disabled = '';
            }
        } else {
            document.getElementById('next').textContent = 'Submit';
            document.getElementById('next').onclick = function() { liveSend('final_choice'); }

            // commit == 2 mean "stay"
            if (data.commit == 2) {
                // document.getElementById('guide').innerHTML = "Since you have commited to \"Stay\", you can not change your answer.<br>\
                // Click \"Submit\" to proceed.";
                door = document.getElementById(data.door_keep);
                door.onclick = function() {
                    alert(
                    '你不能改變你的選擇，因為你已經選擇鎖定不換門。請點擊下一步繼續。'
                    ); 
                };
            }; 
            // commit == 1 mean "switch"
            if (data.commit == 1) {
                // document.getElementById('guide').innerHTML = "Since you have commited to \"Switch\", you must change your answer if posible.<br>\
                // Click the other door and then \"Submit\" to proceed.";
                document.getElementById(data.first_choice).onclick = function() {
                    alert(
                    '你不能選擇你在第一階段選擇的門作為你的最終選擇，因為你已經鎖定換門。'
                    );
                };
                
            };   
            if (data.confirm == false||data.guide_step == 3) {
                document.getElementById("next").disabled = 'disabled';
            } else {
                document.getElementById("next").disabled = '';
            };
        };

        if (data.unswitchable && data.guide_step == 2) {
            next.disabled = 'disabled';
            next.style.visibility = 'hidden';
            var keep = data.door_keep;
            var first_choice = data.first_choice;
            document.getElementById(data.first_choice).onclick = null;
            guide.innerHTML = "你現在選的門是唯一剩下來的門。<br>"
                    +"請稍等，3 秒鐘後將自動跳轉至下一頁";
            
            setTimeout(() => { Auto_submit(); }, 2000);
        }

        if (data.open == true && data.second_stage == false) {
            var keep = data.door_keep;
            var first_choice = data.first_choice;

            for (let i = 1; i < js_vars.num_doors+1; i++) {
                if (i != keep && i != first_choice) {
                    door = document.getElementById(i);
                    door.classList.add("doorOpen");
                    door.onclick = null;
                    guide.innerHTML = "因為你鎖定 \「換門\」, 你必須選擇另一扇門。<br>\
                請選擇另一扇門並按下 \「確認\」 並繼續進行";
                };
            };
            liveSend('opened');
        };
            
        // select a door, add the check mark
        if (current_choice != 101) {
            if (data.old_choice != 101) {
                old_choice = document.getElementById(data.old_choice);
                old_choice.removeChild(document.getElementById(data.old_choice+1000))
            };
            selected_door = document.getElementById(current_choice);
            var check = document.createElement("span");
            if (data.hollow == true) {
                check.className='hollow_checkmark';
            } else {
                check.className='checkmark';
            }
            
            check.id = current_choice + 1000;
            var element = document.getElementById(check.id);
            if(!element){
                check.style.width = width_unit*9 + 'px';
                check.style.height = width_unit*9 + 'px';
                selected_door.appendChild(check);
            };
        };


    };


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

{{ endblock }}