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

{% block title %}
    <u>{{ title_text }}</u>
{% endblock %}

{% block styles %}

<link href="{% static 'repeated_CT/Wheel.css' %}" rel="stylesheet">

<style>
body{
       text-align: center;
       align-items: center;
       justify-content: center;
    }

    .redbt { background-color:red;
    color: white;
    font-size:30px; padding:15px 60px;
    }
    .bluebt { background-color:blue;
    color: white;
    font-size:30px; padding:15px 60px;
    }

    p{
    font-size: 22px;
    text-indent:0;
}
li{
    font-size: 22px;
}
ul{
    font-size: 22px;
}
h2{
    text-align: center;
}
</style>

{% endblock %}

{% block content %}
<p>You received the message "The color of the shell is {% if player.message_received == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}."</p>

{% if subsession.gamemode == 0 %}
<p>Your message was generated from the following spinning wheels:</p>

    <div class="wrapper" style="float: left; margin-left: 90px;">
<div class="wheel">
    <div class="inner-wheel">
      <div class="range3">
  <div class="slice3 left">
    <div class="blocker3"></div>
  </div>
  <div class="slice3 right">
    <div class="blocker3"></div>
  </div>
</div>
        </div>
  </div>
 <div class="note1"><p>When the color of the shell is <span style="color: blue; font-weight: bold;">BLUE</span>:</p>
    <p><span style="color: red; font-weight: bold;">{{ recom_0 }}</span>% Red, <span style="color: blue; font-weight: bold;">{{ recomm_0 }}</span>% Blue</p>
    </div>
    </div>

    <div class="wrapper" style="float: right; margin-right: 90px;">
<div class="wheel">
    <div class="inner-wheel">
        <div class="range4">
  <div class="slice4 left">
    <div class="blocker4"></div>
  </div>
  <div class="slice4 right">
    <div class="blocker4"></div>
  </div>
</div>
    </div>
         </div>
        <div class="note2"><p>When the color of the shell is <span style="color: red; font-weight: bold;">RED</span>:</p>
    <p><span style="color: red; font-weight: bold;">{{ recomm_1 }}</span>% Red, <span style="color: blue; font-weight: bold;">{{ recom_1 }}</span>% Blue</p>
    </div>
    </div><div style="clear:both;"></div>
<br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

{% endif %}
<br>
<p>Please choose one of the following two actions:</p>
<button name="conjecture" value="0" class="bluebt">BLUE</button>
<button name="conjecture" value="1" class="redbt">RED</button>


{% endblock %}


{% block scripts %}
<script src="{% static 'repeated_CT/Wheel.js' %}"></script>



<script>
if ({{ finalDeg0 }} <= 180) {
    $(".range3").find(".right .blocker3").css({ transform: "rotate(" + {{ finalDeg0 }} + "deg)" });
    $(".range3").find(".left .blocker3").css({ transform: "rotate(0)" });
  } else {
    $(".range3").find(".right .blocker3").css({ transform: "rotate(180deg)" });
    $(".range3")
      .find(".left .blocker3")
      .css({ transform: "rotate(" + ({{ finalDeg0 }} - 180) + "deg)" });
  }



if ({{ finalDeg1 }} <= 180) {
    $(".range4").find(".right .blocker4").css({ transform: "rotate(" + {{ finalDeg1 }} + "deg)" });
    $(".range4").find(".left .blocker4").css({ transform: "rotate(0)" });
  } else {
    $(".range4").find(".right .blocker4").css({ transform: "rotate(180deg)" });
    $(".range4")
      .find(".left .blocker4")
      .css({ transform: "rotate(" + ({{ finalDeg1 }} - 180) + "deg)" });
  }

</script>


{% endblock %}