MineSeeker/templates/Security/profile.html.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 ? path('liip_imagine_filter', {path: app.user.avatarPath, 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 %}