59 lines
2.5 KiB
HTML
59 lines
2.5 KiB
HTML
{% extends 'layout.html' %}
|
|
{% load static %}
|
|
|
|
{% block extrajs %}
|
|
<script>
|
|
const csrfToken = "{{ csrf_token }}";
|
|
</script>
|
|
<script src="{% static 'js/games/bac-play.js' %}" defer></script>
|
|
<script src="{% static 'js/games/bac-utils.js' %}" defer></script>
|
|
{% endblock %}
|
|
|
|
|
|
{% block content %}
|
|
<div class="container" data-game-id="{{ game.id }}" data-round-id="{{ round.id }}">
|
|
<h2>{{ game.name }}</h2>
|
|
<h3>Partie {{ round.round_counter }}</h3>
|
|
<h5 style="color:rgb(34, 146, 233)">Mon score actuel : {{ player.score }}</h5>
|
|
<div class="game-bac-letter">{{ round.letter }}</div>
|
|
<h5>Status : <span id="status">{{ game.status }}</span></h5>
|
|
<p style="display:flex;flex-direction:row;">
|
|
<strong>Joueurs dans le salon : </strong>
|
|
<ul id="playersList" class="inline"></ul>
|
|
</p>
|
|
<p>Le célèbre jeu du petit bac ! Le Petit Bac est un jeu où les joueurs trouvent des mots correspondant à des catégories spécifiques, en commençant par une lettre donnée, pour marquer des points.</p>
|
|
<form action="" method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="form_submitted" value="true">
|
|
<table class="bac responsive-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Lettre</th>
|
|
{% for categorie in categories%}
|
|
<th>{{ categorie.name }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>{{ round.letter }}</td>
|
|
{% for categorie in categories%}
|
|
<td data-label="{{ categorie.name }}">
|
|
<input type="text" name="col-{{ categorie.id }}">
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<center>
|
|
<button id="buttonFinish" data-player-id="{{ request.user.username }}">Valider mes choix</button>
|
|
<h1 id="textFinished" style="color:orange;display:none">Vos réponses on été soumises</h1>
|
|
<div id="countdownDisplay" style="display:none;color:orange">
|
|
{% if countdown_remaining %}
|
|
Temps restant : {{ countdown_remaining }} secondes
|
|
{% endif %}
|
|
</div>
|
|
</center>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|