templates/frontend/MatchPlay/bracket-mobile/bracket-index-mobile.html.twig line 1

Open in your IDE?
  1. {% extends 'frontend/MatchPlay/base_matchplay.html.twig' %}
  3. {% block styles %}
  4.     <link href="{{ asset('css/frontend/matchplay/bracket-mobile.css?v=0.03') }}" rel="stylesheet" type="text/css"/>
  5.     <style>
  6.         {% for i in 0..rondas|length %}
  7.         .round._{{ i+1 }} .pairing:nth-of-type({{ 2**i }}n) {
  8.             margin-bottom: 1.5em;
  9.         }
  10.         {% endfor %}
  12.     </style>
  13. {% endblock %}
  15. {% block content %}
  16.     <div class="container">
  17.         <div class="header">
  18.             <div class="tourInfo">
  19.                 {{ competicion.nombre }}
  20.             </div>
  21.             <div class="matchHead">
  22. {#                <div class="dates">#}
  23. {#                    <div class="knockout">#}
  24. {#                        <svg class="knockout-text-container" width="165px" height="135px">#}
  25. {#                            <rect class="knockout-text-bg" width="100%" height="100%" fill="white" x="0" y="0" fill-opacity="1" mask="url(#knockout-text)"></rect>#}
  26. {#                            <mask id="knockout-text">#}
  27. {#                                <rect width="100%" height="100%" fill="#ffffffdd" x="0" y="0"></rect>#}
  28. {#                                <text x="94%" y="1.5em" text-anchor="end">{{ rondas[0].inicio|format_date(pattern='MMM dd', locale=locale) }}</text>#}
  29. {#                                <text  x="94%" y="2.6em" text-anchor="end">{{ (rondas|last).fin|format_date(pattern='MMM dd', locale=locale) }}</text>#}
  30. {#                                <text x="94%" y="3.7em" text-anchor="end">──────</text>#}
  31. {#                            </mask>#}
  32. {#                        </svg>#}
  33. {#                    </div>#}
  34. {#                </div>#}
  35.             </div>
  36.         </div>
  37.     </div>
  39.     {% include 'frontend/MatchPlay/fede_svg.html.twig' %}
  41.     {% include 'frontend/MatchPlay/bracket-mobile/bracket-content-mobile.html.twig' %}
  43.     {% include 'frontend/MatchPlay/bracket-mobile/bracket-footer-mobile.html.twig' %}
  44. {% endblock %}
  46. {% block scripts %}
  47.     <script>
  48.         let hayGrupos = parseInt({{ configuracion.grupos }}) > 0;
  49.         let gruposMostrados = hayGrupos == true;
  50.         let currentRound = parseInt({{ currentRound }});
  51.         let numJugadores = 32;
  52.         let leftRow = document.getElementById('leftRow');
  53.         let rightRow = document.getElementById('rightRow');
  54.         let elementRound = document.getElementsByClassName('round');
  55.         let rondaActual = 1;
  56.         let env = '{{ env }}';
  57.         elementRound = elementRound[0];
  59.         $('body').on('click', '#rightRow', function () {
  60.             $('.showRound').removeClass('showRound');
  62.             var rondaActualAux = $('.ronda:visible');
  63.             var orden = $(rondaActualAux).data('orden');
  64.             $('.ronda[data-orden="'+orden+'"]').addClass('hideRound');
  65.             $('.ronda[data-orden="'+(orden + 1)+'"]').addClass('showRound').removeClass('hideRound');
  67.             var siguienteRonda = $('.ronda[data-orden="'+(orden + 2)+'"]');
  68.             if (siguienteRonda.length === 0) {
  69.                 $('#rightRow').hide();
  70.             }
  71.             $('#leftRow').show();
  73.             showCorrectRound(orden + 1);
  74.         });
  76.         $('body').on('click', '#leftRow', function () {
  77.             $('.showRound').removeClass('showRound');
  79.             var rondaActualAux = $('.ronda:visible');
  80.             var orden = $(rondaActualAux).data('orden');
  82.             $('.ronda[data-orden="'+orden+'"]').addClass('hideRound');
  83.             $('.ronda[data-orden="'+(orden - 1)+'"]').addClass('showRound').removeClass('hideRound');
  85.             var siguienteRonda = $('.ronda[data-orden="'+(orden - 2)+'"]');
  86.             if (siguienteRonda.length === 0) {
  87.                 $('#leftRow').hide();
  88.             }
  89.             $('#rightRow').show();
  91.             showCorrectRound(orden - 1);
  92.         });
  95.         if (currentRound == 0) {
  96.             document.querySelector("#rightRow").classList.add('hidden');
  97.         }
  99.         function getStatusPlayer(player, ganador) {
  100.             var str = "pending";
  101.             if (typeof ganador != 'undefined') {
  102.                 if (player == ganador) {
  103.                     str = "winner";
  104.                 } else {
  105.                     str = "looser";
  106.                 }
  107.             }
  108.             return str;
  109.         }
  111.         function removeFakePairing() {
  112.             $('.fake-pairing').remove();
  113.         }
  115.         function showCorrectRound(orden = false) {
  116.             var ordenAux = currentRound;
  117.             if (orden) {
  118.                 ordenAux = orden;
  119.             }
  121.             $('.round-selector').hide();
  122.             $('.round-selector[data-position="' + ordenAux + '"]').show();
  123.             if (ordenAux > 1) {
  124.                 $('#leftRow').removeClass('hidden');
  125.             }
  126.         }
  128.         $(function () {
  129.             showCorrectRound();
  130.         });
  132.     </script>
  133.     <script>
  134.         let competicionId = {{ competicion.id }};
  135.         let keySocket = 'livescoring_matchplay.competicion_'+competicionId;
  136.         let dataLivescoring = {{ data|json_encode|raw }};
  137.         let dataLivescoringBefore = dataLivescoring;
  138.         let has3and4position = {{ has3and4position ? '1' : '0' }};
  140.         $('body').on('click', '.side-section-data', function (e) {
  141.             let url = $(this).data('url');
  142.             if (url !== '' && typeof url !== 'undefined') {
  143.                 showModalECard(url);
  144.                 e.preventDefault();
  145.             }
  146.         });
  147.     </script>
  148. {% endblock %}