templates/public/game_list.html.twig line 1

Open in your IDE?
  1. {% extends 'public/base.html.twig' %}
  3. {% block title %}openrpg.ru{% endblock %}
  5. {% block public_stylesheets %}
  6.     <link rel="stylesheet" href="{{ asset('data/game-list.css') }}">
  7. {% endblock %}
  9. {% block body %}
  10. <div id="tooltip" class="tooltip"></div>
  12. <!-- ⭐ Топ игр -->
  13. <section class="section">
  14.   <h2><i class="fa-solid fa-crown"></i> Топ приключений</h2>
  15.   <div class="cards">
  17.     <!-- Большая -->
  18.     {% if worlds|length > 0 %}
  19.     {% set world = worlds[0] %}
  20.     <div class="card-big" style="background-image:url('{{ world.background }}');" onclick="window.location.href='{{ path('public_world_view', {'id': world.id}) }}'">
  21.       <div class="card-gradient"></div>
  22.       <div class="card-info">
  23.         <h3>{{ world.name }}</h3>
  24.         <p>{{ world.description }}</p>
  25.         <div class="badges">
  26.           {% for badge in world.publicBadges %}
  27.             <div class="badge"><i class="fa-solid fa-tag"></i> {{ badge }}</div>
  28.           {% endfor %}
  29.         </div>
  30.       </div>
  31.     </div>
  32.     {% endif %}
  34.     <!-- Маленькие -->
  35.     {% if worlds|length > 1 %}
  36.     {% set world2 = worlds[1] %}
  37.     <div class="card-half" style="background-image:url('{{ world2.background }}');" onclick="window.location.href='{{ path('public_world_view', {'id': world2.id}) }}'">
  38.       <div class="card-gradient"></div>
  39.       <div class="card-info">
  40.         <h3>{{ world2.name }}</h3>
  41.         <p>{{ world2.description }}</p>
  42.         <div class="badges">
  43.           {% for badge in world2.publicBadges %}
  44.             <div class="badge"><i class="fa-solid fa-tag"></i> {{ badge }}</div>
  45.           {% endfor %}
  46.         </div>
  47.       </div>
  48.     </div>
  49.     {% endif %}
  50.     
  51.     {% if worlds|length > 2 %}
  52.     {% set world3 = worlds[2] %}
  53.     <div class="card-half" style="background-image:url('{{ world3.background }}');" onclick="window.location.href='{{ path('public_world_view', {'id': world3.id}) }}'">
  54.       <div class="card-gradient"></div>
  55.       <div class="card-info">
  56.         <h3>{{ world3.name }}</h3>
  57.         <p>{{ world3.description }}</p>
  58.         <div class="badges">
  59.           {% for badge in world3.publicBadges %}
  60.             <div class="badge"><i class="fa-solid fa-tag"></i> {{ badge }}</div>
  61.           {% endfor %}
  62.         </div>
  63.       </div>
  64.     </div>
  65.     {% endif %}
  66.   </div>
  67. </section>
  69. <!-- 👥 Сообщество -->
  70. <section class="section">
  71.   <h2><i class="fa-solid fa-users"></i> Игры сообщества</h2>
  72.   <div class="community-wrapper">
  73.     <div class="arrow arrow-left" onclick="scrollCommunity(-1)"><i class="fa-solid fa-chevron-left"></i></div>
  74.     <div class="community-list" id="communityList">
  76.       <script>
  77.       const commGames = [
  78.         ["Город шепотов", "Загадки улиц и опасные слухи."],
  79.         ["Пески отчаяния", "Путешествие через проклятую пустыню."],
  80.         ["Танец масок", "Бал, где каждый скрывает тайны."],
  81.         ["Дом у бездны", "Шёпоты в глубине старого дома."],
  82.         ["Охотники на звёзды", "Фэнтези с космическим оттенком."],
  83.         ["Кукольный театр", "Жуткие представления и живые куклы."],
  84.         ["Вкус грозы", "Город, где гроза меняет судьбы."],
  85.         ["Серп луны", "Культ, приносящий лунные жертвы."]
  86.       ];
  87.       document.write(commGames.map(g =>
  88.         `<div class="community-card">
  89.            <h4>${g[0]}</h4>
  90.            <p>${g[1]}</p>
  91.            <div class="badges">
  92.              <div class="badge"><i class="fa-solid fa-user-group"></i> Сообщество</div>
  93.              <div class="badge"><i class="fa-solid fa-star"></i> Популярное</div>
  94.            </div>
  95.          </div>`
  96.       ).join(""));
  97.       </script>
  99.     </div>
  100.     <div class="arrow arrow-right" onclick="scrollCommunity(1)"><i class="fa-solid fa-chevron-right"></i></div>
  101.   </div>
  102. </section>
  105. <!-- Остальные миры -->
  106. {% if worlds|length > 3 %}
  107. <section class="section">
  108.   <h2><i class="fa-solid fa-dice"></i> Ещё подборки</h2>
  109.   <div class="cards">
  110.     {% for world in worlds|slice(3) %}
  111.     <div class="card-half" style="background-image:url('{{ world.background }}');" onclick="window.location.href='{{ path('public_world_view', {'id': world.id}) }}'">
  112.       <div class="card-gradient"></div>
  113.       <div class="card-info">
  114.         <h3>{{ world.name }}</h3>
  115.         <p>{{ world.description }}</p>
  116.         <div class="badges">
  117.           {% for badge in world.publicBadges %}
  118.             <div class="badge"><i class="fa-solid fa-tag"></i> {{ badge }}</div>
  119.           {% endfor %}
  120.         </div>
  121.       </div>
  122.     </div>
  123.     {% endfor %}
  124.   </div>
  125. </section>
  126. {% endif %}
  128. <script>
  129. function scrollCommunity(dir) {
  130.   const list = document.getElementById("communityList");
  131.   list.scrollBy({ left: dir * (list.clientWidth * 0.7), behavior: 'smooth' });
  132. }
  133. </script>
  135. <script>
  136.   document.addEventListener('DOMContentLoaded', function() {
  137.     const logoElement = document.getElementById('logo');
  138.     const tooltipElement = document.getElementById('tooltip');
  139.     const tooltipMessage = "OpenRPG - это сервис для совместного прохождения ролевых игр, где истории написаны авторами, а ИИ служит их рассказчиком";
  140.     let tooltipTimeoutId;
  141.     
  142.     if (logoElement && tooltipElement) {
  143.       logoElement.addEventListener('mouseenter', () => {
  144.         tooltipTimeoutId = setTimeout(() => {
  145.           tooltipElement.textContent = tooltipMessage;
  146.           tooltipElement.style.display = 'block';
  147.           tooltipElement.style.opacity = '1';
  148.           
  149.           // Позиционирование подсказки строго под заголовком
  150.           const logoRect = logoElement.getBoundingClientRect();
  151.           tooltipElement.style.left = logoRect.left + 'px';
  152.           tooltipElement.style.top = (logoRect.bottom + 5) + 'px';
  153.         }, 500); // Задержка 500 мс
  154.       });
  155.       
  156.       logoElement.addEventListener('mouseleave', () => {
  157.         clearTimeout(tooltipTimeoutId);
  158.         tooltipElement.style.opacity = '0';
  159.         setTimeout(() => {
  160.           tooltipElement.style.display = 'none';
  161.         }, 300); // Длительность fade-out
  162.       });
  163.     }
  164.   });
  165. </script>
  166. {% endblock %}