new: usr: add more stats and a dialog for the recent battle that can be shareable #4

templates/Game/battle_share.html.twig

@@ -0,0 +1,128 @@
+{% extends 'Game/index.html.twig' %}
+
+{% block title %} - Battle Report{% endblock %}
+
+{% block metas %}
+  {% set shareUrl = url('MineSeekerBundle_battle_share', { id: game.id }) %}
+  <meta property="og:url"         content="{{ shareUrl }}"/>
+  <meta property="og:type"        content="website"/>
+  <meta property="og:title"       content="{{ ogTitle }}"/>
+  <meta property="og:description" content="{{ ogDesc }}"/>
+  <meta property="og:image"       content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('images/mine-1600x627.png') }}"/>
+  <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="{{ ogTitle }}"/>
+  <meta name="twitter:description" content="{{ ogDesc }}"/>
+  <meta name="twitter:image"       content="{{ app.request.getSchemeAndHttpHost() }}{{ asset('images/mine-1600x627.png') }}"/>
+{% endblock %}
+
+{% block body %}
+  <div class="bshare-page">
+
+    <div class="bshare-card">
+
+      <div class="bshare-card__eyebrow">
+        <i class="fa fa-crosshairs"></i> Battle Report
+      </div>
+
+      {# VS Header #}
+      <div class="bshare-vs">
+
+        <div class="bshare-player bshare-player--red">
+          <div class="bshare-avatar bshare-avatar--red">
+            {{ redName|slice(0,2)|upper }}
+          </div>
+          <span class="bshare-player__name">{{ redName }}</span>
+          <span class="bshare-player__side">Red</span>
+        </div>
+
+        <div class="bshare-vs__center">
+          {% if redPts is not null and bluePts is not null %}
+            <div class="bshare-score">
+              <span class="bshare-score__red">{{ redPts }}</span>
+              <span class="bshare-score__sep">:</span>
+              <span class="bshare-score__blue">{{ bluePts }}</span>
+            </div>
+          {% else %}
+            <div class="bshare-score bshare-score--na">— : —</div>
+          {% endif %}
+          <div class="bshare-vs__label">VS</div>
+
+          {# Result badge #}
+          {% if resign == 'red' %}
+            <div class="bshare-badge bshare-badge--blue">
+              <i class="fa fa-trophy"></i> Blue wins
+            </div>
+          {% elseif resign == 'blue' %}
+            <div class="bshare-badge bshare-badge--red">
+              <i class="fa fa-trophy"></i> Red wins
+            </div>
+          {% elseif redPts is not null and bluePts is not null %}
+            {% if redPts > bluePts %}
+              <div class="bshare-badge bshare-badge--red">
+                <i class="fa fa-trophy"></i> Red wins
+              </div>
+            {% elseif bluePts > redPts %}
+              <div class="bshare-badge bshare-badge--blue">
+                <i class="fa fa-trophy"></i> Blue wins
+              </div>
+            {% else %}
+              <div class="bshare-badge bshare-badge--draw">
+                <i class="fa fa-minus"></i> Draw
+              </div>
+            {% endif %}
+          {% endif %}
+        </div>
+
+        <div class="bshare-player bshare-player--blue">
+          <div class="bshare-avatar bshare-avatar--blue">
+            {{ blueName|slice(0,2)|upper }}
+          </div>
+          <span class="bshare-player__name">{{ blueName }}</span>
+          <span class="bshare-player__side">Blue</span>
+        </div>
+
+      </div>
+
+      {# Details #}
+      <div class="bshare-details">
+        {% if resign %}
+          <div class="bshare-detail">
+            <i class="fa fa-flag"></i>
+            <span>{{ resign|capitalize }} resigned</span>
+          </div>
+        {% endif %}
+        {% if game.redExplodedBomb %}
+          <div class="bshare-detail bshare-detail--bomb">
+            <i class="fa fa-bomb"></i>
+            <span>{{ redName }} hit a mine</span>
+          </div>
+        {% endif %}
+        {% if game.blueExplodedBomb %}
+          <div class="bshare-detail bshare-detail--bomb">
+            <i class="fa fa-bomb"></i>
+            <span>{{ blueName }} hit a mine</span>
+          </div>
+        {% endif %}
+        {% if game.updated %}
+          <div class="bshare-detail">
+            <i class="fa fa-calendar"></i>
+            <span>{{ game.updated|date('Y-m-d H:i') }}</span>
+          </div>
+        {% endif %}
+      </div>
+
+      <div class="bshare-cta">
+        <a href="{{ path('MineSeekerBundle_gamePlay') }}" class="bshare-btn">
+          <i class="fa fa-play"></i> Play MineSeeker
+        </a>
+        <a href="{{ path('MineSeekerBundle_homepage') }}" class="bshare-btn bshare-btn--ghost">
+          <i class="fa fa-home"></i> Homepage
+        </a>
+      </div>
+
+    </div>
+
+  </div>
+{% endblock %}

templates/Security/profile.html.twig

@@ -38,6 +38,26 @@
         <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="fa 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="fa 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="fa fa-line-chart 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="fa 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="fa fa-bomb profile-stat__icon"></i>
         <span class="profile-stat__value">{{ stats.bombs }}</span>
@@ -45,6 +65,12 @@
       </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">
@@ -71,7 +97,7 @@
               {% endif %}
             {% endif %}
 
-            <div class="profile-game profile-game--{{ result }}">
+            <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>
@@ -106,3 +132,8 @@
     {% endif %}
   </div>
 {% endblock %}
+
+{% block javascripts %}
+  {{ parent() }}
+  {{ vite_entry_script_tags('profile') }}
+{% endblock %}