Skip to main content

​
Welcome to Crafter LoL

Crafter LoL is an engaging quiz game that challenges your knowledge of League of Legends item crafting system. Test your skills by identifying the correct component items needed to craft powerful equipment!
Crafter LoL combines fast-paced gameplay with strategic thinking. You have limited time to select the right components before crafting each item.

​
What is Crafter LoL?

Crafter LoL is a React-based web game that presents you with a target League of Legends item and challenges you to select its crafting components from a pool of options. The game features:

Time-Based Challenges

Race against the clock with 15 seconds per question to identify the correct components

Multiple Difficulty Levels

Choose from Easy, Medium, or Hard modes with varying numbers of options and time limits

Score Tracking

Earn 100 points for correct answers and track your best score across sessions

Dynamic Questions

Each round presents a new random item with shuffled component options

​
How It Works

The game pulls from the complete League of Legends item database to generate questions:
  1. Target Item Display: A craftable item appears in the center of your screen
  2. Component Selection: Multiple item options appear around the target
  3. Crafting Process: Select the correct components to craft the target item
  4. Validation: Submit your answer and receive instant feedback
  5. Score Update: Earn or lose points based on your accuracy
The game uses real League of Legends item data, including authentic crafting recipes, item images, and costs.

​
Key Features

​
Intelligent Difficulty Scaling

The backend implements smart distractor generation based on difficulty:
  • Easy Mode: 6 total options with random component items
  • Medium Mode: 10 total options with moderate challenge
  • Hard Mode: 14 total options with similar tags and cost ranges to trick you

​
Real-Time Feedback

Get immediate visual feedback on your selections: 
// Feedback system from App.jsx:112-124
if (result.isCorrect) {
  const newScore = score + GAME_CONFIG.pointsPerCorrect;
  setScore(newScore);
  storageService.incrementStreak();
  setFeedback({ isCorrect: true, points: GAME_CONFIG.pointsPerCorrect });
} else {
  const newScore = Math.max(0, score - GAME_CONFIG.pointsPerIncorrect);
  setScore(newScore);
  storageService.resetStreak();
  setFeedback({
    isCorrect: false,
    points: GAME_CONFIG.pointsPerIncorrect,
    correctItems: result.correctComponents
  });
}

​
Persistent Score Storage

Your scores are saved locally so you can track your progress over time and compete against your personal best.

​
Technology Stack

Crafter LoL is built with modern web technologies:
  • React 18 with hooks for state management
  • Vite for fast development and building
  • Axios for API communication
  • CSS-in-JS styling with League of Legends themed colors

​
Design Philosophy

The game features an immersive League of Legends aesthetic: 
// Color palette from theme.js:2-12
export const COLORS = {
  background: '#0A1428',
  accentGold: '#C89B3C',
  magicBlue: '#0BC6E3',
  progressGreen: '#00BFA5',
  panelDark: '#1A2332',
  textMain: '#F0E6D2',
  itemBorder: '#463714',
  successGreen: '#00FF88',
  errorRed: '#FF4444',
};
The dark blue background (#0A1428) and golden accent (#C89B3C) are directly inspired by the League of Legends client interface.

​
Getting Started

Ready to test your League of Legends item knowledge? Head over to the Quickstart Guide to set up the game locally, or dive into the How to Play guide to learn the gameplay mechanics.

Next: Quickstart Guide

Get Crafter LoL running on your local machine in minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us