{{ extends 'global/Page.html' }}
{{ block title }}三つ目の取引{{ endblock }}

{{ block content }}

{{ if group.Attack }}  <!-- Pages for attacked case -->
    {{if group.AttackID == player.id_in_group}} <!-- Page for attacker -->
        <p id = "Instruction"></p>   <!-- Instruction -->
        <p id = "Information"></p>
        <button type="button" id = "next" onclick="NextPage()">Next</button> <!-- Next Button -->
        <!-- Start of table -->
        <table id = "PayoffMatix" border="1">            
        <tr><!-- 1st row the Payoff Matrix -->
            <td>1 </td>
            <td>2</td>
        </tr>
        <tr><!-- 2st row the Payoff Matrix -->
            <td>3 </td>
            <td>4 </td>
        </tr>           
        </table><!-- End of the table -->
        <script>
           let Instruction = document.getElementById('Instruction'); 
           let nextbutton = document.getElementById('next');
           let Information = document.getElementById('Information'); 
           Instruction.innerText = 'これは三つ目の取引のインストラクションです。先ほどの二つ目の取引で攻撃をしなかった人がこの取引に参加できます。この取引では相手に一方的にダメージを与えることができます。一方的にというのは、二つ目の取引のように相手が攻撃してくる脅威が存在しないということです。';
           Information.innerText = 'You are the attacker! No decision to make. Please wait.'; 
           nextbutton.style.visibility = 'hidden';
           function liveRecv(data){
                if (data.nowend){
                    nextbutton.style.visibility = 'visible';
                    if (data.revenge){
                    Instruction.innerText = `Your opponent revenged. The damage is ${data.damage}. `;
                    }
                    else{
                    Instruction.innerText = `Your opponent doesn't revenge. There is no damage on you.`;
                    }
                    Information.innerText = 'Game is over. Thank you!'; 
                }
            } 
           function NextPage() {
                     document.getElementById("form").submit();
                }  
        </script>
    {{else}}<!-- Page for revenger -->
            <p id = "Instruction"></p>   <!-- Instruction -->
            <!-- Revenge displayer -->
            <p id = "RevengeInformation"></p>
            <!-- Retaliation Buttons -->
            <button id ="retaliationYes"   type="button" onclick="SendYes()">Yes</button>
            <button id ="retaliationNO"    type="button" onclick="SendNO()">No</button> 
 
            </br>
            <!-- Retaliation Damage Buttons -->
            <button id ="retaliation25"   type="button" onclick="Send25()">Damage:25</button>
            <button id ="retaliation50"    type="button" onclick="Send50()">Damage:50</button> 
            <button id ="retaliation75"   type="button" onclick="Send75()">Damage:75</button>
            <button id ="retaliation100"    type="button" onclick="Send100()">Damage:100</button> 
            </br>
            <button type="button" id = "next" onclick="NextPage()">Next</button>
            <!-- Start of table -->
            <table id = "PayoffMatix" border="1">            
            <tr><!-- 1st row the Payoff Matrix -->
                <td>1 </td>
                <td>2</td>
            </tr>
            <tr><!-- 2st row the Payoff Matrix -->
                <td>3 </td>
                <td>4 </td>
            </tr>           
            </table><!-- End of the table -->

            <button type="button" id = "ConfirmInstruction" onclick="IConfirm()"></button> <!-- Confrimation Button -->
            <script>
                // define variables
                let RevengeInformation = document.getElementById('RevengeInformation');
                let ConfirmInstruction = document.getElementById('ConfirmInstruction');
                let Instruction = document.getElementById('Instruction'); 
                
                let retaliation25 = document.getElementById('retaliation25');
                let retaliation50 = document.getElementById('retaliation50');
                let retaliation75 = document.getElementById('retaliation75');
                let retaliation100 = document.getElementById('retaliation100');
                
                let retaliationYesbutton = document.getElementById('retaliationYes');
                let retaliationNObutton = document.getElementById('retaliationNO');
                
                let nextbutton = document.getElementById('next');
                // hide buttons
                nextbutton.style.visibility = 'hidden';
                
                retaliationYesbutton.style.visibility = 'hidden';
                retaliationNObutton.style.visibility = 'hidden';
                
                retaliation25.style.visibility = 'hidden';
                retaliation50.style.visibility = 'hidden';
                retaliation75.style.visibility = 'hidden';
                retaliation100.style.visibility = 'hidden';
                // Put text
                Instruction.innerText  = 'This is an instruction.';
                RevengeInformation.innerText = 'Only you need to confirm. Game start when you are ready.'; 
                ConfirmInstruction.innerText = 'I confirm';
                                
                function liveRecv(data) {
                    if (data.start){
                        RevengeInformation.innerText = 'Do you want to make a revenge?';
                        retaliationYesbutton.style.visibility = 'visible';
                        retaliationNObutton.style.visibility = 'visible';
                        ConfirmInstruction.style.visibility = 'hidden';
                    }
                    
                    if (data.answered){
                        retaliationYesbutton.style.visibility = 'hidden';
                        retaliationNObutton.style.visibility = 'hidden';
                        if(data.revenge){

                            RevengeInformation.innerText = 'How much damage do you want to take?';
                            
                            retaliation25.style.visibility = 'visible';
                            retaliation50.style.visibility = 'visible';
                            retaliation75.style.visibility = 'visible';
                            retaliation100.style.visibility = 'visible';
                        }
                    }
                    
                    if (data.nowend){
                        
                        retaliation25.style.visibility = 'hidden';
                        retaliation50.style.visibility = 'hidden';
                        retaliation75.style.visibility = 'hidden';
                        retaliation100.style.visibility = 'hidden';
                        
                        nextbutton.style.visibility = 'visible';
                        if (data.revenge){
                        Instruction.innerText = `You revenged! The damage is ${data.damage}.`;}
                        else{
                        Instruction.innerText = `Your didn't revenge. There is no damage on your oppnent.`; 
                        }
                        RevengeInformation.innerText = 'Game is over. Thank you!'; 
                    }
                }
                
                function IConfirm(data) {
                    liveSend({'type': 'player2Retaliation'});
                }
            
                
                function SendYes() {
                liveSend({'type': 'retaliationYes'});
                }
                function SendNO() {
                liveSend({'type': 'retaliationNo'});
                }
              
                function Send25() {
                     liveSend({'type': 'retaliationvalue', 'rvalue':25});
                }
                function Send50() {
                     liveSend({'type': 'retaliationvalue', 'rvalue':50});
                }  
                function Send75() {
                     liveSend({'type': 'retaliationvalue', 'rvalue':75});
                }  
                function Send100() {
                     liveSend({'type': 'retaliationvalue', 'rvalue':100});
                } 
                
                function NextPage() {
                     document.getElementById("form").submit();
                }  
                
            </script>
    {{ endif }}
{{else}}
        <h4>This is Repeated PEG1 Game. </h4> 
        <p id = "Instruction"></p>   <!-- Instruction -->
        <p id = "ConfirmStatus"></p> <!-- Instruction for Confirmation -->
        <p id = "ExistAttacker"></p>
        <!-- Attack Button -->
        <button type="button" id = "attackbutton" onclick="sendValue()"></button>
        </br>
        <button type="button" id = "ConfirmInstruction" onclick="IConfirm()"></button> <!-- Confrimation Button -->
        <button type="button" id = "next" onclick="NextPage()">Next</button> <!-- Next Button -->

        <h4 id = "PayoffMartixTitle">利得表</h4>               <!-- Start of the Payoff Matrix -->
        <table id = "PayoffMatix" border="1">            
        <tr><!-- 1st row the Payoff Matrix -->
            <th colspan="2" rowspan = "2"> DG 利得表 </th>
            <th colspan="2">Player 1</th>
        </tr>
        <tr><!-- 2st row the Payoff Matrix -->                        
            <td>Strategy A </td>
            <td>Strategy B </td>
        </tr>
        <tr><!-- 3st row the Payoff Matrix -->
            <th rowspan="2">Player 2</th>
            <td>Strategy A </td>
            <td>Payoff 1 </td>
            <td>Payoff 2 </td>
        </tr>
        <tr><!-- 4st row the Payoff Matrix -->
            <td>Strategy B </td>
            <td>Payoff 3 </td>
            <td>Payoff 4 </td>
        </tr>           
        </table><!-- End of the Payoff Matrix -->

        <!-- Start of Java script -->
        <script>
            // Define widgets
            let Instruction = document.getElementById('Instruction');
            let ConfirmStatus = document.getElementById('ConfirmStatus');
            let ConfirmInstruction = document.getElementById('ConfirmInstruction');
            let PayoffMatix = document.getElementById('PayoffMatix');
            let PayoffMartixTitle = document.getElementById('PayoffMartixTitle');
            let nextbutton = document.getElementById('next');
            let ExistAttacker = document.getElementById('ExistAttacker');
            let attackbutton = document.getElementById('attackbutton');


            // Text Contents
            ConfirmInstruction.innerText = 'I confirm.';
            Instruction.innerText = 'PEG1 Game need to be repeated for again.';
            ConfirmStatus.innerText = '';
            attackbutton.innerText = 'Attack';

            // Hideing widgets
            nextbutton.style.visibility = 'hidden';
            attackbutton.style.visibility = 'hidden';

            // liveRecv function
            function liveRecv(data) {
                // Only player 1 is ready
                if(data.ready_player1 && !data.ready_player2){
                    if (js_vars.my_id == 1){
                        ConfirmInstruction.style.visibility = 'hidden';
                        ConfirmStatus.innerText = 'You have confirmed. Please wait for another player to confirm. Game will be started in seconds.';
                    } else {
                        ConfirmStatus.innerText = 'Another player has confirmed. Game will start immediately after your confirmation.';                    
                    }    
                }


                // Only player 2 is ready
                if(!data.ready_player1 && data.ready_player2){
                    if (js_vars.my_id == 2){
                        ConfirmInstruction.style.visibility = 'hidden';
                        ConfirmStatus.innerText = 'You have confirmed. Please wait for another player to confirm. Game will be started in seconds.';
                    } else {
                        ConfirmStatus.innerText = 'Another player has confirmed. Game will start immediately after your confirmation.';                    
                    }    
                }
                // Game Start
                if(data.ready_player1 && data.ready_player2){
                    PayoffMartixTitle.style.visibility = 'hidden';
                    PayoffMatix.style.visibility = 'hidden';
                    ConfirmInstruction.style.visibility = 'hidden';
                    Instruction.innerText = 'Game starts! Please press the attack button if you want to. If you do NOT want to please wait for the countdown.';
                    ConfirmStatus.innerText = '';
                    attackbutton.style.visibility = 'visible';
                }

                let am_attacker = data.id_in_group === js_vars.my_id;

                if (!data.attack){
                    ExistAttacker.innerText = 'Noone is attacking.';
                }else if (am_attacker) {
                    ExistAttacker.innerText = 'You attacked! Damage is caused: 50.';
                    //attackbutton.disabled = 'disabled';
                    attackbutton.style.visibility = 'hidden';
                    nextbutton.style.visibility = 'visible';
                    ConfirmStatus.innerText = '';
                    Instruction.innerText = 'PEG1 Game is finished. Thank you! Please click netx to go to next game.'; 
                }else {
                    ExistAttacker.innerText = 'You had been attacked! Damage is caused: 50.';
                    //attackbutton.disabled = 'disabled';
                    attackbutton.style.visibility = 'hidden';
                    nextbutton.style.visibility = 'visible';
                    ConfirmStatus.innerText = '';
                    Instruction.innerText = 'PEG1 Game is finished. Thank you! Please click netx to go to next game.'; 
                }            
            }
            // click function: confirm instruction     
            function IConfirm(data) {
                if (js_vars.my_id == 1){
                    liveSend({'type': 'player1'});
                }
                else{
                    liveSend({'type': 'player2'});
                }
            }
            // click function: send Attack    
            function sendValue() {
                liveSend({'type': 'isattack'});
            }

            // click function: end page 
            function NextPage() {
                         document.getElementById("form").submit();
            }  

        </script>
{{ endif }}

{{ endblock }}