🎮 RiftChanger - League of Legends Skin Manager

A beautiful, modern League of Legends skin manager built with Electron and React. Inject custom skins with a sleek gaming-inspired UI.

🚀 RiftChanger - Advanced League of Legends Skin Manager

A powerful, portable skin management tool for League of Legends featuring an enhanced Runeforge browser store with real-time downloads and progress tracking.

✨ Enhanced Features (v2.0)

🛒 Advanced Runeforge Browser Store

• Smart Download Detection: Automatically detects skins vs fonts and organizes them into correct folders
• Real-time Progress Tracking: Live download progress with file size indicators and status updates
• Enhanced Notifications: Beautiful animated notifications with action buttons and completion feedback
• Download Context Management: Intelligent file categorization based on source and content type
• Robust Error Handling: Comprehensive error recovery for interrupted or failed downloads
• One-Click Integration: Direct downloads from runeforge.dev with automatic .fantome file handling

📥 Download System Features

• Automatic Organization:
  • Custom skins → custom_skins/[Champion]/
  • Fonts → fonts/
• Progress Indicators: Visual progress bars with percentage and file size
• Status Updates: Real-time status (Starting, Downloading, Paused, Completed)
• Download Notifications: Success/failure notifications with action buttons
• File Management: Automatic duplicate detection and cleanup

🎨 UI/UX Enhancements

• Animated Notifications: Smooth slide-in/out animations with progress indicators
• Modern Design: Glass-morphism effects and gradient backgrounds
• Enhanced Buttons: Hover effects and state transitions
• Responsive Layout: Optimized for different screen sizes
• Visual Feedback: Color-coded status indicators and icons

🎮 Core Features

• Skin Library Management: Browse and organize 1000+ champion skins
• Custom Skin Upload: Drag & drop .fantome files with automatic organization
• Applied Skins Tracker: Keep track of currently active skins per champion
• Chroma Support: Apply different color variants of skins
• CSLol Integration: Seamless integration with CSLol Manager
• Settings Management: Configure paths and preferences
• Portable Operation: Run from any location without installation

🛠 Technical Architecture

Enhanced Download Pipeline

Runeforge Browser → Context Detection → Progress Tracking → File Organization → Notifications

• Electron Main Process: Handles file downloads with progress events
• IPC Communication: Real-time progress updates between processes
• Context Management: Smart categorization system for different file types
• Event System: Comprehensive event handling for download lifecycle

Download Flow

1. Context Setting: Browser sets download context (skins/fonts)
2. Link Detection: Enhanced JavaScript detection of download links
3. Progress Tracking: Real-time progress with Electron download events
4. File Organization: Automatic placement in correct directories
5. Notifications: Success/failure feedback with action buttons

📂 File Organization

RiftChanger/
├── custom_skins/           # Custom skin downloads
│   ├── Ahri/              # Champion-specific folders
│   ├── Yasuo/
│   └── ...
├── fonts/                 # Font downloads
├── cslol-manager/         # CSLol integration
└── settings.json          # Application settings

🎯 Quick Start

1. Launch RiftChanger: Run the portable executable
2. Configure Paths: Set your League of Legends installation path
3. Browse Store: Use the enhanced Runeforge browser to find skins
4. Download: Click any download link for automatic handling
5. Apply Skins: Manage and apply downloaded skins
6. Track Progress: Monitor downloads with real-time progress indicators

🔧 Enhanced API Reference

Download Context Management

// Set context for smart categorization
window.electronAPI.setDownloadContext('font' | 'custom-skin' | 'general')

// Clear context
window.electronAPI.clearDownloadContext()

Progress Event Listeners

// Download lifecycle events
window.electronAPI.onDownloadStarted(data => { /* handle start */ })
window.electronAPI.onDownloadProgress(data => { /* update progress */ })
window.electronAPI.onDownloadCompleted(data => { /* handle completion */ })
window.electronAPI.onDownloadFailed(data => { /* handle errors */ })

// Type-specific events
window.electronAPI.onFontDownloaded(data => { /* font completed */ })
window.electronAPI.onCustomSkinDownloaded(data => { /* skin completed */ })

📊 Performance Optimizations

• Streaming Downloads: Memory-efficient file streaming
• Progress Throttling: Optimized UI update frequency
• Error Recovery: Automatic retry mechanisms
• File Validation: Integrity checks for downloaded files
• Memory Management: Efficient cleanup and garbage collection

🎨 Visual Enhancements

• Glass Morphism: Modern translucent UI elements
• Gradient Animations: Smooth color transitions
• Micro-interactions: Responsive button states and hover effects
• Progress Visualizations: Enhanced progress bars with animations
• Status Indicators: Color-coded feedback system

🔒 Security & Reliability

• Safe Downloads: Verified download sources and file validation
• Error Boundaries: Graceful handling of failures
• Data Protection: Secure settings and state management
• Update System: Built-in update notifications and management

📱 Cross-Platform Support

• Windows: Full native support with Windows-specific optimizations
• Portable: No installation required, runs from any location
• Multi-Monitor: Proper handling of multiple display setups

---

🌟 Experience the most advanced League of Legends skin management with real-time downloads, intelligent organization, and beautiful notifications - inspired by the best features of Sliv3r Skins Changer!

✨ Features

🎨 Beautiful Dark UI

• Modern gaming-inspired design with glowing elements
• Smooth animations and transitions
• Custom scrollbars and hover effects
• Responsive layout for different screen sizes

🔧 Skin Management

• Custom Skins: Browse and inject .fantome skin files
• Official Skins: Preview all League champions and their official skins
• Applied Skins: Track currently active skins with timestamps
• Bulk Operations: Remove all skins with one click

🚀 Advanced Features

• Auto-scanning: Automatically detect skin files in configured folders
• Path Testing: Verify CSLol Tools and folder paths
• Drag & Drop: Easy skin file management (coming soon)
• Search & Filter: Find skins by champion name or skin type
• Real-time Status: Live feedback on injection operations

⚙️ Smart Configuration

• Auto-detect common installation paths
• Test paths and tools before use
• Persistent settings with Electron Store
• Quick setup wizard for first-time users

🛠️ Installation & Setup

Prerequisites

1. CSLol Tools - Download from CSLol Manager
2. League of Legends - Installed and updated
3. Custom Skins - .fantome or .zip skin files organized by champion

Quick Start

1. Clone the repository

   git clone https://github.com/your-username/riftchanger.git
   cd riftchanger

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Build for production

   npm run build:all

📁 Folder Structure Setup

Organize your skins folder like this:

📁 lol-skins/
├── 📁 skins/
│   ├── 📁 Ahri/
│   │   ├── K'DA Ahri.zip
│   │   ├── Spirit Blossom Ahri.fantome
│   │   └── ...
│   ├── 📁 Yasuo/
│   │   ├── High Noon Yasuo.zip
│   │   ├── PROJECT Yasuo.fantome
│   │   └── ...
│   └── 📁 [Champion Name]/
│       └── [Skin Files]

🎯 Usage Guide

Initial Configuration

1. Launch RiftChanger

2. Navigate to Settings (⚙️ gear icon)

3. Configure Paths:

   • CSLol Tools Path: Point to your cslol-tools folder
   • Skins Folder: Point to your organized skins directory
   • League Install (optional): Your League installation path

4. Test Paths using the "Test" buttons

5. Save Settings

Injecting Skins

1. Go to Custom Skins page
2. Browse available skins by champion
3. Click the inject button (⚡) on desired skin
4. Check Applied Skins page to confirm

Managing Applied Skins

• View all active skins in the Applied Skins page
• See injection timestamps and duration
• Remove all skins with the Remove All button

🎨 Screenshots

🏠 Dashboard

Overview with statistics and quick actions

🎭 Custom Skins Browser

Browse and inject your custom skin collection

⚙️ Settings Panel

Configure paths and test your setup

🚧 Development

Tech Stack

• Frontend: React 18 + React Router
• Desktop: Electron 28
• Styling: TailwindCSS with custom dark theme
• State Management: React Context + useReducer
• Build: Electron Builder + React Scripts

Available Scripts

# Development
npm run dev              # Start React + Electron concurrently
npm run start:react      # Start React development server
npm run start:electron   # Start Electron main process

# Building
npm run build           # Build React app
npm run build:electron  # Build Electron app
npm run build:all       # Build complete distribution

# Testing
npm test               # Run React tests

Project Structure

📁 RiftChanger/
├── 📁 electron/          # Electron main process
│   ├── main.js           # Main Electron entry point
│   └── preload.js        # Secure bridge to renderer
├── 📁 src/               # React application
│   ├── 📁 components/    # Reusable UI components
│   ├── 📁 pages/         # Main application pages
│   ├── 📁 context/       # Global state management
│   └── index.js          # React entry point
├── 📁 public/            # Static assets
└── 📁 build/             # Production build output

⚠️ Important Notes

Safety & Legality

• ✅ Safe: RiftChanger only modifies local game files temporarily
• ✅ Reversible: All changes can be undone instantly
• ✅ No Account Risk: Doesn't affect your League account
• ⚠️ Use Responsibly: Consider avoiding custom skins in ranked games

Compatibility

• Platform: Windows 10/11 (primary), macOS/Linux (experimental)
• League: Compatible with current League versions
• CSLol Tools: Requires latest CSLol Manager tools

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📋 Roadmap

🔜 Coming Soon

• Drag & drop skin installation
• Skin preview with 3D models
• Auto-updater for the application
• Skin backup and restore
• Theme customization options

🎯 Future Features

• Online skin repository browser
• Skin sharing with friends
• Custom skin creation tools
• macOS and Linux support
• Multi-language support

🐛 Troubleshooting

Common Issues

"CSLol Tools not found"

• Ensure mod-tools.exe exists in your configured path
• Download latest CSLol Manager if missing

"No skins detected"

• Check your folder structure matches the required format
• Ensure skin files are .fantome or .zip format
• Use the "Test" button in Settings to verify paths

"Injection failed"

• Close League of Legends completely
• Restart RiftChanger as administrator
• Verify CSLol Tools are up to date

Getting Help

• 🐛 Bug Reports: GitHub Issues
• 💬 Discord: Join our community server
• 📧 Email: support@riftchanger.com

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• CSLol Team - For the amazing CSLol Tools
• Riot Games - For creating League of Legends
• Community - For skin creators and supporters
• Contributors - Everyone who helped build RiftChanger

---

Made with ❤️ for the League of Legends community

Back to Top ↑