{{ block title }}
    Main Game
{{ endblock }}
    
{{ block content }}
<p id='guide'>
    Pick a door and click "Open".
</p>

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

<button id="next" type="button" class="btn btn-primary" onclick="liveSend('open')">Open</button>

<style>
    p{
        font-size: 18px;
    }

    #next{
        margin: 15px;
    }

    #door_series{
        width:720px;
    }

    .answer{
        background-image: url("{{ static 'car.png' }}");
        background-size: 80%;
        background-color: gray;
        background-repeat: no-repeat;
        background-position: 50% 75%;
        position: relative;
        width:60px;
        height:60px;

        margin-left: 6px;
        margin-right: 6px;
        margin-top:2px;
        margin-bottom: 2px;
        display: inline-grid;
    }

    .door_bg{
        background-image: url("{{ static 'goat.png' }}");
        background-size: 80%;
        background-color: gray;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        width:60px;
        height:60px;

        margin-left: 6px;
        margin-right: 6px;
        margin-top:2px;
        margin-bottom: 2px;
        display: inline-grid;
    }

    .door{
        background-color: orange;
        /* border: solid 5px orange; */
        position: absolute;
        top:0px;
        left:0px;
        width:60px;
        height:60px;
        overflow-x: hidden;
        cursor: pointer;
        display: inline-grid;
        transform-origin: left;
        /*Speed of the Door animation*/
        transition: all 0.5s ease-in-out;
    }

    .door:hover {
        background-color:#8179cf;
    }

    .doorOpen{
        /*prespectiv creates the door open effect*/
        transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-95deg);
    }

    .checkmark{
        background-image: url("{{ static 'checkmark.png' }}");
        background-size: contain;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        width:60px;
        height:60px;

        margin-left: auto;
        margin-right: auto;
        margin-top:auto;
        margin-bottom: auto;
        display: inline-grid;
    }

    .hollow_checkmark{
        background-image: url("{{ static 'hollow_checkmark.png' }}");
        background-size: contain;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        width:60px;
        height:60px;

        margin-left: auto;
        margin-right: auto;
        margin-top:auto;
        margin-bottom: auto;
        display: inline-grid;
    }
</style>

<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");
        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() { liveSend(i); }
        
        bg.appendChild(door)
        document.getElementById("door_series").appendChild(bg);
    }

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

    // 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){
            current_choice = data.first_choice;
        } else {
            current_choice = data.final_choice;
        };

        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'); }
            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 (data.confirm == false) {
                document.getElementById("next").disabled = 'disabled';
            } else {
                document.getElementById("next").disabled = false;
            };
        };

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


    };


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

{{ endblock }}