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>
<div id="game-link-container"> <div id="game-link-container">
<button id="copy-link-button" onclick="copyGameLink()"> <button id="copy-link-button" onclick="copyGameLink()">
<img <svg class="icon" alt="Copy">
src="/icons/clipboard-copy.svg" <use href="/icons/clipboard-copy.svg"></use>
alt="Copy Game Link" </svg>
class="icon"
/>
<span id="copy-link-text">Click to copy game link!</span> <span id="copy-link-text">Click to copy game link!</span>
</button> </button>
</div> </div>

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

@ -14,12 +14,12 @@ function copyGameLink() {
clearTimeout(window.copyButtonTimeoutId); clearTimeout(window.copyButtonTimeoutId);
} }
copyLinkButton.querySelector('img').src = '/icons/copy-success.svg'; copyLinkButton.querySelector('use').href = '/icons/copy-success.svg';
copyLinkText.textContent = 'Game link copied!'; copyLinkText.textContent = 'Game link copied!';
copyLinkButton.classList.add('copied-state'); copyLinkButton.classList.add('copied-state');
window.copyButtonTimeoutId = setTimeout(() => { window.copyButtonTimeoutId = setTimeout(() => {
copyLinkButton.querySelector('img').src = originalIconSrc; copyLinkButton.querySelector('use').href = originalIconSrc;
copyLinkText.textContent = originalTextContent; copyLinkText.textContent = originalTextContent;
copyLinkButton.classList.remove('copied-state'); copyLinkButton.classList.remove('copied-state');
window.copyButtonTimeoutId = null; window.copyButtonTimeoutId = null;

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

@ -1,4 +1,5 @@
document.addEventListener('htmx:wsAfterMessage', function (e) { document.addEventListener('htmx:wsAfterMessage', function (e) {
console.log(e.detail.message);
const message = JSON.parse(e.detail.message); const message = JSON.parse(e.detail.message);
if (message.type === 'redirect_to_game') { if (message.type === 'redirect_to_game') {
window.location.href = '/?gameId=' + message.gameId; window.location.href = '/?gameId=' + message.gameId;

8
public/style.css
View File

@ -221,9 +221,9 @@ body {
margin-top: 20px; margin-top: 20px;
} }
img.icon { .icon {
width: 1em; width: 1.4em;
height: 1em; height: 1.4em;
vertical-align: middle; vertical-align: middle;
} }
@ -249,6 +249,8 @@ button:hover {
#button-box { #button-box {
display: flex; display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
margin-top: 20px; margin-top: 20px;

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

@ -139,90 +139,94 @@ class GameServer {
} }
public broadcastButtonsToPlayer(conn: PlayerConnection) { public broadcastButtonsToPlayer(conn: PlayerConnection) {
let buttonsHtml; const buttons: JSX.Element[] = [];
if (this.gomoku.status == 'playing' && this.getPlayerColor(conn)) { if (this.gomoku.status == 'playing' && this.getPlayerColor(conn)) {
if (this.takebackRequesterId) { if (this.takebackRequesterId) {
if (this.takebackRequesterId === conn.id) { if (this.takebackRequesterId === conn.id) {
buttonsHtml = ( buttons.push(
<button id="cancel-takeback-request-button" ws-send="click"> <button id="cancel-takeback-request-button" ws-send="click">
Cancel Takeback Request Cancel Takeback Request
</button> </button>,
); );
} else { } else {
buttonsHtml = ( buttons.push(
<div> <button id="accept-takeback-button" ws-send="click">
<button id="accept-takeback-button" ws-send="click"> Accept Takeback
Accept Takeback </button>,
</button> );
<button id="decline-takeback-button" ws-send="click"> buttons.push(
Decline Takeback <button id="decline-takeback-button" ws-send="click">
</button> Decline Takeback
</div> </button>,
); );
} }
} else if (this.drawRequesterId) { } else if (this.drawRequesterId) {
if (this.drawRequesterId === conn.id) { if (this.drawRequesterId === conn.id) {
buttonsHtml = ( buttons.push(
<button id="cancel-draw-request-button" ws-send="click"> <button id="cancel-draw-request-button" ws-send="click">
Cancel Draw Request Cancel Draw Request
</button> </button>,
); );
} else { } else {
buttonsHtml = ( buttons.push(
<div> <button id="accept-draw-button" ws-send="click">
<button id="accept-draw-button" ws-send="click"> Accept Draw
Accept Draw </button>,
</button> );
<button id="decline-draw-button" ws-send="click"> buttons.push(
Decline Draw <button id="decline-draw-button" ws-send="click">
</button> Decline Draw
</div> </button>,
); );
} }
} else { } else {
buttonsHtml = ( buttons.push(
<div> <button id="resign-button" ws-send="click">
<button id="resign-button" ws-send="click"> Resign
Resign </button>,
</button> );
<button id="takeback-button" ws-send="click"> buttons.push(
Takeback <button id="takeback-button" ws-send="click">
</button> Takeback
<button id="draw-button" ws-send="click"> </button>,
Draw );
</button> buttons.push(
</div> <button id="draw-button" ws-send="click">
Draw
</button>,
); );
} }
} else if (this.gomoku.status === 'finished') { } else if (this.gomoku.status === 'finished') {
if (this.rematchRequesterId) { if (this.rematchRequesterId) {
if (this.rematchRequesterId === conn.id) { if (this.rematchRequesterId === conn.id) {
buttonsHtml = ( buttons.push(
<button id="cancel-rematch-request-button" ws-send="click"> <button id="cancel-rematch-request-button" ws-send="click">
Cancel Rematch Request Cancel Rematch Request
</button> </button>,
); );
} else { } else {
buttonsHtml = ( buttons.push(
<div> <button id="accept-rematch-button" ws-send="click">
<button id="accept-rematch-button" ws-send="click"> Accept Rematch
Accept Rematch </button>,
</button> );
<button id="decline-rematch-button" ws-send="click"> buttons.push(
Decline Rematch <button id="decline-rematch-button" ws-send="click">
</button> Decline Rematch
</div> </button>,
); );
} }
} else { } else {
buttonsHtml = ( buttons.push(
<button id="rematch-button" ws-send="click"> <button id="rematch-button" ws-send="click">
Rematch 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}`); console.log(`Sent buttons for game ${this.id} to player ${conn.id}`);
} }