129 lines
3.6 KiB
HTML
129 lines
3.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ player_name }} - Pickleball ELO Tracker{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>{{ player_name }}</h1>
|
|
{% include "components/nav.html" %}
|
|
|
|
<div class="form-row">
|
|
<div class="card">
|
|
<h3>Rating</h3>
|
|
<div style="font-size: 36px; font-weight: bold; color: #003594; margin: 20px 0;">
|
|
{{ current_rating }}
|
|
</div>
|
|
<p style="color: #666; margin: 0;">
|
|
{% if rating_change >= 0.0 %}
|
|
<span style="color: #27ae60;">+{{ rating_change }}</span>
|
|
{% else %}
|
|
<span style="color: #e74c3c;">{{ rating_change }}</span>
|
|
{% endif %}
|
|
in last match
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Match Statistics</h3>
|
|
<div style="margin: 15px 0;">
|
|
<p><strong>Total Matches:</strong> {{ total_matches }}</p>
|
|
<p><strong>Wins:</strong> {{ wins }}</p>
|
|
<p><strong>Losses:</strong> {{ losses }}</p>
|
|
<p><strong>Win Rate:</strong> {{ win_rate }}%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if email %}
|
|
<div class="card">
|
|
<p><strong>Email:</strong> {{ email }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div style="margin-top: 30px; text-align: center;">
|
|
<a href="/players/{{ player_id }}/edit" class="btn btn-warning">✏️ Edit Player</a>
|
|
<a href="/players/{{ player_id }}/delete" class="btn btn-danger" onclick="return confirm('Are you sure?')">🗑️ Delete Player</a>
|
|
</div>
|
|
|
|
{% if history_chart_data %}
|
|
<div class="card">
|
|
<h2>📈 Rating Trend</h2>
|
|
<div style="overflow-x: auto;">
|
|
<canvas id="ratingChart" width="400" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
const ctx = document.getElementById('ratingChart').getContext('2d');
|
|
const chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: Array.from({length: {{ history_chart_data | length }}}. (_, i) => i + 1),
|
|
datasets: [{
|
|
label: 'Rating',
|
|
data: [{{ history_chart_data | join(",") }}],
|
|
borderColor: '#003594',
|
|
backgroundColor: 'rgba(0, 53, 148, 0.1)',
|
|
tension: 0.3,
|
|
fill: true,
|
|
pointRadius: 3,
|
|
pointBackgroundColor: '#003594'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: { display: true }
|
|
},
|
|
scales: {
|
|
y: {
|
|
title: { display: true, text: 'ELO Rating' },
|
|
min: 1000,
|
|
max: 2000
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
|
|
{% if head_to_head %}
|
|
<div class="card">
|
|
<h2>⚔️ Head-to-Head</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Opponent</th>
|
|
<th>Wins</th>
|
|
<th>Losses</th>
|
|
<th>Win Rate</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for opp in head_to_head %}
|
|
<tr>
|
|
<td><a href="/players/{{ opp.id }}">{{ opp.name }}</a></td>
|
|
<td>{{ opp.wins }}</td>
|
|
<td>{{ opp.losses }}</td>
|
|
<td>{{ opp.win_percentage }}%</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if achievements %}
|
|
<div class="card">
|
|
<h2>🏆 Achievements</h2>
|
|
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
|
|
{% for achievement in achievements %}
|
|
<span style="background: #FFB81C; color: #003594; padding: 8px 12px; border-radius: 20px; font-weight: bold;">
|
|
{{ achievement }}
|
|
</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|