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}`);
}