<head>
<style>
.button {
  background-color: #a3a3c2;
  border: none;
  color: white;
  padding: 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 10px 10px;
  cursor: pointer;
  border-radius: 8px;
}
</style>
</head>

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

{% block title %}
    {% if player.id_in_group == 1 %}
    Jeu 2 : Choix de votre couleur
    {% endif %}
    {% if player.id_in_group == 2 %}
    Jeu 1 : Choix de votre couleur
    {% endif %}


{% endblock %}

{% block content %}


<div class="card bg-light instructions">
    <div class="card-body">


    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>


        <p> Veuillez choisir entre les deux boutons suivants :  </p>

<p> Une couleur (rouge ou verte) est cachée derrière chaque bouton.
             Lorsque vous cliquez sur l'un des boutons, sa couleur apparaît.
             Si la couleur qui apparaît est verte, vous recevrez les gains verts de la sélection que vous avez faite au début.
             S'il est rouge, vous recevrez les gains rouges. </p>
<br><br>

<center>
        <button
                onclick="setColor1(event); myFunction()"
                class="button"
                id="b_left_end"
                name="tc3"
                value=""
        >
        </button>

        <button
                onclick="setColor2(event); myFunction()"
                class="button"
                id="b_right_end"
                name="tc3"
                value=""
        >
        </button>
</center>

        <br> <br>
        <FONT color="transparent">  <p  id="demo" ></p> </FONT>

        <FONT color="transparent"> <p id="active"></p> </FONT>

        <FONT color="transparent"> <p id="tc"></p> </FONT>
        <FONT color="transparent"> <p id="l1"></p> </FONT>
        <FONT color="transparent"> <p id="l2"></p> </FONT>



</div> </div>


{% endblock %}


{% block scripts %}

    <script>
      var tiragecolor2= Math.random();
      tiragecolor2 = tiragecolor2.toFixed(2);
      document.getElementById("tc").innerHTML = tiragecolor2;
      let list_l = ['1'];
      let list_r = ['2'];
      list_l.push(document.getElementById("tc").innerHTML);
      list_r.push(document.getElementById("tc").innerHTML);

      list_l2 = list_l.join(';;');
      list_r2 = list_r.join(';;');
      document.getElementById("l1").innerHTML = list_l2;
      document.getElementById("l2").innerHTML = list_r2;
      document.getElementById('b_left_end').value = list_l2;
      document.getElementById('b_right_end').value = list_r2;



      document.getElementById("demo").innerHTML = Math.random();
      var alpha = document.getElementById("demo").innerHTML;

      document.getElementById("active").innerHTML = 99;
      var active1 = document.getElementById("active").innerHTML;

      function myFunction() {
          document.getElementsById('sp1').value = 1;
      }

      function setColor1(e) {

      if (active1 == 99) {

          if (tiragecolor2 >= 0.5) {
              var target = e.target,
              count = +target.dataset.count;
              target.style.backgroundColor = count === 1 ? '#a3a3c2' : '#00802b';
          }

          if (tiragecolor2 < 0.5) {
              var target = e.target,
              count = +target.dataset.count;
              target.style.backgroundColor = count === 1 ? '#a3a3c2' : '#e60000';
          }
      }
          active1 = 1;

      }


      function setColor2(e) {

      if (active1 == 99) {

          if (tiragecolor2 <= 0.5) {
              var target = e.target,
              count = +target.dataset.count;
              target.style.backgroundColor = count === 1 ? '#a3a3c2' : '#00802b';
          }

          if (tiragecolor2 > 0.5) {
              var target = e.target,
              count = +target.dataset.count;
              target.style.backgroundColor = count === 1 ? '#a3a3c2' : '#e60000';
          }
      }
          active1 = 2;

      }

    </script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>

{% endblock %}