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

{{ block content }}

    <h4>This is 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 = 'これは2つめの取引のインストラクションです。参加者は最初の取引と同じペアで画面上に表示されるボタン（Attackと書いてあります）を制限時間内に押すか否かを決定します。例えば、両者がボタンを押さなければお互いに1500円ずつ獲得しますが、ボタンを押すと、押した側は100円を支払い、押された側は1000円を支払うことになります';
        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 = '確認が取れました。他のプレイヤーが確認ボタンを押すまでお待ちください。';
                } else {
                    ConfirmStatus.innerText = '他のプレイヤーが確認ボタンを押しました。あなたが確認ボタンを押すとゲームが開始されます。';                    
                }    
            }
            
            
            // Only player 2 is ready
            if(!data.ready_player1 && data.ready_player2){
                if (js_vars.my_id == 2){
                    ConfirmInstruction.style.visibility = 'hidden';
                    ConfirmStatus.innerText = '確認が取れました。他のプレイヤーが確認ボタンを押すまでお待ちください。';
                } else {
                    ConfirmStatus.innerText = '他のプレイヤーが確認ボタンを押しました。あなたが確認ボタンを押すとゲームが開始されます。';                    
                }    
            }
            // Game Start
            if(data.ready_player1 && data.ready_player2){
                PayoffMartixTitle.style.visibility = 'hidden';
                PayoffMatix.style.visibility = 'hidden';
                ConfirmInstruction.style.visibility = 'hidden';
                Instruction.innerText = 'ゲーム開始です。ボタンを押して相手に攻撃することができます。攻撃しない場合はボタンを押さず時間終了までお待ちください。';
                ConfirmStatus.innerText = '';
                attackbutton.style.visibility = 'visible';
            }
            
            let am_attacker = data.id_in_group === js_vars.my_id;
      
            if (!data.attack){
                ExistAttacker.innerText = '誰も攻撃していません';
            }else if (am_attacker) {
                ExistAttacker.innerText = 'あなたは攻撃しました。';
                //attackbutton.disabled = 'disabled';
                attackbutton.style.visibility = 'hidden';
                nextbutton.style.visibility = 'visible';
                ConfirmStatus.innerText = '';
                Instruction.innerText = '二つ目の取引は終了です。ありがとうございました。ボタンを押して次の取引へ進んでください。'; 
            }else {
                ExistAttacker.innerText = 'あなたは攻撃されました。';
                //attackbutton.disabled = 'disabled';
                attackbutton.style.visibility = 'hidden';
                nextbutton.style.visibility = 'visible';
                ConfirmStatus.innerText = '';
                Instruction.innerText = '二つ目の取引は終了です。ありがとうございました。ボタンを押して次の取引へ進んでください。'; 
            }            
        }
        // 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>

{{ endblock }}