forked from Hanabi/hanabi-league
add website templates (not complete)
This commit is contained in:
parent
fec81a6c15
commit
3d720b5599
GPG key ID:
BCC5A619923C0BA5
2 changed files with 212 additions and 0 deletions
137
templates/content.html
Normal file
137
templates/content.html
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
{% extends "layout.html" %}
|
||||
{% block content %}
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="leaderboards">
|
||||
<div class="container my-5">
|
||||
<!-- Header -->
|
||||
<!-- <h1 class="text-center mb-5">Hanabi Leaderboards</h1> -->
|
||||
<!-- Leader Cards -->
|
||||
<div class="card-deck mb-5">
|
||||
{% for category, data in leaders.items() %}
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-4">{{ data.title }}</h5>
|
||||
<p class="mb-0 player-name">{{ data.leader.player_name_og }}</p>
|
||||
<p class="mt-1 alt-name">{{ data.leader.player_name }}</p>
|
||||
<p class="score-large">{{ data.leader.score }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Leaderboards -->
|
||||
<div id="leaderboards" 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(' ', '') }}">
|
||||
{{ category }}
|
||||
</button>
|
||||
</div>
|
||||
<div id="{{ category|lower|replace(' ', '') }}" class="collapse" data-parent="#leaderboards">
|
||||
<div class="card-body">
|
||||
<table class="table table-striped">
|
||||
{% for player in leaderboard %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="player-name">{{ player.player_name_og }}</div>
|
||||
<div class="alt-name">{{ player.player_name }}</div>
|
||||
</td>
|
||||
<td class="score">{{ player.score }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">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 %}
|
||||
<tr>
|
||||
<td class="text-center"><strong>{{ variant.variant_name }}</strong></td>
|
||||
<td class="text-center variant-rating">{{ variant.variant_rating|int }}</td>
|
||||
<td class="text-center">{{ variant.number_of_games_variant }}</td>
|
||||
<td class="text-center">{{ variant.number_of_max_scores_variant }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="tab-pane fade" id="info">
|
||||
<div class="container my-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="alert alert-info" role="alert">
|
||||
<h4 class="alert-heading">Welcome to the league!</h4>
|
||||
<p>The Test Season will be live from <strong>July 15th - August 31st!</strong></p>
|
||||
<hr>
|
||||
<p class="mb-0">Sign ups are now open <a href="https://docs.google.com/forms/d/e/1FAIpQLSfDDW0Iz4pNHaQjqBpCuRsARJ1PE1kO85ndrvKte3irjCJhvw/viewform" class="alert-link">HERE</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>About</h3>
|
||||
<p>The Hanabi Pro Hunting League creates a new way for folks to play more "serious" Hanabi, but without the stress, formality, and scheduling headaches of normal tournaments. For folks of all skill levels, the most important goal is simply to compete against yourself and to constantly learn and improve!</p>
|
||||
|
||||
<h3>How to Play</h3>
|
||||
<p>Everyone is welcome to participate! To sign up, just click the link above to fill out the short Google Form. Just remember the following important info:</p>
|
||||
<ul>
|
||||
<li>Everyone joins <strong>individually</strong>, and can play with any mix of other participants.</li>
|
||||
<li>League games must be played with a <strong>registered alt account</strong>.</li>
|
||||
<li>ALL games played from this new account will be tracked each Season, so don’t forget to switch back when playing non-League games!</li>
|
||||
</ul>
|
||||
<p>All game data will be automatically tracked & recorded, so all you need to do is play! Make sure to check out this page for important game & League info.</p>
|
||||
|
||||
<h3>Game Rules</h3>
|
||||
<ul>
|
||||
<li><strong>3-5 player games</strong> only</li>
|
||||
<li><strong>5-6 suit games</strong> only, and only of the following variants (110 total!):
|
||||
<ul>
|
||||
<li>No Variant, the 9 non-dark ‘special suits’, and all combinations</li>
|
||||
<li>All Clue Starved combinations</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Time or Untimed, but no alternate game modes or special rules (Bottom-Deck Blindplays, Empty Clues, Detrimental Chars, etc.)</li>
|
||||
</ul>
|
||||
<p>Only games with which follow these game rules and which include exclusively registered players will be tracked!</p>
|
||||
|
||||
<h3>Introducing the Hanabi League Rating system!</h3>
|
||||
<p>We’re excited to announce the new, experimental <strong>Hanabi League Rating</strong> (HLR) system! Adapted from Elo systems, the HLR basically works by estimating the expected outcome of each game. Each player will then gain or lose rating points based on how (un)likely the result was calculated to be.</p>
|
||||
|
||||
<p>These estimates are based on the teammates’ ratings, versus the chosen variant’s estimated difficulty (variants have ratings too!).</p>
|
||||
<ul>
|
||||
<li>The system counts <strong>Max Scores</strong> as <em>Wins</em>; any other result is simply a <em>Loss</em>.</li>
|
||||
<li>For the veteran glory-seekers, there will also be <strong>Leaderboards</strong> tracking a few popular stats. For now, these include <em><strong>Rating</strong></em>, <em><strong>Longest Win Streak</strong></em>, and <em><strong>Scores Hunted</strong></em>.</li>
|
||||
<li>A few other fun stats will be tracked as well, just for curiosity’s sake.</li>
|
||||
<li>All the player ratings, leaderboards, and variant stats will be tracked & updated automatically on this website.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
75
templates/layout.html
Normal file
75
templates/layout.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<!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">
|
||||
<link rel="stylesheet" href="css/leaderboards.css">
|
||||
</head>
|
||||
<body>
|
||||
<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"> - Test Season Zero</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="leaderboards-tab" data-toggle="tab" href="#leaderboards">Leaderboards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="variant-tab" data-toggle="tab" href="#variants">Variants</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="info-tab" data-toggle="tab" href="#info">Info</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<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>
|
||||
Loading…
Reference in a new issue