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


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

<b>Runde:</b> <span id="round_number">1</span>/(max.) {{Constants.round_num}}


{{if player.id_in_group == 1}}

<!--Anzeige Entrant-->
<p id="payout">
    <b>Ihre Auszahlung:</b> <span id="ent_payout">0</span><br>
    <b>Investitionen bis Markteintritt</b>: <span id="ent_invest_until_in">{{Constants.time_investment}}</span><br>
</p>

<h5>Payout Phase 1 pro 60 Sekunden</h5>

<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 style="width:200px">
        <input type="radio" id="inc_tolerate" onclick ="sendAction(value)" name="incumbent"  value="TOLERATE">
        <label for="dulden">Investment Dulden</label>
    </td>
    <td style="width:230px">
        <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 style="width:30%">
          <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>



{{else}}
<!--Anzeige Incumbent-->
<p id="payout">
    <b>Ihre Auszahlung:</b> <span id="inc_payout">0</span><br>
    <b>Investitionen bis Markteintritt</b>: <span id="ent_invest_until_in">{{Constants.time_investment}}</span><br>
</p>

<h5>Payout Phase 1 pro 60 Sekunden</h5>

<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 style="width:200px">
        <input type="radio" id="inc_tolerate" onclick ="sendAction(value)" name="incumbent"  value="TOLERATE">
        <label for="dulden">Investment Dulden</label>
    </td>
    <td style="width:230px">
        <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 style="width:30%">
          <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>
{{endif}}


<br>
<!--Eingabe Buttons für Entrant und Incumbent-->

{{if player.id_in_group == 1}}
<!--Eingabe Button Entrant inkl. Informationsmeldung-->
<input type="button" hidden class="button" value="Eingabe" id="button_ent" onclick="button_sendAction_e()">
<p id="wait_e" style="visibility: visible;color:red;"><b>Wählen Sie Ihre Strategie!</b></p>

{{else}}
<!--Eingabe Button Incumbent inkl. Informationsmeldung-->
<input type="button" hidden class="button" value="Eingabe" id="button_inc" onclick="button_sendAction_i()">
<p id="wait_i" style="visibility: visible;color:red;"><b>Wählen Sie Ihre Strategie!</b></p>

{{endif}}

<h5>Payout Phase 2 pro 60 Sekunden</h5>
{{if player.id_in_group == 1}}
<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>

{{else}}
<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}}

<style>

    .button{
        padding:0.3em 1.2em;
        margin:0 0.3em 0.3em 0;
        box-sizing: border-box;
        text-decoration:none;
        font-family:'Roboto',sans-serif;
        font-weight:300;
        color:#FFFFFF;
        background-color:green;
        text-align:center;
        transition: all 0.2s;
}
    .button:hover{
        background-color:darkgreen;
        }


</style>

<br><br>

<script>
    var round_number_counter = 1
    let title = document.getElementById('title');
    

    // 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;
        document.getElementById("inc_tolerate").style.display = 'none'
        document.getElementById("inc_fight").style.display = 'none'
        title.innerText = "Sie sind der Entrant"

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

    // Function, if player clicks on the radio buttons. Send the value of the button to the python script
    function sendAction(value) {
        // Show "Eingabe"-Button, if Incumbent clicked on radio button
        if(value == "FIGHT" | value == "TOLERATE"){

            document.getElementById("button_inc").removeAttribute("hidden");
            document.getElementById('button_inc').style.visibility = 'visible'

            // Make one column bold and the other column light
            if (value == "FIGHT"){
                //Bold
                console.log('Strategy changed')
                document.getElementById("table").rows[1].cells[2].style.backgroundColor = "#E0FFFF";
                document.getElementById("table").rows[2].cells[2].style.backgroundColor = "#E0FFFF";
                document.getElementById("table").rows[3].cells[2].style.backgroundColor = "#E0FFFF";

                // Light
                document.getElementById("table").rows[1].cells[1].style.backgroundColor = "#FFFFFF";
                document.getElementById("table").rows[2].cells[1].style.backgroundColor = "#FFFFFF";
                document.getElementById("table").rows[3].cells[1].style.backgroundColor = "#FFFFFF";

            }
            else{
                //Bold
                document.getElementById("table").rows[1].cells[1].style.backgroundColor = "#E0FFFF";
                document.getElementById("table").rows[2].cells[1].style.backgroundColor = "#E0FFFF";
                document.getElementById("table").rows[3].cells[1].style.backgroundColor = "#E0FFFF";

                // Light
                document.getElementById("table").rows[1].cells[2].style.backgroundColor = "#FFFFFF";
                document.getElementById("table").rows[2].cells[2].style.backgroundColor = "#FFFFFF";
                document.getElementById("table").rows[3].cells[2].style.backgroundColor = "#FFFFFF";
            }
        }
        // Show "Eingabe"-Button, if Entrant clicked on radio button
        else{
            document.getElementById('button_ent').removeAttribute("hidden");
            document.getElementById('button_ent').style.visibility = 'visible'

            // Make one row bold and the other row light
            if (value == "IN"){
                document.getElementById("investieren").style.backgroundColor = "#E0FFFF";
                document.getElementById("Ninvestieren").style.backgroundColor = "#FFFFFF";
            }
            else{
                document.getElementById("investieren").style.backgroundColor = "#FFFFFF";
                document.getElementById("Ninvestieren").style.backgroundColor = "#E0FFFF";
            }
        }

    }
    // Function if Incumbent clicks on button
    function button_sendAction_i() {
        //Info to player, disable radio button and hide "Eingabe" button
        document.getElementById("wait_i").innerHTML = "Warte auf Entrant"
        document.getElementById("wait_i").style.fontWeight = 'bold';
        document.getElementById("inc_tolerate").disabled = true;
        document.getElementById("inc_fight").disabled = true;
        document.getElementById('button_inc').style.visibility = 'hidden'

        console.log('Monopolist clicked on button')



        // Send value to python-Script
        liveSend(document.querySelector('input[name="incumbent"]:checked').value);
    }


    // Function if entrant clicks on button
    function button_sendAction_e() {
        //Info to player, disable radio button and hide "Eingabe" button
        document.getElementById("wait_e").innerText = "Warte auf Monopolist"
        document.getElementById("wait_e").style.fontWeight = 'bold';
        document.getElementById("ent_in").disabled = true;
        document.getElementById("ent_out").disabled = true;
        document.getElementById('button_ent').style.visibility = 'hidden'

        console.log('Entrant clicked on button')


        // Send value to python-Script
        liveSend(document.querySelector('input[name="ent"]:checked').value);

    }


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

        if (data.refresh_game == 0){


            // Round number counter
            round_number_counter = round_number_counter + 1


            // get which radio button is checked
            var radio_ent = document.querySelector('input[name="ent"]:checked');
            var radio_inc = document.querySelector('input[name="incumbent"]:checked');

            // Refresh payouts of respective player and make everything to initial state
            if (js_vars.my_id == 1) {

                // Message to entrant
                alert("Ihre Strategie war: " + strategieEnt(data.ent_action)
                    + "\nDie Strategie des Monopolisten war: " + strategieInc(data.inc_action)
                    + "\n\nIhre Auszahlung in der aktuellen Runde beträgt daher: " + data.current_ent_payout
                    )

                // Refresh other
                document.getElementById("ent_payout").innerText = Math.round(parseInt(data.ent_payout))
                document.getElementById("wait_e").innerText = "Wählen Sie Ihre Strategie!"
                document.getElementById("wait_e").style.fontWeight = 'bold';
                document.getElementById("ent_in").disabled = false;
                document.getElementById("ent_out").disabled = false;
                document.getElementById('button_ent').removeAttribute("visible");
                radio_ent.checked = false;

                // Make cells unbold
                document.getElementById("Ninvestieren").style.backgroundColor = "#FFFFFF";
                document.getElementById("investieren").style.backgroundColor = "#FFFFFF";

            }

            if (js_vars.my_id == 2) {

                // Message to incumbent
                alert("Ihre Strategie war: " + strategieInc(data.inc_action)
                    + "\nDie Strategie des Entrants war: " + strategieEnt(data.ent_action)
                    + "\n\nIhre Auszahlung in der aktuellen Runde beträgt daher: " + data.current_inc_payout
                    )


                // Refresh other
                document.getElementById("inc_payout").innerText = Math.round(parseInt(data.inc_payout))
                document.getElementById("wait_i").innerHTML = "Wählen Sie Ihre Strategie!"
                document.getElementById("wait_i").style.fontWeight = 'bold';
                document.getElementById("inc_tolerate").disabled = false;
                document.getElementById("inc_fight").disabled = false;
                document.getElementById("button_inc").removeAttribute("visible");
                radio_inc.checked = false;

                // Make cells unbold
                document.getElementById("table").rows[1].cells[1].style.backgroundColor = "#FFFFFF";
                document.getElementById("table").rows[2].cells[1].style.backgroundColor = "#FFFFFF";
                document.getElementById("table").rows[3].cells[1].style.backgroundColor = "#FFFFFF";
                document.getElementById("table").rows[1].cells[2].style.backgroundColor = "#FFFFFF";
                document.getElementById("table").rows[2].cells[2].style.backgroundColor = "#FFFFFF";
                document.getElementById("table").rows[3].cells[2].style.backgroundColor = "#FFFFFF";
            }

            // End game if market entry completed or round number bigger than 4
            if (parseFloat(data.ent_invest_until_in) < 1 | round_number_counter == 4){

                setTimeout(submission, 2000);
                if (js_vars.my_id == 1) {
                    document.getElementById("wait_e").innerHTML = "Das Spiel ist zu Ende"
                    document.getElementById("wait_e").style.fontWeight = 'bold';
                }
                if (js_vars.my_id == 2) {
                    document.getElementById("wait_i").innerHTML = "Das Spiel ist zu Ende"
                    document.getElementById("wait_i").style.fontWeight = 'bold';
                }

                function submission(){
                    document.getElementById("form").submit();
                }
            }
            else{
                document.getElementById("round_number").innerText = round_number_counter
            }


            
            // Display the remaining time until the invest
            var remainingTimeForInvest = parseFloat(data.ent_invest_until_in)
            document.getElementById("ent_invest_until_in").innerText = Math.round(remainingTimeForInvest)
        }
    }

    // Hilfs-Functions

    function strategieEnt(radio_ent){
        if (radio_ent == "OUT"){
            return "Nicht Investieren";
        }
        else {
            return "Investieren";
            }
        }
    function strategieInc(radio_inc){
        if (radio_inc == "TOLERATE"){
            return "Investment Dulden";
        }
        else {
            return "Investment Erschweren";
            }
        }

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


</script>




{{ endblock }}