2023-12-04 17:52:18 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Hanabi Pro Hunting League< / title >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity = "sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin = "anonymous" >
2023-12-05 15:14:20 +01:00
< link rel = "stylesheet" href = "/css/leaderboards.css" >
< link href = "/css/tabulator.min.css" rel = "stylesheet" >
<!-- Tabulator JS dependency -->
< script type = "text/javascript" src = "/js/tabulator.min.js" > < / script >
2023-12-04 17:52:18 +01:00
< / head >
< body >
< nav class = "navbar navbar-expand-lg navbar-light bg-light" >
< div class = "container" >
2023-12-04 22:02:08 +01:00
< a class = "navbar-brand" href = "/" > The Hanabi Pro Hunting League< / a > < a class = "navbar-brand" href = "#" > < small class = "text-muted" > - Variant Statistics for {{variant_name}}< / small > < / a >
2023-12-04 17:52:18 +01:00
< 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 active" id = "overview-tab" data-toggle = "tab" href = "#overview" > Overview< / a >
< / li >
{% for num_players in variant_stats.keys() %}
< li class = "nav-item" >
< a class = "nav-link" id = "stats-{{num_players}}p-tab" data-toggle = "tab" href = "#stats-{{num_players}}p" > {{num_players}} Players< / a >
< / li >
{% endfor %}
< / ul >
< / div >
< / div >
< / nav >
< div class = "tab-content" id = "myTabContent" >
{% for num_players, stats in variant_stats.items() %}
< div class = "tab-pane fade" id = "stats-{{num_players}}p" >
< div class = "container my-5" >
< h3 >
2023-12-04 22:02:08 +01:00
League Statistics for {{variant_name}} - {{num_players}} Players
2023-12-04 17:52:18 +01:00
< / h3 >
< div class = "history-bullets" >
< ul >
< li >
< span class = "stat-description" > Rating:< / span >
{{stats.rating}}
< / li >
< li >
2023-12-04 22:02:08 +01:00
< span class = "stat-description" > Total Perfect Scores:< / span >
2023-12-04 17:52:18 +01:00
{{stats.games_won}}
< / li >
< li >
2023-12-04 22:02:08 +01:00
< span class = "stat-description" > Total Bottom Deck Risk:< / span >
2023-12-04 17:52:18 +01:00
{{stats.total_bdr}}
< / li >
< li >
2023-12-04 22:02:08 +01:00
< span class = "stat-description" > Total Crits Lost:< / span >
2023-12-04 17:52:18 +01:00
{{stats.total_crits_lost}}
< / li >
< li >
2023-12-04 22:02:08 +01:00
< span class = "stat-description" > Total Turns Taken:< / span >
2023-12-04 17:52:18 +01:00
{{stats.total_moves}}
< / li >
< / ul >
< ul >
< li >
2023-12-04 22:02:08 +01:00
< span class = "stat-description" > Total Games Played:< / span >
2023-12-04 17:52:18 +01:00
{{stats.games_played}}
< / li >
< li >
< span class = "stat-description" > Winrate:< / span >
{{stats.winrate}}%
< / li >
< li >
2023-12-04 22:02:08 +01:00
< span class = "stat-description" > Average Bottom Deck Risk:< / span >
2023-12-04 17:52:18 +01:00
{{stats.average_bdr}}
< / li >
< li >
2023-12-04 22:02:08 +01:00
< span class = "stat-description" > Average Crits Lost:< / span >
2023-12-04 17:52:18 +01:00
{{stats.average_crits_lost}}
< / li >
< li >
2023-12-04 22:02:08 +01:00
< span class = "stat-description" > Average Turns Taken:< / span >
2023-12-04 17:52:18 +01:00
{{stats.average_moves}}
< / li >
< / ul >
< / div >
2023-12-05 15:14:20 +01:00
< div id = "table-{{num_players}}p" > < / div >
2023-12-04 17:52:18 +01:00
< / div >
< / div >
{% endfor %}
< / div >
2023-12-05 15:44:08 +01:00
<!-- JavaScript part for the interactive tables -->
< script >
{% for num_players, games in variant_games.items() %}
let tabledata_{{num_players}} = [
{% for game in games %}
{{game }},
{% endfor %}
];
var table_{{num_players}} = new Tabulator("#table-{{num_players}}p", {
2023-12-05 16:02:08 +01:00
height: 400,
2023-12-05 15:44:08 +01:00
data:tabledata_{{num_players}},
2023-12-05 16:02:08 +01:00
layout:"fitDataStretch",
2023-12-05 15:44:08 +01:00
columns: [
{title: "id", field: "league_id"},
{title: "Game", field: "game_id", formatter: "link", formatterParams:{
urlPrefix: "https://hanab.live/replay/",
target:"_blank"
}},
{title: "Players", field: "users"},
{title: "Seed", field: "seed", formatter: "link", formatterParams: {
urlPrefix: "https://hanab.live/seed/",
target:"_blank"
}},
{title: "Score", field: "score"},
{title: "BDR", field: "num_bdrs"},
{title: "Result", field: "game_outcomes"}
],
});
{% endfor %}
< / script >
2023-12-04 17:52:18 +01:00
< footer class = "footer mt-auto py-3 bg-light" >
< div class = "container text-center" >
< span class = "text-muted" > {{ total_games_played }} games | {{ total_players }} players | Thanks for playing < 3 < / span > < br >
< span class = "text-muted" > Last updated: < span id = "latestRun" > {{ latest_run }}< / span > < / span >
< / div >
< / footer >
<!-- Bootstrap JavaScript dependencies -->
< script src = "https://code.jquery.com/jquery-3.7.0.slim.min.js" integrity = "sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin = "anonymous" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin = "anonymous" > < / script >
2023-12-05 15:14:20 +01:00
2023-12-04 17:52:18 +01:00
< script >
$(document).ready(function() {
$('.nav-link').on('shown.bs.tab', function(e) {
// Remove 'active' class from all nav-items
$('.nav-link').removeClass('active');
// Add 'active' class to the current nav-item
$(this).addClass('active');
});
});
< / script >
<!-- Display time of latest run in local time format -->
< script >
document.addEventListener("DOMContentLoaded", function() {
// Get the latest run date in UTC
var latestRunUtc = new Date(document.getElementById("latestRun").textContent);
// Convert it to the local timezone and format it
var latestRunLocal = latestRunUtc.toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" });
// Set the text content of the latestRun span to the local date
document.getElementById("latestRun").textContent = latestRunLocal;
});
< / script >
< / body >
< / html >
