# 🛠️ CRAFTING SYSTEM - Integration Guide

**Status:** ✅ Complete - Ready to integrate  
**Date:** 2025-12-14

---

## 📦 FILES CREATED

```
✅ data/recipes.json
✅ src/systems/CraftingSystem.js
✅ src/ui/CraftingUI.js
```

---

## 🔧 INTEGRATION STEPS

### STEP 1: Add to index.html

Add scripts BEFORE GameScene:

```html
<!-- Crafting System -->
<script src="src/systems/CraftingSystem.js"></script>
<script src="src/ui/CraftingUI.js"></script>
```

### STEP 2: Initialize in GameScene.js

In `create()` method, add AFTER inventory system:

```javascript
// In GameScene.create()
async create() {
    // ... existing code ...
    
    // Initialize Inventory (existing)
    if (!this.inventorySystem) {
        this.inventorySystem = new InventorySystem(this);
    }
    
    // 🛠️ CRAFTING SYSTEM (NEW!)
    this.craftingSystem = new CraftingSystem(this);
    await this.craftingSystem.loadRecipes();
    
    // 🎨 CRAFTING UI (NEW!)
    this.craftingUI = new CraftingUI(this);
    
    // ... rest of code ...
}
```

### STEP 3: Add Update Call

In GameScene `update()` method:

```javascript
update(time, delta) {
    // ... existing updates ...
    
    // 🛠️ UPDATE CRAFTING
    if (this.craftingSystem) {
        this.craftingSystem.update(delta);
    }
}
```

### STEP 4: Add Toggle Key

In GameScene `setupCamera()` or `create()`:

```javascript
// Add crafting UI toggle (C key)
this.input.keyboard.on('keydown-C', () => {
    if (this.craftingUI) {
        this.craftingUI.toggle();
    }
});
```

---

## 🎮 HOW TO USE

### Open Crafting UI:
```
Press C key
```

### Craft an Item:
1. Open crafting UI (C)
2. Select category (top buttons)
3. Click on recipe (left panel)
4. Check ingredients (right panel)
5. Click "CRAFT" button
6. Wait for progress bar
7. Item added to inventory!

---

## 🧪 TESTING CHECKLIST

### Test Recipes:
- [ ] Open UI with C key
- [ ] Switch between categories
- [ ] Select a recipe
- [ ] Check ingredient display
- [ ] Craft wooden fence (needs 5 wood)
- [ ] Craft stone path (needs 3 stone)
- [ ] Check crafting queue
- [ ] Check progress tracking
- [ ] Verify item added to inventory

### Test Edge Cases:
- [ ] Try crafting without ingredients
- [ ] Try locked recipe
- [ ] Craft multiple items queued
- [ ] Close UI while crafting
- [ ] Check inventory updates

---

## 📝 ADD TEST ITEMS

For testing, add some items to inventory:

```javascript
// In console or init code:
gameScene.inventorySystem.addItem('wood', 50);
gameScene.inventorySystem.addItem('stone', 30);
gameScene.inventorySystem.addItem('iron_bar', 10);
gameScene.inventorySystem.addItem('grass', 100);
gameScene.inventorySystem.addItem('wheat', 50);
```

---

## 🎨 AVAILABLE RECIPES

### Building Category:
- Wooden Fence (5 wood → 10 fences)
- Stone Path (3 stone → 5 pavements)
- Wooden Chest (10 wood → 1 chest)

### Tools Category:
- Iron Tool (2 iron + 1 wood → 1 tool) 🔒
- Basic Hoe (5 wood + 2 stone → 1 hoe)
- Watering Can (3 iron → 1 can) 🔒

### Farming Category:
- Fertilizer (5 grass + 2 dirt → 5 fertilizer)
- Scarecrow (3 wood + 10 wheat → 1 scarecrow)

### Resources:
- Coal (10 wood → 1 coal)

### Materials:
- Rope (20 grass → 1 rope)

---

## 🔓 UNLOCK RECIPES

Some recipes are locked by default. To unlock:

```javascript
gameScene.craftingSystem.unlockRecipe('iron_tool');
gameScene.craftingSystem.unlockRecipe('watering_can');
```

---

## 💡 CUSTOMIZATION

### Add New Recipe:

Edit `data/recipes.json`:

```json
"my_new_item": {
  "id": "my_new_item",
  "name": "My Item",
  "description": "Description here",
  "category": "tools",
  "ingredients": {
    "wood": 5,
    "stone": 2
  },
  "result": {
    "item": "my_item",
    "quantity": 1
  },
  "unlocked": true,
  "craftTime": 2000
}
```

### Add New Category:

In `data/recipes.json` categories array:

```json
{
  "id": "weapons",
  "name": "Weapons",
  "icon": "⚔️"
}
```

---

## 🐛 TROUBLESHOOTING

### UI Not Showing:
- Check console for errors
- Verify scripts loaded in index.html
- Check craftingUI initialized in GameScene

### Recipes Not Loading:
- Check data/recipes.json exists
- Check console for fetch errors
- Verify JSON syntax is valid

### Can't Craft:
- Check you have required items
- Check recipe is unlocked
- Check inventory system exists

---

## ✅ COMPLETE INTEGRATION EXAMPLE

```javascript
// In GameScene.js

class GameScene extends Phaser.Scene {
    async create() {
        // ... existing setup ...
        
        // Inventory (existing)
        this.inventorySystem = new InventorySystem(this);
        
        // CRAFTING SYSTEM
        this.craftingSystem = new CraftingSystem(this);
        await this.craftingSystem.loadRecipes();
        this.craftingUI = new CraftingUI(this);
        
        // Crafting toggle key
        this.input.keyboard.on('keydown-C', () => {
            this.craftingUI.toggle();
        });
        
        // Test items (REMOVE IN PRODUCTION!)
        this.inventorySystem.addItem('wood', 50);
        this.inventorySystem.addItem('stone', 30);
        
        console.log('🛠️ Crafting system ready!');
    }
    
    update(time, delta) {
        // ... existing updates ...
        
        if (this.craftingSystem) {
            this.craftingSystem.update(delta);
        }
    }
}
```

---

## 🎉 DONE!

**Crafting system is complete and ready to use!**

Press **C** to open crafting UI and start crafting! 🛠️✨

---

*Implementation completed: 2025-12-14 15:12*