{% extends "global/Page.html" %}
{% load otree %}

{% block title %} {% endblock %}

<!-- SCRIPTS -->

{% block scripts %} <script>

  let degree1 = 0;
  let degree2 = 0;
  let turn = 0;
  let total_turns = 1;
  let allow = "peg1";

  // Initialize highlight
  document.getElementById("peg1").classList.add("highlight");

  //Hide button
  document.getElementById("next").style.visibility="hidden";

  function rotatePeg1(){
    if("peg1" == allow && turn < total_turns){
      var peg = document.getElementById("peg1");
      degree1 = (degree1 + 90) % 360;
      peg.style.WebkitTransform = "rotate("+degree1+"deg)";
      allow = "peg2";
      highlightPeg('peg1', 'peg2')
    }
  }
  function rotatePeg2(){
    if("peg2" == allow && turn < total_turns){
      var peg = document.getElementById("peg2");
      degree2 = (degree2 + 90) % 360;
      peg.style.WebkitTransform = "rotate("+degree2+"deg)";
      // Increment turn count when last peg is turned 360 degrees
      // Remove all highlights, show next button
      if(degree2 == 0){
        turn = turn + 1;
        allow = ""
        peg.classList.remove("highlight");
        document.getElementById("next").style.visibility="visible";
      }
      else{
        allow = "peg1";
        highlightPeg('peg2', 'peg1')
      }
    }
  }

  function highlightPeg(prev_peg, next_peg){
    var prev_peg = document.getElementById(prev_peg);
    prev_peg.classList.remove("highlight");
    var next_peg = document.getElementById(next_peg);
    next_peg.classList.add("highlight");
  }


</script> {% endblock %}

{% block styles %}<style>


  img {
    padding: 0;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }

  .highlight {
    -webkit-filter: drop-shadow(0 0 7px blue);
    filter: drop-shadow(0 0 7px blue);
  }

  .expand:hover { 
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05); 
  }

  table.center {
    margin-left:auto; 
    margin-right:auto;
  }

  p, h1 {
    text-align: center;
    margin-left:auto; 
    margin-right:auto;
  }

  .card{
    text-align: center;
  }

  .card button {
    border: none;
    outline: 0;
    padding: 5px;
    color: white;
    background-color: black;
    text-align: center;
    cursor: pointer;
    width: 150px;
    font-size: 15px;
     }

  .card button:hover {
    opacity: 0.7;
  }
  .nextButton button{
    border: none;
    outline: 0;
    padding: 5px;
    color: white;
    background-color: black;
    text-align: center;
    cursor: pointer;
    width: 150px;
    font-size: 15px;
 
  }

</style> {% endblock %}

<!-- BODY -->

{% block content %}

<h1 style="text-align:center; font-family: arial;">Lets Turn Some Pegs! </h1>
<h2 style="text-align: center; font-family: arial:"> Mini Game Tutorial </h2>
<br>
<p style="text-align:justify ; font-family: arial;"> Your main goal in the game is to turn the pegs as many times as possible. Each peg can only be rotated 90 degrees clockwise per 1 click. After each click, the peg that you have to rotate next will be highlighted with blue and it is not possible to rotate a peg again unless it is highlighted. When you rotate all the pegs back to their original starting position, then you have a <b>full rotation</b>. You will have 5 minutes in total.
<br>
<br>
For each <b>full rotation</b> you will gain <b>5 cents</b> and the maximum prize of this game is <b>3 euros</b>.
<br>
<br>
The least number of rotations that can be done in 5 minutes was determined and it is also required from you to meet or pass beyond this number to be considered as participated in the game. If the specified number of rotations is not achieved, you can neither continue the study nor receive the award, and will be returned to the start of the game.
Once you have completed or pass beyond the specified number of rotations, you can either continue playing or move on to the next page by simply clicking the corresponding button. If you prefer to play again, your prize will be calculated depending on your number of full rotations in the both rounds.
<br>
<br>
Let's start with a quick warm up round. To pass the tutorial, see if you can complete a <b>single full rotation</b>!
</p>

<!-- Table with the visuals-->
  <table width="600" height= "150" border="0" cellpadding="5" class="center">
    <!-- Row 1 -->
    <tr>
      <td align="center" valign="center">
        <div class="expand">
        <img id="peg1"  draggable= "false" src="{% static "peg_turning/peg.png" %}" style="width:128px;height:128px;" class="center" onclick='rotatePeg1();'/>
        </div>
      </td>
      <td align="center" valign="center">
        <div class="expand">
        <img id="peg2" draggable= "false" src="{% static "peg_turning/peg.png" %}" style="width:128px;height:128px;" class="center" onclick='rotatePeg2();'/>
        </div>
      </td>
    </tr>
  </table>

  <br>
<br>
<div class="nextButton">
<p><button id="next">Next</button></p>
</div>

{% endblock %}