Ayo
9e1114be78
Extract the leaderboard into a generic, backend-agnostic package and add rolling Today/Week/Month/All-Time windows, a web component, and local-first development against the Firestore emulator. Package (leaderboard/): - LeaderBoardService: backend-agnostic core via a storage-adapter seam, with Firebase and Supabase adapters (Supabase client injected, no added dep) - Rolling time windows (last 24h / 7d / 30d) with hover tooltips; top-N by score - <cozy-leaderboard> web component built on web-component-base: compose the UI in HTML, configure the backend once in JS - Every user-facing string is configurable (labels, tooltips, empty/loading/ error messages, anonymous name) so i18n lives in the app; README + CONFIGURATION App (mnswpr.com): - Compose the board declaratively in index.html via <cozy-leaderboard> - Nickname + randomized greeting bar; score submission through the element - Legends: the current all-time leaders frozen into a static /legends page - Firebase config and leaderboard namespace via Vite env vars; emulator-first local dev (VITE_FIRESTORE_EMULATOR) Firebase schema-as-code: - firebase.json, .firebaserc, firestore.rules (public reads, create-only scores, no client updates/deletes, namespace-generalized), empty indexes (rolling windows need none) - prod (mw-*) vs dev/test (mw-test-*) separation by collection namespace - emulator config, seed script, and docs (firebase-leaderboards.md, leaderboard-env-migration.md, AYO.md) Utils/tests: UTC date-bucket helper (retained as metadata) with Vitest coverage. Reviewed-on: git.ayo.run:3000/ Co-authored-by: Ayo <ayo@ayco.io> Co-committed-by: Ayo <ayo@ayco.io>
45 lines
717 B
CSS
45 lines
717 B
CSS
/* helpers */
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
.clear-both {
|
|
clear: both;
|
|
}
|
|
|
|
body {
|
|
background: black;
|
|
color: #DDDDDD;
|
|
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
|
|
text-align: center;
|
|
}
|
|
|
|
em {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#body-wrapper {
|
|
display: inline-block;
|
|
}
|
|
|
|
#greeting {
|
|
margin: 10px auto;
|
|
font-size: 0.95em;
|
|
color: #DDDDDD;
|
|
}
|
|
|
|
#legends-link {
|
|
margin: 20px auto;
|
|
}
|
|
|
|
#legends-link a {
|
|
color: #DDDDDD;
|
|
text-decoration-color: orange;
|
|
transition: 500ms ease-in-out;
|
|
}
|
|
|
|
#legends-link a:hover {
|
|
text-decoration-thickness: 2px;
|
|
}
|