{{ extends 'global/Page.html' }}
{{ block title }}Rroud {{ player.round_number }} Stage 2{{ endblock }}

{{ block content }}

<p>
    Task1: <br>
    First dice is {{ first_dice1 }}, information source is {{ player.info_source1 }}. <br>
    Three dices provided by information source are {{ next_three1 }}.
</p>

{{ if graphics }} 
<div style="width:400px;">
    <canvas id="chart1"></canvas>
</div>
{{ endif }}

{{ if participant.control }}
<b>HINT: Also pay attention to those dices that are not shown to you by the information source.</b>
{{ endif }}

{{ formfield 'guess1' }}
<hr>

<p>
    Task2: <br>
    First dice is {{ first_dice2 }}, information source is {{ player.info_source2 }}. <br>
    Three dices provided by information source are {{ next_three2 }}.
</p>

{{ if graphics }} 
<div style="width:400px;">
    <canvas id="chart2"></canvas>
</div>
{{ endif }}

{{ if participant.control }}
<b>HINT: Also pay attention to those dices that are not shown to you by the information source.</b>
{{ endif }}

{{ formfield 'guess2' }}

{{ next_button }}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
const ctx1 = document.getElementById('chart1');
const ctx2 = document.getElementById('chart2');
    
const meta = {
    backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
    ],
    borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
    ],
    borderWidth: 1      
}
const chart1 = new Chart(ctx1, {
    type: 'bar',
    data: {
        labels: ['Dice 1', 'Dice 2', 'Dice 3', 'Dice 4'],
        datasets: [Object.assign({}, meta, {
            data: js_vars.data1
        })]
    },
    options: {
        plugins: { 
            legend: {
                display: false
            }
        }
    }
});
const chart2 = new Chart(ctx2, {
    type: 'bar',
    data: {
        labels: ['Dice 1', 'Dice 2', 'Dice 3', 'Dice 4'],
        datasets: [Object.assign({}, meta, {
            data: js_vars.data2
        })]
    },
    options: {
        plugins: { 
            legend: {
                display: false
            }
        }
    }
});
</script>

{{ endblock }}