277 lines
14 KiB
Twig
277 lines
14 KiB
Twig
{% extends 'Game/index.html.twig' %}
|
|
|
|
{% block title %} - Battle Report{% endblock %}
|
|
|
|
{% block metas %}
|
|
{%- set shareUrl = url('MineSeekerBundle_battle_share', { uuid: game.uuid }) | replace({'http://': 'https://'}) -%}
|
|
{%- set _ogImage = url('MineSeekerBundle_og_battle', { uuid: game.uuid }) | replace({'http://': 'https://'}) -%}
|
|
<meta property="og:url" content="{{ shareUrl }}"/>
|
|
<meta property="og:type" content="article"/>
|
|
<meta property="og:site_name" content="MineSeeker"/>
|
|
<meta property="og:locale" content="en_US"/>
|
|
<meta property="og:title" content="{{ ogTitle }}"/>
|
|
<meta property="og:description" content="{{ ogDesc }}"/>
|
|
<meta property="og:image" content="{{ _ogImage }}"/>
|
|
<meta property="og:image:width" content="1600"/>
|
|
<meta property="og:image:height" content="627"/>
|
|
<meta property="og:image:alt" content="{{ ogTitle }}"/>
|
|
<meta name="twitter:card" content="summary_large_image"/>
|
|
<meta name="twitter:site" content="@MineSeeker"/>
|
|
<meta name="twitter:title" content="{{ ogTitle }}"/>
|
|
<meta name="twitter:description" content="{{ ogDesc }}"/>
|
|
<meta name="twitter:image" content="{{ _ogImage }}"/>
|
|
<meta name="twitter:image:alt" content="{{ ogTitle }}"/>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="bshare-page">
|
|
<div class="bshare-card">
|
|
<div class="bshare-card__eyebrow">
|
|
<i class="fas fa-crosshairs"></i> Battle Report
|
|
</div>
|
|
<div class="bshare-vs">
|
|
<div class="bshare-player bshare-player--red">
|
|
<div class="bshare-avatar bshare-avatar--red" style="position: relative;">
|
|
{% if redAvatar %}
|
|
<img src="{{ redAvatar|imagine_filter('avatar_thumb') }}"
|
|
alt="{{ redName }}"
|
|
class="bshare-avatar__img">
|
|
{% else %}
|
|
{{ redName|slice(0,2)|upper }}
|
|
{% endif %}
|
|
{% if redBonusPoints > blueBonusPoints %}
|
|
<div style="position: absolute; bottom: -6px; right: -6px; background: #ffd700; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 0 0 2px rgba(7, 9, 13, 1); border: 2px solid rgba(0,0,0,0.5); z-index: 10;">
|
|
<i class="fas fa-star" style="color: #000; font-size: 14px;"></i>
|
|
</div>
|
|
{% endif %}
|
|
</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 style="display: flex; justify-content: center; gap: 0; align-items: center; margin-bottom: 8px;">
|
|
<span style="font: 700 13px 'Rajdhani', sans-serif; color: #f67d52; display: flex; align-items: center; gap: 4px;">
|
|
<i class="fas fa-star" style="font-size: 11px;"></i> {{ (redBonusPoints ?? 0)|number_format(1, '.', '') }}
|
|
</span>
|
|
<span style="font: 700 13px 'Rajdhani', sans-serif; color: rgba(255,255,255,0.3); margin: 0 8px;">:</span>
|
|
<span style="font: 700 13px 'Rajdhani', sans-serif; color: #95cff5; display: flex; align-items: center; gap: 4px;">
|
|
{{ (blueBonusPoints ?? 0)|number_format(1, '.', '') }} <i class="fas fa-star" style="font-size: 11px;"></i>
|
|
</span>
|
|
</div>
|
|
<div class="bshare-vs__label">VS</div>
|
|
{% if resign == 'red' %}
|
|
<div class="bshare-badge bshare-badge--blue">
|
|
<i class="fas fa-trophy"></i> Blue wins
|
|
</div>
|
|
{% elseif resign == 'blue' %}
|
|
<div class="bshare-badge bshare-badge--red">
|
|
<i class="fas 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="fas fa-trophy"></i> Red wins
|
|
</div>
|
|
{% elseif bluePts > redPts %}
|
|
<div class="bshare-badge bshare-badge--blue">
|
|
<i class="fas fa-trophy"></i> Blue wins
|
|
</div>
|
|
{% else %}
|
|
<div class="bshare-badge bshare-badge--draw">
|
|
<i class="fas fa-minus"></i> Draw
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="bshare-player bshare-player--blue">
|
|
<div class="bshare-avatar bshare-avatar--blue" style="position: relative;">
|
|
{% if blueAvatar %}
|
|
<img src="{{ blueAvatar|imagine_filter('avatar_thumb') }}"
|
|
alt="{{ blueName }}"
|
|
class="bshare-avatar__img">
|
|
{% else %}
|
|
{{ blueName|slice(0,2)|upper }}
|
|
{% endif %}
|
|
{% if blueBonusPoints > redBonusPoints %}
|
|
<div style="position: absolute; bottom: -6px; right: -6px; background: #ffd700; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 0 0 2px rgba(7, 9, 13, 1); border: 2px solid rgba(0,0,0,0.5); z-index: 10;">
|
|
<i class="fas fa-star" style="color: #000; font-size: 14px;"></i>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<span class="bshare-player__name">{{ blueName }}</span>
|
|
<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">
|
|
<i class="fas fa-flag"></i>
|
|
<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 }} used their bomb</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if game.blueExplodedBomb %}
|
|
<div class="bshare-detail bshare-detail--bomb">
|
|
<i class="fas fa-bomb"></i>
|
|
<span>{{ blueName }} used their bomb</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if game.updated %}
|
|
<div class="bshare-detail">
|
|
<i class="fas fa-calendar"></i>
|
|
<span>{{ game.updated|date('Y-m-d H:i') }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% set hasRedStats = redBonusStats is not empty and (redBonusStats.blindHits or redBonusStats.chainBest or redBonusStats.edgeMines or redBonusStats.lastMineHits or redBonusStats.biggestReveal) %}
|
|
{% set hasBlueStats = blueBonusStats is not empty and (blueBonusStats.blindHits or blueBonusStats.chainBest or blueBonusStats.edgeMines or blueBonusStats.lastMineHits or blueBonusStats.biggestReveal) %}
|
|
{% if redBonusPoints > 0 or blueBonusPoints > 0 or hasRedStats or hasBlueStats %}
|
|
<div class="bshare-bonus">
|
|
<div class="bshare-bonus__title">
|
|
<i class="fas fa-star"></i> Bonus Statistics
|
|
</div>
|
|
<div class="bshare-bonus__grid">
|
|
{# Red Bonus #}
|
|
<div class="bshare-bonus__player bshare-bonus__player--red">
|
|
<div class="bshare-bonus__header">
|
|
<span class="bshare-bonus__points">{{ redBonusPoints|number_format(1, '.', '') }}</span>
|
|
<span class="bshare-bonus__label">pts</span>
|
|
</div>
|
|
<div class="bshare-bonus__stats">
|
|
{% if redBonusStats is not empty and redBonusStats.blindHits %}
|
|
<div class="bshare-bonus__stat">
|
|
<span class="bshare-bonus__stat-label">Blind hits</span>
|
|
<span class="bshare-bonus__stat-value">{{ redBonusStats.blindHits }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if redBonusStats is not empty and redBonusStats.chainBest %}
|
|
<div class="bshare-bonus__stat">
|
|
<span class="bshare-bonus__stat-label">Best chain</span>
|
|
<span class="bshare-bonus__stat-value">{{ redBonusStats.chainBest }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if redBonusStats is not empty and redBonusStats.edgeMines %}
|
|
<div class="bshare-bonus__stat">
|
|
<span class="bshare-bonus__stat-label">Edge mines</span>
|
|
<span class="bshare-bonus__stat-value">{{ redBonusStats.edgeMines }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if redBonusStats is not empty and redBonusStats.lastMineHits %}
|
|
<div class="bshare-bonus__stat">
|
|
<span class="bshare-bonus__stat-label">Endgame mines</span>
|
|
<span class="bshare-bonus__stat-value">{{ redBonusStats.lastMineHits }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if redBonusStats is not empty and redBonusStats.biggestReveal %}
|
|
<div class="bshare-bonus__stat">
|
|
<span class="bshare-bonus__stat-label">Biggest reveal</span>
|
|
<span class="bshare-bonus__stat-value">{{ redBonusStats.biggestReveal }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if not hasRedStats %}
|
|
<div class="bshare-bonus__stat bshare-bonus__stat--empty">
|
|
<span class="bshare-bonus__stat-label">No bonuses earned</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="bshare-bonus__player bshare-bonus__player--blue">
|
|
<div class="bshare-bonus__header">
|
|
<span class="bshare-bonus__points">{{ blueBonusPoints|number_format(1, '.', '') }}</span>
|
|
<span class="bshare-bonus__label">pts</span>
|
|
</div>
|
|
<div class="bshare-bonus__stats">
|
|
{% if blueBonusStats is not empty and blueBonusStats.blindHits %}
|
|
<div class="bshare-bonus__stat">
|
|
<span class="bshare-bonus__stat-label">Blind hits</span>
|
|
<span class="bshare-bonus__stat-value">{{ blueBonusStats.blindHits }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if blueBonusStats is not empty and blueBonusStats.chainBest %}
|
|
<div class="bshare-bonus__stat">
|
|
<span class="bshare-bonus__stat-label">Best chain</span>
|
|
<span class="bshare-bonus__stat-value">{{ blueBonusStats.chainBest }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if blueBonusStats is not empty and blueBonusStats.edgeMines %}
|
|
<div class="bshare-bonus__stat">
|
|
<span class="bshare-bonus__stat-label">Edge mines</span>
|
|
<span class="bshare-bonus__stat-value">{{ blueBonusStats.edgeMines }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if blueBonusStats is not empty and blueBonusStats.lastMineHits %}
|
|
<div class="bshare-bonus__stat">
|
|
<span class="bshare-bonus__stat-label">Endgame mines</span>
|
|
<span class="bshare-bonus__stat-value">{{ blueBonusStats.lastMineHits }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if blueBonusStats is not empty and blueBonusStats.biggestReveal %}
|
|
<div class="bshare-bonus__stat">
|
|
<span class="bshare-bonus__stat-label">Biggest reveal</span>
|
|
<span class="bshare-bonus__stat-value">{{ blueBonusStats.biggestReveal }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if not hasBlueStats %}
|
|
<div class="bshare-bonus__stat bshare-bonus__stat--empty">
|
|
<span class="bshare-bonus__stat-label">No bonuses earned</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="bshare-cta">
|
|
<a href="{{ path('MineSeekerBundle_gamePlay') }}" class="bshare-btn">
|
|
<i class="fas fa-play"></i> Play MineSeeker
|
|
</a>
|
|
<a href="{{ path('MineSeekerBundle_homepage') }}" class="bshare-btn bshare-btn--ghost">
|
|
<i class="fas fa-house"></i> Homepage
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|