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

{% block title %}

{% endblock %}

{% block content %}
<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer2 {
  width: 100%;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
</style>

<h3 align=center><font color="blue">In round 1</font></H3>
<font size="4">
    <br>
<br>Use the sliders below to see the potential payoffs for different combinations of bids.
<br>
<br>
<div class="slidecontainer">
  <input type="range" min="0" max="100"  value="0" class="slider" id="myRange1">
    <p>{% if player.id_in_group == 1 %}B's {% else %} A's
    {% endif  %} Bid: <input type="text" id="demo1" onkeypress="return event.keyCode != 13;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        (<span id="othBall"></span>
        {% if player.id_in_group == 1 %} 'B' balls) {% else %} 'A' balls)
    {% endif  %}<br/>{{ other_player_role }} keeps = <span id="othkeep"></span> points<br/>
    </p>
</div>
<br>
<div class="slidecontainer2">
  <input type="range" min="0" max="100" value="0" class="slider2" id="myRange2">
  <p>Your Bid: <input type="text" id="demo2" onkeypress="return event.keyCode != 13;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      &nbsp; &nbsp; &nbsp; &nbsp; (<span id="ownBall"></span>
      {% if player.id_in_group == 1 %} 'A' balls) {% else %} 'B' balls)
    {% endif  %}<br/>You keep = <span id="keep"></span> points <br/>
  </p>
</div>
    <p>With this combination of bids, you have: <br/>
<center>
<table style="display: inline-block; border: 1px solid; float: left; ">
    <tr>
        <td colspan="2"><center><font color="red" ><span id="WinP"></span>%</font> chance</center></td>
        <td colspan="2"><center><font color="red" ><span id="NegPDiff"></span>%</font> chance</center></td>
    </tr>
    <tr>
        <td colspan="2"><ul><li><strong>You</strong> win and <strong>earn <font color="red"><span id="winPay"></span> points</font></strong></li>
          <li><strong>{{ other_player_role }}</strong> loses and earns <strong><span id="othLosePay"></span></strong></li>
          </ul></td>
        <td colspan="2"><ul><li><strong>You</strong> lose and <strong>earn <font color="red"><span id="winLose"></span> points</font></strong></li>
          <li><strong>{{ other_player_role }}</strong> wins and <strong>earns <span id="othWinPay"></span></strong></li>
          </ul></td>

    </tr>
</table>
</center>
</font>

 <!--   <table class="table">
  <tr>
    <th><span id="WinP"></span>% chance</th>
    <th> <span id="NegPDiff"></span>% chance</th>
  </tr>
  <tr>
      <td><ul><li><strong>You</strong> win and <strong>earn <span id="winPay"></span> points</strong></li>
          <li><strong>{{ other_player_role }}</strong> loses and earns <strong><span id="othLosePay"></span></strong></li>
          </ul></td>
      <td><ul><li><strong>You</strong> lose and <strong>earn <span id="winLose"></span> points</strong></li>
          <li><strong>{{ other_player_role }}</strong> wins and <strong>earns <span id="othWinPay"></span></strong></li>
          </ul></td>
  </tr>
</table>
</font>-->


<script>


    $(document).ready(function() {
      $('.otree-btn-next').hide().delay(60000).fadeIn(1);});

var slider = document.getElementById("myRange1");
var output = document.getElementById("demo1");
var winP = document.getElementById("WinP");
var NegpaD = document.getElementById("NegPDiff");
var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");
var keep = document.getElementById("keep");
var winPay = document.getElementById("winPay");
var winLose = document.getElementById("winLose");
var othBall = document.getElementById("othBall");
var ownBall = document.getElementById("ownBall");
var othWinPay = document.getElementById("othWinPay");
var othLosePay = document.getElementById("othLosePay");
var othkeep = document.getElementById("othkeep");

function Y(a, b) {
return 300*b/(a + (3*b));
}

function negY(a, b) {
return 100*a/(a + (3*b));
}

function myFunction(a, b) {
return 100*b/(b + (3*a));
}

function negmyFunction(a, b) {
return 300*a/(b + (3*a));
}

function K(a) {
    return 100-a;
}
function W(a) {
    return 200-a;
}

function othA(a) {
    return a;
}

function othB(a) {
    return 3*a;
}


slider.oninput = function() {
 output.value = this.value;
if(output2.value != ""){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
winP.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
winP.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negmyFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% endif %}
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
}
}
othkeep.innerHTML = K(parseInt(slider.value));
othWinPay.innerHTML = W(parseInt(slider.value));
othLosePay.innerHTML = K(parseInt(slider.value));
{% if player.id_in_group == 1 %}
othBall.innerHTML = othA(parseInt(slider.value));
    {% else %}
othBall.innerHTML = othB(parseInt(slider.value));
    {% endif %}
}

output.oninput = function() {
 slider.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
winP.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
winP.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negmyFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% endif %}
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
}
}
othkeep.innerHTML = K(parseInt(slider.value));
othWinPay.innerHTML = W(parseInt(slider.value));
othLosePay.innerHTML = K(parseInt(slider.value));
}

slider2.oninput = function() {
  output2.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
winP.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
winP.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negmyFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% endif %}
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
}
keep.innerHTML = K(parseInt(slider2.value));
winPay.innerHTML = W(parseInt(slider2.value));
winLose.innerHTML = K(parseInt(slider2.value));
}
{% if player.id_in_group == 1 %}
ownBall.innerHTML = othB(parseInt(slider2.value));
    {% else %}
ownBall.innerHTML = othA(parseInt(slider2.value));
    {% endif %}
}

output2.oninput = function() {
  slider2.value = this.value;
if(output2.value != "" ){if (parseInt(slider.value) > 0 || parseInt(slider2.value) > 0) {{% if player.id_in_group == 1 %}
winP.innerHTML = Y(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negY(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% else %}
winP.innerHTML = myFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
NegpaD.innerHTML = negmyFunction(parseInt(slider.value), parseInt(slider2.value)).toFixed(0);
{% endif %}
} else {
{% if player.id_in_group == 1 %}
winP.innerHTML = "75";
NegpaD.innerHTML = "25";
{% else %}
winP.innerHTML = "25";
NegpaD.innerHTML = "75";
{% endif %}
}
keep.innerHTML = K(parseInt(slider2.value));
winPay.innerHTML = W(parseInt(slider2.value));
winLose.innerHTML = K(parseInt(slider2.value));
NegpaD.innerHTML = K(paD).toFixed(0);
}
{% if player.id_in_group == 1 %}
ownBall.innerHTML = othB(parseInt(slider2.value));
    {% else %}
ownBall.innerHTML = othA(parseInt(slider2.value));
    {% endif %}
}

</script>





    {% next_button %}

{% endblock %}