MineSeeker/templates/Security/profile.html.twig

{% extends 'Game/index.html.twig' %}

{% 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>
        <span class="profile-stat__value">{{ stats.total }}</span>
        <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>
        <span class="profile-stat__value">{{ stats.wins }}</span>
        <span class="profile-stat__label">Victories</span>
      </div>
      <div class="profile-stat profile-stat--loss">
        <i class="fas fa-flag profile-stat__icon"></i>
        <span class="profile-stat__value">{{ stats.losses }}</span>
        <span class="profile-stat__label">Defeats</span>
      </div>
      <div class="profile-stat profile-stat--draw">
        <i class="fas fa-minus profile-stat__icon"></i>
        <span class="profile-stat__value">{{ stats.draws }}</span>
        <span class="profile-stat__label">Draws</span>
      </div>
      <div class="profile-stat profile-stat--rate">
        <i class="fas fa-percent profile-stat__icon"></i>
        <span class="profile-stat__value">{{ stats.winRate }}<small>%</small></span>
        <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>
        <span class="profile-stat__value">{{ stats.avgScore }}</span>
        <span class="profile-stat__label">Avg score</span>
      </div>
      <div class="profile-stat profile-stat--best">
        <i class="fas fa-star profile-stat__icon"></i>
        <span class="profile-stat__value">{{ stats.bestScore }}</span>
        <span class="profile-stat__label">Best score</span>
      </div>
      <div class="profile-stat profile-stat--bomb">
        <i class="fas fa-bomb profile-stat__icon"></i>
        <span class="profile-stat__value">{{ stats.bombs }}</span>
        <span class="profile-stat__label">Mines hit</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">
          {% for game in recent %}
            {% set is_red = game.red and game.red.id == app.user.id %}
            {% set my_points  = is_red ? game.redPoints  : game.bluePoints %}
            {% set opp_points = is_red ? game.bluePoints : game.redPoints %}
            {% set opp      = is_red ? game.blue    : game.red %}
            {% set opp_anon = is_red ? game.blueAnon : game.redAnon %}

            {% set result = 'draw' %}
            {% if game.resign == (is_red ? 'red' : 'blue') %}
              {% set result = 'loss' %}
            {% elseif game.resign == (is_red ? 'blue' : 'red') %}
              {% set result = 'win' %}
            {% elseif my_points is not null and opp_points is not null %}
              {% if my_points > opp_points %}
                {% set result = 'win' %}
              {% elseif my_points < opp_points %}
                {% set result = 'loss' %}
              {% endif %}
            {% endif %}

            <div class="profile-game profile-game--{{ result }}" data-game-index="{{ loop.index0 }}">
              <span class="profile-game__badge">
                  {{ result == 'win' ? 'W' : (result == 'loss' ? 'L' : 'D') }}
              </span>
              <span class="profile-game__score">
                  {{ my_points ?? '—' }} : {{ opp_points ?? '—' }}
              </span>
              <span class="profile-game__vs">vs</span>
              <span class="profile-game__opponent">
                  {% if opp %}
                    {{ opp.username }}
                  {% elseif opp_anon %}
                    {{ opp_anon.userName }}
                  {% else %}
                    Guest
                  {% endif %}
              </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>
      </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 %}