Replace copy-link alert() with inline button feedback

The lobby Copy buttons now flip to a transient "✓ Copied" label instead
of popping a modal alert, matching the admin page's copy buttons.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-06-12 01:18:48 -07:00
parent bc867c95a1
commit ed7900656d
2 changed files with 16 additions and 3 deletions

View File

@@ -4,6 +4,15 @@
export let state;
let starting = false;
let copiedLink = null;
let copiedTimer = null;
function copyLink(which, value) {
navigator.clipboard.writeText(value);
copiedLink = which;
clearTimeout(copiedTimer);
copiedTimer = setTimeout(() => { copiedLink = null; }, 2000);
}
async function startGame() {
starting = true;
@@ -39,7 +48,9 @@
<h4>Share Join Link:</h4>
<div class="copy-container">
<input type="text" readonly value="{window.location.origin}/#/game/{state.game.id}/join" class="copy-input" id="join-link-copy">
<button on:click={() => { navigator.clipboard.writeText(document.getElementById('join-link-copy').value); alert('Join link copied!'); }} class="btn btn-secondary btn-small">Copy</button>
<button on:click={() => copyLink('join', document.getElementById('join-link-copy').value)} class="btn btn-secondary btn-small">
{copiedLink === 'join' ? '✓ Copied' : 'Copy'}
</button>
</div>
</div>
@@ -49,7 +60,9 @@
<p class="info-text">Save this admin link! You can use it to recover character sheets if another player loses their connection or link.</p>
<div class="copy-container">
<input type="text" readonly value="{window.location.origin}/#/game/{state.game.id}/admin" class="copy-input admin-input" id="admin-link-copy">
<button on:click={() => { navigator.clipboard.writeText(document.getElementById('admin-link-copy').value); alert('Admin link copied!'); }} class="btn btn-gold btn-small">Copy Admin Link</button>
<button on:click={() => copyLink('admin', document.getElementById('admin-link-copy').value)} class="btn btn-gold btn-small">
{copiedLink === 'admin' ? '✓ Copied' : 'Copy Admin Link'}
</button>
</div>
<div class="mt-4">
<a href="/#/game/{state.game.id}/admin" class="text-sm text-silver underline hover:text-white">Access Admin Panel directly</a>