hanabi-league/templates/player.html

78 lines
2.8 KiB
HTML

{% extends "layout.html" %}
{% from "stats_table.html" import stats_list, games_table_js %}
{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">The Hanabi Pro Hunting League</a><a class="navbar-brand" href="#"><small class="text-muted">- Player Statistics for {{player_name}}</small></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" id="Back" href="/">Back</a>
</li>
</ul>
</div>
</div>
</nav>
{% endblock %}
{% block content %}
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="overview">
<div class="container my-5">
<h3>
Player Statistics for {{player_name}}
</h3>
{% for rating_type, player_row in player_stat.items() %}
<h4>
{% if rating_type == 0 %}
No Variant
{% else %}
Clue Starved
{% endif %}
</h4>
{{ stats_list(player_row.stats, True, True) }}
<div id="table-{{rating_type}}"></div>
<canvas id="chart-{{rating_type}}"></canvas>
{% endfor %}
</div>
</div>
</div>
<!-- JavaScript part for the tables -->
<script>
let tabledata = [
{% for game in player_games %}
{{- game -}},
{% endfor %}
];
{% for rating_type in player_stat.keys() %}
{{ games_table_js("tabledata", rating_type, True, False, True) }}
// Filter table on corresponding rating type
table_{{rating_type}}.setFilter("rating_type", "=", {{rating_type}});
{% endfor %}
</script>
<!-- JavaScript part for the rating chart -->
<script>
{% for rating_type, progression in player_rating_progression.items() %}
rating_progression_{{rating_type}} = {{progression}};
const config_{{rating_type}} = {
type: 'line',
data: {
labels: Array.from({length: rating_progression_{{rating_type}}.length}, (_, i) => i),
datasets: [{
label: 'Rating progression over #games',
data: rating_progression_{{rating_type}}
}]
}
};
const ctx_{{rating_type}} = document.getElementById('chart-{{rating_type}}');
new Chart(ctx_{{rating_type}}, config_{{rating_type}});
{% endfor %}
</script>
{% endblock %}