novafarma/docs/CRAFTING_INTEGRATION.md

🛠️ 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:

<!-- 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:

// 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:

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

STEP 4: Add Toggle Key

In GameScene setupCamera() or create():

// 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:

// 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:

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

---

💡 CUSTOMIZATION

Add New Recipe:

Edit data/recipes.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:

{
  "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

// 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