league-of-legends-gui-overhaul/README.md

# League of Legends GUI Overhaul

A React/Vite prototype for a modern, dark, MOBA-/fantasy-inspired client interface. The goal of iteration 1 is a stable base GUI: routing, layout, reusable components, mock data, centralized theme tokens, tests, and documentation.

This project does not use Riot assets and is not a 1:1 clone of the official League of Legends client.

Repository:

```text
https://git.wilkensxl.de/Toxic/league-of-legends-gui-overhaul.git
```

Git SSH remote:

```text
ssh://git@git.wilkensxl.de:2222/Toxic/league-of-legends-gui-overhaul.git
```

## Tech Stack

- React
- Vite
- TypeScript
- React Router
- Vitest
- Testing Library
- CSS Custom Properties

## Setup

For detailed installation steps, see [INSTALL.md](INSTALL.md).

Install dependencies:

```powershell
npm install
```

Start the dev server:

```powershell
npm run dev
```

Build:

```powershell
npm run build
```

Lint/typecheck:

```powershell
npm run lint
```

Run tests:

```powershell
npm test
```

Audit production dependencies:

```powershell
npm run audit
```

CI verification runs on the Gitea runner through `.gitea/workflows/build.yml`.

GUI smoke verification runs on the Gitea runner through `.gitea/workflows/gui-smoke.yml`. It builds the app, starts `vite preview`, opens the UI in Chromium, and uploads a screenshot artifact.

## Project Structure

```text
src/
|-- app/
|-- components/
|   `-- ui/
|-- config/
|-- data/
|-- features/
|-- layouts/
|-- pages/
|-- styles/
|-- test/
`-- types/
```

## Extending The App

Add a page:

1. Create a component in `src/pages/`.
2. Register it in `src/config/routes.tsx`.
3. Add a navigation item in `src/config/navigation.ts` only if it should appear in the sidebar.

Add a navigation item:

1. Add an entry with `id`, `label`, `path`, and optional `iconName`, `section`, `enabled`.
2. Keep sidebar rendering generic; do not hardcode menu entries in `AppShell`.

Adjust theme tokens:

1. Edit `src/styles/theme.css`.
2. Add preset overrides with `[data-theme="preset-name"]`.
3. Prefer tokens over page-level hardcoded colors, spacing, shadows, or radii.

Extend mock data:

1. Add or edit records in `src/data/`.
2. Keep display logic in pages or feature modules, not inside mock files.

## Iteration 1 Includes

- App Shell with header, sidebar, content area, and status footer
- Routes for Home, Play, Champions, Profile, and Settings
- A mock champion detail route at `/champions/:championId`
- A right-side Social Sidebar powered by friend mock data
- Session-only theme presets from Settings
- Prototype Toast flows from header, settings, and social actions
- Base UI components: Button, Panel, SearchInput, Dropdown, Modal, Tabs, Tooltip, Toast
- Mock data for champions, friends, news, and match history
- Central CSS theme tokens
- Smoke tests for rendering, navigation, routing, and core UI components

## Iteration 1 Does Not Include

- Login
- Riot API integration
- Matchmaking
- Persistence
- Full champion detail content beyond the first placeholder route
- Plugin engine
- Final visual polish
- Official Riot or League assets

## Next Iterations

- Polish the App Shell visuals
- Add ability, skin, and progression modules to champion detail pages
- Expand the social sidebar with parties, invites, and richer presence
- Add persisted theme preferences
- Use Modal flows in more page-level actions
- Improve responsive behavior
- Add subtle transitions and animation states
- Plan a lightweight plugin/module extension layer