sepia
/
gomoku
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Refactor button box code a bit, and fix color of copy game link icon

This commit is contained in:
sepia 2025-07-23 15:03:19 -05:00
parent e8bfdaaa30
commit 74bb200f8f
5 changed files with 64 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -24,11 +24,9 @@
</div>
<div id="game-link-container">
<button id="copy-link-button" onclick="copyGameLink()">
<img
src="/icons/clipboard-copy.svg"
alt="Copy Game Link"
class="icon"
/>
<svg class="icon" alt="Copy">
<use href="/icons/clipboard-copy.svg"></use>
</svg>
<span id="copy-link-text">Click to copy game link!</span>
</button>
</div>

4
public/scripts/copy-game-link.js
View File

@ -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;

1
public/scripts/handle-redirects.js
View File

@ -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;

8
public/style.css
View File

@ -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;

102
src/web-socket-handler.tsx
View File

@ -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(
<button id="cancel-takeback-request-button" ws-send="click">
Cancel Takeback Request
</button>
</button>,
);
} else {
buttonsHtml = (
<div>
<button id="accept-takeback-button" ws-send="click">
Accept Takeback
</button>
<button id="decline-takeback-button" ws-send="click">
Decline Takeback
</button>
</div>
buttons.push(
<button id="accept-takeback-button" ws-send="click">
Accept Takeback
</button>,
);
buttons.push(
<button id="decline-takeback-button" ws-send="click">
Decline Takeback
</button>,
);
}
} else if (this.drawRequesterId) {
if (this.drawRequesterId === conn.id) {
buttonsHtml = (
buttons.push(
<button id="cancel-draw-request-button" ws-send="click">
Cancel Draw Request
</button>
</button>,
);
} else {
buttonsHtml = (
<div>
<button id="accept-draw-button" ws-send="click">
Accept Draw
</button>
<button id="decline-draw-button" ws-send="click">
Decline Draw
</button>
</div>
buttons.push(
<button id="accept-draw-button" ws-send="click">
Accept Draw
</button>,
);
buttons.push(
<button id="decline-draw-button" ws-send="click">
Decline Draw
</button>,
);
}
} else {
buttonsHtml = (
<div>
<button id="resign-button" ws-send="click">
Resign
</button>
<button id="takeback-button" ws-send="click">
Takeback
</button>
<button id="draw-button" ws-send="click">
Draw
</button>
</div>
buttons.push(
<button id="resign-button" ws-send="click">
Resign
</button>,
);
buttons.push(
<button id="takeback-button" ws-send="click">
Takeback
</button>,
);
buttons.push(
<button id="draw-button" ws-send="click">
Draw
</button>,
);
}
} else if (this.gomoku.status === 'finished') {
if (this.rematchRequesterId) {
if (this.rematchRequesterId === conn.id) {
buttonsHtml = (
buttons.push(
<button id="cancel-rematch-request-button" ws-send="click">
Cancel Rematch Request
</button>
</button>,
);
} else {
buttonsHtml = (
<div>
<button id="accept-rematch-button" ws-send="click">
Accept Rematch
</button>
<button id="decline-rematch-button" ws-send="click">
Decline Rematch
</button>
</div>
buttons.push(
<button id="accept-rematch-button" ws-send="click">
Accept Rematch
</button>,
);
buttons.push(
<button id="decline-rematch-button" ws-send="click">
Decline Rematch
</button>,
);
}
} else {
buttonsHtml = (
buttons.push(
<button id="rematch-button" ws-send="click">
Rematch
</button>
</button>,
);
}
}
conn.ws.send(<div id="button-box">{buttonsHtml}</div>);
conn.ws.send(<div id="button-box">{buttons}</div>);
console.log(`Sent buttons for game ${this.id} to player ${conn.id}`);
}