Files
yrtv/web/templates/players/profile.html

1084 lines
76 KiB
HTML

{% extends "base.html" %}
{% block content %}
<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') %}
<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>
<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">&times;</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>
<!-- Composite Rating Card -->
<div class="mt-6 bg-gray-50 dark:bg-slate-700/50 rounded-xl p-4 border border-gray-100 dark:border-slate-600 w-full max-w-[280px] mx-auto lg:mx-0">
<div class="flex items-center justify-between mb-3 border-b border-gray-200 dark:border-slate-600 pb-2">
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider">OVR Rating</span>
<span class="text-3xl font-black text-yrtv-600 dark:text-yrtv-400">{{ features['score_overall']|int }}</span>
</div>
<div class="grid grid-cols-2 gap-y-1 gap-x-4 text-[10px] font-mono">
<div class="flex justify-between items-center">
<span class="text-gray-500 dark:text-gray-400 uppercase">Aim</span>
<span class="font-bold text-gray-900 dark:text-white {{ 'text-green-600 dark:text-green-400' if features['score_aim'] >= 80 else '' }}">{{ features['score_aim'] }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 dark:text-gray-400 uppercase">Def</span>
<span class="font-bold text-gray-900 dark:text-white {{ 'text-green-600 dark:text-green-400' if features['score_defense'] >= 80 else '' }}">{{ features['score_defense'] }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 dark:text-gray-400 uppercase">Util</span>
<span class="font-bold text-gray-900 dark:text-white {{ 'text-green-600 dark:text-green-400' if features['score_utility'] >= 80 else '' }}">{{ features['score_utility'] }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 dark:text-gray-400 uppercase">Clutch</span>
<span class="font-bold text-gray-900 dark:text-white {{ 'text-green-600 dark:text-green-400' if features['score_clutch'] >= 80 else '' }}">{{ features['score_clutch'] }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 dark:text-gray-400 uppercase">Eco</span>
<span class="font-bold text-gray-900 dark:text-white {{ 'text-green-600 dark:text-green-400' if features['score_economy'] >= 80 else '' }}">{{ features['score_economy'] }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 dark:text-gray-400 uppercase">Pace</span>
<span class="font-bold text-gray-900 dark:text-white {{ 'text-green-600 dark:text-green-400' if features['score_pace'] >= 80 else '' }}">{{ features['score_pace'] }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 dark:text-gray-400 uppercase">Pistol</span>
<span class="font-bold text-gray-900 dark:text-white {{ 'text-green-600 dark:text-green-400' if features['score_pistol'] >= 80 else '' }}">{{ features['score_pistol'] }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 dark:text-gray-400 uppercase">Stability</span>
<span class="font-bold text-gray-900 dark:text-white">{{ features['score_stability'] }}</span>
</div>
</div>
</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-2 py-0.5 rounded text-xs 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>L:{{ format_str.format(dist.min) }}</span>
<span>Avg:{{ format_str.format(dist.avg) }}</span>
<span>H:{{ 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 2.0', 'core_avg_rating2', '{:.2f}', '⭐') }}
{{ stat_card('K/D Ratio', 'core_avg_kd', '{:.2f}', '🔫') }}
{{ stat_card('ADR', 'core_avg_adr', '{:.1f}', '🔥') }}
{{ stat_card('KAST %', 'core_avg_kast', '{:.1%}', '🛡️') }}
</div>
</div>
</div>
</div>
</div>
<!-- 1.5 Lifetime Stats (Quantity) -->
<div class="bg-white dark:bg-slate-800 shadow-xl rounded-2xl overflow-hidden border border-gray-100 dark:border-slate-700 p-6">
<div class="flex flex-col lg:flex-row gap-8 items-center">
<!-- Left: Sample Size -->
<div class="flex-shrink-0 flex flex-col items-center justify-center p-6 bg-yrtv-50 dark:bg-slate-700/50 rounded-2xl border border-yrtv-100 dark:border-slate-600 w-full lg:w-48">
<span class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Sample Size</span>
<span class="text-5xl font-black text-yrtv-600 dark:text-yrtv-400">{{ history|length }}</span>
<span class="text-sm font-bold text-gray-500 dark:text-gray-400 mt-1">Total Matches</span>
</div>
<!-- Right: Cumulative Stats Grid -->
<div class="flex-1 w-full grid grid-cols-2 md:grid-cols-5 gap-6">
<!-- Record -->
<div class="flex flex-col justify-center p-4 bg-gray-50 dark:bg-slate-700/30 rounded-xl">
<span class="text-xs text-gray-400 font-bold uppercase mb-2">Record</span>
<div class="flex items-baseline gap-2 mb-1">
<span class="text-2xl font-black text-green-600">{{ features['core_wins']|int }}</span>
<span class="text-xs font-bold text-green-600/70">W</span>
</div>
<div class="flex items-baseline gap-2">
<span class="text-2xl font-black text-red-500">{{ features['core_losses']|int }}</span>
<span class="text-xs font-bold text-red-500/70">L</span>
</div>
</div>
<!-- Kills -->
<div class="flex flex-col justify-center p-4 bg-gray-50 dark:bg-slate-700/30 rounded-xl">
<span class="text-xs text-gray-400 font-bold uppercase mb-2">Total Kills</span>
<span class="text-3xl font-black text-gray-900 dark:text-white">{{ features['core_total_kills']|int }}</span>
<span class="text-xs text-gray-500 mt-1">{{ features['core_kpr'] }} per round</span>
</div>
<!-- Deaths -->
<div class="flex flex-col justify-center p-4 bg-gray-50 dark:bg-slate-700/30 rounded-xl">
<span class="text-xs text-gray-400 font-bold uppercase mb-2">Total Deaths</span>
<span class="text-3xl font-black text-gray-900 dark:text-white">{{ features['core_total_deaths']|int }}</span>
<span class="text-xs text-gray-500 mt-1">{{ features['core_dpr'] }} per round</span>
</div>
<!-- Assists -->
<div class="flex flex-col justify-center p-4 bg-gray-50 dark:bg-slate-700/30 rounded-xl">
<span class="text-xs text-gray-400 font-bold uppercase mb-2">Total Assists</span>
<span class="text-3xl font-black text-gray-900 dark:text-white">{{ features['core_total_assists']|int }}</span>
<span class="text-xs text-gray-500 mt-1">{{ features['core_avg_assists'] }} per match</span>
</div>
<!-- Highlights -->
<div class="flex flex-col justify-between p-4 bg-gray-50 dark:bg-slate-700/30 rounded-xl space-y-2">
<div class="flex justify-between items-center">
<span class="text-xs text-gray-400 font-bold uppercase">Aces</span>
<span class="font-black text-gray-900 dark:text-white">{{ features['tac_ace_count']|int }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-gray-400 font-bold uppercase">1v1 Wins</span>
<span class="font-black text-gray-900 dark:text-white">{{ features['tac_clutch_1v1_wins']|int }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-gray-400 font-bold uppercase">ELO Gain</span>
<span class="font-black text-yrtv-600">{{ features['core_total_elo_gained']|int }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 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>
<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>
</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>
<!-- 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> 能力八维图 (8 Capabilities)
</h3>
<div class="relative flex-1 min-h-[300px] flex items-center justify-center">
<canvas id="radarChart"></canvas>
</div>
</div>
</div>
<!-- 2.5 L3 Comprehensive Stats Panel -->
<div class="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> L3 全量特征分析 (L3 Comprehensive Analysis)
</h3>
<span class="px-2 py-1 bg-yrtv-100 text-yrtv-700 text-xs font-bold rounded">Powered by Data Mart</span>
</div>
{% macro detail_item(label, value, key, format_str='{:.2f}', sublabel=None, count_label=None) %}
{% set dist = distribution[key] if distribution else None %}
<div class="flex flex-col group relative h-full p-2 rounded hover:bg-gray-50 dark:hover:bg-slate-700/30 transition-colors">
<div class="flex justify-between items-center mb-1">
<span class="text-xs font-bold text-gray-400 uppercase tracking-wider truncate max-w-[150px]" title="{{ label }}">{{ label }}</span>
{% 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-50 text-yellow-700 border border-yellow-100
{% elif dist.rank <= 3 %}bg-gray-50 text-gray-600 border border-gray-100
{% else %}text-gray-300{% endif %}">
#{{ dist.rank }}
</span>
{% endif %}
</div>
<div class="flex justify-between items-end mb-1">
<div class="flex items-baseline gap-1">
<span class="text-lg font-black text-gray-900 dark:text-white font-mono">
{{ format_str.format(value if value is not none else 0) }}
</span>
{% if sublabel %}
<span class="text-[10px] text-gray-400">{{ sublabel }}</span>
{% endif %}
</div>
{% if count_label is not none %}
<div class="text-[10px] font-bold text-gray-400 font-mono mb-0.5">
{{ count_label }}
</div>
{% endif %}
</div>
<!-- Distribution Bar -->
{% if dist %}
<div class="w-full h-1 bg-gray-100 dark:bg-slate-700 rounded-full overflow-hidden relative mt-1">
{% set range = dist.max - dist.min %}
{% set raw_percent = ((dist.val - dist.min) / range * 100) if range > 0 else 100 %}
<!-- Clamp percent -->
{% if raw_percent < 0 %}{% set raw_percent = 0 %}{% endif %}
{% if raw_percent > 100 %}{% set raw_percent = 100 %}{% endif %}
{% set percent = (100 - raw_percent) if dist.inverted else raw_percent %}
<div class="absolute h-full bg-yrtv-400/60 rounded-full transition-all" style="width: {{ percent }}%"></div>
<!-- Avg Marker -->
{% set raw_avg = ((dist.avg - dist.min) / range * 100) if range > 0 else 50 %}
{% if raw_avg < 0 %}{% set raw_avg = 0 %}{% endif %}
{% if raw_avg > 100 %}{% set raw_avg = 100 %}{% endif %}
{% set avg_pct = (100 - raw_avg) if dist.inverted else raw_avg %}
<div class="absolute h-full w-0.5 bg-gray-400 dark:bg-slate-400 top-0" style="left: {{ avg_pct }}%"></div>
</div>
<!-- Min/Avg/Max Labels -->
<div class="flex justify-between text-[8px] text-gray-400 mt-0.5 font-mono leading-none">
<span>L:{{ format_str.format(dist.min) }}</span>
<span>Avg:{{ format_str.format(dist.avg) }}</span>
<span>H:{{ format_str.format(dist.max) }}</span>
</div>
{% endif %}
</div>
{% endmacro %}
<div class="space-y-10">
<!-- TIER 1: CORE -->
<div>
<h4 class="text-sm font-black text-gray-900 dark:text-white uppercase tracking-widest mb-4 border-b border-gray-100 dark:border-slate-700 pb-2 flex items-center gap-2">
<span class="text-yrtv-600">01</span> CORE (核心表现)
</h4>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
<!-- Sub-Panel A: Efficiency -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span></span> Efficiency & Impact (效率与影响力)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-y-4 gap-x-2">
{{ detail_item('Rating 2.0 (评分)', features['core_avg_rating2'], 'core_avg_rating2') }}
{{ detail_item('KD Ratio (KD比)', features['core_avg_kd'], 'core_avg_kd') }}
{{ detail_item('ADR (场均伤害)', features['core_avg_adr'], 'core_avg_adr', '{:.1f}') }}
{{ detail_item('KAST % (助杀存换)', features['core_avg_kast'], 'core_avg_kast', '{:.1%}') }}
{{ detail_item('RWS (致胜分)', features['core_avg_rws'], 'core_avg_rws') }}
{{ detail_item('MVP Rate (MVP率)', features['core_mvp_rate'], 'core_mvp_rate', '{:.1%}') }}
{{ detail_item('Avg MVPs (场均MVP)', features['core_avg_mvps'], 'core_avg_mvps') }}
</div>
</div>
<!-- Sub-Panel B: Combat Style -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>⚔️</span> Combat Style (战斗风格)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-y-4 gap-x-2">
{{ detail_item('HS Rate (爆头率)', features['core_hs_rate'], 'core_hs_rate', '{:.1%}') }}
{{ detail_item('Avg HS (场均爆头)', features['core_avg_hs_kills'], 'core_avg_hs_kills') }}
{{ detail_item('KPR (局均击杀)', features['core_kpr'], 'core_kpr') }}
{{ detail_item('DPR (局均死亡)', features['core_dpr'], 'core_dpr') }}
{{ detail_item('Survival (存活率)', features['core_survival_rate'], 'core_survival_rate', '{:.1%}') }}
{{ detail_item('Avg Ast (场均助攻)', features['core_avg_assists'], 'core_avg_assists') }}
{{ detail_item('Flash Ast (闪光助攻)', features['core_avg_flash_assists'], 'core_avg_flash_assists') }}
</div>
</div>
<!-- Sub-Panel C: Weapon Mastery -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600 xl:col-span-2">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>🔫</span> Weapon Mastery (武器专精)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-y-4 gap-x-2">
{{ detail_item('AWP Kills (场均狙杀)', features['core_avg_awp_kills'], 'core_avg_awp_kills') }}
{{ detail_item('AWP Usage (大狙率)', features['core_awp_usage_rate'], 'core_awp_usage_rate', '{:.1%}') }}
{{ detail_item('Top Weapon (最爱武器)', features['core_top_weapon'], 'core_top_weapon', '{}') }}
{{ detail_item('Top Kills (最爱击杀)', features['core_top_weapon_kills'], 'core_top_weapon_kills', '{:.0f}') }}
{{ detail_item('Top HS% (最爱爆头)', features['core_top_weapon_hs_rate'], 'core_top_weapon_hs_rate', '{:.1%}') }}
{{ detail_item('Diversity (武器池)', features['core_weapon_diversity'], 'core_weapon_diversity') }}
{{ detail_item('Rifle HS% (步枪爆头)', features['core_rifle_hs_rate'], 'core_rifle_hs_rate', '{:.1%}') }}
{{ detail_item('Pistol HS% (手枪爆头)', features['core_pistol_hs_rate'], 'core_pistol_hs_rate', '{:.1%}') }}
{{ detail_item('SMG Kills (冲锋枪)', features['core_smg_kills_total'], 'core_smg_kills_total', '{:.0f}') }}
{{ detail_item('Knife Kills (刀杀)', features['core_avg_knife_kills'], 'core_avg_knife_kills') }}
{{ detail_item('Zeus Rate (电击率)', features['core_zeus_buy_rate'], 'core_zeus_buy_rate', '{:.1%}') }}
</div>
</div>
<!-- Sub-Panel D: Objectives & Results -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600 xl:col-span-2">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>🚩</span> Objectives & Results (目标与胜负)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-y-4 gap-x-2">
{{ detail_item('Win Rate (胜率)', features['core_win_rate'], 'core_win_rate', '{:.1%}') }}
{{ detail_item('Avg ELO (场均分差)', features['core_avg_elo_change'], 'core_avg_elo_change', '{:+.1f}') }}
{{ detail_item('Avg Plants (场均下包)', features['core_avg_plants'], 'core_avg_plants') }}
{{ detail_item('Avg Defuses (场均拆包)', features['core_avg_defuses'], 'core_avg_defuses') }}
{{ detail_item('Plant Success (下包率)', features['core_plant_success_rate'], 'core_plant_success_rate', '{:.1%}') }}
{{ detail_item('Defuse Success (拆包率)', features['core_defuse_success_rate'], 'core_defuse_success_rate', '{:.1%}') }}
{{ detail_item('Obj Impact (目标影响)', features['core_objective_impact'], 'core_objective_impact') }}
{{ detail_item('Avg Time (场均时长)', features['core_avg_match_duration'], 'core_avg_match_duration', '{:.0f}s') }}
</div>
</div>
</div>
</div>
<!-- TIER 2: TACTICAL -->
<div>
<h4 class="text-sm font-black text-gray-900 dark:text-white uppercase tracking-widest mb-4 border-b border-gray-100 dark:border-slate-700 pb-2 flex items-center gap-2">
<span class="text-blue-600">02</span> TACTICAL (战术执行)
</h4>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
<!-- Sub-Panel A: Opening Duels -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>🚀</span> Opening Duels (首杀博弈)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-y-4 gap-x-2">
{{ detail_item('FK Rate (首杀率)', features['tac_fk_rate'], 'tac_fk_rate', '{:.1%}') }}
{{ detail_item('FD Rate (首死率)', features['tac_fd_rate'], 'tac_fd_rate', '{:.1%}') }}
{{ detail_item('Avg FK (场均首杀)', features['tac_avg_fk'], 'tac_avg_fk') }}
{{ detail_item('Avg FD (场均首死)', features['tac_avg_fd'], 'tac_avg_fd') }}
{{ detail_item('FK Success (成功率)', features['tac_fk_success_rate'], 'tac_fk_success_rate', '{:.1%}') }}
{{ detail_item('Entry Kill (突破击杀)', features['tac_entry_kill_rate'], 'tac_entry_kill_rate', '{:.2f}') }}
{{ detail_item('Entry Death (突破死亡)', features['tac_entry_death_rate'], 'tac_entry_death_rate', '{:.2f}') }}
{{ detail_item('Duel Win% (对枪胜率)', features['tac_opening_duel_winrate'], 'tac_opening_duel_winrate', '{:.1%}') }}
</div>
</div>
<!-- Sub-Panel B: Clutch Factor -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>🧠</span> Clutch Factor (残局能力)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-y-4 gap-x-2">
{{ detail_item('1v1 Win% (1v1胜率)', features['tac_clutch_1v1_rate'], 'tac_clutch_1v1_rate', '{:.1%}', features['tac_clutch_1v1_wins']|int ~ ' Wins') }}
{{ detail_item('1v2 Win% (1v2胜率)', features['tac_clutch_1v2_rate'], 'tac_clutch_1v2_rate', '{:.1%}', features['tac_clutch_1v2_wins']|int ~ ' Wins') }}
{{ detail_item('1v3+ Win% (1v3+胜率)', features['tac_clutch_1v3_plus_rate'], 'tac_clutch_1v3_plus_rate', '{:.1%}', features['tac_clutch_1v3_plus_wins']|int ~ ' Wins') }}
{{ detail_item('Clutch Impact (影响力)', features['tac_clutch_impact_score'], 'tac_clutch_impact_score') }}
</div>
</div>
<!-- Sub-Panel C: Multi-Kills -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>💥</span> Multi-Kills (多杀表现)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-y-4 gap-x-2">
{{ detail_item('Avg 2K (场均双杀)', features['tac_avg_2k'], 'tac_avg_2k') }}
{{ detail_item('Avg 3K (场均三杀)', features['tac_avg_3k'], 'tac_avg_3k') }}
{{ detail_item('Avg 4K (场均四杀)', features['tac_avg_4k'], 'tac_avg_4k') }}
{{ detail_item('Avg 5K (场均五杀)', features['tac_avg_5k'], 'tac_avg_5k') }}
{{ detail_item('MK Rate (多杀率)', features['tac_multikill_rate'], 'tac_multikill_rate', '{:.2f}') }}
</div>
</div>
<!-- Sub-Panel D: Utility Mastery -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600 xl:col-span-2">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>☁️</span> Utility Mastery (道具运用)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-y-4 gap-x-2">
{{ detail_item('Flash Eff. (闪光效率)', features['tac_util_flash_efficiency'], 'tac_util_flash_efficiency', '{:.1%}') }}
{{ detail_item('Blind (致盲数)', features['tac_util_flash_enemies_per_round'], 'tac_util_flash_enemies_per_round') }}
{{ detail_item('Util Dmg (道具伤害)', features['tac_util_nade_dmg_per_round'], 'tac_util_nade_dmg_per_round', '{:.1f}') }}
{{ detail_item('Util Usage (使用率)', features['tac_util_usage_rate'], 'tac_util_usage_rate', '{:.2f}') }}
{{ detail_item('Flash/Rnd (局均闪光)', features['tac_util_flash_per_round'], 'tac_util_flash_per_round') }}
{{ detail_item('Smoke/Rnd (局均烟雾)', features['tac_util_smoke_per_round'], 'tac_util_smoke_per_round') }}
{{ detail_item('Molotov/Rnd (局均燃烧)', features['tac_util_molotov_per_round'], 'tac_util_molotov_per_round') }}
{{ detail_item('HE/Rnd (局均手雷)', features['tac_util_he_per_round'], 'tac_util_he_per_round') }}
{{ detail_item('Flash Time (致盲时间)', features['tac_util_flash_time_per_round'], 'tac_util_flash_time_per_round', '{:.2f}s') }}
{{ detail_item('Util Impact (影响力)', features['tac_util_impact_score'], 'tac_util_impact_score') }}
</div>
</div>
<!-- Sub-Panel E: Economy -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600 xl:col-span-2">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>💰</span> Economy (经济管理)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-y-4 gap-x-2">
{{ detail_item('Eco KPR (经济局)', features['tac_eco_kpr_eco_rounds'], 'tac_eco_kpr_eco_rounds') }}
{{ detail_item('Eco KD (经济局KD)', features['tac_eco_kd_eco_rounds'], 'tac_eco_kd_eco_rounds') }}
{{ detail_item('Force KPR (强起局)', features['tac_eco_kpr_force_rounds'], 'tac_eco_kpr_force_rounds') }}
{{ detail_item('Full KPR (全甲局)', features['tac_eco_kpr_full_rounds'], 'tac_eco_kpr_full_rounds') }}
{{ detail_item('Eco Dmg/1k (伤金比)', features['tac_eco_dmg_per_1k'], 'tac_eco_dmg_per_1k') }}
{{ detail_item('Save Disc. (保枪)', features['tac_eco_save_discipline'], 'tac_eco_save_discipline') }}
{{ detail_item('Force Win% (翻盘率)', features['tac_eco_force_success_rate'], 'tac_eco_force_success_rate', '{:.1%}') }}
{{ detail_item('Eco Score (经济分)', features['tac_eco_efficiency_score'], 'tac_eco_efficiency_score') }}
</div>
</div>
</div>
</div>
<!-- TIER 3: INTELLIGENCE -->
<div>
<h4 class="text-sm font-black text-gray-900 dark:text-white uppercase tracking-widest mb-4 border-b border-gray-100 dark:border-slate-700 pb-2 flex items-center gap-2">
<span class="text-purple-600">03</span> INTELLIGENCE (意识决策)
</h4>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
<!-- Sub-Panel A: Smart Kills -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600 xl:col-span-2">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>👁️</span> Smart Kills (特殊击杀)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5 gap-y-4 gap-x-2">
{{ detail_item('Wallbang (穿墙)', features['int_wallbang_kills'], 'int_wallbang_kills', '{:.0f}') }}
{{ detail_item('Wallbang% (穿墙率)', features['int_wallbang_rate'], 'int_wallbang_rate', '{:.1%}') }}
{{ detail_item('Smoke Kill (混烟)', features['int_smoke_kills'], 'int_smoke_kills', '{:.0f}') }}
{{ detail_item('Smoke% (混烟率)', features['int_smoke_kill_rate'], 'int_smoke_kill_rate', '{:.1%}') }}
{{ detail_item('Blind Kill (白屏)', features['int_blind_kills'], 'int_blind_kills', '{:.0f}') }}
{{ detail_item('Blind% (白屏率)', features['int_blind_kill_rate'], 'int_blind_kill_rate', '{:.1%}') }}
{{ detail_item('NoScope (盲狙)', features['int_noscope_kills'], 'int_noscope_kills', '{:.0f}') }}
{{ detail_item('NoScope% (盲狙率)', features['int_noscope_rate'], 'int_noscope_rate', '{:.1%}') }}
{{ detail_item('High IQ (高智商分)', features['int_high_iq_score'], 'int_high_iq_score') }}
</div>
</div>
<!-- Sub-Panel B: Timing & Aggression -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>⏱️</span> Timing & Aggression (时机与侵略性)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-y-4 gap-x-2">
{{ detail_item('Early Kill% (早期)', features['int_timing_early_kill_share'], 'int_timing_early_kill_share', '{:.1%}') }}
{{ detail_item('Mid Kill% (中期)', features['int_timing_mid_kill_share'], 'int_timing_mid_kill_share', '{:.1%}') }}
{{ detail_item('Late Kill% (晚期)', features['int_timing_late_kill_share'], 'int_timing_late_kill_share', '{:.1%}') }}
{{ detail_item('Aggression (侵略性)', features['int_timing_aggression_index'], 'int_timing_aggression_index') }}
{{ detail_item('Avg Kill Time (耗时)', features['int_timing_avg_kill_time'], 'int_timing_avg_kill_time', '{:.1f}s') }}
{{ detail_item('1st Contact (首交火)', features['int_timing_first_contact_time'], 'int_timing_first_contact_time', '{:.1f}s') }}
{{ detail_item('Patience (耐心分)', features['int_timing_patience_score'], 'int_timing_patience_score') }}
</div>
</div>
<!-- Sub-Panel C: Pressure Performance -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>🔥</span> Pressure (抗压表现)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-y-4 gap-x-2">
{{ detail_item('Comeback KD (翻盘)', features['int_pressure_comeback_kd'], 'int_pressure_comeback_kd') }}
{{ detail_item('Matchpoint (赛点)', features['int_pressure_matchpoint_kpr'], 'int_pressure_matchpoint_kpr') }}
{{ detail_item('Composure (定力)', features['int_pressure_clutch_composure'], 'int_pressure_clutch_composure') }}
{{ detail_item('Tilt Resist (韧性)', features['int_pressure_tilt_resistance'], 'int_pressure_tilt_resistance') }}
{{ detail_item('Big Moment (大场面)', features['int_pressure_big_moment_score'], 'int_pressure_big_moment_score') }}
{{ detail_item('Entry Loss (劣势破)', features['int_pressure_entry_in_loss'], 'int_pressure_entry_in_loss') }}
{{ detail_item('Pressure (抗压分)', features['int_pressure_performance_index'], 'int_pressure_performance_index') }}
{{ detail_item('Lose Strk KD (连败)', features['int_pressure_losing_streak_kd'], 'int_pressure_losing_streak_kd') }}
</div>
</div>
<!-- Sub-Panel D: Trade Network -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600 xl:col-span-2">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>🤝</span> Trade Network (补枪协同)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5 gap-y-4 gap-x-2">
{{ detail_item('Trade Kill (补枪)', features['int_trade_kill_count'], 'int_trade_kill_count', '{:.0f}') }}
{{ detail_item('Trade% (补枪率)', features['int_trade_kill_rate'], 'int_trade_kill_rate', '{:.1%}') }}
{{ detail_item('Traded (被补枪)', features['int_trade_given_count'], 'int_trade_given_count', '{:.0f}') }}
{{ detail_item('Traded% (被补率)', features['int_trade_given_rate'], 'int_trade_given_rate', '{:.1%}') }}
{{ detail_item('Trade Eff. (效率)', features['int_trade_efficiency'], 'int_trade_efficiency', '{:.1%}') }}
{{ detail_item('Response (响应)', features['int_trade_response_time'], 'int_trade_response_time', '{:.2f}s') }}
{{ detail_item('Balance (平衡)', features['int_trade_balance'], 'int_trade_balance') }}
{{ detail_item('Teamwork (配合)', features['int_teamwork_score'], 'int_teamwork_score') }}
</div>
</div>
</div>
</div>
<!-- TIER 4: META -->
<div>
<h4 class="text-sm font-black text-gray-900 dark:text-white uppercase tracking-widest mb-4 border-b border-gray-100 dark:border-slate-700 pb-2 flex items-center gap-2">
<span class="text-amber-600">04</span> META (环境适应)
</h4>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
<!-- Sub-Panel A: Stability -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>⚖️</span> Stability (稳定性)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-y-4 gap-x-2">
{{ detail_item('Volatility (波动)', features['meta_rating_volatility'], 'meta_rating_volatility', '{:.3f}') }}
{{ detail_item('Recent Form (近况)', features['meta_recent_form_rating'], 'meta_recent_form_rating') }}
{{ detail_item('Consistency (稳定)', features['meta_rating_consistency'], 'meta_rating_consistency') }}
{{ detail_item('Win Rtg (胜局分)', features['meta_win_rating'], 'meta_win_rating') }}
{{ detail_item('Loss Rtg (败局分)', features['meta_loss_rating'], 'meta_loss_rating') }}
{{ detail_item('Map Stable (地图稳)', features['meta_map_stability'], 'meta_map_stability') }}
{{ detail_item('ELO Stable (分段稳)', features['meta_elo_tier_stability'], 'meta_elo_tier_stability') }}
</div>
</div>
<!-- Sub-Panel B: Side Proficiency -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600 xl:col-span-2">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>🛡️</span> Side Proficiency (阵营偏好)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5 gap-y-4 gap-x-2">
{{ detail_item('CT Rating', features['meta_side_ct_rating'], 'meta_side_ct_rating') }}
{{ detail_item('T Rating', features['meta_side_t_rating'], 'meta_side_t_rating') }}
{{ detail_item('CT Win%', features['meta_side_ct_win_rate'], 'meta_side_ct_win_rate', '{:.1%}') }}
{{ detail_item('T Win%', features['meta_side_t_win_rate'], 'meta_side_t_win_rate', '{:.1%}') }}
{{ detail_item('CT KD', features['meta_side_ct_kd'], 'meta_side_ct_kd') }}
{{ detail_item('T KD', features['meta_side_t_kd'], 'meta_side_t_kd') }}
{{ detail_item('CT FK%', features['meta_side_ct_fk_rate'], 'meta_side_ct_fk_rate', '{:.1%}') }}
{{ detail_item('T FK%', features['meta_side_t_fk_rate'], 'meta_side_t_fk_rate', '{:.1%}') }}
{{ detail_item('CT KAST', features['meta_side_ct_kast'], 'meta_side_ct_kast', '{:.1%}') }}
{{ detail_item('T KAST', features['meta_side_t_kast'], 'meta_side_t_kast', '{:.1%}') }}
{{ detail_item('Side Pref (偏好)', features['meta_side_preference'], 'meta_side_preference', '{}') }}
{{ detail_item('Balance (平衡)', features['meta_side_balance_score'], 'meta_side_balance_score') }}
</div>
</div>
<!-- Sub-Panel C: Opponent Adaptation -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600 xl:col-span-2">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>🥊</span> Opponent Adaptation (对手适应)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5 gap-y-4 gap-x-2">
{{ detail_item('vs Low ELO', features['meta_opp_vs_lower_elo_rating'], 'meta_opp_vs_lower_elo_rating') }}
{{ detail_item('vs Sim ELO', features['meta_opp_vs_similar_elo_rating'], 'meta_opp_vs_similar_elo_rating') }}
{{ detail_item('vs High ELO', features['meta_opp_vs_higher_elo_rating'], 'meta_opp_vs_higher_elo_rating') }}
{{ detail_item('Low KD', features['meta_opp_vs_lower_elo_kd'], 'meta_opp_vs_lower_elo_kd') }}
{{ detail_item('Sim KD', features['meta_opp_vs_similar_elo_kd'], 'meta_opp_vs_similar_elo_kd') }}
{{ detail_item('High KD', features['meta_opp_vs_higher_elo_kd'], 'meta_opp_vs_higher_elo_kd') }}
{{ detail_item('Stomping (虐菜)', features['meta_opp_stomping_score'], 'meta_opp_stomping_score') }}
{{ detail_item('Upset (爆冷)', features['meta_opp_upset_score'], 'meta_opp_upset_score') }}
{{ detail_item('Rank Resist (抗性)', features['meta_opp_rank_resistance'], 'meta_opp_rank_resistance') }}
</div>
</div>
<!-- Sub-Panel D: Map & Session -->
<div class="bg-gray-50 dark:bg-slate-700/30 rounded-xl p-4 border border-gray-100 dark:border-slate-600 xl:col-span-2">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-2">
<span>🗺️</span> Map & Session (地图与时段)
</h5>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5 gap-y-4 gap-x-2">
{{ detail_item('Map Pool (图池)', features['meta_map_pool_size'], 'meta_map_pool_size', '{:.0f}') }}
{{ detail_item('Specialist (专精)', features['meta_map_specialist_score'], 'meta_map_specialist_score') }}
{{ detail_item('Diversity (多样)', features['meta_map_diversity'], 'meta_map_diversity') }}
{{ detail_item('Versatile (全能)', features['meta_map_versatility'], 'meta_map_versatility') }}
{{ detail_item('Comfort (舒适)', features['meta_map_comfort_zone_rate'], 'meta_map_comfort_zone_rate', '{:.1%}') }}
{{ detail_item('Best Map', features['meta_map_best_map'], 'meta_map_best_map', '{}') }}
{{ detail_item('Worst Map', features['meta_map_worst_map'], 'meta_map_worst_map', '{}') }}
{{ detail_item('Matches/Day', features['meta_session_avg_matches_per_day'], 'meta_session_avg_matches_per_day', '{:.1f}') }}
{{ detail_item('Morning Rtg', features['meta_session_morning_rating'], 'meta_session_morning_rating') }}
{{ detail_item('Afternoon Rtg', features['meta_session_afternoon_rating'], 'meta_session_afternoon_rating') }}
{{ detail_item('Evening Rtg', features['meta_session_evening_rating'], 'meta_session_evening_rating') }}
{{ detail_item('Night Rtg', features['meta_session_night_rating'], 'meta_session_night_rating') }}
</div>
</div>
</div>
</div>
</div>
</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>
<!-- Right Column: Map Stats & Comments -->
<div class="space-y-8">
<!-- Map Stats -->
<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-4">地图数据 (Map Stats)</h3>
<div class="space-y-3 max-h-[400px] overflow-y-auto custom-scroll pr-1">
{% for m in map_stats %}
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-slate-700/30 rounded-xl hover:bg-gray-100 transition-colors">
<div class="flex items-center gap-3">
<!-- Map Icon/Name -->
<div class="w-10 h-10 rounded-lg bg-gray-200 dark:bg-slate-600 flex items-center justify-center text-xs font-black text-gray-500 uppercase">
{{ m.map_name[:3] }}
</div>
<div>
<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">{{ m.matches }} matches</div>
</div>
</div>
<div class="text-right">
<div class="text-sm font-black font-mono {% if m.rating >= 1.1 %}text-green-600{% elif m.rating < 0.9 %}text-red-500{% else %}text-gray-700 dark:text-gray-300{% endif %}">
{{ "%.2f"|format(m.rating) }}
</div>
<div class="flex items-center justify-end gap-2 text-[10px] text-gray-400 font-mono">
<span class="{% if m.win_rate >= 0.5 %}text-green-600{% else %}text-red-500{% endif %}">{{ "%.0f"|format(m.win_rate * 100) }}% Win</span>
<span>{{ "%.1f"|format(m.adr) }} ADR</span>
</div>
</div>
</div>
{% else %}
<div class="text-center py-4 text-gray-400 text-sm">No map data available.</div>
{% endfor %}
</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>
<!-- 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="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>
</form>
</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())
.then(data => {
if (data.success) {
const countSpan = btn.querySelector('.like-count');
countSpan.innerText = parseInt(countSpan.innerText) + 1;
btn.classList.add('text-red-500');
}
});
}
document.addEventListener('DOMContentLoaded', function() {
const steamId = "{{ player.steam_id_64 }}";
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');
// Prepare Distribution Data
const dist = data.radar_dist || {};
const getDist = (key) => dist[key] || { rank: '?', avg: 0 };
// Map friendly names to keys
const keys = ['score_aim', 'score_defense', 'score_utility', 'score_clutch', 'score_economy', 'score_pace', 'score_pistol', 'score_stability'];
// Corresponding Labels (Chinese)
const rawLabels = ['枪法 (Aim)', '生存 (Defense)', '道具 (Utility)', '残局 (Clutch)', '经济 (Economy)', '节奏 (Pace)', '手枪 (Pistol)', '稳定 (Stability)'];
const labels = rawLabels.map((l, i) => {
const k = keys[i];
const d = getDist(k);
return `${l} #${d.rank}`;
});
const teamAvgs = keys.map(k => getDist(k).avg);
new Chart(ctxRadar, {
type: 'radar',
data: {
labels: labels,
datasets: [{
label: 'Player',
data: [
data.radar.AIM, data.radar.DEFENSE, data.radar.UTILITY,
data.radar.CLUTCH, data.radar.ECONOMY, data.radar.PACE,
data.radar.PISTOL, data.radar.STABILITY
],
backgroundColor: 'rgba(124, 58, 237, 0.2)',
borderColor: '#7c3aed',
borderWidth: 2,
pointBackgroundColor: '#7c3aed',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: '#7c3aed'
},
{
label: 'Team Avg',
data: teamAvgs,
backgroundColor: 'rgba(148, 163, 184, 0.2)', // Slate-400
borderColor: '#94a3b8',
borderWidth: 2,
pointRadius: 0,
borderDash: [5, 5]
}]
},
options: {
plugins: {
legend: { display: true, position: 'bottom' }
},
scales: {
r: {
beginAtZero: true,
suggestedMax: 100,
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
}
}
}
}
});
// Trend Chart
const ctxTrend = document.getElementById('trendChart').getContext('2d');
// 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: '#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: 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 }
}
}
}
}
});
});
});
</script>
{% endblock %}