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

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


{% block styles %}

    <style>

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

.button {
    font-size:30px; padding:15px 60px; margin:auto; display: block;
    }

    p{
    font-size: 22px;
    text-indent:0;
}
li{
    font-size: 22px;
}
ul{
    font-size: 22px;
}
h2{
    text-align: center;
}
    button{
        margin:15px;
        padding: 4px 8px;
        font-size: 30px;
    }



    </style>

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

{% endblock %}

{% block content %}
        <p>
            The color of the shell of the chosen ball is {% if player.shell == 0 %}<span style="color: blue; font-weight: bold;">Blue</span>{% else %}<span style="color: red; font-weight: bold;">Red</span>{% endif %}.
        </p>
        <p>
            The corresponding spinning wheel is:
        </p>

<div class="wrapper">
  <div class="wheel">
    <div class="inner-wheel">
        {% if player.shell == 0 %}
      <div class="range3">
  <div class="slice3 left">
    <div class="blocker3"></div>
  </div>
  <div class="slice3 right">
    <div class="blocker3"></div>
  </div>
</div>
        {% else %}
        <div class="range4">
  <div class="slice4 left">
    <div class="blocker4"></div>
  </div>
  <div class="slice4 right">
    <div class="blocker4"></div>
  </div>
</div>
        {% endif %}
    </div>

    <div id="spin">
      <div id="inner-spin"></div>
    </div>

    <div id="shine"></div>
  </div>
  <div id="txt"></div>
    {% if player.shell == 0 %}
    <div class="note1"><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>
    {% else %}
    <div class="note1"><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>
    {% endif %}
</div>
<div id="Draw_outcome" style="font-size: 26px; font-weight: bold;"></div>

<br>
<br>
<br>
<br>
<br>

<div id="B4view">
    <p>
        Click the “Spin” button in the middle of the spinning wheel.
    </p>
</div>

<div id="Afview" style="display: none;">
<p>
    Your message <br> "The color of the shell is {% if player.message_sent == 0 %}<span style="color: blue; font-weight: bold;">BLUE</span>{% else %}<span style="color: red; font-weight: bold;">RED</span>{% endif %}" <br> is sent to the receiver in your pair.
</p>
    <button>Continue</button>
</div>


{% endblock %}

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



<script>
if ({{ player.shell }} == 0) {
document.getElementById('spin').addEventListener('click', () => {spinFunction3({{ spindeg }});}, { once : true});
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)" });
  }
} else {
document.getElementById('spin').addEventListener('click', () => {spinFunction4({{ spindeg }});}, { once : true});
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)" });
  }
}

document.getElementById('spin').onclick = function () {
$('#B4view').hide();
}

document.getElementsByClassName('inner-wheel')[0].ontransitionend = function () {
$("#Afview").show();
}
</script>


{% endblock %}