League of Legends Quartett

A web-based card game inspired by the classic German "Quartett" game, featuring League of Legends champions with dynamic stat comparisons.

🎮 Game Overview

Compare champion stats in head-to-head battles! Each round, players choose one of four stats to compare at a randomly generated level. The player with the higher stat wins both cards. The game continues until one player has all the cards.

Stats Compared

• Attack Damage ⚔️
• Health ❤️
• Armor 🛡️
• Magic Resist ✨

🚀 Features

• Three Game Modes:
  • vs AI: Single player with 3 difficulty levels (Easy/Medium/Hard)
  • Local Multiplayer: Pass-and-play on same device
  • Online Multiplayer: Real-time matches across the internet
• Training Grounds: Interactive tutorial accessible via help icon (?)
• Pre-Game Settings: Configure your game before starting
  • Deck Size: Choose 10 (Quick), 15 (Normal), or 20 (Extended) cards per player
  • AI Difficulty: Select Easy, Medium, or Hard before AI battles
• Dynamic Levels: Random level (1-18) each round for varied gameplay
• Smart AI Opponent:
  • Easy (random choices)
  • Medium (strategic stat selection)
  • Hard (pattern recognition with 15% fallibility for balanced gameplay)
• Smooth Round Results: Auto-advancing toast notifications with skip option
• Real-time Online Play: Firebase-powered multiplayer with room codes
• Synchronized Multiplayer: Identical game state across all devices
• Turn-based Online Control: Proper turn management with real-time updates
• Enterprise Security: Production-grade Firebase security rules
• Real-time Scoreboard: Track wins, percentages, and game progress
• Champion Data: All ~160 LoL champions with official Riot stats
• Responsive Design: Works on desktop and mobile
• Offline Caching: Champion data cached locally for fast gameplay

🛠️ Technology Stack

• Frontend: Svelte 5 + Vite
• Styling: Tailwind CSS
• Data Source: Riot Games Data Dragon API
• State Management: Svelte stores
• Caching: localStorage
• Online Multiplayer: Firebase Realtime Database
• Deployment: Firebase CLI + Hosting
• Security: Firebase Security Rules

📦 Installation

# Clone the repository
git clone <repository-url>
cd lol-quartett

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

🎯 How to Play

Single Player / Local Multiplayer:

1. Choose Game Mode: Select "AI Duel", "Local Clash", or "Online Arena" (use ? icon for tutorial)
2. Configure Settings: Choose deck size (10/15/20 cards) and AI difficulty
3. Your Turn: Click on a stat you think will be higher than your opponent's
4. Comparison: Stats are calculated at the random level and compared
5. Round Result: Toast shows winner, auto-advances after 2.5s (or click Skip)
6. Win Cards: Higher stat wins both cards, lower stat loses their card
7. Continue: Winner goes first in the next round
8. Victory: Game ends when one player has all cards

Online Multiplayer:

1. Create Room: Click "Online Arena" → "Create Room" → Share room code
2. Join Room: Enter room code from another player
3. Ready Up: Both players ready up to start
4. Synchronized Gameplay:
   • Both players see identical cards and levels
   • Turn-based play (host goes first as Player 1)
   • Real-time synchronization of all moves
   • Only current player can select stats
5. Victory: Winner takes all cards across both devices!

🏗️ Project Structure

src/
├── components/
│   ├── ChampionCard.svelte    # Individual champion card display
│   ├── GameBoard.svelte       # Main game interface
│   ├── GameSettings.svelte    # Pre-game settings (deck size, AI difficulty)
│   ├── RoundResultToast.svelte # Auto-advancing round result notification
│   ├── Scoreboard.svelte      # Win tracking and progress
│   ├── OnlineMenu.svelte      # Online multiplayer menu
│   ├── OnlineLobby.svelte     # Room creation/joining with settings
│   └── Onboarding.svelte      # Tutorial system
├── services/
│   ├── championService.js     # Data Dragon API integration
│   ├── firebaseConfig.js      # Firebase configuration
│   └── onlineGameService.js   # Online multiplayer logic
├── stores/
│   ├── gameStore.js          # Game state + settings management
│   └── onlineGameStore.js    # Online game state
├── utils/
│   ├── statCalculator.js     # Level-based stat calculations
│   ├── statConfig.js         # Stat labels, icons, and colors
│   └── aiOpponent.js         # AI strategy and difficulty
└── App.svelte                # Root component

# Configuration Files
├── firebase.json             # Firebase project config
├── database.rules.json       # Security rules
├── .firebaserc              # Project mapping
└── .env                     # Environment variables

🤖 AI Difficulty Levels

• Easy: Random stat selection with quick response time
• Medium: Strategic stat selection based on advantage calculations
• Hard: Advanced strategy with player pattern recognition (15% chance of suboptimal choice for balanced gameplay)

📊 Champion Stats Calculation

Stats are calculated using Riot's formula:

finalStat = baseStat + (perLevelStat × (level - 1))

🎨 Design Features

• Dark theme with League of Legends inspired colors
• Animated stat comparisons and transitions
• Champion portraits from official Riot CDN
• Progressive win rate visualization
• Responsive card layouts

🔧 Development Commands

npm run dev                     # Start development server
npm run build                   # Build for production
npm run preview                 # Preview production build

# Firebase Deployment
npm run firebase:deploy:rules   # Deploy security rules only
npm run firebase:deploy:hosting # Deploy hosting only
npm run firebase:deploy         # Deploy everything

📝 Game Rules

1. Each player starts with half the champion deck
2. A random level (1-18) is generated each round
3. Active player chooses which stat to compare
4. Higher stat wins both cards
5. Ties result in each player keeping their card
6. Winner of each round goes first next round
7. Game ends when one player has all cards

🔒 Security & Production Ready

• Enterprise-grade Firebase security rules
• Data validation and structure enforcement
• Access control and permission management
• Production deployment with Firebase CLI
• Environment variable security
• Real-time game state synchronization
• Automatic room cleanup service

🎮 Online Multiplayer Features

• Perfect Synchronization: Both players see identical cards, levels, and game state
• Turn-based Control: Host (Player 1) and Guest (Player 2) alternate turns
• Real-time Updates: Every move instantly synchronized across devices
• Room Management: Automatic cleanup of abandoned rooms every 5 minutes
• Reconnection Handling: Game state persists if players reconnect

🌟 Future Enhancements

• Tournament brackets
• Champion filtering and selection
• Custom stat weights
• Game replay system
• Player profiles and statistics
• Mobile app version
• Spectator mode
• Sound effects and music

Built with ❤️ using Svelte and the Riot Games API