1.1.0: Updated Profile
This commit is contained in:
@@ -1,261 +1,305 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="space-y-6">
|
||||
<!-- Profile Header -->
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<div class="sm:flex sm:space-x-5">
|
||||
<div class="flex-shrink-0 relative group">
|
||||
<!-- Avatar -->
|
||||
{% if player.avatar_url %}
|
||||
<img src="{{ player.avatar_url }}" class="mx-auto h-24 w-24 rounded-full object-cover border-4 border-white shadow-lg">
|
||||
{% else %}
|
||||
<div class="mx-auto h-24 w-24 rounded-full bg-yrtv-100 flex items-center justify-center text-yrtv-600 font-bold text-3xl border-4 border-white shadow-lg">
|
||||
{{ player.username[:2] | upper if player.username else '??' }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if session.get('is_admin') %}
|
||||
<button onclick="document.getElementById('editProfileModal').classList.remove('hidden')" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-full opacity-0 group-hover:opacity-100 text-white text-xs transition cursor-pointer">
|
||||
Edit
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||
<p class="text-xl font-bold text-gray-900 dark:text-white sm:text-2xl">{{ player.username }}</p>
|
||||
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ player.steam_id_64 }}</p>
|
||||
<div class="mt-2 flex justify-center sm:justify-start space-x-2 items-center flex-wrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
{{ player.uid }}
|
||||
</span>
|
||||
<!-- Tags -->
|
||||
{% for tag in metadata.tags %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
|
||||
{{ tag }}
|
||||
{% if session.get('is_admin') %}
|
||||
<form action="{{ url_for('players.detail', steam_id=player.steam_id_64) }}" method="POST" class="inline ml-1">
|
||||
<input type="hidden" name="admin_action" value="remove_tag">
|
||||
<input type="hidden" name="tag" value="{{ tag }}">
|
||||
<button type="submit" class="text-gray-400 hover:text-red-500 focus:outline-none">×</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endfor %}
|
||||
<div class="space-y-8" x-data="{ range: '20' }">
|
||||
<!-- 1. Header & Data Dashboard (Top) -->
|
||||
<div class="bg-white dark:bg-slate-800 shadow-xl rounded-2xl overflow-hidden border border-gray-100 dark:border-slate-700">
|
||||
<div class="p-8">
|
||||
<div class="lg:flex lg:items-start lg:space-x-8">
|
||||
<!-- Avatar & Basic Info -->
|
||||
<div class="flex-shrink-0 flex flex-col items-center lg:items-start space-y-4">
|
||||
<div class="relative group">
|
||||
{% if player.avatar_url %}
|
||||
<img src="{{ player.avatar_url }}" class="h-32 w-32 rounded-2xl object-cover shadow-lg border-4 border-white dark:border-slate-700 transform group-hover:scale-105 transition duration-300">
|
||||
{% else %}
|
||||
<div class="h-32 w-32 rounded-2xl bg-gradient-to-br from-yrtv-100 to-yrtv-200 flex items-center justify-center text-yrtv-600 font-bold text-4xl shadow-lg border-4 border-white dark:border-slate-700">
|
||||
{{ player.username[:2] | upper if player.username else '??' }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if session.get('is_admin') %}
|
||||
<form action="{{ url_for('players.detail', steam_id=player.steam_id_64) }}" method="POST" class="inline-flex items-center">
|
||||
<input type="hidden" name="admin_action" value="add_tag">
|
||||
<input type="text" name="tag" placeholder="New Tag" class="w-20 text-xs border border-gray-300 rounded px-1 py-0.5 focus:outline-none dark:bg-slate-700 dark:border-slate-600 dark:text-white">
|
||||
<button type="submit" class="ml-1 text-xs text-yrtv-600 hover:text-yrtv-800">+</button>
|
||||
</form>
|
||||
<button onclick="document.getElementById('editProfileModal').classList.remove('hidden')" class="absolute -bottom-2 -right-2 bg-white dark:bg-slate-700 p-2 rounded-full shadow-md text-gray-500 hover:text-yrtv-600 transition">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if metadata.notes %}
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400 italic">"{{ metadata.notes }}"</p>
|
||||
{% endif %}
|
||||
<div class="text-center lg:text-left">
|
||||
<h1 class="text-3xl font-black text-gray-900 dark:text-white tracking-tight">{{ player.username }}</h1>
|
||||
<p class="text-sm font-mono text-gray-500 dark:text-gray-400 mt-1">{{ player.steam_id_64 }}</p>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="mt-3 flex flex-wrap justify-center lg:justify-start gap-2">
|
||||
{% for tag in metadata.tags %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-bold bg-gray-100 text-gray-700 dark:bg-slate-700 dark:text-gray-300 border border-gray-200 dark:border-slate-600">
|
||||
{{ tag }}
|
||||
{% if session.get('is_admin') %}
|
||||
<form action="{{ url_for('players.detail', steam_id=player.steam_id_64) }}" method="POST" class="inline ml-1">
|
||||
<input type="hidden" name="admin_action" value="remove_tag">
|
||||
<input type="hidden" name="tag" value="{{ tag }}">
|
||||
<button type="submit" class="text-gray-400 hover:text-red-500 focus:outline-none">×</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endfor %}
|
||||
|
||||
{% if session.get('is_admin') %}
|
||||
<form action="{{ url_for('players.detail', steam_id=player.steam_id_64) }}" method="POST" class="inline-flex">
|
||||
<input type="hidden" name="admin_action" value="add_tag">
|
||||
<input type="text" name="tag" placeholder="+Tag" class="w-16 text-xs border border-gray-300 rounded px-1 py-0.5 focus:outline-none dark:bg-slate-700 dark:border-slate-600 dark:text-white">
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Dashboard -->
|
||||
<div class="flex-1 w-full mt-8 lg:mt-0">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{% macro stat_card(label, metric_key, format_str, icon) %}
|
||||
{% set dist = distribution[metric_key] if distribution else None %}
|
||||
<div class="bg-gray-50 dark:bg-slate-700/50 rounded-xl p-5 border border-gray-100 dark:border-slate-600 relative overflow-hidden group hover:shadow-md transition-shadow">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div class="text-xs font-bold text-gray-400 uppercase tracking-wider flex items-center gap-1">
|
||||
{{ icon }} {{ label }}
|
||||
</div>
|
||||
{% if dist %}
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold
|
||||
{% if dist.rank == 1 %}bg-yellow-100 text-yellow-800 border border-yellow-200
|
||||
{% elif dist.rank <= 3 %}bg-gray-100 text-gray-800 border border-gray-200
|
||||
{% else %}bg-slate-100 text-slate-600 border border-slate-200{% endif %}">
|
||||
Rank #{{ dist.rank }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="text-3xl font-black text-gray-900 dark:text-white mb-3">
|
||||
{{ format_str.format(dist.val if dist else 0) }}
|
||||
</div>
|
||||
|
||||
<!-- Distribution Bar -->
|
||||
{% if dist %}
|
||||
<div class="w-full h-1.5 bg-gray-200 dark:bg-slate-600 rounded-full overflow-hidden relative">
|
||||
<!-- Range: Min to Max -->
|
||||
{% set range = dist.max - dist.min %}
|
||||
{% set percent = ((dist.val - dist.min) / range * 100) if range > 0 else 100 %}
|
||||
<div class="absolute h-full bg-yrtv-500 rounded-full transition-all duration-1000" style="width: {{ percent }}%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-[10px] text-gray-400 mt-1 font-mono">
|
||||
<span>{{ format_str.format(dist.min) }}</span>
|
||||
<span>Avg: {{ format_str.format(dist.avg) }}</span>
|
||||
<span>{{ format_str.format(dist.max) }}</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-xs text-gray-400">No team data</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{{ stat_card('Rating', 'rating', '{:.2f}', '⭐') }}
|
||||
{{ stat_card('K/D Ratio', 'kd', '{:.2f}', '🔫') }}
|
||||
{{ stat_card('ADR', 'adr', '{:.1f}', '🔥') }}
|
||||
{{ stat_card('KAST', 'kast', '{:.1%}', '🛡️') }} <!-- Note: KAST is stored as 0-1, formatted as % -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex justify-center sm:mt-0 space-x-2">
|
||||
{% if session.get('is_admin') %}
|
||||
<button onclick="document.getElementById('editProfileModal').classList.remove('hidden')" class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:bg-slate-700 dark:text-white dark:border-slate-600 dark:hover:bg-slate-600">
|
||||
Edit Profile
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Modal -->
|
||||
<div id="editProfileModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-slate-800">
|
||||
<div class="mt-3 text-center">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Edit Profile</h3>
|
||||
<form action="{{ url_for('players.detail', steam_id=player.steam_id_64) }}" method="POST" class="mt-2 px-7 py-3" enctype="multipart/form-data">
|
||||
<input type="hidden" name="admin_action" value="update_profile">
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Avatar</label>
|
||||
<input type="file" name="avatar" accept="image/*" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-yrtv-50 file:text-yrtv-700 hover:file:bg-yrtv-100 dark:text-gray-300 dark:file:bg-slate-700 dark:file:text-white">
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 text-left">Supported: JPG, PNG. Will replace existing.</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Notes</label>
|
||||
<textarea name="notes" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 dark:bg-slate-700 dark:text-white dark:border-slate-600">{{ metadata.notes }}</textarea>
|
||||
</div>
|
||||
<div class="items-center px-4 py-3">
|
||||
<button type="submit" class="px-4 py-2 bg-yrtv-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-yrtv-700 focus:outline-none focus:ring-2 focus:ring-yrtv-500">
|
||||
Save
|
||||
</button>
|
||||
<button type="button" onclick="document.getElementById('editProfileModal').classList.add('hidden')" class="mt-3 px-4 py-2 bg-gray-100 text-gray-700 text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:bg-slate-700 dark:text-white dark:hover:bg-slate-600">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- 2. Charts Section (Middle) -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Trend Chart -->
|
||||
<div class="lg:col-span-2 bg-white dark:bg-slate-800 shadow-lg rounded-2xl p-6 border border-gray-100 dark:border-slate-700">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<span>📈</span> 近期表现走势 (Performance Trend)
|
||||
</h3>
|
||||
<!-- Simple Range Filter (Visual Only for now, could be wired to JS) -->
|
||||
<div class="flex bg-gray-100 dark:bg-slate-700 rounded-lg p-1">
|
||||
<button class="px-3 py-1 text-xs font-bold rounded-md bg-white dark:bg-slate-600 shadow-sm text-gray-800 dark:text-white">Recent 20</button>
|
||||
<!-- <button class="px-3 py-1 text-xs font-medium rounded-md text-gray-500 hover:text-gray-900">All Time</button> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-80 w-full">
|
||||
<canvas id="trendChart"></canvas>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-center gap-6 text-xs text-gray-500">
|
||||
<div class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-green-500/20 border border-green-500"></span> Carry (>1.5)</div>
|
||||
<div class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500"></span> Normal (1.0-1.5)</div>
|
||||
<div class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-red-500/20 border border-red-500"></span> Poor (<0.6)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layout Reorder: Trend First -->
|
||||
|
||||
<!-- Trend Chart (Full Width) -->
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">
|
||||
<span class="mr-2">📈</span>近期 Rating 走势 (Trend)
|
||||
<!-- Radar Chart -->
|
||||
<div class="bg-white dark:bg-slate-800 shadow-lg rounded-2xl p-6 border border-gray-100 dark:border-slate-700 flex flex-col">
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
|
||||
<span>🕸️</span> 能力六维图 (Capabilities)
|
||||
</h3>
|
||||
</div>
|
||||
<div class="relative h-72">
|
||||
<canvas id="trendChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid: Stats + Radar -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Left: Stats Cards -->
|
||||
<div class="lg:col-span-2 grid grid-cols-2 gap-4 h-fit">
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-4 text-center">
|
||||
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">{{ "%.2f"|format((features.basic_avg_rating if features else 0) or 0) }}</dd>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-4 text-center">
|
||||
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">K/D</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">{{ "%.2f"|format((features.basic_avg_kd if features else 0) or 0) }}</dd>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-4 text-center">
|
||||
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">ADR</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">{{ "%.1f"|format((features.basic_avg_adr if features else 0) or 0) }}</dd>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-4 text-center">
|
||||
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">KAST</dt>
|
||||
<dd class="mt-1 text-3xl font-semibold text-gray-900 dark:text-white">{{ "%.1f"|format((features.basic_avg_kast if features else 0) * 100) }}%</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Radar -->
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6 flex flex-col items-center justify-center">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-4 w-full text-left">能力六维图</h3>
|
||||
<div class="relative h-64 w-full">
|
||||
<div class="relative flex-1 min-h-[300px] flex items-center justify-center">
|
||||
<canvas id="radarChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Match History (L2) -->
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-4">比赛记录 (History - {{ history|length }})</h3>
|
||||
<div class="overflow-x-auto max-h-96 overflow-y-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 relative">
|
||||
<thead class="bg-gray-50 dark:bg-slate-700 sticky top-0">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Map</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Result</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Party</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Rating</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">K/D</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ADR</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{% for m in history | reverse %}
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
<script>document.write(new Date({{ m.start_time }} * 1000).toLocaleDateString())</script>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ m.map_name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-center">
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {% if m.is_win %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
|
||||
{{ 'WIN' if m.is_win else 'LOSS' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
{% if m.party_size and m.party_size > 1 %}
|
||||
{% set p = m.party_size %}
|
||||
{% set party_class = 'bg-gray-100 text-gray-800' %}
|
||||
{% if p == 2 %} {% set party_class = 'bg-indigo-100 text-indigo-800' %}
|
||||
{% elif p == 3 %} {% set party_class = 'bg-blue-100 text-blue-800' %}
|
||||
{% elif p == 4 %} {% set party_class = 'bg-purple-100 text-purple-800' %}
|
||||
{% elif p >= 5 %} {% set party_class = 'bg-orange-100 text-orange-800' %}
|
||||
{% endif %}
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ party_class }}">
|
||||
👥 {{ m.party_size }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="text-xs text-gray-400">Solo</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-right font-bold {% if (m.rating or 0) >= 1.1 %}text-green-600{% elif (m.rating or 0) < 0.9 %}text-red-600{% else %}text-gray-900 dark:text-white{% endif %}">{{ "%.2f"|format(m.rating or 0) }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-right text-gray-500 dark:text-gray-400">{{ "%.2f"|format(m.kd_ratio or 0) }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-right text-gray-500 dark:text-gray-400">{{ "%.1f"|format(m.adr or 0) }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-right font-medium">
|
||||
<a href="{{ url_for('matches.detail', match_id=m.match_id) }}" class="text-yrtv-600 hover:text-yrtv-900">View</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-4 text-center text-gray-500">No recent matches found.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 3. Match History & Comments (Bottom) -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Match History Table -->
|
||||
<div class="lg:col-span-2 bg-white dark:bg-slate-800 shadow-lg rounded-2xl overflow-hidden border border-gray-100 dark:border-slate-700">
|
||||
<div class="p-6 border-b border-gray-100 dark:border-slate-700 flex justify-between items-center">
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white">比赛记录 (Match History)</h3>
|
||||
<span class="px-2.5 py-0.5 rounded-full text-xs font-bold bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-gray-300">
|
||||
{{ history|length }} Matches
|
||||
</span>
|
||||
</div>
|
||||
<div class="overflow-x-auto max-h-[600px] overflow-y-auto custom-scroll">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
|
||||
<thead class="bg-gray-50 dark:bg-slate-700/50 sticky top-0 backdrop-blur-sm z-10">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Date/Map</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-bold text-gray-500 uppercase tracking-wider">Result</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">Rating</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">K/D</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">ADR</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-bold text-gray-500 uppercase tracking-wider">Link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100 dark:divide-slate-700 bg-white dark:bg-slate-800">
|
||||
{% for m in history | reverse %}
|
||||
<tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-colors group">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm font-bold text-gray-900 dark:text-white">{{ m.map_name }}</div>
|
||||
<div class="text-xs text-gray-500 font-mono">
|
||||
<script>document.write(new Date({{ m.start_time }} * 1000).toLocaleDateString())</script>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-center">
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<span class="px-2.5 py-0.5 rounded text-[10px] font-black uppercase tracking-wide
|
||||
{% if m.is_win %}bg-green-100 text-green-700 border border-green-200
|
||||
{% else %}bg-red-50 text-red-600 border border-red-100{% endif %}">
|
||||
{{ 'WIN' if m.is_win else 'LOSS' }}
|
||||
</span>
|
||||
{% if m.party_size and m.party_size > 1 %}
|
||||
<span class="text-[10px] text-gray-400 flex items-center gap-0.5" title="Party Size">
|
||||
👥 {{ m.party_size }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right">
|
||||
{% set r = m.rating or 0 %}
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<span class="text-sm font-bold font-mono {% if r >= 1.5 %}text-yrtv-600{% elif r >= 1.1 %}text-green-600{% elif r < 0.6 %}text-red-500{% else %}text-gray-700 dark:text-gray-300{% endif %}">
|
||||
{{ "%.2f"|format(r) }}
|
||||
</span>
|
||||
<!-- Mini Bar -->
|
||||
<div class="w-12 h-1 bg-gray-100 dark:bg-slate-700 rounded-full overflow-hidden">
|
||||
<div class="h-full {% if r >= 1.1 %}bg-green-500{% elif r < 0.9 %}bg-red-500{% else %}bg-gray-400{% endif %}" style="width: {{ (r / 2.0 * 100)|int }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-600 dark:text-gray-400 font-mono">
|
||||
{{ "%.2f"|format(m.kd_ratio or 0) }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-600 dark:text-gray-400 font-mono">
|
||||
{{ "%.1f"|format(m.adr or 0) }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-center">
|
||||
<a href="{{ url_for('matches.detail', match_id=m.match_id) }}" class="p-2 text-gray-400 hover:text-yrtv-600 transition-colors">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-12 text-center text-gray-400">
|
||||
<div class="text-4xl mb-2">🏜️</div>
|
||||
No matches recorded yet.
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reviews / Comments -->
|
||||
<div class="bg-white dark:bg-slate-800 shadow-lg rounded-2xl p-6 border border-gray-100 dark:border-slate-700">
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-6">留言板 (Comments)</h3>
|
||||
|
||||
<form action="{{ url_for('players.detail', steam_id=player.steam_id_64) }}" method="POST" class="mb-8 relative">
|
||||
<input type="text" name="username" class="absolute top-2 left-2 text-xs border-none bg-transparent focus:ring-0 text-gray-500 w-full" placeholder="Name (Optional)">
|
||||
<textarea name="content" rows="3" required class="block w-full pt-8 pb-2 px-3 border border-gray-200 dark:border-slate-600 rounded-xl bg-gray-50 dark:bg-slate-700/50 focus:ring-2 focus:ring-yrtv-500 focus:bg-white dark:focus:bg-slate-700 transition" placeholder="Write a comment..."></textarea>
|
||||
<button type="submit" class="absolute bottom-2 right-2 px-3 py-1 bg-yrtv-600 text-white text-xs font-bold rounded-lg hover:bg-yrtv-700 transition shadow-sm">Post</button>
|
||||
</form>
|
||||
|
||||
<div class="space-y-4 max-h-[500px] overflow-y-auto custom-scroll pr-2">
|
||||
{% for comment in comments %}
|
||||
<div class="flex gap-3 group">
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
<div class="h-8 w-8 rounded-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center text-gray-500 text-xs font-bold border border-white shadow-sm">
|
||||
{{ comment.username[:1] | upper }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-gray-50 dark:bg-slate-700/30 rounded-r-xl rounded-bl-xl p-3 text-sm hover:bg-gray-100 dark:hover:bg-slate-700/50 transition-colors">
|
||||
<div class="flex justify-between items-baseline mb-1">
|
||||
<span class="font-bold text-gray-900 dark:text-white">{{ comment.username }}</span>
|
||||
<span class="text-xs text-gray-400">{{ comment.created_at }}</span>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">{{ comment.content }}</p>
|
||||
<div class="mt-2 flex justify-end">
|
||||
<button onclick="likeComment({{ comment.id }}, this)" class="text-xs text-gray-400 hover:text-red-500 flex items-center gap-1 transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
|
||||
<span class="like-count font-bold">{{ comment.likes }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-8 text-gray-400 text-sm">No comments yet.</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-6">玩家评价 ({{ comments|length }})</h3>
|
||||
|
||||
<!-- Comment Form -->
|
||||
<form action="{{ url_for('players.detail', steam_id=player.steam_id_64) }}" method="POST" class="mb-8">
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Your Name (Optional)</label>
|
||||
<input type="text" name="username" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 dark:bg-slate-700 dark:text-white" placeholder="Anonymous">
|
||||
</div>
|
||||
|
||||
<!-- Edit Modal (Hidden) -->
|
||||
<div id="editProfileModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md p-6 m-4 animate-scale-in">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Edit Profile</h3>
|
||||
<form action="{{ url_for('players.detail', steam_id=player.steam_id_64) }}" method="POST" enctype="multipart/form-data">
|
||||
<input type="hidden" name="admin_action" value="update_profile">
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-1">Avatar</label>
|
||||
<input type="file" name="avatar" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-bold file:bg-yrtv-50 file:text-yrtv-700 hover:file:bg-yrtv-100">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-1">Notes</label>
|
||||
<textarea name="notes" rows="3" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-yrtv-500 focus:ring-yrtv-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white">{{ metadata.notes }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Comment</label>
|
||||
<textarea name="content" rows="3" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 dark:bg-slate-700 dark:text-white" placeholder="Share your thoughts..."></textarea>
|
||||
|
||||
<div class="mt-6 flex gap-3">
|
||||
<button type="button" onclick="document.getElementById('editProfileModal').classList.add('hidden')" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-bold transition">Cancel</button>
|
||||
<button type="submit" class="flex-1 px-4 py-2 bg-yrtv-600 text-white rounded-lg hover:bg-yrtv-700 font-bold shadow-lg shadow-yrtv-500/30 transition">Save Changes</button>
|
||||
</div>
|
||||
<button type="submit" class="px-4 py-2 bg-yrtv-600 text-white rounded hover:bg-yrtv-700">Submit Review</button>
|
||||
</form>
|
||||
|
||||
<!-- Comment List -->
|
||||
<div class="space-y-6">
|
||||
{% for comment in comments %}
|
||||
<div class="flex space-x-4 p-4 bg-gray-50 dark:bg-slate-700 rounded-lg">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="inline-block h-10 w-10 rounded-full overflow-hidden bg-gray-100">
|
||||
<svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium text-gray-900 dark:text-white">{{ comment.username }}</h3>
|
||||
<p class="text-sm text-gray-500">{{ comment.created_at }}</p>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-300">{{ comment.content }}</p>
|
||||
|
||||
<div class="mt-2 flex items-center space-x-2">
|
||||
<button onclick="likeComment({{ comment.id }}, this)" class="flex items-center text-gray-400 hover:text-red-500">
|
||||
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
<span class="like-count">{{ comment.likes }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-gray-500 text-center">No comments yet. Be the first!</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
let trendChartInstance = null;
|
||||
|
||||
function resetZoom() {
|
||||
if (trendChartInstance) {
|
||||
trendChartInstance.resetZoom();
|
||||
}
|
||||
}
|
||||
|
||||
function likeComment(commentId, btn) {
|
||||
fetch(`/players/comment/${commentId}/like`, { method: 'POST' })
|
||||
.then(response => response.json())
|
||||
@@ -274,28 +318,58 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
fetch(`/players/${steamId}/charts_data`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Register Zoom Plugin Manually if needed (usually auto-registers in UMD)
|
||||
if (window.ChartZoom) {
|
||||
Chart.register(window.ChartZoom);
|
||||
}
|
||||
|
||||
// Radar Chart
|
||||
const ctxRadar = document.getElementById('radarChart').getContext('2d');
|
||||
new Chart(ctxRadar, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ['STA', 'BAT', 'HPS', 'PTL', 'SIDE', 'UTIL'],
|
||||
// Update labels to friendly names
|
||||
labels: ['Aim (BAT)', 'Clutch (HPS)', 'Pistol (PTL)', 'Defense (SIDE)', 'Util (UTIL)', 'Rating (STA)'],
|
||||
datasets: [{
|
||||
label: 'Ability',
|
||||
data: [
|
||||
data.radar.STA, data.radar.BAT, data.radar.HPS,
|
||||
data.radar.PTL, data.radar.SIDE, data.radar.UTIL
|
||||
data.radar.BAT, data.radar.HPS,
|
||||
data.radar.PTL, data.radar.SIDE, data.radar.UTIL,
|
||||
data.radar.STA
|
||||
],
|
||||
backgroundColor: 'rgba(124, 58, 237, 0.2)',
|
||||
borderColor: 'rgba(124, 58, 237, 1)',
|
||||
pointBackgroundColor: 'rgba(124, 58, 237, 1)',
|
||||
borderColor: '#7c3aed',
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#7c3aed',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: '#7c3aed'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: { display: false }
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
beginAtZero: true,
|
||||
suggestedMax: 2.0 // Adjust based on data range
|
||||
suggestedMax: 1.5,
|
||||
angleLines: {
|
||||
color: 'rgba(156, 163, 175, 0.2)'
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(156, 163, 175, 0.2)'
|
||||
},
|
||||
pointLabels: {
|
||||
font: {
|
||||
size: 11,
|
||||
weight: 'bold'
|
||||
},
|
||||
color: '#6b7280' // gray-500
|
||||
},
|
||||
ticks: {
|
||||
display: false // Hide numbers on axis
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -303,25 +377,135 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// Trend Chart
|
||||
const ctxTrend = document.getElementById('trendChart').getContext('2d');
|
||||
new Chart(ctxTrend, {
|
||||
|
||||
// Create Gradient
|
||||
const gradient = ctxTrend.createLinearGradient(0, 0, 0, 400);
|
||||
gradient.addColorStop(0, 'rgba(124, 58, 237, 0.5)'); // Purple
|
||||
gradient.addColorStop(1, 'rgba(124, 58, 237, 0.0)');
|
||||
|
||||
trendChartInstance = new Chart(ctxTrend, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: data.trend.labels,
|
||||
datasets: [{
|
||||
label: 'Rating',
|
||||
data: data.trend.values,
|
||||
borderColor: 'rgba(16, 185, 129, 1)',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||
tension: 0.1,
|
||||
fill: true
|
||||
}]
|
||||
datasets: [
|
||||
{
|
||||
label: 'Rating',
|
||||
data: data.trend.values,
|
||||
borderColor: '#7c3aed', // YRTV Purple
|
||||
backgroundColor: gradient,
|
||||
borderWidth: 2,
|
||||
tension: 0.4, // Smoother curve
|
||||
pointRadius: 3,
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBorderColor: '#7c3aed',
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#7c3aed',
|
||||
pointHoverBorderColor: '#fff',
|
||||
fill: true,
|
||||
order: 1
|
||||
},
|
||||
// Baselines
|
||||
{
|
||||
label: 'Carry (1.5)',
|
||||
data: Array(data.trend.labels.length).fill(1.5),
|
||||
borderColor: 'rgba(34, 197, 94, 0.6)', // Green
|
||||
borderWidth: 1,
|
||||
borderDash: [5, 5],
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
label: 'Normal (1.0)',
|
||||
data: Array(data.trend.labels.length).fill(1.0),
|
||||
borderColor: 'rgba(234, 179, 8, 0.6)', // Yellow
|
||||
borderWidth: 1,
|
||||
borderDash: [5, 5],
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
order: 3
|
||||
},
|
||||
{
|
||||
label: 'Poor (0.6)',
|
||||
data: Array(data.trend.labels.length).fill(0.6),
|
||||
borderColor: 'rgba(239, 68, 68, 0.6)', // Red
|
||||
borderWidth: 1,
|
||||
borderDash: [5, 5],
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
order: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
zoom: {
|
||||
pan: {
|
||||
enabled: true,
|
||||
mode: 'x',
|
||||
modifierKey: null, // Allow plain drag
|
||||
},
|
||||
zoom: {
|
||||
wheel: {
|
||||
enabled: true,
|
||||
},
|
||||
pinch: {
|
||||
enabled: true
|
||||
},
|
||||
mode: 'x',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(17, 24, 39, 0.9)',
|
||||
titleFont: { size: 12 },
|
||||
bodyFont: { size: 14, weight: 'bold' },
|
||||
padding: 12,
|
||||
cornerRadius: 8,
|
||||
displayColors: false, // Cleaner look
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
if (context.datasetIndex > 0) return null; // Hide baseline tooltips
|
||||
let val = context.parsed.y.toFixed(2);
|
||||
let label = "Rating: " + val;
|
||||
if (val >= 1.5) label += " 🔥";
|
||||
else if (val < 0.6) label += " 💀";
|
||||
return label;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: false
|
||||
beginAtZero: true,
|
||||
suggestedMax: 2.0,
|
||||
grid: {
|
||||
color: 'rgba(156, 163, 175, 0.1)',
|
||||
borderDash: [2, 2]
|
||||
},
|
||||
ticks: {
|
||||
font: { size: 10 }
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
maxRotation: 0, // Keep labels horizontal
|
||||
minRotation: 0,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 10, // Avoid crowding
|
||||
font: { size: 10 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -329,4 +513,4 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user