{{ block title }}
<span style="color: red;">練習回合</span>
{{ endblock }}
    
{{ block content }}

<link rel="stylesheet" href="{{ static 'CSS/Monty_hall_style.css' }}">
<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="rules">
        <p>
            你可以看到下面有 {{ Constants.num_doors }} 扇橙色的門。<br>
            其中一扇是透明門。透明門後面是永遠是一隻山羊。<br>
            在這個練習回合中， 右邊的門為透明門。<br>
            至於其它兩扇非透明門，<br>
            其中一扇非透明門的後面是一輛車，代表獎品。<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>

<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';
        } else if (i == js_vars.another_door){
            bg.className='door_bg'
            door.className='door';
        } 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');

    //////////////////
    // 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 == 1) {
            for (let i = 1; i < js_vars.num_doors+1; i++) {
                if ((i == js_vars.answer)|(i == js_vars.another_door)){
                    let d = document.getElementsByClassName('door')[i-1];
                    d.onclick = function() { liveSend(i); };
                };
            };
            rules.innerHTML = "<p>在每回合開始時，你可以點擊你想選擇的門，作為你的第一階段選擇。<br>"
                +"你無法選擇透明門。<br></p>"
                +"被選中的門會被一個空心的勾標記，如：</p>"
                +"<span class=\'hollow_checkmark\' style=\"width:30;height:30px;\"></span><br>"
                +"現在請選擇中間的門，然後點擊「知道了」。"
            if (data.guide_error != ''){
                alert(data.guide_error);
            };
        } else if (data.guide_step == 2) {
            got_it.btnDisabledStatus = 'disabled';
            got_it.style.visibility = 'hidden';
            rules.innerHTML = "<p>你選擇的門不會立即打開。<br>"
                +"在你做出最後的選擇之前，點擊 \「揭露一扇有山羊的門\」， "
                +"電腦會打開另外兩扇門（透明門和另一扇並非你選擇的門）中的一扇，並揭露門後的山羊。<br>"
                +"現在點擊 \「揭露一扇有山羊的門\」。</p>";
            if (data.guide_error != ''){
                alert(data.guide_error); 
            };
        } else if (data.guide_step == 3) {
            got_it.btnDisabledStatus = '';
            got_it.style.visibility = '';
            rules.innerHTML = "<p>在這個練習回合，電腦打開的是透明門。<br>"
                +"你現在有機會保持你第一階段的選擇，或者切換到另一扇門。<br>"
                +"選擇一扇門作為你的最終選擇（即使你不想換，你仍然需要點擊一扇門）。<br>"
                +"如果你維持你第一階段選擇，它將被相同的空心的勾標記，如: </p>"
                +"<span class=\'hollow_checkmark\' style=\"width:30;height:30px;\"></span></p>"
                +"如果你切換到另一扇門，它將被一個黑色實心的勾標記，如:</p>"
                +"<span class=\'checkmark\' style=\"width:30;height:30px;\"></span>";
        } else if (data.guide_step == 4) {
            got_it.btnDisabledStatus = 'disabled';
            got_it.style.visibility = 'hidden';
            rules.innerHTML = "<p>按下「確認」將發送你的最終選擇。<br>"
                +"如果你的最終選擇是有車的那扇門，你將獲得 {{ Constants.win_payoff }}。<br>"
                +"然而，由於這是練習回合，這一回合的結果不會計入你的報酬。<br></p>"
                +"<p> <span style=\"font-weight:bold\"> 你必須選擇其中一扇門，才可以按「確認」。<span style=\"font-weight:bold\"></span><br>"
                +"作出最後的選擇，然後點擊「確認」。</p>"
        };

        if (data.second_stage === false) {
            if (data.first_choice == 101||data.guide_step < 2) {
                document.getElementById('next').disabled = 'disabled';
            } else {
                document.getElementById('next').disabled = '';
            }
        } else {
            document.getElementById('next').textContent = '確認';
            document.getElementById('next').onclick = function() { liveSend('final_choice'); }

            // commit == 2 mean "stay"
            if (data.commit == 2) {
                door = document.getElementById(data.door_keep);
                door.onclick = function() {
                    alert(
                    '你不能改變你的選擇，因為你已經選擇鎖定不換門。請點擊下一步繼續。'
                    ); 
                };
            }; 
            // commit == 1 mean "switch"
            if (data.commit == 1) {
                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) {
            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;
            
            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;
                };
            };
            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);
    //         };
    //     };
    //
    //
    // };

        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))
            };
            if (data.old_choice == 101 && data.guide_step == 2) {
                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 }}