{{ block title }}
    Rocket Ship Game
{{ endblock }}
{{ block content }}

<!-- <script src="{{ static "rocket_ship/scripts/jquery-1.4.1.min.js" }}"></script> -->
<script src="{{ static "rocket_ship/scripts/vector_battle_regular.typeface.js" }}"></script>
<script src="{{ static "rocket_ship/scripts/ipad.js" }}"></script>
<script src="{{ static "rocket_ship/scripts/game.js" }}"></script>
<style>
  #canvas {
    border:1px solid black;
    top:0px;
    left:0px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .button { position:absolute; border:1px solid black; }
  #left-controls { position:absolute; left:1px; bottom:0px; display:none; }
  #right-controls { position:absolute; right:1px; bottom:0px; display:none; }
  #up { width:200px; height:100px; bottom:100px;}
  #left { width:100px; height:100px; bottom:0px;}
  #right { width:100px; height:100px; bottom:0px; left:100px; }
  #space { width:200px; height:200px; bottom:0px; right:0px; }
</style>


<div id="game-container">
  <canvas id="canvas" width="780" height="540"></canvas> <br/>
    <p>
        How to play:
    <ul>
        <li>To navigate the ship, use the ← and → arrow keys to turn and the ↑ arrow key
            to thrust.</li>
        <li>To fire press <b>Space bar</b>.</li>
        <li>To pause the game, press <b>P</b>.</li>
        <li>The ship has 3 lives. If your ship is destroyed 3 times, your score will reset to zero. The screen will display a 'Game Over' message that will stay for a few seconds before the next game starts. </li>
    <p>Each game session will last 60 minutes during which you can play an unlimited number of times. You are expected to play for the full duration of the session. After the 60 minutes are over, this session will end. </p>
 </ul>

      <div id="left-controls">
    <div id="up" class='button'>THRUST</div>
    <div id="left" class='button'>LEFT</div>
    <div id="right" class='button'>RIGHT</div>
  </div>
  <div id="right-controls">
    <div id="space" class='button'>FIRE</div>
  </div>
</div>
<br>
    <button class="otree-btn-next btn btn-primary" style="float: right">Next--></button>
    <br>

    {{ formfields }}
<!--<script>-->

<!--    // Hide the next button-->
<!--$(".otree-btn-next").hide();-->

<!--// Reveal the next button after an hour-->
<!--setTimeout(-->
<!--    function () {-->
<!--        //alert("Time has run out. Please make your decision.");-->
<!--        $(".otree-btn-next").show()-->
<!--    },-->
<!--    60*1000 // 5 seconds here. # 3600 seconds-->
<!--);-->
<!--</script>-->


{{ endblock }}