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

{{ block content }}

<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>
            <p id = "Payoff"></p> <!-- Payoff displayer -->
            </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> 利得表 </td>
				<td> 戦略 </td>
                <th colspan = "2"> 相手</th>
            </tr>
            <tr><!-- 2st row the Payoff Matrix -->
				<th rowspan="5">自分</th>
                <td> 0 </td>
                <th colspan = "2"> (100,100) </th>
            </tr>
            <tr><!-- 3rd row the Payoff Matrix -->
                <td> 25 </td>
                <th colspan = "2"> (90,75) </th>
            </tr>   
                <tr><!-- 4th row the Payoff Matrix -->
                <td> 50 </td>
                <th colspan = "2"> (80,50) </th>
            </tr>        
            <tr><!-- 5th row the Payoff Matrix -->
                <td> 75 </td>
                <th colspan = "2"> (70,25) </th>
            </tr>   
            <tr><!-- 6th row the Payoff Matrix -->
                <td> 100 </td>
                <th colspan = "2"> (60,0) </th>
            </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');
                let Payoff = document.getElementById('Payoff');
                // 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  = 'これは三つ目の取引のインストラクションです。あなたは取引開始時に100ポイントを保有しています。この取引では相手に一方的に損失を発生させることができます。まず、あなたは相手に損失を与えるか否かを決めます。（Yes or No)　Noを選択した場合、相手にも、自分にも損失はないので二人とも100ポイントを保有することになります。Yesを選択した場合、あなたは相手に与える損失の値を4つの選択肢から選ぶことができます。（25、50、75、100）ただし、相手に損失を与えるには（選択した損失の値）×0.4のコストがかかります。以下利得表も参照してください。配布された確認問題の③に回答してください。回答が終わったら手を挙げて、実験実施者が確認しにいくまでお待ちください。確認が取れましたら確認ボタンを押して取引に進んでください。（確認ボタンを押すと取引が開始されます。）';
                RevengeInformation.innerText = 'あなたは取引に参加できます。確認ボタンを押すと取引が開始されます。'; 
                ConfirmInstruction.innerText = '確認した';
                displayednumber = 100 - js_vars.my_distribution;                        
                function liveRecv(data) {
                    if (data.start){
                        RevengeInformation.innerText = `相手に損失を与えますか？`;
                        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 = '損失の値を選択してください';
                            
                            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 = `相手は ${data.damage}の損失を被りました`;
                        displayme = 100 - js_vars.payoffsclar*data.damage;
                        RevengeInformation.innerText = 'これで三つの取引は終了です。ありがとうございました。アンケートに回答してください。'; 
                        Payoff.innerText =  `あなたのこの取引での利得は ${displayme}です。  `;}
                        
                        else{
                        Instruction.innerText = `あなたの相手は損失を被りませんでした。`;
                        RevengeInformation.innerText = 'これで三つの取引は終了です。ありがとうございました。アンケートに回答してください。'; 
                        Payoff.innerText = `あなたのこの取引での利得は100です。`;
                        }
                        
                    }
                }
                
                function IConfirm(data) {
                    liveSend({'type': 'playerRetaliation'});
                }
            
                
                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>       

{{ endblock }}