{{ block title }}
    正式回合
{{ endblock }}
    
{{ block content }}

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

<p id='commit' style="color:red; font-size: 26px;"></p>

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

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

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

<input type="hidden" name="first_door_timestamp" id="first_door_timestamp" />
<input type="hidden" name="submit_timestamp" id="submit_timestamp" />


<script>
    var width_unit = (720*js_vars.num_rows)/(js_vars.num_doors*12)

    // 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);
    }

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

    if (js_vars.commit == 0) {
        commit.innerText = ''
    } else if (js_vars.commit == 1) {
        commit.innerText = 'You have commited to \"switch\".'
    } else {
        commit.innerText = 'You have commited to \"stay\".'
    }

    //////////////////
    // live section //
    //////////////////
    function liveRecv(data) {
        // open all doors when the game is over
        if (data.game_over === true) {
            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){
            if (data.first_choice != 101 && data.old_choice == 101){
                document.getElementById("first_door_timestamp").value=performance.now();
            };
            current_choice = data.first_choice;
        } else {
            current_choice = data.final_choice;
        };

        if (data.second_stage === false) {
            if (data.first_choice == 101) {
                next.disabled = 'disabled';
            } else {
                next.disabled = '';
            }
        } else {
            next.textContent = '確認';
            next.onclick = function(){ liveSend('final_choice');
                document.getElementById("submit_timestamp").value=performance.now();
            }
            if (data.commit == 0) {
                guide.innerHTML = "你可以選擇換門或不換門。<br>\
                請做出你的最終選擇並按下\「確認\」";
            }
            // commit == 2 mean "stay"
            if (data.commit == 2) {
                guide.innerHTML = "因為你鎖定 \「不換門\」, 你不能變更你的選擇。<br>\
                請按下 \「確認\」繼續進行";
                door = document.getElementById(data.door_keep);
                door.onclick = function() {
                    alert(
                    '你已鎖定不換門因此你無法變更你的選擇. 請按下Next繼續進行'
                    ); 
                };
            }; 
            // commit == 1 mean "switch"
            if (data.commit == 1) {
                guide.innerHTML = "因為你鎖定 \「換門\」, 你必須選擇另一扇門。<br>\
                請選擇另一扇門並按下 \「確認\」 並繼續進行";
                document.getElementById(data.first_choice).onclick = function() {
                    alert(
                    '你已鎖定換門因此你必須選擇另一扇門. 請按下Next繼續進行'
                    );
                };
                
            };   
            if (data.confirm == false) {
                next.disabled = 'disabled';
            } else {
                next.disabled = false;
            };
        };

        if (data.unswitchable) {
            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 秒鐘後將自動跳轉至下一頁";
            document.getElementById("submit_timestamp").value=performance.now();
            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.style.borderColor = "orange";
    //             old_choice.removeChild(document.getElementById(data.old_choice+1000))
    //         };
    //         selected_door = document.getElementById(current_choice);
    //         // selected_door.style.borderColor = "blue";
    //         var check = document.createElement("span");
    //         if (data.hollow == true) {
    //             check.className='hollow_checkmark';
    //         } else {
    //             check.className='checkmark';
    //         }
    //
    //         check.id = current_choice + 1000;
    //         check.style.width = width_unit*9 + 'px';
    //         check.style.height = width_unit*9 + 'px';
    //         selected_door.appendChild(check);
    //     };
    //
    //
    // };
        if (current_choice != 101) {
            if (data.old_choice != 101) {
                old_choice = document.getElementById(data.old_choice);
                // old_choice.style.borderColor = "orange";
                old_choice.removeChild(document.getElementById(data.old_choice+1000))
            };

            selected_door = document.getElementById(current_choice);
            // selected_door.style.borderColor = "blue";
            var check = document.createElement("span");
            if (data.second_stage == false) {
                check.className='hollow_checkmark';
            } else if (data.second_stage == true && data.final_choice == data.first_choice) {
                check.className='hollow_checkmark';
            }
            else {
                check.className='checkmark';
            }

            check.id = current_choice + 1000;
            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 }}