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

{{ block content }}

 <h4>これは最初の取引です </h4> 
    <p id = "Instruction"></p>   <!-- Instruction -->
    <p id = "ConfirmStatus"></p> <!-- Instruction for Confirmation -->
    <p id = "Payoff"></p>

    <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 SendAllocation = document.getElementById('SendAllocation');
        let inputbox = document.getElementById('inputbox');
        let nextbutton = document.getElementById('next');
        let Payoff = document.getElementById('Payoff');
        
        // Text Contents
        ConfirmInstruction.innerText = '確認した';
        Instruction.innerText = 'これは最初の取引のインストラクションです。この取引では分配者と受け手の二者の間でポイントの分配を行います。分配者は表示されるフォームの欄に好きな値を入力し、その値が分配者の獲得ポイントとなります。受け手は分配者の決定を拒否することはできず、「100－（分配者の決めた値）」が受け手の獲得ポイントとなります。あなたはこの取引では"分配者"です。配布された確認問題の①に回答してください。回答が終わったら手を挙げて、実験実施者が確認しにいくまでお待ちください。確認が取れましたら確認ボタンを押して取引に進んでください。（確認ボタンを押すと取引が開始されます。）';
        ConfirmStatus.innerText = '';
        
        // Hideing widgets
        nextbutton.style.visibility = 'hidden';
        inputbox.style.visibility = 'hidden';
        SendAllocation.style.visibility = 'hidden';
        
        // liveRecv function
        function liveRecv(data) {
            // Ready. Game Start
            if(data.ready_player){
                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';
                DGvalue = data.DGvalue;
                ConfirmStatus.innerText = `あなたによって分配がおこなわれました。`;
                Payoff.innerText = `あなたの利得は${data.payoff}です。`;               
                Instruction.innerText = `最初の取引は終わりです。ありがとうございました。次の取引のインストラクションに進むにはボタンを押してください。`; 
                    }
            
            
        }
        // click function: confirm instruction     
        function IConfirm(data) {
            liveSend({'type': 'player'});        
        }
        // 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>

{{ endblock }}