diff --git a/index.html b/index.html index e9405d8..80a3e73 100644 --- a/index.html +++ b/index.html @@ -24,11 +24,9 @@ diff --git a/public/scripts/copy-game-link.js b/public/scripts/copy-game-link.js index dc6a700..7e1d966 100644 --- a/public/scripts/copy-game-link.js +++ b/public/scripts/copy-game-link.js @@ -14,12 +14,12 @@ function copyGameLink() { clearTimeout(window.copyButtonTimeoutId); } - copyLinkButton.querySelector('img').src = '/icons/copy-success.svg'; + copyLinkButton.querySelector('use').href = '/icons/copy-success.svg'; copyLinkText.textContent = 'Game link copied!'; copyLinkButton.classList.add('copied-state'); window.copyButtonTimeoutId = setTimeout(() => { - copyLinkButton.querySelector('img').src = originalIconSrc; + copyLinkButton.querySelector('use').href = originalIconSrc; copyLinkText.textContent = originalTextContent; copyLinkButton.classList.remove('copied-state'); window.copyButtonTimeoutId = null; diff --git a/public/scripts/handle-redirects.js b/public/scripts/handle-redirects.js index ba721d9..bc8dbff 100644 --- a/public/scripts/handle-redirects.js +++ b/public/scripts/handle-redirects.js @@ -1,4 +1,5 @@ document.addEventListener('htmx:wsAfterMessage', function (e) { + console.log(e.detail.message); const message = JSON.parse(e.detail.message); if (message.type === 'redirect_to_game') { window.location.href = '/?gameId=' + message.gameId; diff --git a/public/style.css b/public/style.css index 2adbf1e..d256f78 100644 --- a/public/style.css +++ b/public/style.css @@ -221,9 +221,9 @@ body { margin-top: 20px; } -img.icon { - width: 1em; - height: 1em; +.icon { + width: 1.4em; + height: 1.4em; vertical-align: middle; } @@ -249,6 +249,8 @@ button:hover { #button-box { display: flex; + flex-direction: row; + flex-wrap: nowrap; justify-content: center; gap: 10px; margin-top: 20px; diff --git a/src/web-socket-handler.tsx b/src/web-socket-handler.tsx index 7691fd8..51a5f85 100644 --- a/src/web-socket-handler.tsx +++ b/src/web-socket-handler.tsx @@ -139,90 +139,94 @@ class GameServer { } public broadcastButtonsToPlayer(conn: PlayerConnection) { - let buttonsHtml; + const buttons: JSX.Element[] = []; + if (this.gomoku.status == 'playing' && this.getPlayerColor(conn)) { if (this.takebackRequesterId) { if (this.takebackRequesterId === conn.id) { - buttonsHtml = ( + buttons.push( + , ); } else { - buttonsHtml = ( -
- - -
+ buttons.push( + , + ); + buttons.push( + , ); } } else if (this.drawRequesterId) { if (this.drawRequesterId === conn.id) { - buttonsHtml = ( + buttons.push( + , ); } else { - buttonsHtml = ( -
- - -
+ buttons.push( + , + ); + buttons.push( + , ); } } else { - buttonsHtml = ( -
- - - -
+ buttons.push( + , + ); + buttons.push( + , + ); + buttons.push( + , ); } } else if (this.gomoku.status === 'finished') { if (this.rematchRequesterId) { if (this.rematchRequesterId === conn.id) { - buttonsHtml = ( + buttons.push( + , ); } else { - buttonsHtml = ( -
- - -
+ buttons.push( + , + ); + buttons.push( + , ); } } else { - buttonsHtml = ( + buttons.push( + , ); } } - conn.ws.send(
{buttonsHtml}
); + + conn.ws.send(
{buttons}
); console.log(`Sent buttons for game ${this.id} to player ${conn.id}`); }