Skip to content

Revamp lobby lobby UI #164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackandcarter merged 1 commit into from
Nov 23, 2025
Merged

Revamp lobby lobby UI #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
288 changes: 181 additions & 107 deletions webapp/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,131 +7,205 @@
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<header>
<h1>AdventureBot Web Lobby</h1>
<p>Prototype web interface for creating and joining dungeon runs.</p>
<div id="status"></div>
</header>

<main>
<section class="panel">
<h2>Create a Lobby</h2>
<form id="create-room-form">
<div class="field">
<label for="ownerName">Owner name</label>
<input id="ownerName" name="ownerName" type="text" required />
<div class="page-shell">
<header class="hero">
<div class="hero-copy">
<p class="eyebrow">AdventureBot Web</p>
<h1>Lobby Command Center</h1>
<p class="lede">
Coordinate dungeon runs, watch the lobby feed, and jump into active sessions with a single click.
</p>
<div class="hero-actions">
<button class="pill-button" data-scroll="#create-room-form">Create New Game</button>
<button class="pill-button ghost" data-scroll="#load-session-form">Load Session</button>
<button class="pill-button ghost" data-scroll="#difficulty-cards">View Difficulties</button>
</div>

<div class="field">
<label for="difficulty">Difficulty</label>
<select id="difficulty" name="difficulty">
<option disabled selected>Loading difficulties…</option>
</select>
</div>
<div class="status-card">
<div class="status-dot"></div>
<div>
<p class="eyebrow">Lobby heartbeat</p>
<p id="status" class="status-text">Connecting…</p>
</div>
</div>
</header>

<div class="field">
<label for="maxPlayers">Max players</label>
<input id="maxPlayers" name="maxPlayers" type="number" min="1" max="10" value="4" />
</div>
<section class="stat-grid">
<div class="stat-card" id="stat-rooms">
<p class="eyebrow">Rooms</p>
<strong>—</strong>
<span>Active sessions</span>
</div>
<div class="stat-card" id="stat-players">
<p class="eyebrow">Players</p>
<strong>—</strong>
<span>Adventurers seated</span>
</div>
<div class="stat-card" id="stat-waiting">
<p class="eyebrow">Ready to start</p>
<strong>—</strong>
<span>Waiting rooms</span>
</div>
</section>

<div class="field checkbox">
<input id="allowJoinMidgame" name="allowJoinMidgame" type="checkbox" checked />
<label for="allowJoinMidgame">Allow join mid-dungeon</label>
<main class="content-grid">
<section class="panel glass feed-panel">
<div class="panel-heading">
<div>
<p class="eyebrow">Live Activity</p>
<h2>Lobby stream</h2>
</div>
<button id="refresh-lobby" class="pill-button ghost">Refresh</button>
</div>
<div id="chat" class="feed-list"></div>
<form id="chat-form" class="chat-form">
<input id="chat-author" name="chat-author" type="text" placeholder="Display name" required />
<input id="chat-body" name="chat-body" type="text" placeholder="Share an update or tag a session…" required />
<input id="chat-session" name="chat-session" type="text" placeholder="Session ID (optional)" />
<button type="submit">Send</button>
</form>
</section>

<div class="field">
<label for="password">Password (optional)</label>
<input id="password" name="password" type="password" placeholder="min 4 characters" />
<section class="panel glass">
<div class="panel-heading">
<div>
<p class="eyebrow">Host a run</p>
<h2>Create a Lobby</h2>
</div>
<span class="pill subtle">Owner tools</span>
</div>
<form id="create-room-form">
<div class="field">
<label for="ownerName">Owner name</label>
<input id="ownerName" name="ownerName" type="text" required />
</div>

<button type="submit">Create lobby</button>
</form>
<div id="create-room-result" class="result"></div>
</section>
<div class="field">
<label for="difficulty">Difficulty</label>
<select id="difficulty" name="difficulty">
<option disabled selected>Loading difficulties…</option>
</select>
</div>

<section class="panel">
<h2>Dungeon settings (mirrors database)</h2>
<p class="muted">Difficulties and room types come from AdventureBot's database tables, not hard-coded defaults.</p>
<div id="difficulty-cards" class="grid"></div>
<div id="legend" class="legend"></div>
</section>
<div class="inline-fields">
<div class="field">
<label for="maxPlayers">Max players</label>
<input id="maxPlayers" name="maxPlayers" type="number" min="1" max="10" value="4" />
</div>
<div class="field">
<label for="password">Password</label>
<input id="password" name="password" type="password" placeholder="Optional" />
</div>
</div>

<section class="panel">
<h2>Lobby Rooms</h2>
<button id="refresh-lobby">Refresh lobby</button>
<div id="rooms"></div>
</section>
<div class="field checkbox">
<input id="allowJoinMidgame" name="allowJoinMidgame" type="checkbox" checked />
<label for="allowJoinMidgame">Allow join mid-dungeon</label>
</div>

<section class="panel">
<h2>Lobby Chat</h2>
<div id="chat" class="scrollable"></div>
<form id="chat-form">
<div class="field">
<label for="chat-author">Name</label>
<input id="chat-author" name="chat-author" type="text" required />
</div>
<div class="field">
<label for="chat-body">Message</label>
<input id="chat-body" name="chat-body" type="text" required />
</div>
<div class="field">
<label for="chat-session">Session ID (optional)</label>
<input id="chat-session" name="chat-session" type="text" placeholder="Session to link" />
</div>
<button type="submit">Send message</button>
</form>
</section>
<button type="submit" class="primary">Create lobby</button>
</form>
<div id="create-room-result" class="result"></div>
</section>

<section class="panel">
<h2>Join a Session</h2>
<form id="join-form">
<div class="field">
<label for="join-session-id">Session ID</label>
<input id="join-session-id" name="join-session-id" type="text" required />
</div>
<div class="field">
<label for="join-name">Player name</label>
<input id="join-name" name="join-name" type="text" required />
<section class="panel glass">
<div class="panel-heading">
<div>
<p class="eyebrow">Browse</p>
<h2>Lobby Rooms</h2>
</div>
<span class="pill subtle">Live</span>
</div>
<div class="field">
<label for="join-password">Password (if required)</label>
<input id="join-password" name="join-password" type="password" />
<div id="rooms" class="stack"></div>
</section>

<section class="panel glass">
<div class="panel-heading">
<div>
<p class="eyebrow">Join</p>
<h2>Join a Session</h2>
</div>
<span class="pill subtle">Party seat</span>
</div>
<button type="submit">Join session</button>
</form>
<div id="join-result" class="result"></div>
</section>
<form id="join-form">
<div class="field">
<label for="join-session-id">Session ID</label>
<input id="join-session-id" name="join-session-id" type="text" required />
</div>
<div class="field">
<label for="join-name">Player name</label>
<input id="join-name" name="join-name" type="text" required />
</div>
<div class="field">
<label for="join-password">Password (if required)</label>
<input id="join-password" name="join-password" type="password" />
</div>
<button type="submit" class="primary">Join session</button>
</form>
<div id="join-result" class="result"></div>
</section>

<section class="panel">
<h2>Session State</h2>
<form id="load-session-form">
<div class="field">
<label for="session-id">Session ID</label>
<input id="session-id" name="session-id" type="text" required />
<section class="panel glass">
<div class="panel-heading">
<div>
<p class="eyebrow">Session tools</p>
<h2>Load &amp; Start</h2>
</div>
<span class="pill subtle">Inspect</span>
</div>
<button type="submit">Load session</button>
</form>
<form id="start-session-form">
<div class="field">
<label for="start-session-id">Session ID</label>
<input id="start-session-id" name="start-session-id" type="text" required />
<form id="load-session-form" class="stacked-form">
<div class="field">
<label for="session-id">Session ID</label>
<input id="session-id" name="session-id" type="text" required />
</div>
<button type="submit" class="ghost">Load session</button>
</form>
<form id="start-session-form" class="stacked-form">
<div class="field">
<label for="start-session-id">Session ID</label>
<input id="start-session-id" name="start-session-id" type="text" required />
</div>
<div class="field">
<label for="start-player-id">Owner player ID</label>
<input
id="start-player-id"
name="start-player-id"
type="text"
placeholder="Returned when you create the lobby"
required
/>
</div>
<button type="submit" class="primary">Start run</button>
</form>
<div id="start-result" class="result"></div>
<div id="session" class="session-panel"></div>
</section>

<section class="panel glass full-span">
<div class="panel-heading">
<div>
<p class="eyebrow">Difficulty presets</p>
<h2>Dungeon settings (mirrors database)</h2>
<p class="muted">Difficulties and room types come from AdventureBot's database tables.</p>
</div>
<span class="pill subtle">Reference</span>
</div>
<div class="field">
<label for="start-player-id">Owner player ID</label>
<input
id="start-player-id"
name="start-player-id"
type="text"
placeholder="Returned when you create the lobby"
required
/>
<div id="difficulty-cards" class="grid"></div>
<div id="legend" class="legend"></div>
</section>

<section class="panel glass">
<div class="panel-heading">
<div>
<p class="eyebrow">Hosts</p>
<h2>Online users</h2>
</div>
<span class="pill subtle">Lobby</span>
</div>
<button type="submit">Start run</button>
</form>
<div id="start-result" class="result"></div>
<div id="session"></div>
</section>
</main>
<div id="online-users" class="stack muted"></div>
</section>
</main>
</div>

<template id="room-template">
<div class="room-card">
Expand Down
Loading
Loading