edh-elo/app/templates/main.html
Jack Jackson f120336f1d Add cursory "biggest movers" stats
Also adds rudimentary testing framework for seeding a database from a
given `.db` SQLite file. Probably extract this for general use!
2024-08-23 09:26:22 -07:00

61 lines
1.9 KiB
HTML

{% extends "base.html" %}
{% block title %}EDH ELO{% endblock %}
{% block head %}
{{ super() }}
<!-- https://www.w3schools.com/css/css_tooltip.asp -->
<style>
h2 {
display: inline-block;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 480px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
{% endblock %}
{% block content %}
<p>Welcome to EDH ELO! Click "Games" above to see the list of Games, or "Record New Game" in the top-right to record a game</p>
<div>
<h2>Biggest recent movers</h2><div class="tooltip">?<span class="tooltiptext">Logic:<br/>Find the date of the latest game<br/>Look back a period of 7 days from that date<br/>Calculate score differential between those two dates for all decks<br/>Rank by that<br/><br/>TODO - add a dedicated "biggest movers" page under "Stats" where anchor dates and number-of-top-movers can be specified</span></span></div>
<h3>Positive</h3>
<ol>
{% for positive_mover in top_movers['positive'] %}
<li><strong>{{ positive_mover['name'] }}</strong> - +{{ positive_mover['diff'] }} ({{ positive_mover['start'] }} -> {{ positive_mover['end'] }})</li>
{% endfor %}
</ol>
<h3>Negative</h3>
<ol>
{% for negative_mover in top_movers['negative'] %}
<li><strong>{{ negative_mover['name'] }}</strong> - {{ negative_mover['diff'] }} ({{ negative_mover['start'] }} -> {{ negative_mover['end'] }})</li>
{% endfor %}
</ol>
</div>
{% endblock %}