FidelusAleksander / FidelusAleksander/octomatch
Plan: Username leaderboard with localStorage
- Dominant language
- JavaScript
- Stars
- 0
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
# Local Username Leaderboard Plan (OctoMatch)
## Problem
Add a scoring system where players enter a username and leaderboard data is stored in browser `localStorage` (no external auth/backend).
## Current State (from codebase)
- App is frontend-only React + Vite (`src/App.jsx`, `src/components/GameBoard.jsx`).
- Current persistence only stores a single best score in `localStorage` (`src/data/gameStats.js`).
- No leaderboard list, no username capture, no user profile concept.
## Proposed Approach
Implement a local-only leaderboard using usernames + game results saved in `localStorage`.
1. **Data model in localStorage**
- Add a new storage key (e.g., `octomatch-leaderboard-v1`).
- Store entries as array objects: `{ username, moves, damage, completedAt }`.
- Keep ranking order: moves ASC, damage ASC, completedAt ASC.
- Persist only top N entries (recommended: top 10) to keep data small.
2. **Username capture flow**
- Add username input in the HUD (or pre-game prompt) with validation (trim, min/max length, allowed chars).
- Save the last used username in `localStorage` for convenience.
- Disable score submission when username is empty/invalid.
3. **Score submission on win**
- On win event in `GameBoard`, create leaderboard entry using current game stats.
- Insert into leaderboard list, sort by ranking rules, trim to top N, and persist.
- Keep existing `Best` chip behavior intact unless replaced by leaderboard-based best.
4. **Leaderboard UI**
- Add a leaderboard panel under/near the game board.
- Show rank, username, moves, damage, and completion timestamp.
- Handle empty state (no entries yet).
5. **Testing**
- Unit tests for leaderboard insert/sort/trim helpers.
- Component tests for username validation and leaderboard rendering.
- Regression tests to confirm existing game loop (moves/health/win/lose) is unaffected.
## Planned Todo Breakdown
1. Add leaderboard storage helpers in `src/data/gameStats.js` (and tests).
2. Add username input + validation state in `src/components/GameBoard.jsx`.
3. Submit leaderboard entries on win and persist to localStorage.
4. Build leaderboard UI component/section and wire data.
5. Add/update tests for helpers and UI behavior.
## Notes
- This is single-browser/device leaderboard only; data is not shared across users/devices.
- No GitHub authentication or backend service is required for this version.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.