templates/games/tdm/croatie-jeu.html.twig line 1

Open in your IDE?
  1. {% set section = 'tdm' %}
  2. {% extends 'base.html.twig' %}
  3. {% block title %}Pitch - Tour du monde rebondissant - Croatie{% endblock %}
  4. {% block body %}
  5. <div data-controller="tdm-pays">
  6. <div id="nav-header" class="nav-header">
  7. <div class="nav-header__breadcrumb">
  8. <nav aria-label="breadcrumb">
  9. <ol class="breadcrumb">
  10. <li class="breadcrumb-item"><a href="{{ path('tdm') }}" class="swup-link">Tour du monde rebondissant</a></li>
  11. <li class="breadcrumb-item"><a href="/jeux/tour-du-monde/croatie" class="swup-link" data-swup-color="#3D7FDD">Croatie</a></li>
  12. <li class="breadcrumb-item active" aria-current="page">Tape la balle</li>
  13. </ol>
  14. </nav>
  15. </div>
  16. </div>
  17. <div id="tdm-pays">
  18. <div id="tdm-game" class="croatie">
  19. <a href="/jeux/tour-du-monde/croatie" class="tdm-game-back swup-link" data-swup-color="#3D7FDD"></a>
  20. <div id="tdm-bouncing">
  21. <div id="tdm-bouncing-container" class="stamp-border">
  22. <canvas id="tdm-bouncing-canvas"></canvas>
  23. </div>
  24. <div class="wave"></div>
  25. <div class="wave"></div>
  26. <div class="countdown">
  27. <div class="number">
  28. <h2>5</h2>
  29. </div>
  30. <div class="number">
  31. <h2>4</h2>
  32. </div>
  33. <div class="number">
  34. <h2>3</h2>
  35. </div>
  36. <div class="number">
  37. <h2>2</h2>
  38. </div>
  39. <div class="number">
  40. <h2>1</h2>
  41. </div>
  42. </div>
  43. <div style="opacity: 0; position: absolute; top: -200px; left: -200px; pointer-events: none;">
  44. <img id="bouncing-ball" width="30" height="30" src="/build/images/tdm/croatie/bounce/ball.png" />
  45. <img id="bouncing-hand" width="80" height="40" src="/build/images/tdm/croatie/bounce/hand.png" />
  46. <img id="bouncing-hand-left" width="80" height="40" src="/build/images/tdm/croatie/bounce/hand-left.png" />
  47. </div>
  48. </div>
  49. <a href="#" id="btn-tdm-bouncing-help" class="btn-tdm-help" data-bs-toggle="modal" data-bs-target="#tdm-bouncing-rules" data-no-swup><span>?</span></a>
  51. <div id="modal-buttons">
  52. <a href="#" id="btn-tdm-bouncing-rules" data-bs-toggle="modal" data-bs-target="#tdm-bouncing-rules" data-no-swup></a>
  53. <a href="#" id="btn-tdm-bouncing-win" data-bs-toggle="modal" data-bs-target="#tdm-bouncing-win" data-no-swup></a>
  54. <a href="#" id="btn-tdm-bouncing-continue" data-bs-toggle="modal" data-bs-target="#tdm-bouncing-continue" data-no-swup></a>
  55. <a href="#" id="btn-tdm-bouncing-gameover" data-bs-toggle="modal" data-bs-target="#tdm-bouncing-gameover" data-no-swup></a>
  56. </div>
  57. <div class="modal fade modal-tdm-game" id="tdm-bouncing-rules" tabindex="-1" role="dialog" aria-labelledby="" data-backdrop="static" data-keyboard="false">
  58. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  59. <div class="modal-content">
  60. <div class="modal-header">
  61. <h3>Comment ça marche&nbsp;?</h3>
  62. <!--<button type="button" class="btn-close btn-bouncing-start" data-bs-dismiss="modal" aria-label="Close"></button>-->
  63. </div>
  64. <div class="modal-body">
  65. <p>La balle ne doit pas toucher la surface de l’eau. <br />Dirige la main de gauche à droite pour la faire rebondir&nbsp;!</p>
  66. </div>
  67. <div class="modal-footer justify-content-end">
  68. <a href="#" class="btn btn-primary btn-bouncing-start" data-no-swup data-bs-dismiss="modal" aria-label="Close">Commencer</a>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. <div class="modal fade modal-tdm-game" id="tdm-bouncing-continue" tabindex="-1" role="dialog" aria-labelledby="" data-backdrop="static" data-keyboard="false">
  74. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  75. <div class="modal-content">
  76. <div class="modal-header">
  77. <h3>Vous avez perdu une vie !</h3>
  78. </div>
  79. <div class="modal-body">
  80. <p><span id="tdm-bouncing-remain">Vies restantes : ${lives}</span></p>
  81. </div>
  82. <div class="modal-footer justify-content-end">
  83. <a href="#" class="btn btn-primary" id="btn-bouncing-continue" data-no-swup data-bs-dismiss="modal" aria-label="Close">Nouvel essai</a>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="modal fade modal-tdm-game" id="tdm-bouncing-gameover" tabindex="-1" role="dialog" aria-labelledby="" data-backdrop="static" data-keyboard="false">
  89. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  90. <div class="modal-content">
  91. <div class="modal-header">
  92. <h3>Game over</h3>
  93. </div>
  94. <div class="modal-body">
  95. <p>Tu as épuisé toutes tes vies&nbsp;! <br />Tu peux retenter ta chance en cliquant sur le bouton ci-dessous.</p>
  96. </div>
  97. <div class="modal-footer justify-content-end">
  98. <a href="#" class="btn btn-primary" id="btn-bouncing-restart" data-no-swup data-bs-dismiss="modal" aria-label="Close">Nouvel essai</a>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. <div class="modal fade modal-tdm-game" id="tdm-bouncing-win" tabindex="-1" role="dialog" aria-labelledby="" data-backdrop="static" data-keyboard="false">
  104. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  105. <div class="modal-content">
  106. <div class="modal-header">
  107. <h3>Bravo !</h3>
  108. <!--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
  109. </div>
  110. <div class="modal-body">
  111. <p>La balle n’est pas tombée&nbsp;! <br />Continue sur cette lancée et poursuis l’aventure avec Pitchos dans son tour du monde rebondissant.</p>
  112. </div>
  113. <div class="modal-footer justify-content-between">
  114. <a class="btn btn-primary swup-link" href="/jeux/tour-du-monde/croatie" data-swup-color="#3D7FDD">Retour à la carte postale</a>
  115. <a class="btn btn-primary swup-link" href="/jeux/tour-du-monde/france" data-swup-color="#2837A1" id="btn-tdm-next">Je continue</a>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. {% endblock %}