Restyle look and feel of the copy game link button

This commit is contained in:
sepia 2025-07-20 13:06:00 -05:00
parent badbe1f749
commit c112fa99cf
8 changed files with 99 additions and 27 deletions

View file

@ -1,13 +1,30 @@
function copyGameLink() {
const gameLinkInput = document.getElementById('game-link');
if (gameLinkInput) {
navigator.clipboard
.writeText(gameLinkInput.value)
.then(() => {
alert('Game link copied to clipboard!');
})
.catch((err) => {
console.error('Failed to copy link: ', err);
});
}
const gameId = document.querySelector('meta[name="gameId"]').content;
const gameLink = `${window.location.origin}${window.location.pathname}?gameId=${gameId}`;
navigator.clipboard.writeText(gameLink)
.then(() => {
const copyLinkButton = document.getElementById('copy-link-button');
const copyLinkText = document.getElementById('copy-link-text');
const originalIconSrc = '/icons/clipboard-copy.svg';
const originalTextContent = 'Click to copy game link!';
if (window.copyButtonTimeoutId) {
clearTimeout(window.copyButtonTimeoutId);
}
copyLinkButton.querySelector('img').src = '/icons/copy-success.svg';
copyLinkText.textContent = 'Game link copied!';
copyLinkButton.classList.add('copied-state');
window.copyButtonTimeoutId = setTimeout(() => {
copyLinkButton.querySelector('img').src = originalIconSrc;
copyLinkText.textContent = originalTextContent;
copyLinkButton.classList.remove('copied-state');
window.copyButtonTimeoutId = null;
}, 3000);
})
.catch(err => {
console.error('Failed to copy link: ', err);
});
}

View file

@ -19,13 +19,6 @@ gameContainer.setAttribute('ws-connect', wsUrl);
// Tell HTMX to connect the WebSocket
htmx.trigger(gameContainer, ' and connect');
// Update the game link input
const gameLinkInput = document.getElementById('game-link');
if (!gameLinkInput) {
console.error('Missing game-link element.');
}
gameLinkInput.value =
window.location.origin + window.location.pathname + `?gameId=${gameId}`;
// Update the WebSocket status indicator
const wsStatusDiv = document.getElementById('ws-status');