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

{{ block content }}

    <style>
    .oval {
      height: 10%;
      width: 10%;
      border-radius: 50%;
      position: absolute;
      top: 20%;
      left: 30%;
    }
    .turn_1 {
        display: none;
    }

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


    </style>
<main id='main' style="margin: 0px">
    <div class="oval" class="turn_1" style="background-color: #ff0000;"></div>
    <div class="oval" class="turn_1" style="background-color: #555"></div>

    <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>
</main>

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

{{ endblock }}

{{ block script }}
    <script>
    document.getElementById('main').style.width = 0.70*screen.width + "px";
    document.getElementById('main').style.height = 0.70*screen.height + "px";
    document.getElementById('main').style.backgroundColor = "#aaaaaa";

    var turn = 1;
    function func_continue(){
        turn += 1;
        liveSend({'choice': 'Continue'});
        update();
    }

    function func_stop(){
        liveSend({'choice': 'Stop'});
        document.getElementById('end_turn').value = turn;
        form = document.getElementById('form');
        form.submit();
    }

    function liveRecv(data){
        if (data['choice'] == 'Continue'){
            turn += 1;
            update();
        }
        else if (data['choice'] == 'Stop'){
            document.getElementById('end_turn').value = turn;
            form = document.getElementById("form");
            form.submit();
        }
    }

    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) ){
            document.getElementById('continue').style.display = 'block';
            document.getElementById('stop').style.display = 'block';
        }
        else{
            document.getElementById('continue').style.display = 'none';
            document.getElementById('stop').style.display = 'none';
        }
    }

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