chg: usr: improve the Battle reports to change unnecessary data with interesting data #5

assets/js/components/BattleDialog.jsx

@@ -198,6 +198,24 @@ export default function BattleDialog({ games }) {
     : 'Points';
   const shareUrl = `${window.location.origin}/battle/${game.uuid}`;
 
+  const formatDuration = (from, to) => {
+    if (!from || !to) return null;
+    const diffMs = new Date(to.replace(' ', 'T')) - new Date(from.replace(' ', 'T'));
+    if (isNaN(diffMs) || 0 >= diffMs) return null;
+    const totalSec = Math.floor(diffMs / 1000);
+    const h = Math.floor(totalSec / 3600);
+    const m = Math.floor((totalSec % 3600) / 60);
+    const s = totalSec % 60;
+    if (0 < h) return `${h}h ${m}m ${s}s`;
+    if (0 < m) return `${m}m ${s}s`;
+    return `${s}s`;
+  };
+  const duration = formatDuration(game.created, game.date);
+  const pointDiff = Math.abs((game.redPoints ?? 0) - (game.bluePoints ?? 0));
+  const winnerColor = (game.redPoints ?? 0) > (game.bluePoints ?? 0) ? '#f67d52'
+    : (game.bluePoints ?? 0) > (game.redPoints ?? 0) ? '#95cff5'
+      : 'rgba(255,255,255,0.45)';
+
   const handleShare = () => {
     navigator.clipboard.writeText(shareUrl).then(() => {
       setCopied(true);
@@ -261,15 +279,21 @@ export default function BattleDialog({ games }) {
           <div className="bd-stats">
             <StatRow icon="fa-calendar" label="Date" value={game.date ?? '—'} />
             <StatRow icon="fa-flag-checkered" label="End reason" value={endReason} />
+            {duration && (
+              <StatRow icon="fa-hourglass-half" label="Match duration" value={duration} />
+            )}
+            {0 < pointDiff && (
+              <StatRow icon="fa-balance-scale" label="Winning margin" value={`${pointDiff} mine${1 === pointDiff ? '' : 's'}`} valueColor={winnerColor} />
+            )}
             <StatRow
-              icon="fa-bomb" label="Red hit a mine"
+              icon="fa-bomb" label="Red used bomb"
               value={game.redExplodedBomb ? 'Yes' : 'No'}
               valueColor={game.redExplodedBomb ? '#f67d52' : 'rgba(255,255,255,0.45)'}
             />
             <StatRow
-              icon="fa-bomb" label="Blue hit a mine"
+              icon="fa-bomb" label="Blue used bomb"
               value={game.blueExplodedBomb ? 'Yes' : 'No'}
-              valueColor={game.blueExplodedBomb ? '#f67d52' : 'rgba(255,255,255,0.45)'}
+              valueColor={game.blueExplodedBomb ? '#95cff5' : 'rgba(255,255,255,0.45)'}
             />
             {game.created && game.date && game.created !== game.date && (
               <StatRow icon="fa-clock-o" label="Started" value={game.created} />

templates/Game/battle_share.html.twig

@@ -111,6 +111,23 @@
           <span class="bshare-player__side">Blue</span>
         </div>
       </div>
+      {% set durationSec = (game.created and game.updated) ? (game.updated|date('U') - game.created|date('U')) : 0 %}
+      {% set durationStr = '' %}
+      {% if durationSec > 0 %}
+        {% set h = (durationSec / 3600)|round(0, 'floor') %}
+        {% set m = ((durationSec % 3600) / 60)|round(0, 'floor') %}
+        {% set s = durationSec % 60 %}
+        {% if h > 0 %}
+          {% set durationStr = h ~ 'h ' ~ m ~ 'm ' ~ s ~ 's' %}
+        {% elseif m > 0 %}
+          {% set durationStr = m ~ 'm ' ~ s ~ 's' %}
+        {% else %}
+          {% set durationStr = s ~ 's' %}
+        {% endif %}
+      {% endif %}
+      {% set pointDiff = (redPts|default(0) - bluePts|default(0))|abs %}
+      {% set winnerName = redPts|default(0) > bluePts|default(0) ? redName : (bluePts|default(0) > redPts|default(0) ? blueName : null) %}
+
       <div class="bshare-details">
         {% if resign %}
           <div class="bshare-detail">
@@ -118,16 +135,28 @@
             <span>{{ resign|capitalize }} resigned</span>
           </div>
         {% endif %}
+        {% if durationStr %}
+          <div class="bshare-detail">
+            <i class="fas fa-hourglass-half"></i>
+            <span>Match duration: {{ durationStr }}</span>
+          </div>
+        {% endif %}
+        {% if pointDiff > 0 and winnerName %}
+          <div class="bshare-detail">
+            <i class="fas fa-balance-scale"></i>
+            <span>{{ winnerName }} won by {{ pointDiff }} mine{{ pointDiff == 1 ? '' : 's' }}</span>
+          </div>
+        {% endif %}
         {% if game.redExplodedBomb %}
           <div class="bshare-detail bshare-detail--bomb">
             <i class="fas fa-bomb"></i>
-            <span>{{ redName }} hit a mine</span>
+            <span>{{ redName }} used their bomb</span>
           </div>
         {% endif %}
         {% if game.blueExplodedBomb %}
           <div class="bshare-detail bshare-detail--bomb">
             <i class="fas fa-bomb"></i>
-            <span>{{ blueName }} hit a mine</span>
+            <span>{{ blueName }} used their bomb</span>
           </div>
         {% endif %}
         {% if game.updated %}