feat: add popover to confirm abandon
This commit is contained in:
@@ -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', {
|
||||
|
||||
Reference in New Issue
Block a user