{{ block title }}
    Practice Round
{{ endblock }}
{{ block content }}

<div class="card m-3">
    <div class="card-header">
        <h3>How to Play</h3>
    </div>
    <div class="card-body" id="rules">
        <p>
            You can see {{ Constants.num_doors }} orange doors below.<br>
            Behind one door is the prize, a car.<br>
            Behind the other doors are goats, which have no value to you.<br>
            Click "Got it" to see how to make a choice.
        </p>
    </div>
    <div class="card-footer">
        <button id="got_it" type="button" class="btn btn-info" onclick="liveSend('got_it')">Got it</button>
    </div>
</div>

    <!-- <p id='guide'>
        Pick a door and click "Open".<br />
        <br />
    </p> -->

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

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

    <style>
        .card {
            background-color: lightyellow;
        }
        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);
        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");
            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.guide_step == 1) {
                for (let i = 1; i < js_vars.num_doors+1; i++) {
                    let d = document.getElementsByClassName('door')[i-1]
                    d.onclick = function() { liveSend(i); };
                };
                rules.innerHTML = "<p>Pick a door as your first-stage choice.<br>"
                    +"The selected door will be marked with a hollow checkmark like:</p>"
                    +"<span class=\'hollow_checkmark\' style=\"width:30;height:30px;\"></span>"
            } else if (data.guide_step == 2) {
                got_it.btnDisabledStatus = 'disabled';
                got_it.style.visibility = 'hidden';
                rules.innerHTML = "<p>Your selected door will not be open immediately.<br>"
                    +"Before you make your final choice, click \"Reveal a goat\", "
                    +"and the computer will open one of the other two doors to reveal a goat.<br>"
                    +"Try to select the door in the middle and click \"Reveal a goat\".</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>You now have the chance to stay with your first-stage choice or switch to the other door.<br>"
                    +"Pick a door as your final choice (You still need to click a door even if you do not want to switch).<br>"
                    +"The selected door will be marked with a solid black checkmark like:</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>The Submit button will send your final choice.<br>"
                    +"If your final choice is the door with the car, you will get {{ Constants.win_payoff }}.<br>"
                    +"However, since this is the practice round, you will not get the payoff for this round.<br>"
                    +"Make your final choice and click the Submit button.</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 = '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(
                        '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||data.guide_step == 3) {
                    document.getElementById("next").disabled = 'disabled';
                } else {
                    document.getElementById("next").disabled = '';
                };
            };

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


        };


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

{{ endblock }}