Add phase-aware frontend shell, polling client, and global exception handler
This commit is contained in:
@@ -7,10 +7,87 @@
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<h1>CoopGameChooser</h1>
|
||||
<p>MVP is on the way. API and UI will land here.</p>
|
||||
<header class="hero">
|
||||
<div>
|
||||
<h1>CoopGameChooser</h1>
|
||||
<p class="subtitle">Blind suggestions, blind votes, quick decision.</p>
|
||||
</div>
|
||||
<div class="phase-pill" id="phase-pill">Loading…</div>
|
||||
</header>
|
||||
|
||||
<main class="grid">
|
||||
<section class="card" id="identity-card">
|
||||
<h2>Your Name</h2>
|
||||
<label class="stack">
|
||||
<span class="label">Display name</span>
|
||||
<input id="name-input" maxlength="64" placeholder="Pick a name" />
|
||||
</label>
|
||||
<button id="save-name">Save</button>
|
||||
<p class="hint" id="player-id"></p>
|
||||
</section>
|
||||
|
||||
<section class="card" id="phase-card">
|
||||
<h2>Current Phase</h2>
|
||||
<p id="phase-description">Loading…</p>
|
||||
<p class="hint" id="counts"></p>
|
||||
</section>
|
||||
|
||||
<section class="card" id="actions-card">
|
||||
<div id="suggest-view" class="phase-view hidden">
|
||||
<h2>Suggest (up to 3)</h2>
|
||||
<form id="suggest-form" class="stack">
|
||||
<input name="name" required maxlength="100" placeholder="Game name *" />
|
||||
<input name="genre" maxlength="50" placeholder="Genre" />
|
||||
<textarea name="description" maxlength="500" placeholder="Short description"></textarea>
|
||||
<div class="stack horizontal">
|
||||
<input name="screenshotUrl" maxlength="2048" placeholder="Screenshot URL" />
|
||||
<input name="youtubeUrl" maxlength="2048" placeholder="YouTube URL" />
|
||||
</div>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
<ul id="my-suggestions" class="list"></ul>
|
||||
</div>
|
||||
|
||||
<div id="reveal-view" class="phase-view hidden">
|
||||
<h2>All Suggestions</h2>
|
||||
<ul id="all-suggestions" class="list"></ul>
|
||||
</div>
|
||||
|
||||
<div id="vote-view" class="phase-view hidden">
|
||||
<h2>Vote 0–10</h2>
|
||||
<ul id="vote-list" class="list"></ul>
|
||||
</div>
|
||||
|
||||
<div id="results-view" class="phase-view hidden">
|
||||
<h2>Results</h2>
|
||||
<ol id="results-list" class="list"></ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card" id="admin-card">
|
||||
<h2>Admin</h2>
|
||||
<label class="stack">
|
||||
<span class="label">Admin key</span>
|
||||
<input id="admin-key" type="password" placeholder="X-Admin-Key" />
|
||||
</label>
|
||||
<div class="stack horizontal">
|
||||
<select id="phase-select">
|
||||
<option>Suggest</option>
|
||||
<option>Reveal</option>
|
||||
<option>Vote</option>
|
||||
<option>Results</option>
|
||||
</select>
|
||||
<button id="set-phase">Set phase</button>
|
||||
</div>
|
||||
<div class="stack horizontal">
|
||||
<button id="reset" class="danger">Reset (keep players)</button>
|
||||
<button id="factory-reset" class="danger">Factory reset</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="toast" class="toast hidden"></div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user