{{ block title }}
Spiel {{GameNumber}}/2: Proberunde
{{ endblock }}
{{ block content }}



<!--<input type="radio" id="ein" onclick ="sendRadio_in(value)" name="entrant" value="10">
<label for="ein">Markteintritt</label><br>
<input type="radio" id="aus" onclick="sendRadio_out(value)" name="entrant" value="15">
<label for="aus">Kein Markteintritt</label><br> -->


<u><p id="title"></p></u>



{{if player.id_in_group == 1}}
<p id="payout">
    <b>Ihre Auszahlung:</b> <span id="ent_payout">0</span><br>
 <!--   <i>Time already invested</i>: <span id="ent_invest">0</span><br> -->
    <b>Zeit bis zum Markteintritt des Entrants [Sekunden]</b>: <span id="ent_invest_until_in">0</span><br>
  <!--   <i>Time Phase 1</i>: <span id="len_phase1">0</span> -->
</p>
<b>Auszahlungen Phase 1 pro Sekunde</b>
<style>
    th, td {
        border: 1px solid black;
    }
</style>
 <table cellpadding=12 id="table">
  <tr>
      <th>Entrant</th>
      <th colspan="2">Monopolist</th>
  </tr>

  <tr>
  	<th></th>
    <td>
        <input type="radio" id="inc_tolerate" onclick ="sendAction(value)" name="incumbent"  value="TOLERATE">
        <label for="dulden">Investment Dulden</label>
    </td>
    <td>
        <input type="radio" id="inc_fight" onclick="sendAction(value)" name="incumbent"  value="FIGHT">
        <label for="fight">Investment Erschweren</label></td>
    </td>
  </tr>

  <tr id="investieren">
      <td>
          <input type="radio" id="ent_in" onclick ="sendAction(value)" name="ent"  value="IN">
          <label for="ein">Investieren</label>
      </td>
      <td align="center"><p id="tolerate_in" class="action_display">(<b>{{Constants.payout_entrant_invest_tolerate_1}}</b>,{{Constants.payout_incumbent_invest_tolerate_1}})</p></td>
      <td align="center"><p id="fight_in" class="action_display">(<b>{{Constants.payout_entrant_invest_fight_1}}</b>,{{Constants.payout_incumbent_invest_fight_1}})</p></td>
  </tr>

  <tr id="Ninvestieren">
      <td>
          <input type="radio" id="ent_out" onclick="sendAction(value)" name="ent"  value="OUT">
          <label for="aus">Nicht Investieren</label></td>
      <td align="center"><p id="tolerate_out" class="action_display">(<b>{{Constants.payout_entrant_ninvest_tolerate_1}}</b>,{{Constants.payout_incumbent_ninvest_tolerate_1}})</p></td>
      <td align="center"><p id="fight_out" class="action_display">(<b>{{Constants.payout_entrant_ninvest_fight_1}}</b>,{{Constants.payout_incumbent_ninvest_fight_1}})</p></td>
  </tr>
</table> <br>
<b>Auszahlungen Phase 2 pro Sekunde</b>
<style>
    th, td {
        border: 1px solid black;
    }
</style>
<table cellpadding=12 align="middle">
  <tr>
      <th>Kapazitätsaufbau des Entrants vollständig</th>
      <th>Kapazitätsaufbau des Entrants unvollständig</th>
  </tr>

  <tr>
      <td align="center"><b>{{Constants.payout_entrant_invest_2}}</b> , {{Constants.payout_incumbent_invest_2}}</td>
      <td align="center"><b>{{Constants.payout_entrant_n_invest_2}}</b> , {{Constants.payout_incumbent_n_invest_2}}</td>
  </tr>
</table> <br>

<br><br>

{{else}}
<p id="payout">
    <b>Ihre Auszahlung:</b> <span id="inc_payout">0</span><br>
 <!--   <i>Time already invested</i>: <span id="ent_invest">0</span><br> -->
    <b>Zeit bis zum Markteintritt des Entrants [Sekunden]</b>: <span id="ent_invest_until_in">0</span><br>
  <!--   <i>Time Phase 1</i>: <span id="len_phase1">0</span> -->
</p>
<b>Auszahlungen Phase 1 pro Sekunde</b>
<style>
    th, td {
        border: 1px solid black;
    }
</style>
 <table cellpadding=12 id="table">

  <tr>
      <th>Entrant</th>
      <th colspan="2">Monopolist</th>
  </tr>

  <tr>
  	<th></th>
    <td>
        <input type="radio" id="inc_tolerate" onclick ="sendAction(value)" name="incumbent"  value="TOLERATE">
        <label for="dulden">Investment Dulden</label>
    </td>
    <td>
        <input type="radio" id="inc_fight" onclick="sendAction(value)" name="incumbent"  value="FIGHT">
        <label for="fight">Investment Erschweren</label></td>
    </td>
  </tr>

  <tr id="investieren">
      <td>
          <input type="radio" id="ent_in" onclick ="sendAction(value)" name="ent"  value="IN">
          <label for="ein">Investieren</label>
      </td>
      <td align="center"><p id="tolerate_in" class="action_display">({{Constants.payout_entrant_invest_tolerate_1}},<b>{{Constants.payout_incumbent_invest_tolerate_1}}</b>)</p></td>
      <td align="center"><p id="fight_in" class="action_display">({{Constants.payout_entrant_invest_fight_1}},<b>{{Constants.payout_incumbent_invest_fight_1}}</b>)</p></td>
  </tr>

  <tr id="Ninvestieren">
      <td>
          <input type="radio" id="ent_out" onclick="sendAction(value)" name="ent"  value="OUT">
          <label for="aus">Nicht Investieren</label></td>
      <td align="center"><p id="tolerate_out" class="action_display">({{Constants.payout_entrant_ninvest_tolerate_1}},<b>{{Constants.payout_incumbent_ninvest_tolerate_1}}</b>)</p></td>
      <td align="center"><p id="fight_out" class="action_display">({{Constants.payout_entrant_ninvest_fight_1}},<b>{{Constants.payout_incumbent_ninvest_fight_1}}</b>)</p></td>
  </tr>
</table><br>
<b>Auszahlungen Phase 2 pro Sekunde </b>

<style>
    th, td {
        border: 1px solid black;
    }
</style>
<table cellpadding=12 align="middle">
  <tr>
      <th>Kapazitätsaufbau des Entrants vollständig</th>
      <th>Kapazitätsaufbau des Entrants unvollständig</th>
  </tr>

  <tr>
      <td align="center">{{Constants.payout_entrant_invest_2}} , <b>{{Constants.payout_incumbent_invest_2}}</b></td>
      <td align="center">{{Constants.payout_entrant_n_invest_2}} , <b>{{Constants.payout_incumbent_n_invest_2}}</b></td>
  </tr>
</table> <br>

{{endif}}


<br><br>
 <!--<p id="aktion"></p> -->
<br><br>


<script>
    let title = document.getElementById('title');
//    let aktion = document.getElementById('aktion');
    let test = document.getElementById('test');


    // Disable distinct buttons for the respective players
    if (js_vars.my_id == 1){
        document.getElementById("inc_tolerate").disabled = true;
        document.getElementById("inc_fight").disabled = true;
        title.innerText = "Sie sind der Entrant"

        }
    if (js_vars.my_id == 2){
        document.getElementById("ent_in").disabled = true;
        document.getElementById("ent_out").disabled = true;
        title.innerText = "Sie sind der Monopolist"
        }

    // Send the value of the button to the python script
    function sendAction(value) {
        liveSend(value);
    }

    // Function recalls itself every 1000ms
    function periodicRefresh() {
        setInterval(function(){
            liveSend("UPDATE");
            }, 1000);
    }

    // Receive the processed data from the python script
    function liveRecv(data) {
        console.log('liveRecv', data)

        // Set all case to background color white
        document.getElementById("table").rows[1].cells[1].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[1].cells[2].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[2].cells[0].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[2].cells[1].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[2].cells[2].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[3].cells[0].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[3].cells[1].style.backgroundColor = "#FFFFFF";
        document.getElementById("table").rows[3].cells[2].style.backgroundColor = "#FFFFFF";

        // Make rows and colums light blue for Entrant
        document.getElementById("table").rows[get_row_2(data.ent_action)].cells[0].style.backgroundColor = "#E0FFFF";
        document.getElementById("table").rows[get_row_2(data.ent_action)].cells[1].style.backgroundColor = "#E0FFFF";
        document.getElementById("table").rows[get_row_2(data.ent_action)].cells[2].style.backgroundColor = "#E0FFFF";

        // Make rows and colums light blue for Incumbent
        document.getElementById("table").rows[1].cells[get_col_2(data.inc_action)].style.backgroundColor = "#E0FFFF";
        document.getElementById("table").rows[2].cells[get_col_2(data.inc_action)].style.backgroundColor = "#E0FFFF";
        document.getElementById("table").rows[3].cells[get_col_2(data.inc_action)].style.backgroundColor = "#E0FFFF";

        // The Radio-Buttons are checked depending on the variable of the player
        document.getElementById("inc_" + data.inc_action.toLowerCase()).checked = true
        document.getElementById("ent_" + data.ent_action.toLowerCase()).checked = true

        // Make background of the cell dark blue
        var row = get_row(data.inc_action.toLowerCase() + "_" + data.ent_action.toLowerCase())
        var col = get_col(data.inc_action.toLowerCase() + "_" + data.ent_action.toLowerCase())
        document.getElementById("table").rows[row].cells[col].style.backgroundColor = "#B4CDCD";


//        aktion.innerText =  aktion.innerText + data.aktion + "\n";
        if (js_vars.my_id == 1) {
            document.getElementById("ent_payout").innerText = Math.round(parseInt(data.ent_payout))
        }
        if (js_vars.my_id == 2) {
            document.getElementById("inc_payout").innerText = Math.round(parseInt(data.inc_payout))
        }
//        document.getElementById("ent_invest").innerText = Math.round((parseInt(data.ent_invest) / 1000000000))
        var remainingTimeForInvest = parseFloat(data.ent_invest_until_in)
        document.getElementById("ent_invest_until_in").innerText = Math.round(remainingTimeForInvest)

        // Submit the form when the time to invest reaches 0
        if(remainingTimeForInvest <= 0) {
            $('<input>').attr({
                type: 'hidden',
                name: 'timeout_happened',
                value: '1'
            }).appendTo('form');
            $('#form').submit();
        }
        
//        document.getElementById("len_phase1").innerText = Math.round((parseInt(data.len_phase1) / 1000000000))
    }

    // Function calls liveSend and periodicRefresh after the page is loaded
    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
            if (js_vars.my_id == 1) {
        periodicRefresh()
    }
    });

    //Function to get the column of the marked cell
    function get_col(value){
        if (value == "tolerate_in") {
            return 1;
        }
        else if  (value == "tolerate_out"){
            return 1;
        }
        else if (value == "fight_in") {
            return 2;
        }
        else if  (value == "fight_out"){
            return 2;
        }
    }

    function get_row(value){
        if (value == "tolerate_in") {
            return 2;
        }
        else if  (value == "tolerate_out"){
            return 3;
        }
        else  if (value == "fight_in") {
            return 2;
        }
        else if  (value == "fight_out"){
            return 3;
        }
    }

    function get_row_2(value){
        if (value == "IN"){
            return 2;
        }
        else{
            return 3;
        }
    }

    function get_col_2(value){
        if (value == "TOLERATE") {
            return 1;
        }
        else{
            return 2;
        }
    }

</script>




{{ endblock }}