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:

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

Git SSH remote:

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 dependencies:

npm install

Start the dev server:

npm run dev

Build:

npm run build

Lint/typecheck:

npm run lint

Run tests:

npm test

Audit production dependencies:

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

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

Extending The App

Add a page:

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

Add a navigation item:

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

Adjust theme tokens:

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

Extend mock data:

Add or edit records in src/data/.
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