Combine Rules and Admin corner links into one upper-right menu

Replace the fixed Rules link (upper-left) and the creator-only Admin
link (upper-right) with a single collapsible ☰ Menu in the upper right,
leaving the event log alone in its corner. CornerMenu always lists the
Rules link; pages can contribute context-specific entries through the
extraMenuLinks store, which Dashboard uses for the creator-only Admin
link. This gives future misc sub-pages a home without eating more
screen corners.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-06-12 01:47:56 -07:00
parent 4fcd2b693c
commit b72aea9747
4 changed files with 105 additions and 45 deletions

View File

@@ -1,7 +1,8 @@
<script>
import { onMount, onDestroy } from 'svelte';
import { apiRequest } from '../lib/api';
import { extraMenuLinks } from '../lib/menu';
import LobbyPhase from '../components/LobbyPhase.svelte';
import CharacterCreationPhase from '../components/CharacterCreationPhase.svelte';
import SceneSetupPhase from '../components/SceneSetupPhase.svelte';
@@ -34,8 +35,16 @@
intervalId = setInterval(fetchState, 2000);
});
// Surface the creator-only Admin link in the corner menu
$: extraMenuLinks.set(
state?.player?.is_creator
? [{ label: '🛠️ Admin', href: `#/game/${gameId}/admin`, title: 'Open the Admin Panel' }]
: []
);
onDestroy(() => {
if (intervalId) clearInterval(intervalId);
extraMenuLinks.set([]);
});
</script>
@@ -65,10 +74,6 @@
</div>
<EventLog {state} />
{#if state.player.is_creator}
<a class="admin-corner-link" href="#/game/{gameId}/admin" title="Open the Admin Panel">🛠️ Admin</a>
{/if}
{:else if !error}
<div class="loading-container">
<p>Loading game state...</p>
@@ -76,24 +81,6 @@
{/if}
<style>
.admin-corner-link {
position: fixed;
top: 12px;
right: 16px;
z-index: 1001;
padding: 6px 14px;
border-radius: 16px;
background: rgba(10, 15, 25, 0.9);
border: 1px solid var(--gold, #d4af37);
color: var(--gold, #d4af37);
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
font-family: var(--font-heading);
}
.admin-corner-link:hover {
background: rgba(212, 175, 55, 0.15);
}
.loading-container {
display: flex;
justify-content: center;