{{ block title }}
    Main Game
{{ 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'>
    Pick a door and click "Reveal a goat".
</p>

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

<button id="next" type="button" class="btn btn-primary" onclick="liveSend({'status': 'open', 'door': current_choice});reveal_timestamp = performance.now()">Reveal a goat</button>

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

    function Add_check() {
        if (old_choice != 101){
            document.getElementById(old_choice).removeChild(document.getElementById(old_choice+1000))
        };
        selected_door = document.getElementById(current_choice)
        var check = document.createElement("span");
        if (second_stage == false){
            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);
    };

    function Record_door(i) {
        old_choice = current_choice;
        current_choice = i;
    };

    function Enable_button() {
        next.disabled = ''
    };

    // Create doors
    for (let i = 1; i < js_vars.num_doors+1; i++) {
        var bg = document.createElement("div");
        if (i == js_vars.answer){
            bg.className='answer'
        } else {
            bg.className='door_bg'
        }
        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';

        var door = document.createElement("div");
        door.className='door';
        door.id = i;
        door.style.width = width_unit*10 + 'px';
        door.style.height = width_unit*10 + 'px';
        door.onclick = function() {
            Record_door(i);
            Enable_button();
            Add_check();
        }
        
        bg.appendChild(door)
        document.getElementById("door_series").appendChild(bg);
    }

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

    let current_choice = 101;
    let first_choice = 101;
    let old_choice = 101;
    let final_choice = 101;
    let next = document.getElementById('next');
    let second_stage = false;
    let commit = document.getElementById('commit');
    let Confirm = false;
    let first_door_timestamp;
    let reveal_timestamp;
    let second_door_timestamp;
    let submit_timestamp;

    next.disabled = 'disabled';

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


        if (data.second_stage === true) {
            second_stage = true;
            next.textContent = 'Submit';
            next.disabled = 'disabled';
            next.onclick = function(){ liveSend({
                'status': 'final_choice',
                'door': current_choice,
                // 'first_door_timestamp': first_door_timestamp,
                'reveal_timestamp': reveal_timestamp,
                'submit_timestamp': performance.now()
            });}
            if (data.commit == 0) {
                document.getElementById('guide').innerHTML = "You can stay with your current choice or switch to another door.<br>\
                Make your final choice and click \"Submit\"";
            }
            // 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(
                    'You cannot change your choice because you have committed to always stay. Click next to proceed.'
                    ); 
                };
            }; 
            // 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(
                    'You cannot select the door you chose in the first stage as your final choice because you have committed to always switch.'
                    );
                };
                
            };   
            // if (Confirm == false) {
            //     next.disabled = 'disabled';
            // } else {
            //     next.disabled = '';
            // };
        };

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

            for (let i = 1; i < js_vars.num_doors+1; i++) {
                if (i != keep && i != current_choice) {
                // if (i != first_door) {
                    door = document.getElementById(i);
                    door.classList.add("doorOpen");
                    door.onclick = null;
                };
            };
            liveSend({'status': '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;
        //     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 }}