From 3e912b94588a073489208f3d5406e2e829bba4a2 Mon Sep 17 00:00:00 2001
From: Tim McCarthy <thoomfish@gmail.com>
Date: Fri, 10 Jul 2026 19:12:03 -0700
Subject: [PATCH] Make join codes easy to copy

---
 frontend/src/assets/css/admin.css         | 25 +++++++++++++++++++++++
 frontend/src/assets/css/lobby.css         |  5 +++++
 frontend/src/components/LobbyPhase.svelte | 16 +++++++++++++++
 frontend/src/lib/changelog.js             |  9 +++++++-
 frontend/src/pages/Admin.svelte           | 20 ++++++++++++++++--
 5 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/frontend/src/assets/css/admin.css b/frontend/src/assets/css/admin.css
index 98e304e..30c9aa4 100644
--- a/frontend/src/assets/css/admin.css
+++ b/frontend/src/assets/css/admin.css
@@ -39,10 +39,28 @@
     min-width: 10.5rem;
     padding: 0.85rem 1.1rem 0.95rem;
     background: color-mix(in srgb, var(--accent) 12%, var(--well));
+    color: var(--text);
     border: 2px solid var(--accent);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-soft);
+    font: inherit;
     text-align: center;
+    cursor: pointer;
+    transition: var(--transition-smooth);
+}
+
+.admin-join-code:hover {
+    background: color-mix(in srgb, var(--accent) 20%, var(--well));
+    transform: translateY(-1px);
+}
+
+.admin-join-code:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
+    outline-offset: 2px;
+}
+
+.admin-join-code.copied {
+    border-color: var(--success);
 }
 
 .admin-join-code-label {
@@ -65,6 +83,13 @@
     letter-spacing: 0.16em;
 }
 
+.admin-join-code-hint {
+    display: block;
+    margin-top: 0.35rem;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+}
+
 @media (max-width: 600px) {
     .admin-summary {
         flex-direction: column;
diff --git a/frontend/src/assets/css/lobby.css b/frontend/src/assets/css/lobby.css
index 86dc8f2..12ab9a0 100644
--- a/frontend/src/assets/css/lobby.css
+++ b/frontend/src/assets/css/lobby.css
@@ -38,6 +38,11 @@
     margin-bottom: 0.5rem;
 }
 
+.lobby-join-code-item {
+    display: flex;
+    justify-content: center;
+}
+
 .copy-container {
     display: flex;
     gap: 0.5rem;
diff --git a/frontend/src/components/LobbyPhase.svelte b/frontend/src/components/LobbyPhase.svelte
index b5daaf7..3273f8c 100644
--- a/frontend/src/components/LobbyPhase.svelte
+++ b/frontend/src/components/LobbyPhase.svelte
@@ -58,6 +58,22 @@
     </div>
     
     <div class="links-box glass-panel">
+        {#if state.player.is_admin}
+        <div class="link-item lobby-join-code-item">
+            <button
+                type="button"
+                class="admin-join-code"
+                class:copied={copiedLink === 'code'}
+                aria-label="Copy join code {state.game.join_code}"
+                on:click={() => copyLink('code', state.game.join_code)}
+            >
+                <span class="admin-join-code-label">Join Code</span>
+                <strong>{state.game.join_code}</strong>
+                <span class="admin-join-code-hint">{copiedLink === 'code' ? '✓ Copied!' : 'Click to copy'}</span>
+            </button>
+        </div>
+        {/if}
+
         <div class="link-item">
             <h4>Share Join Link:</h4>
             <div class="copy-container">
diff --git a/frontend/src/lib/changelog.js b/frontend/src/lib/changelog.js
index 83cde4a..464847c 100644
--- a/frontend/src/lib/changelog.js
+++ b/frontend/src/lib/changelog.js
@@ -6,10 +6,17 @@
 //   - Add a CHANGELOG entry only when a commit changes something players can
 //     see. Skip refactors, tests, and tooling. Keep wording player-facing.
 
-export const VERSION = 22;
+export const VERSION = 23;
 
 // Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
 export const CHANGELOG = [
+    {
+        version: 23,
+        date: '2026-07-10',
+        changes: [
+            'Admins can now click the join code to copy it, and the code is available directly from the lobby.',
+        ],
+    },
     {
         version: 21,
         date: '2026-07-10',
diff --git a/frontend/src/pages/Admin.svelte b/frontend/src/pages/Admin.svelte
index a7890ec..7f572b1 100644
--- a/frontend/src/pages/Admin.svelte
+++ b/frontend/src/pages/Admin.svelte
@@ -23,6 +23,8 @@
     let copiedTimer = null;
     let copiedInvite = false;
     let copiedInviteTimer = null;
+    let copiedJoinCode = false;
+    let copiedJoinCodeTimer = null;
 
     $: setPageTitle('Admin', data?.game?.crew_name);
 
@@ -48,6 +50,13 @@
         copiedInviteTimer = setTimeout(() => { copiedInvite = false; }, 2000);
     }
 
+    function copyJoinCode() {
+        navigator.clipboard.writeText(data.game.join_code);
+        copiedJoinCode = true;
+        clearTimeout(copiedJoinCodeTimer);
+        copiedJoinCodeTimer = setTimeout(() => { copiedJoinCode = false; }, 2000);
+    }
+
     onMount(() => {
         // Try to load admin_key from local storage
         adminKey = localStorage.getItem(`admin_key_${gameId}`) || '';
@@ -123,10 +132,17 @@
                     <p><strong>Phase:</strong> {data.game.phase}</p>
                     <p><strong>Admin Key:</strong> <span class="admin-key-chip">{data.game.admin_key}</span></p>
                 </div>
-                <div class="admin-join-code" aria-label="Join code {data.game.join_code}">
+                <button
+                    type="button"
+                    class="admin-join-code"
+                    class:copied={copiedJoinCode}
+                    aria-label="Copy join code {data.game.join_code}"
+                    on:click={copyJoinCode}
+                >
                     <span class="admin-join-code-label">Join Code</span>
                     <strong>{data.game.join_code}</strong>
-                </div>
+                    <span class="admin-join-code-hint">{copiedJoinCode ? '✓ Copied!' : 'Click to copy'}</span>
+                </button>
             </div>
 
             {#if error}