Initialize League GUI prototype

README.md

@@ -0,0 +1,125 @@
+# 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
+```
+
+## 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
+```
+
+Run tests:
+
+```powershell
+npm test
+```
+
+## 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