{{ block title }}
    Game {{ player.round_number }}
{{ endblock }}

{{ block content }}

    <style>
    .turn_1 {
        display: none;
    }

    .otree-body{
        width: 70%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .top-right {
      position: absolute;
      top: 30%;
      right: 5%;
    }
    </style>

<main id='main' style="margin: 0px">
    <table>
        <tr>
            <td rowspan="2">
                <img class="image" src="{{ static 'centipede_game/image.png' }}" alt="test_image alt" style="width:90%;"/>
            </td>
            <td>
                <p id="time-tag">Time Remaining</p>
                <span id="time-left"> 30 </span>
            </td>
        </tr>
        <tr>
            <td>
                <p class="turn_1"> Turn 1</p>

                <div id="turn_2" style="display: none">
                    <p> Turn 2</p>
                </div>

                <div id="turn_3" style="display: none">
                    <p> Turn 3</p>
                </div>

                <div id="turn_4" style="display: none">
                    <p> Turn 4</p>
                </div>

                <div id="turn_5" style="display: none">
                    <p> Turn 5</p>
                </div>

                <div id="turn_6" style="display: none">
                    <p> Turn 6</p>
                </div>

                <button class = 'otree-btn-next btn btn-primary' id='continue' type='button' onclick='func_continue()' style="display: none">
                    Continue
                </button>

                <button class = 'otree-btn-next btn btn-primary' id='stop' type='button' onclick='func_stop()' style="display: none">
                    Stop
                </button>
            </td>
        </tr>
    </table>


</main>

<input type='hidden' name='end_turn' id='end_turn' />
{{ formfield_errors 'end_turn' }}

{{ endblock }}

{{ block script }}
    <script>
    var expires = new Date().getTime() + 30500;
    setInterval(function () {
        let now = new Date().getTime();
        let distance = Math.floor((expires - now)/1000);
        document.getElementById('time-left').innerText = distance;
    }, 500);

    var turn = 1;
    function func_continue(){
        let now = new Date().getTime();
        let distance = Math.floor((expires - now)/1000);

        turn += 1;
        liveSend({'choice': 'Continue', 'time-left': distance});
        update();
    }

    function func_stop(){
        let now = new Date().getTime();
        let distance = Math.floor((expires - now)/1000);

        liveSend({'choice': 'Stop', 'time-left': distance});
        document.getElementById('end_turn').value = turn;
        form = document.getElementById('form');
        form.submit();
    }

    function liveRecv(data){
        setTimeout(()=> {
            if (data['choice'] == 'Continue'){
                turn += 1;
                update();
            }
            else if (data['choice'] == 'Stop'){
                document.getElementById('end_turn').value = turn;
                form = document.getElementById("form");
                form.submit();
            }
        }
        ,data['time-left']*1000);
    }

    function update(){
        switch(turn) {
          case 6:
            document.getElementById('turn_6').style.display = 'block';
          case 5:
            document.getElementById('turn_5').style.display = 'block';
          case 4:
            document.getElementById('turn_4').style.display = 'block';
          case 3:
            document.getElementById('turn_3').style.display = 'block';
          case 2:
            document.getElementById('turn_2').style.display = 'block';
          case 1:
            $(".turn_1").css("display", "block");
          default:
            break;
        }
        if( (turn%2) == (js_vars.my_id%2) ){
            expires = new Date().getTime() + 30500;
            document.getElementById('time-tag').innerText = "Time Remaining";
            document.getElementById('time-left').style.display = 'block';
            document.getElementById('continue').style.display = 'block';
            document.getElementById('stop').style.display = 'block';
        }
        else{
            document.getElementById('time-tag').innerText = "Please wait for the other player to complete their turn. (The computer will wait the full 30 seconds on their turn regardless of how long they take to make their decision.)";
            document.getElementById('time-left').style.display = 'none';
            document.getElementById('continue').style.display = 'none';
            document.getElementById('stop').style.display = 'none';
        }
    }

    update();
    </script>
{{ endblock }}