My Games feature
Monolithic page containing both markup and behaviour
Frontend feature
Authenticated UX
/app/games.html
This page provides the main “My Games” experience. It combines page layout, live filtering, game-list rendering, archive/unarchive actions, and routing to setup, play, or breakdown pages inside a single file.
File structure
| Component | Description |
|---|---|
| HTML layout | Defines the page shell, top navigation, filter region, message area and game list container. |
| Inline CSS | Provides page-specific styling for filters, pills, list items, archive state and responsive layout. |
| Inline JavaScript | Implements auth guard, live filtering, archive toggling, API loading, option rebuilding and list rendering. |
This file is currently monolithic and predates the newer split-page architecture used elsewhere.
Purpose
- Show the authenticated user all visible games
- Support fast searching and multi-field filtering
- Show archive state and optionally include archived games
- Route to:
- game setup for setup-status games
- game play for active / ended games
- game breakdown for finalised games
- Allow the creator to archive or unarchive games
Main UI sections
Top bar
- BattleScore logo
- Page title:
My Games - Navigation links:
- Help
- + New Game
- My Armies
- My Performance
- Global Stats
- Profile
- Logout
Header row inside main card
- Game count label (
#counts) - Refresh button
- Clear filters button
Filter panel
The page contains a large structured filter region with automatic live updates.
- Show archived checkbox
- Search text
- Result
- Opponent
- Scenario
- From / To date range
- My race / faction
- Opponent race / faction
- Status
Main list region
- Status / error message box (
#msg) - Games list container (
#gamesList)
Key UX behaviour
- Page loads and auth is enforced using
requireAuthOrRedirect(). - Games are fetched from the backend.
- Filter options are rebuilt dynamically from returned data.
- Typing or changing filters updates the rendered list live.
- Each game card shows status, role, result, scenario, timestamps and race/faction summary where available.
- Buttons route users to the correct next page depending on game status.
- Creators can archive or unarchive directly from the list.
Routing logic
| Condition | Destination |
|---|---|
Game status = setup |
./game_setup.html?game_id=... |
| Any other visible gameplay state | ./game_play.html?game_id=... |
Game status = finalised |
Also show Breakdown button linking to ./game_breakdown.html?game_id=... |
Filtering logic
Filtering is performed entirely client-side after the game list is loaded.
Supported filter dimensions
- archive visibility
- status
- scenario
- opponent name
- result
- my race / faction
- opponent race / faction
- free-text search
- date range
Result logic
The page notes that result is derived from stored final totals:
- win if user beats opponent by more than 100
- loss if opponent beats user by more than 100
- draw otherwise
Key inline JavaScript responsibilities
| Function | Purpose |
|---|---|
show() / hide() | Message region control |
esc() | Escapes HTML before rendering dynamic text |
statusPill() | Builds visual status pill markup |
rolePill() | Builds role pill markup |
resultPill() | Builds result pill markup |
rebuildFilterOptions() | Regenerates select options from returned games |
matchesFilters() | Core client-side filter predicate |
renderList() | Builds the games card list |
applyFiltersLive() | Applies filters + sorting + updates counts |
clearFilters() | Resets all UI filters |
toggleArchive() | Archive/unarchive API action |
loadGames() | Primary loader for backend data |
wireLiveFilters() | Binds input/change listeners |
Visual state rules
- Archived items get reduced emphasis with
.item.archived. - Status pills use colour-coded classes for:
finalisedendedactivesetuparchived
- Role pills visually distinguish creator vs opponent.
- Result pills visually distinguish win / loss / draw.
Backend dependencies
| Endpoint | Purpose |
|---|---|
/games/list.php |
Primary list source for displayed games |
/games/list.php?include_archived=1 |
Includes archived games when the archive toggle is enabled |
/games/archive.php |
Archive or unarchive a game |
Frontend dependencies
| File | Purpose |
|---|---|
./scripts/app_config.js |
Environment-aware frontend configuration |
./_api.js |
Shared API helper, auth helper and request wrapper |
Key DOM hooks
| ID | Purpose |
|---|---|
#counts | Displays visible vs total count |
#msg | Status / error messaging |
#gamesList | Rendered list container |
#fShowArchived | Archive toggle |
#fText | Free text search |
#fResult | Result filter |
#fOpponent | Opponent filter |
#fScenario | Scenario filter |
#fFrom / #fTo | Date range filter |
#fMyRace / #fMyFaction | User-side race/faction filters |
#fOppRace / #fOppFaction | Opponent-side race/faction filters |
#fStatus | Status filter |
Technical notes
- This is a legacy monolithic page with embedded logic.
- The page is already fairly structured, but the inline script is substantial and should eventually be extracted.
- The page relies on a client-side full-list filtering model rather than server-side filter requests.
- Archive visibility intentionally reloads from backend rather than just hiding/showing already loaded data.
Recommended future refactor
When you are ready, split this into:
/app/games.html /app/scripts/games.js
That will align the page with the newer architecture already used elsewhere and make future UX changes safer.