User Interface Documentation

Documentation for all user-facing application pages within the BattleScore app.
Frontend UX HTML + JavaScript
/public_html/app/

Overview

This section documents the full BattleScore user interface layer, covering all pages located in the /app/ directory.

Each documentation page represents a complete UX feature and combines:

  • HTML structure (layout and components)
  • JavaScript behaviour (logic and API interaction)

Structure

  • One documentation file per feature
  • Features map directly to pages in /app/
  • Navigation is grouped by functional area

UX Architecture Categories

Category Description Examples
Transactional (CRUD) Create, update and manage core data Armies, Units, Profile
Gameplay Real-time interaction with game state Game Setup, Game Play
Analytics Aggregated views and reporting Tournaments, Stats, Performance
Auth Flow Authentication and onboarding flows Login, Signup, Verify
Utility / Tools Import and debugging utilities Import Debug, OWB Import

Design Principles

  • Routerless architecture (file-per-page)
  • API-driven interactions via _api.js
  • Shared configuration via app_config.js
  • Authentication enforced via guard functions
  • Mobile-first responsive design

Core Dependencies

  • /app/_api.js – API wrapper
  • /app/app_config.js – environment configuration
  • Auth guard functions
  • Shared stylesheet

How to use this documentation

  • Select a feature from the left navigation
  • Review:
    • Purpose
    • APIs used
    • UX flow
    • Data rules
  • Use alongside API documentation for full system understanding

Future enhancements

  • Auto-generated navigation
  • Component-level documentation
  • UI state diagrams
  • End-to-end flow mapping (UX + API)