feat: add popover to confirm abandon

This commit is contained in:
thibaud-leclere
2026-04-01 14:36:41 +02:00
parent fb13a8819d
commit 353ffddeea
2 changed files with 103 additions and 4 deletions

View File

@@ -4,10 +4,37 @@
{% if game %}
<div class="game-container">
<div class="game-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">Abandonner</button>
</form>
<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>
</div>
<div {{ react_component('GameGrid', {