Restyle look and feel of the copy game link button
This commit is contained in:
parent
badbe1f749
commit
c112fa99cf
8 changed files with 99 additions and 27 deletions
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue