ba4616bfeb
Some checks failed
Codex Template Compliance / template-compliance (push) Successful in 5s
GUI Smoke Test / gui-smoke (push) Failing after 23m39s
Release Dry Run / release-dry-run (push) Successful in 16s
Build / build (push) Failing after 27m29s
Scheduled Security Scan / security-scan (push) Failing after 8s
Scheduled Repository Cleanup Check / cleanup-check (push) Successful in 6s
Scheduled Dependency Check / dependency-check (push) Successful in 15s
148 lines
3.4 KiB
Markdown
148 lines
3.4 KiB
Markdown
# 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
|