templates/games/list.html.twig line 1

  1. {% extends 'base.html.twig' %}
  2. {% trans_default_domain "gamepage" %}
  4. {% block title %}{{ ("category-" ~ category.slug)|trans({},"categories",app.request.getLocale()) }} | {% trans %}SpeakyPlanet{% endtrans %}{% endblock %}
  6. {% block pageTitle %}{{ ("category-" ~ category.slug)|trans({},"categories",app.request.getLocale()) }}{% endblock %}
  8. {% block body %}
  9. <script>
  10.     var currentPage = 1;
  11.     var maxPage = {{ nbPages }};
  12.     $(document).ready(function() {
  13.         $( ".pagination li" ).click(function() {
  14.                 
  15.                 console.log(currentPage);
  16.                 console.log(maxPage);
  17.             if($(this).hasClass('previous')){
  18.                 console.log('previous');
  19.                 if(currentPage > 1)
  20.                     currentPage--;
  21.             }else if($(this).hasClass('next')){
  22.                 console.log('next');
  23.                 if(currentPage < maxPage)
  24.                     currentPage++;
  25.             }else{
  26.                 console.log($( ".pagination li" ).index( this ));
  27.                 currentPage = $( ".pagination li" ).index( this );
  28.             }
  30.             $( ".pagination li" ).removeClass('active');
  31.             $( ".pagination li:nth-child("+ (currentPage+1) +")" ).addClass('active');
  33.             $( ".gamePage" ).hide();
  34.             $( "#page"+currentPage ).show();
  35.             return false;
  36.         });
  37.     });
  39. </script>
  40.     <style>
  41.         .card-text {
  42.             font-size: 10px;
  43.             font-weight: bold;
  44.             text-transform: uppercase;
  45.             color: #0071BC;
  46.             width: 265px;
  47.             margin: 0;
  48.         }
  49.         a:hover .card-text {
  50.             color: #f26528;
  51.         }
  52.         .card-body .theme {
  53.             font-size: 15px;
  54.             color: #0071BC;
  55.             width: 265px;
  56.             font-style: italic;
  57.         }
  59.         .bot-right {
  60.             bottom: 0;
  61.             right: 0;
  62.         }
  63.     </style>
  64.     {% set page = 1 %}
  65.     {% set lock = user is null or not user.isSubscribed %}
  66.     <div class="gamePage row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4" id="page{{ page }}">
  67.         {% for game in games %}
  68.             
  69.             {% if loop.index0 > 0 and loop.index0%nbPerPage == 0 %}
  70.                 {% set page = page+1 %}
  71.                 <div class="clearfix" ></div>
  72.                 </div>
  73.                 <div class="gamePage row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4" id="page{{ page }}" style="display: none;">
  74.             {% endif %}
  75.             {% set zoneId = 'game' ~ game.uniqueId %}
  76.             <a class="text-decoration-none text-muted" role="button"  href="{{ path('play_game', { 'slug': game.canonicalTitle }) }}">
  77.             <div class="col px-4 position-relative">
  78.                 <div class="card shadow-sm">
  79.                     <div class="text-center">
  80.                         <img class="card-img-top mx-auto d-block" alt="{{ game.canonicalTitle }}" src="{% if game.thumbnail is not null %}{{ asset(game.thumbnailUrl) }}{% endif %}" />
  81.                     </div>
  82.                     <div class="card-body py-1">
  83.                         <p class="card-text">{{ 'gtitle'|trans({},zoneId,app.request.getLocale()) }}</p>
  84.                         <p class="theme text-left py-0 my-0">{% if isTheme is defined and isTheme == 1 %}{% if game.mainCategory %}{{ ("category-" ~ game.mainCategory.slug)|trans({},'categories',app.request.getLocale()) }}{% endif %}{% else %}{% if game.mainTheme %}{{ ("category-" ~ game.mainTheme.slug)|trans({},'categories',app.request.getLocale()) }}{% endif %}{% endif %}</p>
  85.                         {#<div class="vote {{ 'r' ~ game.roundMark }}">&nbsp;</div>#}
  86.                     </div>
  87.                     {% if lock and not game.free %}
  88.                         <img class="position-absolute p-1 bot-right" src="{{ asset('images/default/locker.png') }}" alt="">
  89.                     {% endif %}
  90.                 </div>
  91.             </div>
  92.             </a>
  93.         {% else %}
  94.             <h3>Il n'y a actuellement aucun jeu dans cette catégorie.</h3> 
  95.         {% endfor %}
  96.     </div>
  98.     {% if nbPages >= 1 %}
  99.     <nav aria-label="Page navigation example">
  100.         <ul class="pagination justify-content-center py-4">
  101.             <li class="page-item previous">
  102.             <a class="page-link" href="#" aria-label="Previous">
  103.             <span aria-hidden="true">&laquo;</span>
  104.             </a>
  105.             </li>
  106.             {% for i in 1..nbPages %}
  107.                 <li class="page-item {% if loop.index0 == 0 %}active{% endif %}"><a class="page-link" href="#">{{ i }}</a></li>
  108.             {% endfor %}
  109.             <li class="page-item next">
  110.             <a class="page-link" href="#" aria-label="Next">
  111.             <span aria-hidden="true">&raquo;</span>
  112.             </a>
  113.             </li>
  114.         </ul>
  115.     </nav>
  116.     {% endif %}
  117. {% endblock %}