templates/pages/battle-detail.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% block title %}Battle detail{% endblock %}
  3. {% block bodyClass %}battleBody{% endblock %}
  4. {% import "components/macros.html.twig" as macros %}
  7. {% block body %}
  9.     <section id="battles" class="battles mb-5">
  10.         <div class="container">
  11.             <div class="row">
  12.                 <div class="col-12 heading">
  13.                     <h2><span class="text-success text-bold">{{ battle.challenger.pseudoname }}</span> <span class="text-muted">vs.</span> <span class="text-danger text-bold">{{ battle.oponnent.pseudoname }}</span></h2>
  14.                 </div>
  15.             </div>
  16.             <div class="row">
  17.                 <button class="js-btn-vote col-1 mb-4 btn btn-outline btn-vote" data-type="challenger" data-battle-id="{{ battle.id }}" data-rapper-id="{{ battle.challenger.id }}" data-user-logged="{% if app.user %}true{% else %}false{% endif %}" {% if battle.isFinished %}disabled{% endif %}>
  18.                     <div class="icon">
  19.                         <i class="bi bi-hand-thumbs-up"></i>
  20.                         <small>{{ getBattleVotesChallenger(battle) }}x</small>
  21.                     </div>
  22.                 </button>
  23.                 <div class="card battle-card mb-4 box-shadow position-relative col-10">
  24.                     <div class="card-bg-players position-absolute">
  25.                         <div class="card-player-left">
  26.                             <img src="{{ asset("uploads/images/rappers/"~ battle.challenger.avatarName) }}" alt="Challenger"/>
  27.                         </div>
  28.                         <img src="{{ asset("build/images/VS-BIG.png") }}" class="card-player-mid" alt="Divider"/>
  29.                         <div class="card-player-right">
  30.                             <img src="{{ asset("uploads/images/rappers/"~ battle.oponnent.avatarName) }}"  alt="Opponent"/>
  31.                         </div>
  33.                     </div>
  35.                     <div class="card-controls position-absolute">
  38.                         <div class="card-bottom-controls detail">
  40.                             <div class="playingIndicator" data-indicator-id='{{ battle.id }}' style='--piWidth: 0%;'></div>
  41.                             <div class="card-voting-controls position-absolute pt-4">
  42.                                 <small class="text-white">{{ battle.challenger.pseudoname }}</small>
  43.                                 <small class="text-white">{{ battle.challenger.rank }} RP</small>
  44.                             </div>
  45.                             <div class="play-button" data-id="{{ battle.id }}" data-sample="{{ battle.battleFileName }}">
  46.                                 <i class="bi bi-play-circle-fill text-white" data-icon-id="{{ battle.id }}"></i>
  47.                             </div>
  48.                             <div class="time-info position-absolute pt-4">
  49.                                 <small class="text-white">{{ battle.oponnent.pseudoname }}</small>
  50.                                 <small class="text-white">{{ battle.oponnent.rank }} RP</small>
  51.                             </div>
  53.                         </div>
  54.                     </div>
  55.                 </div>
  56.                 <button class="js-btn-vote col-1 mb-4 btn btn-outline btn-vote" data-type="oponnent" data-battle-id="{{ battle.id }}" data-rapper-id="{{ battle.oponnent.id }}" data-user-logged="{% if app.user %}{{ app.user.id }}{% else %}false{% endif %}" {% if battle.isFinished %}disabled{% endif %}>
  57.                     <div class="icon">
  58.                         <i class="bi bi-hand-thumbs-up"></i>
  59.                         <small>{{ getBattleVotesOponnent(battle) }}x</small>
  60.                     </div>
  61.                 </button>
  62.             </div>
  64.             <div class="row">
  65.                 <div class="col-md-6">
  66.                     <div class="card mb-4 mb-md-0">
  67.                         <div class="card-body">
  68.                             <h5 class="mb-4"> Battle details
  69.                             </h5>
  70.                             <p class="mb-1" style="font-size: .77rem;">Beat</p>
  71.                             <p class="mb-4">{{ battle.beat.author.pseudoname }} - {{ battle.beat.name }}</p>
  73.                             <p class="mt-4 mb-1" style="font-size: .77rem;">Battle ends in</p>
  74.                             {% if battle.isFinished == false %}
  75.                             <p class="js-battle-ends mb-4" data-enddate="{{ battle.battleEnds|date("d/m/Y H:i:s") }}">
  76.                                 <span id="days"></span>
  77.                                 <span id="hours"></span>
  78.                                 <span id="minutes"></span>
  79.                                 <span id="seconds"></span>
  80.                             </p>
  81.                             {% else %}
  82.                                 <p>Finished</p>
  83.                             {% endif %}
  84.                             <p class="mt-4 mb-1" style="font-size: .77rem;">Created</p>
  85.                             <p class="mb-4" >{{ battle.createdAt|date("d/m/Y H:i:s") }}</p>
  87.                             <p class="mt-4 mb-1" style="font-size: .77rem;">Votes</p>
  88.                             <p class="mb-4" >{{ battle.allVotes|length }}x</p>
  90.                         </div>
  91.                     </div>
  92.                 </div>
  94.                 <div class="col-md-6">
  95.                     <div class="card mb-4 mb-md-0">
  96.                         <div class="card-body">
  97.                             <h5 class="mb-4">
  98.                                 Comments
  99.                             </h5>
  100.                             <div class="comments-wrapper">
  101.                                 <div class="comments-body">
  102.                                     {# @var \App\Entity\BattleComment comment #}
  103.                                     {# @var \App\Entity\BattleComment replyComment #}
  104.                                     {% if battle.comments|length>0 %}
  105.                                         {% for comment in battle.comments %}
  106.                                             {% if comment.replyCommentRoot == null %}
  107.                                                 {{ macros.renderComment(comment) }}
  108.                                                 {{ macros.renderPostBattleCommentForm(battle,true,comment) }}
  109.                                             {% endif %}
  110.                                             {% if comment.replies| length > 0 %}
  111.                                                 {% for replyComment in comment.replies %}
  112.                                                     {{ macros.renderComment(replyComment) }}
  113.                                                     {{ macros.renderPostBattleCommentForm(battle,true,replyComment) }}
  114.                                                 {% endfor %}
  115.                                             {% endif %}
  116.                                         {% endfor %}
  117.                                     {% else %}
  118.                                         <div class="no-items">
  119.                                             <p class="text-center pt-3">No comments yet </p>
  120.                                         </div>
  121.                                     {% endif %}
  122.                                 </div>
  124.                                 <hr/>
  125.                                 {% if app.user != null %}
  126.                                     {{ macros.renderPostBattleCommentForm(battle,false) }}
  127.                                 {% else %}
  128.                                     <p class="text-center"><a href="{{ path('login') }}">Log in</a> if you want to leave comment on this battle.</p>
  129.                                 {% endif %}
  130.                             </div>
  131.                         </div>
  132.                     </div>
  133.                 </div>
  134.             </div>
  136.         </div>
  138.     </section>
  139. {% endblock %}