{% 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 click. After each click, the peg that can be rotated next will be highlighted in blue. You will have 3 minutes in total.
<br>
<br>
A <b>full rotation</b> occurs when all pegs are rotated back to their original starting position. For each <b>full rotation</b> you will gain <b>10 Cents</b>. Up to a maximum of <b>3 Euros</b> can be gained from this game.
<br>
<br>
An undisclosed fixed number of rotations have been determined to be considered as having participated in the game. Unless this value is reached you will not be given the option to continue the study and must replay the game.
At the end of the game you can either continue playing for another 3 minutes to maximize your gain or move on with the study to go on an online shopping spree.
<br>
<br>
Let's start with a quick warm up round. To pass the tutorial, see if you can complete a single <b>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 %}