Skip to main content

​
How to Play Crafter LoL

Crafter LoL is an intuitive quiz game that tests your knowledge of League of Legends item crafting. Here’s everything you need to know to become a crafting master.

​
Game Objective

Your goal is to correctly identify the component items needed to craft a target League of Legends item within the time limit.
Each correct answer earns you 100 points, while incorrect answers deduct 50 points from your score.

​
Game Interface

The game interface consists of three main areas:

Game Header

Displays your current score, best score, and remaining time

Game Arena

Shows the target item (center) and component options (circle around it)

Crafting Panel

Displays your selected components and the craft button

​
Visual Layout

The game uses a centered circular layout: 
// Arena configuration from theme.js:15-24
export const GAME_CONFIG = {
  itemsInCircle: 14,          // Component items arranged in circle
  circleRadius: 270,          // 270px radius from center
  centralItemSize: 120,       // Target item: 120px
  peripheralItemSize: 64,     // Component items: 64px
};

​
How to Play a Round

1

Observe the Target Item

When a round starts, a target item appears in the center of the screen. This is the item you need to craft.
// Target item loaded from backend - App.jsx:36
const data = await gameService.getRandomItem();
setGameData(data);
Look at the target item’s appearance and name. If you’re familiar with League of Legends, you might recognize what components it needs!
2

Review the Component Options

Around the target item, you’ll see 6-14 component items arranged in a circle (depending on difficulty level).
  • Correct components are hidden among distractors
  • Items are randomly positioned each round
  • Each item shows its name on hover
On Hard difficulty, distractor items are deliberately chosen to have similar tags and costs to make the challenge harder!
3

Select Components

Click on the items you think are the correct components:
// Item selection logic from App.jsx:77-94
const handleItemClick = useCallback((item) => {
  if (feedback) return; // Can't select during feedback

  setSelectedItems((prev) => {
    const isInSlots = prev.some((s) => s.id === item.id);

    if (prev.length < requiredSlots) {
      // Has space: always add (allows duplicates)
      return [...prev, item];
    } else if (isInSlots) {
      // Slots full and item already there: remove last occurrence
      const lastIdx = prev.map((s) => s.id).lastIndexOf(item.id);
      return prev.filter((_, i) => i !== lastIdx);
    }
    // Slots full and item not there: do nothing
    return prev;
  });
}, [feedback, requiredSlots]);
Selection Rules:
  • Click an item to add it to your crafting slots
  • Click it again to remove it
  • You can select the same item multiple times (some recipes need duplicates!)
  • Slots are filled from left to right
Once you’ve filled all required slots, you cannot select different items unless you first deselect an existing one.
4

Watch the Timer

You have 15 seconds (by default) to make your selection:
// Timer configuration from theme.js:16
timePerQuestion: 15, // seconds
Timer Behavior:
  • Counts down from 15 seconds
  • Automatically pauses when all slots are filled
  • Resumes if you deselect an item
  • When time runs out, the round ends automatically
// Timer pauses when slots are full - App.jsx:53
if (selectedItems.length >= requiredSlots) return; // PAUSE
The timer pause gives you time to review your selections before crafting!
5

Submit Your Answer

Once you’ve selected all required components, click the CRAFT button:
// Submit validation from App.jsx:97-128
const handleSubmit = useCallback(async () => {
  if (selectedItems.length !== requiredSlots) return;

  const selectedIds = selectedItems.map((item) => item.id);
  const result = await gameService.validateAnswer(
    gameData.targetItem.id, 
    selectedIds
  );

  if (result.isCorrect) {
    const newScore = score + GAME_CONFIG.pointsPerCorrect;
    setScore(newScore);
    storageService.incrementStreak();
    setFeedback({ isCorrect: true, points: 100 });
    setTimeout(() => loadNewQuestion(), 2000);
  } else {
    const newScore = Math.max(0, score - GAME_CONFIG.pointsPerIncorrect);
    setScore(newScore);
    storageService.resetStreak();
    setFeedback({
      isCorrect: false,
      points: 50,
      correctItems: result.correctComponents
    });
  }
}, [selectedItems, gameData, score]);
The button is only enabled when all slots are filled.
6

Receive Feedback

After submitting, you’ll see immediate feedback:If Correct ✓
  • Green success overlay appears
  • +100 points added to your score
  • Streak counter increments
  • New round loads automatically after 2 seconds
If Incorrect ✗
  • Red error overlay appears
  • -50 points deducted (score never goes below 0)
  • Correct components are highlighted
  • Streak counter resets
  • Click anywhere to continue to next round
Pay attention to the correct components shown when you’re wrong - it’s a great learning opportunity!

​
Controls Summary

  • Left Click on Component: Select/deselect item
  • Click on Craft Button: Submit answer
  • Click on Feedback Overlay: Continue to next round (after incorrect answer)

​
Game Flow Diagram

​
Tips for Success

Familiarize yourself with common League of Legends items and their components:
  • Basic items (Long Sword, Cloth Armor, etc.) are usually components
  • Legendary items (Infinity Edge, etc.) are what you’re crafting
  • Mythic items may have more complex recipes
On harder difficulties, eliminate obviously wrong items first:
  • Items with vastly different costs are likely wrong
  • Items with unrelated tags (AP vs AD) are probably not correct
  • Basic starter items are often not used in complex recipes
  • Don’t rush immediately - you have 15 seconds
  • Use the timer pause feature to review your selections
  • If you’re unsure, make your best guess before time runs out
  • Remember: -50 points is better than -0 progress!
  • Always review the correct answer when you’re wrong
  • Look for patterns in crafting recipes
  • Some items appear frequently as components
  • After several rounds, you’ll start recognizing common combinations

​
Score Persistence

Your score is automatically saved using browser localStorage: 
// Score initialization from App.jsx:17-18
const [score, setScore] = useState(storageService.getScore());
const [bestScore, setBestScore] = useState(storageService.getBestScore());
Your score persists across browser sessions, but it’s stored locally on your device. Clearing browser data will reset your scores.

​
What’s Next?

Now that you know how to play, dive deeper into the game mechanics:

Game Mechanics

Learn how questions are generated and validated

Difficulty Levels

Understand the differences between Easy, Medium, and Hard modes

Build docs developers (and LLMs) love

Get started for freeTalk to us