193 lines
10 KiB
Twig
193 lines
10 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block body %}
|
|
{% if game %}
|
|
<div class="game-container">
|
|
<div class="game-actions">
|
|
{% if game.status == constant('App\\Entity\\Game::STATUS_IN_PROGRESS') %}
|
|
<div class="abandon-wrapper">
|
|
<button type="button" class="btn btn-abandon" id="abandon-trigger">Abandonner</button>
|
|
<div class="abandon-popover" id="abandon-popover">
|
|
<p class="abandon-popover-text">Êtes-vous sûr de vouloir abandonner ?</p>
|
|
<div class="abandon-popover-actions">
|
|
<form method="post" action="{{ path('app_game_abandon', {id: game.id}) }}">
|
|
<input type="hidden" name="_token" value="{{ csrf_token('game_abandon') }}">
|
|
<button type="submit" class="btn btn-abandon-confirm">Abandonner</button>
|
|
</form>
|
|
<button type="button" class="btn btn-abandon-cancel" id="abandon-cancel">Non, continuer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
var trigger = document.getElementById('abandon-trigger');
|
|
var popover = document.getElementById('abandon-popover');
|
|
var cancel = document.getElementById('abandon-cancel');
|
|
trigger.addEventListener('click', function() {
|
|
popover.classList.toggle('open');
|
|
});
|
|
cancel.addEventListener('click', function() {
|
|
popover.classList.remove('open');
|
|
});
|
|
document.addEventListener('click', function(e) {
|
|
if (!popover.contains(e.target) && e.target !== trigger) {
|
|
popover.classList.remove('open');
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
{% else %}
|
|
<div class="game-result-banner">
|
|
<span>Partie abandonnée, voici la solution.</span>
|
|
<a href="{{ path('app_homepage') }}" class="btn btn-primary">Nouvelle partie</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div {{ react_component('GameGrid', {
|
|
grid: grid,
|
|
width: width,
|
|
middle: middle,
|
|
revealed: game.status == constant('App\\Entity\\Game::STATUS_ABANDONED'),
|
|
}) }}></div>
|
|
|
|
<div class="game-footer">
|
|
<a href="https://git.lclr.dev/thibaud-lclr/ltbxd-actorle/issues/new?template=.gitea%2fissue_template%2fbug_report.yaml&title={{ ('Bug — Game #' ~ game.id)|url_encode }}" class="btn-bug-report" target="_blank" rel="noopener">
|
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="8" cy="8" r="7"/>
|
|
<line x1="8" y1="5" x2="8" y2="9"/>
|
|
<circle cx="8" cy="11.5" r="0.5" fill="currentColor" stroke="none"/>
|
|
</svg>
|
|
Signaler un bug
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="game-start-container">
|
|
<form method="post" action="{{ path('app_game_start') }}" id="start-form"
|
|
data-controller="game-config"
|
|
data-game-config-bucket-size-value="20">
|
|
<input type="hidden" name="_token" value="{{ csrf_token('game_start') }}">
|
|
|
|
<div class="config-panel">
|
|
<div class="config-section">
|
|
<div class="config-section-title">Acteurs</div>
|
|
<div class="config-range">
|
|
<span class="config-range-label">Tranche de popularité</span>
|
|
<span class="config-range-value" data-game-config-target="popularityValue">1-10</span>
|
|
</div>
|
|
<div class="config-dual-range">
|
|
<div class="config-dual-range-track"></div>
|
|
<div class="config-dual-range-fill" data-game-config-target="popularityFill"></div>
|
|
<input
|
|
id="min-popularity"
|
|
type="range"
|
|
name="popularity_min_bucket"
|
|
min="1"
|
|
max="10"
|
|
step="1"
|
|
value="1"
|
|
class="config-range-input config-range-input-min"
|
|
data-game-config-target="popularityMinInput"
|
|
data-action="input->game-config#syncPopularityRange"
|
|
>
|
|
<input
|
|
id="max-popularity"
|
|
type="range"
|
|
name="popularity_max_bucket"
|
|
min="1"
|
|
max="10"
|
|
step="1"
|
|
value="10"
|
|
class="config-range-input config-range-input-max"
|
|
data-game-config-target="popularityMaxInput"
|
|
data-action="input->game-config#syncPopularityRange"
|
|
>
|
|
</div>
|
|
<div class="config-range-scale" aria-hidden="true">
|
|
<span>1</span>
|
|
<span>5</span>
|
|
<span>10</span>
|
|
</div>
|
|
<p class="config-help" data-game-config-target="popularitySummary">
|
|
Tous les acteurs.
|
|
</p>
|
|
</div>
|
|
|
|
{% 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"
|
|
data-action="change->game-config#enforceMinOneChecked">
|
|
Film
|
|
</label>
|
|
<label class="config-checkbox">
|
|
<input type="checkbox" name="hint_character" value="1" checked
|
|
data-game-config-target="hintType"
|
|
data-action="change->game-config#enforceMinOneChecked">
|
|
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#enforceMinOneChecked">
|
|
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>
|
|
{% if not app.user %}
|
|
<p class="start-login-hint">
|
|
<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';
|
|
document.getElementById('start-loader').style.display = 'block';
|
|
});
|
|
</script>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|