{% extends "layout.html" %} {% from "stats_table.html" import player_table_js, games_table_js, stats_list %} {% 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<small class="text-muted"> - Season One</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 active" id="summary-tab" data-toggle="tab" href="#summary">Summary</a> </li> <li class="nav-item"> <a class="nav-link" id="leaderboards-0-tab" data-toggle="tab" href="#leaderboards-0">No Variant</a> </li> <li class="nav-item"> <a class="nav-link" id="leaderboards-1-tab" data-toggle="tab" href="#leaderboards-1">Clue Starved</a> </li> <li class="nav-item"> <a class="nav-link" id="players-tab" data-toggle="tab" href="#players">Players</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="variants-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Variants </a> <div class="dropdown-menu" aria-labelledby="variants-dropdown"> <a class="dropdown-item" id="variant-tab" data-toggle="tab" href="#variants">Overview</a> <div class="dropdown-divider"></div> {% for variant in unique_variants %} <a class="dropdown-item" href="/variant/{{variant.variant_id}}">{{variant.name}}</a> {% endfor %} </div> </li> <li class="nav-item"> <a class="nav-link" id="info-tab" data-toggle="tab" href="#info">Info</a> </li> </ul> </div> </div> </nav> {% endblock %} {% block content %} <div class="tab-content" id="myTabContent"> <div class="tab-pane fade active show" id="summary"> <div class="container my-5"> <!-- Leader Cards --> {% for rating_type, leaders in leaders.items() %} <div class="card-deck mb-5"> {% for category, leaders in leaders.items() %} {% for data in leaders %} <div class="card text-center"> <div class="card-body"> <h5 class="card-title mb-2">{{ data.title }}</h5> <p class="leaderboard-category">({{data.category}})</p> <p class="mb-0 player-name"> <a href="/player/{{data.entry.player_name_encoded}}">{{ data.entry.player_name }}</a> </p> <p class="mt-1 alt-name">{{ data.entry.user_accounts }}</p> <p class="score-large">{{ data.entry.score }}</p> </div> </div> {% endfor %} {% endfor %} </div> {% endfor %} </div> </div> <script> let tabledata = [ {% for game in games %} {{- game -}}, {% endfor %} ]; </script> {% for rating_type, leaders in leaders.items() %} <div class="tab-pane fade" id="leaderboards-{{rating_type}}"> <div class="container my-5"> <h3>Global Statistics</h3> {{ stats_list(variant_stats[rating_type], False, False, "{3p,4p,5p}x{5s,6s}") }} <!-- Leaderboards --> <h3>Leaderboards</h3> <div id="leaderboards-{{rating_type}}-data" class="accordion"> {% for category, leaderboard in leaderboards.items() %} <div class="card"> <div class="card-header"> <button class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#{{ category|lower|replace(' ', '-')|replace('(', '-')|replace(')', '-') }}"> {{ category }} </button> </div> <div id="{{ category|lower|replace(' ', '-')|replace('(', '-')|replace(')', '-') }}" class="collapse" data-parent="#leaderboards-{{rating_type}}-data"> <div class="card-body"> <table class="table table-striped"> {% for entry in leaderboard[rating_type] %} <tr> <td> <div class="player-name"> <a href="/player/{{entry.player_name_encoded}}">{{ entry.player_name }}</a> </div> <div class="alt-name">{{ entry.user_accounts }}</div> </td> <td class="score">{{ entry.score }}</td> {% if entry.current_streak is defined %} <td class="current-streak">({{ entry.current_streak }})</td> {% endif %} </tr> {% endfor %} </table> </div> </div> </div> {% endfor %} </div> <br> <!-- List of games --> <h3>List of played games</h3> <div id="table-{{rating_type}}"></div> <br> <h3>Variant ELO progression</h3> <canvas id="chart-{{rating_type}}"></canvas> <h3>Player ELO progression</h3> <canvas id="chart-players-{{rating_type}}"></canvas> </div> </div> {% endfor %} <div class="tab-pane fade" id="players"> <div class="container my-5"> <div id="table-players"></div> </div> </div> <script> let player_tabledata = [ {% for player_row in players %} {{- player_row -}}, {% endfor %} ]; {{ player_table_js("player_tabledata", "players") }} </script> <!-- Variants --> <div class="tab-pane fade" id="variants"> <div class="container my-5"> <table class="table table-hover table-striped"> <thead> <tr> <th scope="col" class="text-center">Variant</th> <th scope="col" class="text-center">Player count</th> <th scope="col" class="text-center">Rating</th> <th scope="col" class="text-center">Games Played</th> <th scope="col" class="text-center">Max Scores</th> </tr> </thead> <tbody> {% for variant in variants_with_player_nums %} <tr> <td class="text-center"><strong><a href="/variant/{{variant.variant_id}}">{{ variant.name }}</a></strong></td> <td class="text-center">{{ variant.num_players }}</td> <td class="text-center variant-rating">{{ variant.stats.rating | int }}</td> <td class="text-center">{{ variant.stats.games_played }}</td> <td class="text-center">{{ variant.stats.games_won }}</td> </tr> {% endfor %} </tbody> </table> </div> </div> <div class="tab-pane fade" id="info"> <div class="container my-5"> {% include "info.html" %} </div> </div> </div> <script> {% for rating_type in leaders %} {{ games_table_js("tabledata", rating_type, True, False, False, "Players") }} table_{{rating_type}}.setFilter("rating_type", "=", {{rating_type}}); {% endfor %} </script> <!-- Tables for rating progression--> <script> let chart_data = {{ variant_ratings }}; {% for rating_type, r_data in variant_ratings.items() %} let datasets_{{rating_type}} = []; {% for name, n_data in r_data.items() %} {% for num_players, data in n_data.items() %} datasets_{{rating_type}}.push({ data: chart_data[{{rating_type}}]["{{name}}"][{{num_players}}], label: "{{name}} - {{num_players}} players" }); {% endfor %} {% endfor %} const config_{{rating_type}} = { type: 'line', data: { datasets: datasets_{{rating_type}} }, options: { parsing: { xAxisKey: "rank", yAxisKey: "rating" }, scales: { x: { type: 'linear', text: 'Number of games' } } } }; const ctx_{{rating_type}} = document.getElementById('chart-{{rating_type}}'); new Chart(ctx_{{rating_type}}, config_{{rating_type}}); {% endfor %} {% for rating_type, rating_map in player_ratings.items() %} let datasets_players_{{rating_type}} = []; {% for player_name, data in rating_map.items() %} datasets_players_{{rating_type}}.push({ data: {{ data }}, label: "{{player_name}}" }); {% endfor %} const config_players_{{rating_type}} = { type: 'line', data: { datasets: datasets_players_{{rating_type}} }, options: { parsing: { xAxisKey: "rank", yAxisKey: "rating" }, scales: { x: { type: 'linear', text: 'Number of games' } } } } const ctx_players_{{rating_type}} = document.getElementById('chart-players-{{rating_type}}'); new Chart(ctx_players_{{rating_type}}, config_players_{{rating_type}}); {% endfor %} </script> {% endblock %}