glitch-university/gupi-osint-board
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Front-page enrolment / sign-in + character screen (auth slice 2)

Browse Source 
The splash now requires a signed-in investigator: a rudimentary character
screen (display name + handle + password, with a placeholder avatar) enrols
or signs in, then reveals the case picker. GET /api/auth/me gates the front
door; the signed-in investigator's name/avatar and a sign-out show on the
splash. /node and ?resume paths are unaffected.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
gitprov
2026-08-22 21:45:38 +02:00
co-authored by Claude Opus 4.8
parent ce0e82f7fb
commit f4c9d30505
2 changed files with 85 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+18
View File
@@ -808,3 +808,21 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.dialogue-capture:hover { border-color: #cdea6a; color: #eafaa0; }
/* A note torn to the board reads as handwriting too. */
.evidence-card.note .card-content p { font-family: "Reenie Beanie", cursive; font-size: 19px; line-height: 1.05; color: #26356b; }
/* === Player auth + character screen (src/play.tsx) ================= */
.auth-plate { gap: 4px; }
.auth-tabs { display: flex; gap: 8px; margin: 22px 0 6px; }
.auth-tabs button { background: #0e2a24; border: 1px solid #3c5a52; color: #9bb0a9; font: 10px IBM Plex Mono, monospace; letter-spacing: .12em; padding: 7px 14px; cursor: pointer; }
.auth-tabs button.on { border-color: #d58a46; color: #f6ead9; }
.auth-avatar { width: 64px; height: 64px; margin: 12px 0 6px; display: grid; place-items: center; border: 2px dashed #6f8f85; border-radius: 50%; color: #cfe8df; font: 700 26px Special Elite, serif; background: #0a211d; }
.auth-fields { display: flex; flex-direction: column; gap: 12px; width: min(320px, 84vw); margin: 8px 0 4px; }
.auth-fields label { display: flex; flex-direction: column; gap: 5px; font: 9px IBM Plex Mono, monospace; letter-spacing: .18em; color: #7f9a92; text-transform: uppercase; }
.auth-fields input { background: #08201b; border: 1px solid #3c5a52; color: #e4e9e4; font: 14px IBM Plex Mono, monospace; padding: 9px 11px; outline: none; }
.auth-fields input:focus { border-color: #6f8f85; }
.auth-error { margin: 4px 0 0; color: #e88a4a; font: 11px IBM Plex Mono, monospace; }
.auth-plate .splash-button { margin-top: 14px; }
/* investigator identity on the case-file splash */
.splash-investigator { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; color: #cfe8df; font: 13px IBM Plex Mono, monospace; letter-spacing: .1em; }
.splash-avatar { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #6f8f85; border-radius: 50%; font: 700 13px Special Elite, serif; color: #e7b57e; }
.splash-signout { margin-left: 6px; background: none; border: none; color: #6f8f85; font: 10px IBM Plex Mono, monospace; letter-spacing: .1em; cursor: pointer; text-decoration: underline; }
.splash-signout:hover { color: #d58a46; }