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

{{ block content }}

<h4>これは二つ目の取引です </h4> 
    <p id = "Instruction"></p>   <!-- Instruction -->
    <p id = "ExistAttacker"></p>
    <p id = "Payoff"></p>
    <!-- Attack 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"> 利得表 </th>
        <th colspan="2">相手</th>
    </tr>
    <tr><!-- 2st row the Payoff Matrix -->                        
        <td>ボタンを押す</td>
        <td>ボタンを押さない</td>
    </tr>
    <tr><!-- 3st row the Payoff Matrix -->
        <th rowspan="2">自分</th>
        <td>ボタンを押す </td>
        <td>なし </td>
        <td>(90,50) </td>
    </tr>
    <tr><!-- 4st row the Payoff Matrix -->
        <td>ボタンを押さない </td>
        <td>(50,90) </td>
        <td>(100,100) </td>
    </tr>           
    </table><!-- End of the Payoff Matrix -->

    <!-- Start of Java script -->
    <script>
        // Define widgets
        let Instruction = document.getElementById('Instruction');
        let nextbutton = document.getElementById('next');
        let ExistAttacker = document.getElementById('ExistAttacker');
        let Payoff = document.getElementById('Payoff');
        // Text Contents
        Instruction.innerText = `二つ目の取引は終了です。`; 
        Payoff.innerText = `あなたの利得:50  
ありがとうございました。ボタンを押して次の取引へ進んでください。`;
        // Display different message to different choice.
        if (js_vars.attack) {
                ExistAttacker.innerText = 'あなたはボタンを押しました。しかし相手の方が先にボタンを押しました。相手の方が先にボタンを押したので、あなたの損失は100−50＝50になりました';
        } 
        else {
                ExistAttacker.innerText = 'あなたはボタンを押しませんでした。しかし相手はボタンを押しました。相手がボタンを押したので、あなたの損失は100−50＝50になりました'; 
        }
    
        // click function: end page 
        function NextPage() {
                     document.getElementById("form").submit();
        }  
            
    </script>

{{ endblock }}