From 91cfd5f5a3225549d4e4d5ddd57066962d8cdb5b Mon Sep 17 00:00:00 2001
From: Markus Reinhold <markusreinhold@icloud.com>
Date: Sat, 2 Nov 2024 22:47:20 +0100
Subject: [PATCH] Provide buttons from server

---
 assets/js/Common/ConfirmationButton.js               | 12 ++++--------
 assets/js/ConnectFour/AbortButton.js                 |  4 +---
 assets/js/ConnectFour/ResignButton.js                |  4 +---
 .../Presentation/Http/View/game.html.twig            |  8 ++++++--
 4 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/assets/js/Common/ConfirmationButton.js b/assets/js/Common/ConfirmationButton.js
index 27075516..6cfe0182 100644
--- a/assets/js/Common/ConfirmationButton.js
+++ b/assets/js/Common/ConfirmationButton.js
@@ -4,20 +4,20 @@ customElements.define('confirmation-button', class extends HTMLElement {
     connectedCallback() {
         this._initialChildren = Array.from(this.children);
         this._button = this.querySelector('button');
-        this._onDocumentClickHandler = this._onDocumentClick.bind(this);
+        this._onDocumentClick = e => !this.contains(e.target) && this.reset();
 
         this._button?.addEventListener('click', this._onButtonClick.bind(this));
     }
 
     reset() {
-        document.removeEventListener('click', this._onDocumentClickHandler);
+        document.removeEventListener('click', this._onDocumentClick);
         this.replaceChildren(...this._initialChildren);
         this._button?.removeAttribute('disabled');
         this._button?.classList.remove('btn-loading');
     }
 
     _onButtonClick(e) {
-        setTimeout(() => document.addEventListener('click', this._onDocumentClickHandler), 0);
+        setTimeout(() => document.addEventListener('click', this._onDocumentClick), 0);
 
         this.replaceChildren(html`
             <div class="row row-gap-2">
@@ -49,15 +49,11 @@ customElements.define('confirmation-button', class extends HTMLElement {
     }
 
     _onYesClick(e) {
-        document.removeEventListener('click', this._onDocumentClickHandler);
+        document.removeEventListener('click', this._onDocumentClick);
         this.replaceChildren(...this._initialChildren);
         this._button?.setAttribute('disabled', '');
         this._button?.classList.add('btn-loading');
 
         this.dispatchEvent(new CustomEvent('confirmation-button:yes'));
     }
-
-    _onDocumentClick(e) {
-        !this.contains(e.target) && this.reset();
-    }
 });
diff --git a/assets/js/ConnectFour/AbortButton.js b/assets/js/ConnectFour/AbortButton.js
index 0608c98f..f21d0574 100644
--- a/assets/js/ConnectFour/AbortButton.js
+++ b/assets/js/ConnectFour/AbortButton.js
@@ -6,9 +6,7 @@ customElements.define('connect-four-abort-button', class extends HTMLElement {
     connectedCallback() {
         this.replaceChildren(html`
             <confirmation-button @confirmation-button:yes="${this._onConfirmed.bind(this)}">
-                <button id="abort-game" class="btn btn-outline-danger w-100">
-                    ${this.innerHTML}
-                </button>
+                ${Array.from(this.children)}
             </confirmation-button>
         `);
     }
diff --git a/assets/js/ConnectFour/ResignButton.js b/assets/js/ConnectFour/ResignButton.js
index bf14179f..d8490ba5 100644
--- a/assets/js/ConnectFour/ResignButton.js
+++ b/assets/js/ConnectFour/ResignButton.js
@@ -6,9 +6,7 @@ customElements.define('connect-four-resign-button', class extends HTMLElement {
     connectedCallback() {
         this.replaceChildren(html`
             <confirmation-button @confirmation-button:yes="${this._onConfirmed.bind(this)}">
-                <button class="btn w-100">
-                    ${this.innerHTML}
-                </button>
+                ${Array.from(this.children)}
             </confirmation-button>
         `);
     }
diff --git a/src/WebInterface/Presentation/Http/View/game.html.twig b/src/WebInterface/Presentation/Http/View/game.html.twig
index b1897083..6148c521 100644
--- a/src/WebInterface/Presentation/Http/View/game.html.twig
+++ b/src/WebInterface/Presentation/Http/View/game.html.twig
@@ -79,12 +79,16 @@
                         </div>
                         <div class="col-6">
                             <connect-four-abort-button game-id="{{ game.gameId }}">
-                                Abort
+                                <button id="abort-game" class="btn btn-outline-danger w-100">
+                                    Abort
+                                </button>
                             </connect-four-abort-button>
                         </div>
                         <div class="col-6">
                             <connect-four-resign-button game-id="{{ game.gameId }}">
-                                Resign
+                                <button class="btn w-100">
+                                    Resign
+                                </button>
                             </connect-four-resign-button>
                         </div>
                     </div>