FidelusAleksander / FidelusAleksander/octomatch

Plan: Username leaderboard with localStorage

Open
#4 0 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.