{{ extends 'global/Page.html' }}
{{ block title }}Your Choice{{ endblock }}

{{ block content }}

{{ include C.INSTRUCTIONS_TEMPLATE }}

<script>
function newRandomNumber(aText, aButton)
{
    randomNumber = Math.floor(Math.random() * 6) + 1;
    
    aText.text = randomNumber;
    aButton.disabled = true; 

    sum = parseInt(document.getElementById('id_Number1').text) + 
        parseInt(document.getElementById('id_Number2').text) +
        parseInt(document.getElementById('id_Number3').text) +
        parseInt(document.getElementById('id_Number4').text) +
        parseInt(document.getElementById('id_Number5').text);
    document.getElementById('id_sum').text = sum;  
    document.getElementById('id_diced_number').value = sum;
}
</script>

<p>
So now ROLL The 5 Dice and count the sum.
</p>

<table>
    <tr>
        <td>
<img src="https://www.animierte-gifs.net/data/media/710/animiertes-wuerfel-bild-0096.gif" border="0" alt="animiertes-wuerfel-bild-0096" width="50" height="50"/>
        </td>
        <td>
            <button id="id_button_Number1"
                    onClick="newRandomNumber(id_Number1, id_button_Number1)">GO</button> 
        </td>
        <td>
            &nbsp;<a name="number1" id="id_Number1">0</a>
        </td>
    </tr>
    <tr>
        <td>
<img src="https://www.animierte-gifs.net/data/media/710/animiertes-wuerfel-bild-0096.gif" border="0" alt="animiertes-wuerfel-bild-0096" width="50" height="50"/>
        </td>
        <td>
            <button id="id_button_Number2"
                    onClick="newRandomNumber(id_Number2, id_button_Number2)">GO</button> 
        </td>
        <td>
            &nbsp;<a name="id_Number2" id="id_Number2">0</a>
        </td>
    </tr>
    <tr>
        <td>
<img src="https://www.animierte-gifs.net/data/media/710/animiertes-wuerfel-bild-0096.gif" border="0" alt="animiertes-wuerfel-bild-0096" width="50" height="50"/>
        </td>
        <td>
            <button id="id_button_Number3"
                    onClick="newRandomNumber(id_Number3, id_button_Number3)">GO</button> 
        </td>
        <td>
            &nbsp;<a name="id_Number3" id="id_Number3">0</a>
        </td>
    </tr>
    <tr>
        <td>
<img src="https://www.animierte-gifs.net/data/media/710/animiertes-wuerfel-bild-0096.gif" border="0" alt="animiertes-wuerfel-bild-0096" width="50" height="50"/>
        </td>
        <td>
            <button id="id_button_Number4"
                    onClick="newRandomNumber(id_Number4, id_button_Number4)">GO</button> 
        </td>
        <td>
            &nbsp;<a name="id_Number4" id="id_Number4">0</a>
        </td>
    </tr>
    <tr>
        <td>
<img src="https://www.animierte-gifs.net/data/media/710/animiertes-wuerfel-bild-0096.gif" border="0" alt="animiertes-wuerfel-bild-0096" width="50" height="50"/>
        </td>
        <td>
            <button id="id_button_Number5"
                    onClick="newRandomNumber(id_Number5, id_button_Number5)">GO</button> 
        </td>
        <td>
            &nbsp;<a name="id_Number5" id="id_Number5">0</a>
        </td>
    </tr>

</table>
<br>
Sum:&nbsp;<a name="sum" id="id_sum">0</a>
<br>
<br>

<p>
    Now enter your sum (You may also enter a different sum than the one you have rolled)
</p>

{{ if panelty_group }}
    <p style="color:red;">
    If you choose a different number than your sum, you cheat on the partnered player.
    </p>
{{ endif }}

{{ formfield 'chose_number'}}
{{ formfield_errors 'diced_number' }}
<input type="hidden" name="diced_number" id="id_diced_number" />

<p>
{{ next_button }}
</p>

{{ include C.INSTRUCTIONS_TEMPLATE }}

{{ endblock }}