{{ block title }}狩りの結果{{ endblock }}

{{ block styles }}
<style>
    .highcharts-figure,
    .highcharts-data-table table {
        min-width: 320px;
        max-width: 800px;
        margin: 1em auto;
    }

    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #ebebeb;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }

    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }

    .highcharts-data-table th {
        font-weight: 600;
        padding: 0.5em;
    }

    .highcharts-data-table td,
    .highcharts-data-table th,
    .highcharts-data-table caption {
        padding: 0.5em;
    }
    

    .highcharts-figure2,
    .highcharts-data-table table {
        min-width: 310px;
        max-width: 800px;
        margin: 1em auto;
    }

    #container {
        height: 400px;
    }

    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #ebebeb;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }

    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }

    .highcharts-data-table th {
        font-weight: 600;
        padding: 0.5em;
    }

    .highcharts-data-table td,
    .highcharts-data-table th,
    .highcharts-data-table caption {
        padding: 0.5em;
    }

    .highcharts-data-table thead tr,
    .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }

    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }
</style>
{{ endblock }}

{{ block content }}

    <p>{{ if player.other_se > 0 }}
            {{ if player.cooperate > 0 }}
                {{ if same_choice }}
                    あなたともう一人はともに 「{{ my_decision }}」 を狩りに行った。
                {{ else }}
                    あなたは 「{{ my_decision }}」 を、もう一人は 「{{ opponent_decision }}」 を狩りに行った。
                {{ endif }}
            {{ else }}
                あなたは狩りに参加しませんでした。
            {{ endif }}
        {{else}}
            もう一人は狩りに参加しませんでした。
        {{ endif }}
    </p>

    <p>{{ if player.per > 0 }}
            結果として、あなたは {{ player.per }} 人分の食料を手に入れた。
        {{ else }}
            結果として、あなたは食料を得られなかった。
        {{ endif }}
    </p>

    <figure class="highcharts-figure">
        <div id="mycontainer"></div>
        <p class="highcharts-description">
            「鹿」と「ウサギ」をそれぞれ狩りに行った学生の割合
        </p>
    </figure>

    <figure class="highcharts-figure2">
        <div id="container"></div>
        <p class="highcharts-description">
            
        </p>
    </figure>
{{ endblock }}

{{ block scripts }}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
Highcharts.chart('mycontainer', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: '狩りの結果'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        name: '割合',
        colorByPoint: true,
        data: [{
            name: '鹿',
            y: js_vars.c_per,
            sliced: true,
            selected: true
        }, {
            name: 'ウサギ',
            y: js_vars.d_per
        }]
    }]
});



</script>
{{ endblock }}