Provide buttons from server

marein · Nov 2, 2024 · 91cfd5f · 91cfd5f
1 parent 6cbe4d2
commit 91cfd5f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>