{{ extends 'global/Page.html' }}
{{ block title }}最初の取引{{ endblock }}

{{ block content }}

{{ if player.id_in_group == 1}}  <!-- Define plyaer 1 as the dominator.-->
    <h4>This is DG Game. </h4> 
    <p id = "Instruction"></p>   <!-- Instruction -->
    <p id = "ConfirmStatus"></p> <!-- Instruction for Confirmation -->
    <!-- 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 -->
    </br>
    <input id="inputbox" type="number" range = ""> <!-- Input Box for DG Value -->
    <button id = "SendAllocation" type="button" onclick="SendDGAllocation()">Send</button> <!-- Send Button -->
    </br>
    <button type="button" id = "next" onclick="NextPage()">Next</button> <!-- Next Button -->
    <!-- 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 SendAllocation = document.getElementById('SendAllocation');
        let inputbox = document.getElementById('inputbox');
        let nextbutton = document.getElementById('next');
        
        // Text Contents
        ConfirmInstruction.innerText = 'I confirm.';
        Instruction.innerText = 'これは最初の取引のインストラクションです。このゲームは分配者と受け手の二者の間でポイントの分配を行うゲームです。分配者は表示されるフォームの欄に好きな値を入力し、その値が獲得ポイントとなります。受け手は分配者の決定を拒否することはできず、100－（分配者の決めた値）が受け手の獲得ポイントとなります。あなたはこのゲームでは"分配者"です。';
        ConfirmStatus.innerText = '';
        
        // Hideing widgets
        nextbutton.style.visibility = 'hidden';
        inputbox.style.visibility = 'hidden';
        SendAllocation.style.visibility = 'hidden';
        
        // liveRecv function
        function liveRecv(data) {
            // Only player 1 is ready
            if(data.ready_player1 && !data.ready_player2){    
                ConfirmInstruction.style.visibility = 'hidden';
                ConfirmStatus.innerText = '確認が取れました。他のプレイヤーが確認ボタンを押すまでお待ちください。';                
            }
            // Only player 2 is ready
            if(!data.ready_player1 && data.ready_player2){
                ConfirmStatus.innerText = '他のプレイヤーが確認ボタンを押しました。あなたが確認ボタンを押すとゲームが開始されます。';
            }
            // Both ready. Game Start
            if(data.ready_player1 && data.ready_player2){
                PayoffMatix.style.visibility = 'hidden';
                ConfirmInstruction.style.visibility = 'hidden';
                Instruction.innerText = 'ゲーム開始です。1－100までの数のうち好きな値を入力してください。入力が終わったらボタンを押してください。';
                ConfirmStatus.innerText = '';
                inputbox.style.visibility = 'visible';
                SendAllocation.style.visibility = 'visible';
                
            }
            // Error
            if (data.error){
                 ConfirmStatus.innerText = '0－100までの値を入力してください。';
            }
            // Exit
            if (data.nowend){
                inputbox.style.visibility = 'hidden';
                SendAllocation.style.visibility = 'hidden';
                nextbutton.style.visibility = 'visible';
                ConfirmStatus.innerText = '';
                DGvalue = data.DGvalue;
                Instruction.innerText = `最初の取引は終わりです。あなたが獲得したポイントは ${DGvalue}です。ありがとうございました。次のゲームのインストラクションに進むにはボタンを押してください。.`; 
                    }
            
            
        }
        // click function: confirm instruction     
        function IConfirm(data) {
            liveSend({'type': 'player1'});        
        }
        // click function: send DG value    
        function SendDGAllocation() {
            liveSend(
                {'type': 'DGallocation', 'DGvalue': parseInt(inputbox.value)}
            );
        }
        // click function: end page 
        function NextPage() {
                     document.getElementById("form").submit();
        }  
            
    </script>
{{else}}
    <!-- Player 2 is the dominated. -->
    <h4>This is DG Game. </h4> 
    <p id = "Instruction"></p>   <!-- Instruction -->
    <p id = "ConfirmStatus"></p> <!-- Instruction for Confirmation -->
    <!-- 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 -->
    </br>
    <button type="button" id = "next" onclick="NextPage()">Next</button> <!-- Next Button -->
    <!-- Start of Java script -->
    <script>
        // Define widgetslet 
        let Instruction = document.getElementById('Instruction');
        let ConfirmInstruction = document.getElementById('ConfirmInstruction');
        let ConfirmStatus = document.getElementById('ConfirmStatus');
        let PayoffMatix = document.getElementById('PayoffMatix');
        let nextbutton = document.getElementById('next');
        // Text Contents
        ConfirmStatus.innerText = '';
        ConfirmInstruction.innerText = 'I confirm.';
        Instruction.innerText = 'これは最初の取引のインストラクションです。このゲームは分配者と受け手の二者の間でポイントの分配を行うゲームです。分配者は表示されるフォームの欄に好きな値を入力し、その値が獲得ポイントとなります。受け手は分配者の決定を拒否することはできず、100－（分配者の決めた値）が受け手の獲得ポイントとなります。あなたはこのゲームでは"受け手"です';
        // Hideing widgets
        nextbutton.style.visibility = 'hidden';
        
        // liveRecv function
        function liveRecv(data) {
            // only player2 is ready
            if(data.ready_player2 && !data.ready_player1){
                ConfirmInstruction.style.visibility = 'hidden';
                ConfirmStatus.innerText = '確認が取れました。他のプレイヤーが確認ボタンを押すまでお待ちください。';                
            }
            // only player1 is ready
            if(!data.ready_player2 && data.ready_player1){
                ConfirmStatus.innerText = '他のプレイヤーが確認ボタンを押しました。あなたが確認ボタンを押すとゲームが開始されます。';
            }
			// All ready, game start
            if(data.ready_player1 && data.ready_player2){
                PayoffMatix.style.visibility = 'hidden';
                ConfirmStatus.innerText = '';
                ConfirmInstruction.style.visibility = 'hidden';
                Instruction.innerText = 'ゲーム開始です。分配者が値を決定するまでお待ちください。分配者が決定すると画面が自動で切り替わります。';
                
            }
            // click function: end page 
            if (data.nowend){
                ConfirmStatus.innerText = '';
                nextbutton.style.visibility = 'visible';
                DGvalue = 100 - data.DGvalue;
                Instruction.innerText = `最初の取引は終わりです。あなたが獲得したポイントは ${DGvalue}です。ありがとうございました。次のゲームのインストラクションに進むにはボタンを押してください。`; 
            }
            
        }
           
        // click function: confirm instruction      
        function IConfirm(data) {
            liveSend({'type': 'player2'});        
        }
        // click function: end page 
        function NextPage() {
                     document.getElementById("form").submit();
        }  
            
    </script>
{{endif}} 

{{ endblock }}