{{ block title }}
Spiel {{GameNumber}}/5: 60s Monopolist First Mover Spiel
{{ endblock }}
{{ block content }}

<h4>Spieldurchlauf {{round_num}}/{{Constants.num_rounds}}</h4> <br>
<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>

{{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>Warte auf Monopolist</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("ent_in").disabled = true;
        document.getElementById("ent_out").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
                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 distinct text more bold
            if(document.getElementById("inc_tolerate").checked == true) {
                if (value =="IN") {
                    // Marked cell
                    document.getElementById("table").rows[2].cells[2].style.backgroundColor = "#E0FFFF";
                    document.getElementById("table").rows[2].cells[1].style.backgroundColor = "#B4CDCD";
                    document.getElementById("table").rows[2].cells[0].style.backgroundColor = "#E0FFFF";
                    // Unmarked cell
                    document.getElementById("table").rows[3].cells[2].style.backgroundColor = "#FFFFFF";
                    document.getElementById("table").rows[3].cells[1].style.backgroundColor = "#E0FFFF";
                    document.getElementById("table").rows[3].cells[0].style.backgroundColor = "#FFFFFF";
                }
                else{
                    // Unmarked cell
                    document.getElementById("table").rows[2].cells[2].style.backgroundColor = "#FFFFFF";
                    document.getElementById("table").rows[2].cells[1].style.backgroundColor = "#E0FFFF";
                    document.getElementById("table").rows[2].cells[0].style.backgroundColor = "#FFFFFF";
                    // Marked cell
                    document.getElementById("table").rows[3].cells[2].style.backgroundColor = "#E0FFFF";
                    document.getElementById("table").rows[3].cells[1].style.backgroundColor = "#B4CDCD";
                    document.getElementById("table").rows[3].cells[0].style.backgroundColor = "#E0FFFF";
                }
            }
            else{
                if (value =="IN") {
                    // Marked cell
                    document.getElementById("table").rows[2].cells[2].style.backgroundColor = "#B4CDCD";
                    document.getElementById("table").rows[2].cells[1].style.backgroundColor = "#E0FFFF";
                    document.getElementById("table").rows[2].cells[0].style.backgroundColor = "#E0FFFF";
                    // Unmarked cell
                    document.getElementById("table").rows[3].cells[2].style.backgroundColor = "#E0FFFF";
                    document.getElementById("table").rows[3].cells[1].style.backgroundColor = "#FFFFFF";
                    document.getElementById("table").rows[3].cells[0].style.backgroundColor = "#FFFFFF";
                }
                else{
                    // Unmarked cell
                    document.getElementById("table").rows[2].cells[2].style.backgroundColor = "#E0FFFF";
                    document.getElementById("table").rows[2].cells[1].style.backgroundColor = "#FFFFFF";
                    document.getElementById("table").rows[2].cells[0].style.backgroundColor = "#FFFFFF";
                    // Marked cell
                    document.getElementById("table").rows[3].cells[2].style.backgroundColor = "#B4CDCD";
                    document.getElementById("table").rows[3].cells[1].style.backgroundColor = "#E0FFFF";
                    document.getElementById("table").rows[3].cells[0].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").style.visibility = "visible";
        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)

        // Actions to process for Entrant as first mover
        if (data.refresh_game == 1){

            if (js_vars.my_id == 1) {
                // Message to Incumbent
                alert("Die Strategie des Monopolisten war: " + strategieInc(data.inc_action))

                // Remove Waiting notice, enable button and show, which button Monopolist klicked
                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(idInc(data.inc_action)).checked = true;

                // Make one column bold and other light
                if (data.inc_action == "FIGHT"){
                    //Bold
                    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";
                    console.log(data.inc_action)

                    // 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";
                    }
                }
            }


        // Actions to process if Monopolist as second mover made choice
        if (data.refresh_game == 0){

            // Round number counter
            round_number_counter = round_number_counter + 1

            // Make cells background light
            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";

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

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

                // Refresh Payout
                document.getElementById("ent_payout").innerText = Math.round(parseInt(data.ent_payout))

                // Refresh Visibilities
                document.getElementById("inc_tolerate").checked = false;
                document.getElementById("inc_fight").checked = false;
                document.getElementById("ent_in").checked = false; 
                document.getElementById("ent_out").checked = false;
                //document.getElementById("wait_e").style.visibility = "visible";
                document.getElementById('button_ent').removeAttribute("visible");

                document.getElementById("wait_e").innerText = "Warte auf Monopolist"
                document.getElementById("wait_e").style.fontWeight = 'bold';


            }

            if (js_vars.my_id == 2) {

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

                // Refresh Payout
                document.getElementById("inc_payout").innerText = Math.round(parseInt(data.inc_payout))

                // Refresh Visibilities
                document.getElementById("ent_in").checked = false; 
                document.getElementById("ent_out").checked = false;
                document.getElementById("inc_tolerate").checked = false;
                document.getElementById("inc_fight").checked = false;
                document.getElementById("inc_tolerate").disabled = false;
                document.getElementById("inc_fight").disabled = false;
                document.getElementById("wait_i").innerHTML = "Wählen Sie Ihre Strategie!"
                document.getElementById("wait_i").style.fontWeight = 'bold';
                document.getElementById("button_inc").removeAttribute("visible");
                
            }

            // 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)
        }
    }


    // Help-Functions

    function strategieEnt(strategy_ent){
        if (strategy_ent == "OUT"){
            return "Nicht Investieren";
        }
        else {
            return "Investieren";
            }
        }

    function idEnt(strategy_ent){
        if (strategy_ent == "OUT"){
            return "ent_out";
        }
        else {
            return  "ent_in";
        }
    }

    function classBoldEntrant(strategy_ent){
        if (strategy_ent == "OUT"){
            return "Ninvestieren";
        }
        else {
            return  "investieren";
        }
    }

    function classLightEntrant(strategy_ent){
        if (strategy_ent == "OUT"){
            return "investieren";
        }
        else {
            return  "Ninvestieren";
        }
    }
    function strategieInc(radio_inc){
        if (radio_inc == "TOLERATE"){
            return "Investment Dulden";
        }
        else {
            return "Investment Erschweren";
            }
        }

    function idInc(strategy_inc){
        if (strategy_inc == "TOLERATE"){
            return "inc_tolerate";
        }
        else {
            return  "inc_fight";
        }
    }


</script>




{{ endblock }}