184 lines
8.1 KiB
Twig
184 lines
8.1 KiB
Twig
{% extends 'Game/index.html.twig' %}
|
|
|
|
{% macro stat_val(value, suffix) %}
|
|
{%- set abbr = value >= 1000 -%}
|
|
<span class="profile-stat__value"{% if abbr %} title="{{ value }}"{% endif %}>{% if abbr %}{{ (value / 1000)|round(1, 'floor') }}k{% else %}{{ value }}{% endif %}{% if suffix %}<small>{{ suffix }}</small>{% endif %}</span>
|
|
{% endmacro %}
|
|
|
|
{% block title %} - Profile{% endblock %}
|
|
|
|
{% block metas %}
|
|
{%- set _ogImage = 'https://' ~ app.request.host ~ asset('/images/mine-1600x627.png') -%}
|
|
<meta name="robots" content="noindex,nofollow"/>
|
|
<meta property="og:url" content="{{ url('MineSeekerBundle_profile') | replace({'http://': 'https://'}) }}"/>
|
|
<meta property="og:type" content="profile"/>
|
|
<meta property="og:site_name" content="MineSeeker"/>
|
|
<meta property="og:title" content="{{ app.user.username }} · MineSeeker"/>
|
|
<meta property="og:description"
|
|
content="View {{ app.user.username }}'s battle stats, win rate and recent games on MineSeeker."/>
|
|
<meta property="og:image" content="{{ _ogImage }}"/>
|
|
<meta property="og:image:width" content="1600"/>
|
|
<meta property="og:image:height" content="627"/>
|
|
<meta name="twitter:card" content="summary_large_image"/>
|
|
<meta name="twitter:title" content="{{ app.user.username }} · MineSeeker"/>
|
|
<meta name="twitter:description"
|
|
content="View {{ app.user.username }}'s battle stats, win rate and recent games on MineSeeker."/>
|
|
<meta name="twitter:image" content="{{ _ogImage }}"/>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="profile-page">
|
|
<div class="profile-header">
|
|
<div id="profile-avatar-root"
|
|
data-upload-url="{{ path('MineSeekerBundle_profile_avatar') }}"
|
|
data-thumb-url="{{ app.user.avatarPath ? app.user.avatarPath|imagine_filter('avatar_thumb') : '' }}"
|
|
data-initials="{{ app.user.username|slice(0, 2)|upper }}">
|
|
</div>
|
|
<div class="profile-info">
|
|
<h1 class="profile-name">{{ app.user.username }}</h1>
|
|
{% if app.user.email %}
|
|
<p class="profile-email">
|
|
<i class="fas fa-envelope"></i>
|
|
{{ app.user.email }}
|
|
</p>
|
|
{% endif %}
|
|
<p class="profile-role">
|
|
<i class="fas fa-shield"></i> Registered commander
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="profile-stats">
|
|
<div class="profile-stat">
|
|
<i class="fas fa-gamepad profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.total) }}
|
|
<span class="profile-stat__label">Games played</span>
|
|
</div>
|
|
<div class="profile-stat profile-stat--win">
|
|
<i class="fas fa-trophy profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.wins) }}
|
|
<span class="profile-stat__label">Victories</span>
|
|
</div>
|
|
<div class="profile-stat profile-stat--loss">
|
|
<i class="fas fa-flag profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.losses) }}
|
|
<span class="profile-stat__label">Defeats</span>
|
|
</div>
|
|
<div class="profile-stat profile-stat--draw">
|
|
<i class="fas fa-minus profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.draws) }}
|
|
<span class="profile-stat__label">Draws</span>
|
|
</div>
|
|
<div class="profile-stat profile-stat--rate">
|
|
<i class="fas fa-percent profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.winRate, '%') }}
|
|
<span class="profile-stat__label">Win rate</span>
|
|
</div>
|
|
<div class="profile-stat profile-stat--avg">
|
|
<i class="fas fa-chart-line profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.avgScore) }}
|
|
<span class="profile-stat__label">Avg score</span>
|
|
</div>
|
|
<div class="profile-stat profile-stat--bomb">
|
|
<i class="fas fa-bomb profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.minesHit) }}
|
|
<span class="profile-stat__label">Mines hit</span>
|
|
</div>
|
|
<div class="profile-stat profile-stat--bonus">
|
|
<i class="fas fa-star profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.bonusPoints) }}
|
|
<span class="profile-stat__label">Bonus points</span>
|
|
</div>
|
|
<div class="profile-stat profile-stat--avg-bonus">
|
|
<i class="fas fa-chart-simple profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.avgBonus) }}
|
|
<span class="profile-stat__label">Avg bonus</span>
|
|
</div>
|
|
<div class="profile-stat profile-stat--chain">
|
|
<i class="fas fa-link profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.bestChain) }}
|
|
<span class="profile-stat__label">Best chain</span>
|
|
</div>
|
|
<div class="profile-stat profile-stat--blind">
|
|
<i class="fas fa-bullseye profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.blindHits) }}
|
|
<span class="profile-stat__label">Blind hits</span>
|
|
</div>
|
|
<div class="profile-stat profile-stat--edge">
|
|
<i class="fas fa-border-style profile-stat__icon"></i>
|
|
{{ _self.stat_val(stats.edgeMines) }}
|
|
<span class="profile-stat__label">Edge mines</span>
|
|
</div>
|
|
</div>
|
|
|
|
{% if stats.total > 0 %}
|
|
<div id="profile-charts-root" data-chart-data="{{ chartData|json_encode|e('html') }}"></div>
|
|
{% endif %}
|
|
|
|
<div id="profile-battle-root" data-games="{{ gamesData|json_encode|e('html') }}"></div>
|
|
{% if recent|length > 0 %}
|
|
<div class="profile-section">
|
|
<h2 class="profile-section__title">
|
|
<i class="fas fa-clock-rotate-left"></i> Recent battles
|
|
</h2>
|
|
<div class="profile-games__filter-wrap">
|
|
<i class="fas fa-search profile-games__filter-icon"></i>
|
|
<input type="text" class="profile-games__filter" data-filter
|
|
placeholder="Filter by opponent…" autocomplete="off">
|
|
</div>
|
|
<div class="profile-games" data-batch-size="5">
|
|
{% for game in recent %}
|
|
{% set is_red = game.isRed %}
|
|
{% set my_points = is_red ? game.redPoints : game.bluePoints %}
|
|
{% set opp_points = is_red ? game.bluePoints : game.redPoints %}
|
|
{% set opp_name = is_red ? game.blueName : game.redName %}
|
|
{% set result = game.result %}
|
|
|
|
{% set is_finished = game.resign is not null
|
|
or (my_points is not null and opp_points is not null
|
|
and (my_points > 25 or opp_points > 25)) %}
|
|
{% set is_anonymous = game.oppIsGuest %}
|
|
|
|
<div class="profile-game profile-game--{{ result }}{% if not is_finished and not is_anonymous %} profile-game--ongoing{% elseif is_anonymous %} profile-game--abandoned{% endif %}{% if loop.index0 >= 5 %} profile-game--hidden{% endif %}" data-game-index="{{ loop.index0 }}">
|
|
<span class="profile-game__badge">
|
|
{% if is_finished %}
|
|
{{ result == 'win' ? 'Win' : (result == 'loss' ? 'Loss' : 'Draw') }}
|
|
{% elseif is_anonymous %}
|
|
Abandoned
|
|
{% else %}
|
|
Ongoing
|
|
{% endif %}
|
|
</span>
|
|
<span class="profile-game__score">
|
|
{{ my_points ?? '—' }} : {{ opp_points ?? '—' }}
|
|
</span>
|
|
<span class="profile-game__vs">vs</span>
|
|
<span class="profile-game__opponent">{{ opp_name }}</span>
|
|
<span class="profile-game__color">
|
|
<i class="fas fa-circle" style="color: {{ is_red ? '#c0392b' : '#2980b9' }}"></i>
|
|
</span>
|
|
<span class="profile-game__date">
|
|
{{ game.updated ? game.updated|date('Y-m-d') : '' }}
|
|
</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% if recent|length > 5 %}
|
|
<button type="button" class="profile-games__load-more" data-load-more>
|
|
<i class="fas fa-chevron-down"></i> Load more
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<div class="profile-empty">
|
|
<i class="fas fa-inbox"></i>
|
|
<p>No games recorded yet. <a href="{{ path('MineSeekerBundle_gamePlay') }}">Start playing!</a></p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{{ parent() }}
|
|
{{ vite_entry_script_tags('profile', { dependency: 'react' }) }}
|
|
{% endblock %}
|