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:
2
TODO.md
2
TODO.md
@@ -9,7 +9,7 @@
|
||||
## Missing Features
|
||||
|
||||
- [x] **Incomplete admin page.**: The Admin page should include links for players to re-join the game.
|
||||
- [ ] **Less intrusive link copied notification.** When you copy a join link from the lobby page, it pops up an alert() to let you know the link was copied. I'd prefer something more subtle, and more importantly not modal.
|
||||
- [x] **Less intrusive link copied notification.** When you copy a join link from the lobby page, it pops up an alert() to let you know the link was copied. I'd prefer something more subtle, and more importantly not modal.
|
||||
- [ ] **Rules endpoint** Make a nicely formatted HTML version of the rulebook. It should probably also be linked from a help menu somewhere that's always available, rather than only being surfaced on the splash page of the site (which joining players don't even see). Work from "Rats with Gats beta.pdf" rather than "RULEBOOK.md", which is a low fidelity AI summary of the former.
|
||||
|
||||
## Cosmetic
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user