89 lines
5.2 KiB
HTML
89 lines
5.2 KiB
HTML
<div class="grid grid-cols-1 gap-8 xl:grid-cols-2">
|
|
<section class="rounded-2xl border border-gray-100 bg-white p-6 shadow-lg dark:border-slate-700 dark:bg-slate-800"
|
|
x-data="{ selected: 'last_20', periods: {{ period_stats|tojson }} }">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h3 class="text-lg font-bold text-gray-900 dark:text-white">阶段表现</h3>
|
|
<p class="text-xs text-gray-500">窗口按该玩家最新一场比赛向前计算</p>
|
|
</div>
|
|
<select x-model="selected"
|
|
class="rounded-lg border-gray-200 bg-gray-50 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-white">
|
|
{% for period in period_stats %}
|
|
<option value="{{ period.period_key }}">{{ period.period_label }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
{% for period in period_stats %}
|
|
<div x-show="selected === '{{ period.period_key }}'"
|
|
{% if period.period_key != 'last_20' %}style="display:none"{% endif %}
|
|
class="mt-6">
|
|
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
|
<div class="rounded-xl bg-gray-50 p-3 dark:bg-slate-700/40">
|
|
<div class="text-xs font-bold uppercase text-gray-400">Matches</div>
|
|
<div class="mt-1 text-2xl font-black text-gray-900 dark:text-white">{{ period.matches }}</div>
|
|
</div>
|
|
<div class="rounded-xl bg-gray-50 p-3 dark:bg-slate-700/40">
|
|
<div class="text-xs font-bold uppercase text-gray-400">Rating</div>
|
|
<div class="mt-1 text-2xl font-black text-yrtv-600">{{ '%.2f'|format(period.avg_rating or 0) }}</div>
|
|
</div>
|
|
<div class="rounded-xl bg-gray-50 p-3 dark:bg-slate-700/40">
|
|
<div class="text-xs font-bold uppercase text-gray-400">K/D</div>
|
|
<div class="mt-1 text-2xl font-black text-gray-900 dark:text-white">{{ '%.2f'|format(period.avg_kd or 0) }}</div>
|
|
</div>
|
|
<div class="rounded-xl bg-gray-50 p-3 dark:bg-slate-700/40">
|
|
<div class="text-xs font-bold uppercase text-gray-400">ADR</div>
|
|
<div class="mt-1 text-2xl font-black text-gray-900 dark:text-white">{{ '%.1f'|format(period.avg_adr or 0) }}</div>
|
|
</div>
|
|
<div class="rounded-xl bg-gray-50 p-3 dark:bg-slate-700/40">
|
|
<div class="text-xs font-bold uppercase text-gray-400">KAST</div>
|
|
<div class="mt-1 text-2xl font-black text-gray-900 dark:text-white">{{ '%.1f%%'|format((period.avg_kast or 0) * 100) }}</div>
|
|
</div>
|
|
<div class="rounded-xl bg-gray-50 p-3 dark:bg-slate-700/40">
|
|
<div class="text-xs font-bold uppercase text-gray-400">Win Rate</div>
|
|
<div class="mt-1 text-2xl font-black {% if period.win_rate >= 0.5 %}text-green-600{% else %}text-red-500{% endif %}">
|
|
{{ '%.0f%%'|format((period.win_rate or 0) * 100) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 text-xs text-gray-400">
|
|
{% if period.sample_reliable %}
|
|
样本充足
|
|
{% else %}
|
|
样本不足，仅供参考
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="mt-8 text-center text-sm text-gray-400">暂无阶段统计</div>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<section class="rounded-2xl border border-gray-100 bg-white p-6 shadow-lg dark:border-slate-700 dark:bg-slate-800">
|
|
<div>
|
|
<h3 class="text-lg font-bold text-gray-900 dark:text-white">职业纪录</h3>
|
|
<p class="text-xs text-gray-500">每项纪录都可追溯到具体比赛</p>
|
|
</div>
|
|
<div class="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-3">
|
|
{% for record in records %}
|
|
<a href="{{ url_for('matches.detail', match_id=record.match_id) }}"
|
|
class="rounded-xl border border-gray-100 bg-gray-50 p-3 transition hover:border-yrtv-300 hover:bg-yrtv-50 dark:border-slate-600 dark:bg-slate-700/40 dark:hover:bg-slate-700">
|
|
<div class="truncate text-xs font-bold uppercase text-gray-400">{{ record.record_label }}</div>
|
|
<div class="mt-1 text-2xl font-black text-gray-900 dark:text-white">
|
|
{% if record.record_key in ['most_kills', 'most_headshots', 'longest_win_streak'] %}
|
|
{{ record.record_value|int }}
|
|
{% elif record.record_key == 'highest_adr' %}
|
|
{{ '%.1f'|format(record.record_value) }}
|
|
{% else %}
|
|
{{ '%.2f'|format(record.record_value) }}
|
|
{% endif %}
|
|
</div>
|
|
<div class="mt-2 truncate text-[10px] font-mono text-gray-400">{{ record.map_name }}</div>
|
|
</a>
|
|
{% else %}
|
|
<div class="col-span-full py-8 text-center text-sm text-gray-400">暂无职业纪录</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
</div>
|