Skip to content

Commit d4d3361

Browse files
ksigvaldasonksigvaldason
committed
Significantly improved front end of game stats/history page [WIP: #1481 
1 parent 5fe347b commit d4d3361

File tree

1 file changed

+179
-49
lines changed

1 file changed

+179
-49
lines changed

‎src/templates/games/game_history.html‎

Lines changed: 179 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@
22

33
{% block content %}
44
<div class="container mt-5">
5-
<h1 class="display-4 mb-4">Game History for {{ game.name }}</h1>
6-
<a href="{% url 'game-detail' game.id %}" class="btn btn-primary mb-4">← Return to Game Detail</a>
7-
<form method="get" class="mb-4">
8-
<div class="row">
5+
<div class="d-flex justify-content-between align-items-center mb-4">
6+
<h1 class="display-4">Game History: {{ game.name }}</h1>
7+
<a href="{% url 'game-detail' game.id %}"
8+
class="btn btn-outline-primary">← Return to Game Detail</a>
9+
</div>
10+
<form method="get" class="mb-4 p-3 bg-light rounded shadow-sm">
11+
<div class="row align-items-end">
912
<div class="col-md-4">
10-
<label for="periodSelect" class="form-label">Select Period:</label>
13+
<label for="periodSelect" class="form-label fw-bold">View Statistics For:</label>
1114
<select name="period"
1215
id="periodSelect"
13-
class="form-select"
16+
class="form-select form-select-lg"
1417
onchange="this.form.submit()">
1518
{% for option in period_options %}
1619
<option value="{{ option.value }}"
@@ -20,73 +23,180 @@ <h1 class="display-4 mb-4">Game History for {{ game.name }}</h1>
2023
</div>
2124
</div>
2225
</form>
23-
<div class="row mb-4">
24-
<div class="col-md-3">
25-
<div class="card text-center">
26-
<div class="card-body">
27-
<h5 class="card-title">Total Played</h5>
28-
<p class="card-text fs-4">{{ total_played }}</p>
26+
{% if entries or total_played > 0 %}
27+
{# Overall Statistics Section #}
28+
<h2 class="mb-3">Overall Performance</h2>
29+
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-4">
30+
<div class="col">
31+
<div class="card h-100 text-center shadow-sm">
32+
<div class="card-body">
33+
<h5 class="card-title text-primary">Total Played</h5>
34+
<p class="card-text fs-2 fw-bold">{{ total_played }}</p>
35+
</div>
2936
</div>
3037
</div>
31-
</div>
32-
<div class="col-md-3">
33-
<div class="card text-center text-success">
34-
<div class="card-body">
35-
<h5 class="card-title">Wins</h5>
36-
<p class="card-text fs-4">{{ wins }}</p>
38+
<div class="col">
39+
<div class="card h-100 text-center shadow-sm">
40+
<div class="card-body">
41+
<h5 class="card-title text-success">Wins</h5>
42+
<p class="card-text fs-2 fw-bold">{{ wins }}</p>
43+
</div>
3744
</div>
3845
</div>
39-
</div>
40-
<div class="col-md-3">
41-
<div class="card text-center text-danger">
42-
<div class="card-body">
43-
<h5 class="card-title">Losses</h5>
44-
<p class="card-text fs-4">{{ losses }}</p>
46+
<div class="col">
47+
<div class="card h-100 text-center shadow-sm">
48+
<div class="card-body">
49+
<h5 class="card-title text-danger">Losses</h5>
50+
<p class="card-text fs-2 fw-bold">{{ losses }}</p>
51+
</div>
4552
</div>
4653
</div>
47-
</div>
48-
<div class="col-md-3">
49-
<div class="card text-center text-secondary">
50-
<div class="card-body">
51-
<h5 class="card-title">Draws</h5>
52-
<p class="card-text fs-4">{{ draws }}</p>
54+
<div class="col">
55+
<div class="card h-100 text-center shadow-sm">
56+
<div class="card-body">
57+
<h5 class="card-title text-secondary">Draws</h5>
58+
<p class="card-text fs-2 fw-bold">{{ draws }}</p>
59+
</div>
60+
</div>
61+
</div>
62+
<div class="col">
63+
<div class="card h-100 text-center shadow-sm">
64+
<div class="card-body">
65+
<h5 class="card-title text-info">Win Rate</h5>
66+
<p class="card-text fs-2 fw-bold">{{ win_rate|floatformat:2 }}%</p>
67+
</div>
68+
</div>
69+
</div>
70+
<div class="col">
71+
<div class="card h-100 text-center shadow-sm">
72+
<div class="card-body">
73+
<h5 class="card-title text-warning">Incomplete</h5>
74+
<p class="card-text fs-2 fw-bold">{{ incomplete }}</p>
75+
</div>
76+
</div>
77+
</div>
78+
<div class="col">
79+
<div class="card h-100 text-center shadow-sm">
80+
<div class="card-body">
81+
<h5 class="card-title">Avg. Playtime</h5>
82+
<p class="card-text fs-2 fw-bold">
83+
{% if average_playtime %}
84+
{{ average_playtime }}
85+
{% else %}
86+
N/A
87+
{% endif %}
88+
</p>
89+
</div>
5390
</div>
5491
</div>
5592
</div>
56-
</div>
57-
<div class="row mb-4">
58-
<div class="col-md-3">
59-
<div class="card text-center text-info">
60-
<div class="card-body">
61-
<h5 class="card-title">Win Rate</h5>
62-
<p class="card-text fs-4">{{ win_rate|floatformat:2 }}%</p>
93+
{# Streaks Section #}
94+
<h2 class="mb-3">Streaks</h2>
95+
<div class="row row-cols-1 row-cols-md-3 g-4 mb-4">
96+
<div class="col">
97+
<div class="card h-100 text-center shadow-sm">
98+
<div class="card-body">
99+
<h5 class="card-title text-success">Longest Win Streak</h5>
100+
<p class="card-text fs-2 fw-bold">{{ longest_win_streak }}</p>
101+
</div>
102+
</div>
103+
</div>
104+
<div class="col">
105+
<div class="card h-100 text-center shadow-sm">
106+
<div class="card-body">
107+
<h5 class="card-title text-danger">Longest Loss Streak</h5>
108+
<p class="card-text fs-2 fw-bold">{{ longest_loss_streak }}</p>
109+
</div>
110+
</div>
111+
</div>
112+
<div class="col">
113+
<div class="card h-100 text-center shadow-sm">
114+
<div class="card-body">
115+
<h5 class="card-title">Current Streak</h5>
116+
<p class="card-text fs-2 fw-bold">
117+
{% if current_streak_count > 0 %}
118+
{{ current_streak_count }} {{ current_streak_type }}{{ current_streak_count|pluralize }}
119+
{% else %}
120+
N/A
121+
{% endif %}
122+
</p>
123+
</div>
63124
</div>
64125
</div>
65126
</div>
66-
<div class="col-md-3">
67-
<div class="card text-center text-warning">
68-
<div class="card-body">
69-
<h5 class="card-title">Incomplete</h5>
70-
<p class="card-text fs-4">{{ incomplete }}</p>
127+
{# Opponent Statistics Section #}
128+
<h2 class="mb-3">Opponent Insights</h2>
129+
<div class="row row-cols-1 row-cols-md-3 g-4 mb-4">
130+
<div class="col">
131+
<div class="card h-100 text-center shadow-sm">
132+
<div class="card-body">
133+
<h5 class="card-title">Most Played With/Against</h5>
134+
<p class="card-text fs-4">
135+
{% if most_played_with %}
136+
<a href="{% url 'users:user-profile' most_played_with.user.pk %}">{{ most_played_with.user.username }}</a>
137+
({{ most_played_with.count }} games)
138+
{% else %}
139+
N/A
140+
{% endif %}
141+
</p>
142+
</div>
143+
</div>
144+
</div>
145+
<div class="col">
146+
<div class="card h-100 text-center shadow-sm">
147+
<div class="card-body">
148+
<h5 class="card-title text-success">Favorite Opponent</h5>
149+
<p class="card-text fs-4">
150+
{% if favorite_opponent %}
151+
<a href="{% url 'users:user-profile' favorite_opponent.user.pk %}">{{ favorite_opponent.user.username }}</a>
152+
({{ favorite_opponent.count }} wins)
153+
{% else %}
154+
N/A
155+
{% endif %}
156+
</p>
157+
</div>
158+
</div>
159+
</div>
160+
<div class="col">
161+
<div class="card h-100 text-center shadow-sm">
162+
<div class="card-body">
163+
<h5 class="card-title text-danger">Nemesis Opponent</h5>
164+
<p class="card-text fs-4">
165+
{% if nemesis_opponent %}
166+
<a href="{% url 'users:user-profile' nemesis_opponent.user.pk %}">{{ nemesis_opponent.user.username }}</a>
167+
({{ nemesis_opponent.count }} losses)
168+
{% else %}
169+
N/A
170+
{% endif %}
171+
</p>
172+
</div>
71173
</div>
72174
</div>
73175
</div>
74-
</div>
176+
{% endif %}
75177
{% if entries %}
76-
<div class="table-responsive">
178+
<h2 class="mb-3">Match Log</h2>
179+
<div class="table-responsive shadow-sm">
77180
<table class="table table-bordered table-hover align-middle">
78181
<thead class="table-light">
79182
<tr>
80183
<th scope="col">Match ID</th>
81184
<th scope="col">Date Played</th>
82185
<th scope="col">Status</th>
83186
<th scope="col">Result</th>
187+
<th scope="col">Opponent(s)</th>
84188
</tr>
85189
</thead>
86190
<tbody>
87191
{% for record in entries %}
88192
<tr>
89-
<td>{{ record.match.id }}</td>
193+
<td>
194+
{% if record.match %}
195+
<a href="{% url 'lobby-details' record.match.lobby.pk %}">{{ record.match.id }}</a>
196+
{% else %}
197+
N/A
198+
{% endif %}
199+
</td>
90200
<td>{{ record.date_played|date:"Y-m-d H:i" }}</td>
91201
<td>
92202
{% if record.is_completed %}
@@ -96,9 +206,8 @@ <h5 class="card-title">Incomplete</h5>
96206
{% endif %}
97207
</td>
98208
<td>
99-
{# GameHistory.WIN = 0, GameHistory.DRAW = 1, GameHistory.LOSE = 2, GameHistory.INCOMPLETE = 3 #}
100209
{% if record.result == 0 %}
101-
<span class="badge bg-success">Win</span> {# Assuming 0 is Win based on common game dev practice, check model #}
210+
<span class="badge bg-success">Win</span>
102211
{% elif record.result == 1 %}
103212
<span class="badge bg-secondary">Draw</span>
104213
{% elif record.result == 2 %}
@@ -109,14 +218,35 @@ <h5 class="card-title">Incomplete</h5>
109218
<span class="badge bg-light text-dark">N/A</span>
110219
{% endif %}
111220
</td>
221+
<td>
222+
{% if record.match %}
223+
{% for player in record.match.players.all %}
224+
{% if player != request.user %}
225+
<a href="{% url 'users:user-profile' player.pk %}">{{ player.username }}</a>
226+
{% if not forloop.last %},{% endif %}
227+
{% endif %}
228+
{% empty %}
229+
No other players
230+
{% endfor %}
231+
{% else %}
232+
N/A
233+
{% endif %}
234+
</td>
112235
</tr>
113236
{% endfor %}
114237
</tbody>
115238
</table>
116239
</div>
117240
{% else %}
118-
<div class="alert alert-warning text-center mt-4" role="alert">
119-
🎮 No game history found for the selected period. Time to start playing!
241+
<div class="alert alert-info text-center mt-4 shadow-sm" role="alert">
242+
<h4 class="alert-heading">🎮 No Game History Yet!</h4>
243+
<p>
244+
It looks like you haven't played any matches for <strong>{{ game.name }}</strong> in the selected period.
245+
</p>
246+
<hr />
247+
<p class="mb-0">
248+
Time to dive in and make some history! You can <a href="{% url 'match-create' pk=game.pk %}" class="alert-link">create a match</a> or <a href="{% url 'match-join' pk=game.pk %}" class="alert-link">join an existing one</a>.
249+
</p>
120250
</div>
121251
{% endif %}
122252
</div>

0 commit comments

Comments
 (0)