feat: add game config panel UI (template, Stimulus controller, CSS)

Config panel with toggle for watched films, hint type checkboxes,
and multi-select for award types above the start game button.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
thibaud-leclere
2026-04-01 23:08:09 +02:00
parent ba715d69a0
commit b637b725d8
3 changed files with 237 additions and 1 deletions

View File

@@ -56,8 +56,64 @@
</div>
{% else %}
<div class="game-start-container">
<form method="post" action="{{ path('app_game_start') }}" id="start-form">
<form method="post" action="{{ path('app_game_start') }}" id="start-form"
data-controller="game-config">
<input type="hidden" name="_token" value="{{ csrf_token('game_start') }}">
<div class="config-panel">
{% if app.user %}
<div class="config-section">
<label class="config-toggle">
<span class="config-toggle-label">Films vus</span>
<input type="checkbox" name="watched_only" value="1" class="toggle-switch">
</label>
</div>
{% endif %}
<div class="config-section">
<div class="config-section-title">Paramètres des indices</div>
<div class="config-hint-types">
<label class="config-checkbox">
<input type="checkbox" name="hint_film" value="1" checked
data-game-config-target="hintType">
Film
</label>
<label class="config-checkbox">
<input type="checkbox" name="hint_character" value="1" checked
data-game-config-target="hintType">
Rôle
</label>
<label class="config-checkbox">
<input type="checkbox" name="hint_award" value="1" checked
data-game-config-target="hintType"
data-action="change->game-config#toggleAwardSection">
Récompense
</label>
</div>
<div class="config-award-types" data-game-config-target="awardSection">
<div class="config-section-subtitle">Récompenses</div>
<div class="config-award-list">
<label class="config-checkbox">
<input type="checkbox" checked
data-game-config-target="allAwards"
data-action="change->game-config#toggleAllAwards">
Toutes les récompenses
</label>
{% for awardType in awardTypes %}
<label class="config-checkbox">
<input type="checkbox" name="award_types[]"
value="{{ awardType.id }}" checked
data-game-config-target="awardType"
data-action="change->game-config#syncAllAwards">
{{ awardType.name }}
</label>
{% endfor %}
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-start">Commencer une partie</button>
</form>
<div class="start-loader" id="start-loader"></div>
@@ -66,6 +122,11 @@
<a href="{{ path('app_login') }}">Connectez-vous</a> pour importer vos propres films
</p>
{% endif %}
{% for message in app.flashes('error') %}
<div class="flash-error">{{ message }}</div>
{% endfor %}
<script>
document.getElementById('start-form').addEventListener('submit', function () {
this.style.display = 'none';