505 lines
14 KiB
Markdown
505 lines
14 KiB
Markdown
# 🔌 SYSTEMS INTEGRATION GUIDE
|
|
**Created:** January 4, 2026
|
|
**Purpose:** How to integrate new game systems into Phaser 3
|
|
|
|
---
|
|
|
|
## 📦 INITIALIZED SYSTEMS
|
|
|
|
### **Sleep System Integration**
|
|
|
|
**1. Import & Initialize:**
|
|
```javascript
|
|
// In GameScene.js or MainGameScene.js
|
|
import SleepSystem from '../systems/SleepSystem.js';
|
|
|
|
create() {
|
|
// Initialize sleep system
|
|
this.sleepSystem = new SleepSystem(this);
|
|
|
|
// Register with game state
|
|
this.game.registry.set('sleepSystem', this.sleepSystem);
|
|
}
|
|
```
|
|
|
|
**2. Hook into Player Interaction:**
|
|
```javascript
|
|
// When player interacts with bed
|
|
onBedInteraction(bedSprite) {
|
|
const bedInfo = this.sleepSystem.getCurrentBedInfo();
|
|
|
|
// Show sleep UI
|
|
this.showSleepMenu({
|
|
bedName: bedInfo.name,
|
|
energyRegen: bedInfo.energyRegen,
|
|
canSleep: bedInfo.canSleep
|
|
});
|
|
}
|
|
|
|
// When player clicks "Sleep" button
|
|
onSleepButtonClick() {
|
|
const result = this.sleepSystem.sleep();
|
|
|
|
if (result.success) {
|
|
// Hide UI
|
|
this.hideSleepMenu();
|
|
|
|
// Play sleep animation/fade
|
|
this.cameras.main.fadeOut(1000, 0, 0, 0);
|
|
|
|
// Wait for sleep to complete
|
|
this.sleepSystem.on('wakeUp', (data) => {
|
|
this.cameras.main.fadeIn(1000);
|
|
this.showMessage(`Good morning! +${data.energyRestored} Energy`);
|
|
});
|
|
} else {
|
|
this.showMessage(result.message);
|
|
}
|
|
}
|
|
```
|
|
|
|
**3. Bed Purchase Integration:**
|
|
```javascript
|
|
onBedShopInteraction() {
|
|
const beds = this.sleepSystem.bedTypes;
|
|
|
|
// Show shop UI with available beds
|
|
this.showBedShop(beds);
|
|
}
|
|
|
|
onPurchaseBed(bedType) {
|
|
const result = this.sleepSystem.purchaseBed(bedType);
|
|
|
|
if (result.success) {
|
|
this.showMessage(result.message);
|
|
|
|
// Trigger furniture placement (drag-and-drop)
|
|
this.startFurniturePlacement(bedType);
|
|
} else {
|
|
this.showMessage(result.message);
|
|
}
|
|
}
|
|
```
|
|
|
|
**4. Update Loop:**
|
|
```javascript
|
|
update(time, delta) {
|
|
// Sleep system doesn't need frequent updates
|
|
// (handled by events and timers)
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### **Crafting Tables Integration**
|
|
|
|
**1. Import & Initialize:**
|
|
```javascript
|
|
import CraftingTablesSystem from '../systems/CraftingTablesSystem.js';
|
|
|
|
create() {
|
|
this.craftingSystem = new CraftingTablesSystem(this);
|
|
this.game.registry.set('craftingSystem', this.craftingSystem);
|
|
}
|
|
```
|
|
|
|
**2. Hook into Crafting Table Interaction:**
|
|
```javascript
|
|
onCraftingTableInteraction(tableSprite) {
|
|
const uiData = this.craftingSystem.getCraftingUIData();
|
|
|
|
// Show crafting menu
|
|
this.showCraftingMenu({
|
|
currentTable: uiData.currentTable,
|
|
recipes: uiData.availableRecipes,
|
|
isCrafting: uiData.isCrafting,
|
|
currentCraft: uiData.currentCraft
|
|
});
|
|
}
|
|
```
|
|
|
|
**3. Recipe Selection:**
|
|
```javascript
|
|
onRecipeClick(recipeId) {
|
|
const canCraft = this.craftingSystem.canCraft(recipeId);
|
|
|
|
if (canCraft.canCraft) {
|
|
// Show craft confirmation
|
|
this.showCraftConfirmation(recipeId);
|
|
} else {
|
|
// Show why can't craft
|
|
if (canCraft.missingIngredients) {
|
|
this.showMissingIngredients(canCraft.missingIngredients);
|
|
} else {
|
|
this.showMessage(canCraft.reason);
|
|
}
|
|
}
|
|
}
|
|
|
|
onConfirmCraft(recipeId, quantity) {
|
|
const result = this.craftingSystem.craft(recipeId, quantity);
|
|
|
|
if (result.success) {
|
|
this.showMessage(result.message);
|
|
|
|
// Show crafting progress bar
|
|
this.showCraftingProgress(result.craftJob);
|
|
} else {
|
|
this.showMessage(result.message);
|
|
}
|
|
}
|
|
```
|
|
|
|
**4. Crafting Progress UI:**
|
|
```javascript
|
|
update(time, delta) {
|
|
// Update crafting system
|
|
this.craftingSystem.update(delta / 1000); // Convert ms to seconds
|
|
|
|
// Update crafting progress bar
|
|
if (this.craftingSystem.currentCraft) {
|
|
const progress = 1 - (this.craftingSystem.currentCraft.timeRemaining /
|
|
this.craftingSystem.currentCraft.totalTime);
|
|
this.updateCraftingProgressBar(progress);
|
|
}
|
|
}
|
|
|
|
// Listen for crafting events
|
|
create() {
|
|
this.craftingSystem.game.on('craftingStarted', (data) => {
|
|
this.showMessage(`Crafting ${data.quantity}x ${data.recipe.name}...`);
|
|
});
|
|
|
|
this.craftingSystem.game.on('craftingCompleted', (data) => {
|
|
this.playSound('craft_complete');
|
|
this.showItemGain(data.recipe.output.item, data.quantity);
|
|
});
|
|
}
|
|
```
|
|
|
|
**5. Large Table Purchase:**
|
|
```javascript
|
|
onLargeTableShopInteraction() {
|
|
const largeTable = this.craftingSystem.tables.LARGE;
|
|
|
|
if (largeTable.unlocked) {
|
|
this.showMessage('You already own the Large Planning Table!');
|
|
} else {
|
|
this.showPurchaseConfirmation({
|
|
item: 'Large Planning Table',
|
|
cost: largeTable.cost,
|
|
requirements: largeTable.requirements
|
|
});
|
|
}
|
|
}
|
|
|
|
onConfirmLargeTablePurchase() {
|
|
const result = this.craftingSystem.purchaseLargeTable();
|
|
|
|
if (result.success) {
|
|
this.showMessage(result.message);
|
|
this.startFurniturePlacement('large_table');
|
|
} else {
|
|
this.showMessage(result.message);
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### **Bakery Shop Integration**
|
|
|
|
**1. Import & Initialize:**
|
|
```javascript
|
|
import BakeryShopSystem from '../systems/BakeryShopSystem.js';
|
|
|
|
create() {
|
|
this.bakerySystem = new BakeryShopSystem(this);
|
|
this.game.registry.set('bakerySystem', this.bakerySystem);
|
|
|
|
// Check if bakery should be unlocked (from save file)
|
|
if (this.player.ownedBuildings.includes('bakery')) {
|
|
this.bakerySystem.isUnlocked = true;
|
|
this.bakerySystem.isOpen = true;
|
|
}
|
|
}
|
|
```
|
|
|
|
**2. Bakery Entrance Interaction:**
|
|
```javascript
|
|
onBakeryEnterInteraction() {
|
|
// Check if unlocked
|
|
if (!this.bakerySystem.isUnlocked) {
|
|
this.showBuildingUnlockUI('bakery');
|
|
return;
|
|
}
|
|
|
|
// Check if open
|
|
if (!this.bakerySystem.isOpen) {
|
|
const hours = this.bakerySystem.getShopUIData().openingHours;
|
|
this.showMessage(`Bakery is closed. Open: ${hours}`);
|
|
return;
|
|
}
|
|
|
|
// Enter bakery
|
|
this.scene.start('BakeryInteriorScene');
|
|
}
|
|
```
|
|
|
|
**3. Bakery Interior Scene:**
|
|
```javascript
|
|
// BakeryInteriorScene.js
|
|
import Phaser from 'phaser';
|
|
|
|
export default class BakeryInteriorScene extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'BakeryInteriorScene' });
|
|
}
|
|
|
|
create() {
|
|
// Load interior tilemap
|
|
this.map = this.make.tilemap({ key: 'bakery_interior' });
|
|
|
|
// Get bakery system
|
|
this.bakerySystem = this.game.registry.get('bakerySystem');
|
|
|
|
// Show shop UI
|
|
this.showShopUI();
|
|
|
|
// Baker NPC
|
|
this.baker = this.add.sprite(200, 150, 'npc_baker');
|
|
this.baker.setInteractive();
|
|
this.baker.on('pointerdown', () => this.talkToBaker());
|
|
}
|
|
|
|
showShopUI() {
|
|
const shopData = this.bakerySystem.getShopUIData();
|
|
|
|
// Create shop menu
|
|
this.shopMenu = this.add.container(400, 300);
|
|
|
|
// Display inventory items
|
|
Object.values(shopData.inventory).forEach((item, index) => {
|
|
const itemButton = this.createShopItem(item, index);
|
|
this.shopMenu.add(itemButton);
|
|
});
|
|
}
|
|
|
|
createShopItem(item, index) {
|
|
const y = index * 60;
|
|
|
|
const button = this.add.container(0, y);
|
|
|
|
// Item name
|
|
const nameText = this.add.text(0, 0, item.name, {
|
|
fontSize: '18px',
|
|
color: '#ffffff'
|
|
});
|
|
|
|
// Price
|
|
const priceText = this.add.text(200, 0, `${item.price}g`, {
|
|
fontSize: '16px',
|
|
color: '#ffdd00'
|
|
});
|
|
|
|
// Stock
|
|
const stockText = this.add.text(300, 0, `Stock: ${item.stock}`, {
|
|
fontSize: '14px',
|
|
color: '#aaaaaa'
|
|
});
|
|
|
|
button.add([nameText, priceText, stockText]);
|
|
button.setInteractive(new Phaser.Geom.Rectangle(0, 0, 400, 50), Phaser.Geom.Rectangle.Contains);
|
|
button.on('pointerdown', () => this.onBuyItem(item.id));
|
|
|
|
return button;
|
|
}
|
|
|
|
onBuyItem(itemId) {
|
|
// Show quantity selector
|
|
this.showQuantitySelector(itemId, (quantity) => {
|
|
const result = this.bakerySystem.buyItem(itemId, quantity);
|
|
|
|
if (result.success) {
|
|
this.playSound('purchase');
|
|
this.refreshShopUI();
|
|
this.showMessage(`Purchased! ${result.totalPrice}g`);
|
|
} else {
|
|
this.showMessage(result.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
talkToBaker() {
|
|
const baker = this.bakerySystem.baker;
|
|
const dialogueOptions = baker.dialogue;
|
|
|
|
// Random greeting
|
|
const greeting = Phaser.Utils.Array.GetRandom(dialogueOptions.greeting);
|
|
|
|
this.showDialogue(baker.name, greeting, [
|
|
{
|
|
text: 'Buy items',
|
|
action: () => this.showShopUI()
|
|
},
|
|
{
|
|
text: 'Order birthday cake',
|
|
action: () => this.showBirthdayCakeMenu()
|
|
},
|
|
{
|
|
text: 'About baking competition',
|
|
action: () => this.showCompetitionInfo()
|
|
},
|
|
{
|
|
text: 'Leave',
|
|
action: () => this.scene.start('TownSquareScene')
|
|
}
|
|
]);
|
|
}
|
|
}
|
|
```
|
|
|
|
**4. Gift System Integration:**
|
|
```javascript
|
|
onGiftItemToNPC(itemId, npcId) {
|
|
// Check if item is from bakery
|
|
const bakeryItem = this.bakerySystem.inventory[itemId];
|
|
|
|
if (bakeryItem) {
|
|
const result = this.bakerySystem.giftItem(itemId, npcId);
|
|
|
|
if (result.success) {
|
|
this.showNPCReaction(npcId, result.reaction);
|
|
this.playHeartAnimation(npcId, result.heartsAdded);
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
**5. Time-based Updates:**
|
|
```javascript
|
|
// In main game loop
|
|
update(time, delta) {
|
|
// Check if hour has changed
|
|
if (this.timeSystem.hasHourChanged()) {
|
|
this.bakerySystem.update();
|
|
|
|
// Check if bakery just opened/closed
|
|
const bakeryData = this.bakerySystem.getShopUIData();
|
|
if (bakeryData.isOpen !== this.lastBakeryState) {
|
|
this.onBakeryStatusChange(bakeryData.isOpen);
|
|
this.lastBakeryState = bakeryData.isOpen;
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🎮 COMPLETE GAME INTEGRATION
|
|
|
|
**Main Game Scene Setup:**
|
|
```javascript
|
|
// MainGameScene.js
|
|
import SleepSystem from '../systems/SleepSystem.js';
|
|
import CraftingTablesSystem from '../systems/CraftingTablesSystem.js';
|
|
import BakeryShopSystem from '../systems/BakeryShopSystem.js';
|
|
|
|
export default class MainGameScene extends Phaser.Scene {
|
|
create() {
|
|
// Initialize all systems
|
|
this.sleepSystem = new SleepSystem(this);
|
|
this.craftingSystem = new CraftingTablesSystem(this);
|
|
this.bakerySystem = new BakeryShopSystem(this);
|
|
|
|
// Register globally
|
|
this.game.registry.set('sleepSystem', this.sleepSystem);
|
|
this.game.registry.set('craftingSystem', this.craftingSystem);
|
|
this.game.registry.set('bakerySystem', this.bakerySystem);
|
|
|
|
// Set up event listeners
|
|
this.setupSystemEvents();
|
|
}
|
|
|
|
setupSystemEvents() {
|
|
// Sleep events
|
|
this.sleepSystem.game.on('wakeUp', (data) => {
|
|
this.onPlayerWakeUp(data);
|
|
});
|
|
|
|
// Crafting events
|
|
this.craftingSystem.game.on('craftingCompleted', (data) => {
|
|
this.onCraftingComplete(data);
|
|
});
|
|
|
|
// Bakery events (if needed)
|
|
// ...
|
|
}
|
|
|
|
update(time, delta) {
|
|
const deltaSeconds = delta / 1000;
|
|
|
|
// Update systems
|
|
this.sleepSystem.update(deltaSeconds);
|
|
this.craftingSystem.update(deltaSeconds);
|
|
this.bakerySystem.update();
|
|
}
|
|
}
|
|
```
|
|
|
|
**Save/Load Integration:**
|
|
```javascript
|
|
// Save game state
|
|
saveGame() {
|
|
const saveData = {
|
|
player: this.player.getSaveData(),
|
|
sleepSystem: {
|
|
playerBed: this.sleepSystem.playerBed,
|
|
unlockedBeds: Object.values(this.sleepSystem.bedTypes)
|
|
.filter(bed => bed.unlocked)
|
|
.map(bed => bed.id)
|
|
},
|
|
craftingSystem: {
|
|
currentTable: this.craftingSystem.currentTable.id,
|
|
unlockedRecipes: this.craftingSystem.unlockedRecipes,
|
|
largeTableUnlocked: this.craftingSystem.tables.LARGE.unlocked
|
|
},
|
|
bakerySystem: {
|
|
isUnlocked: this.bakerySystem.isUnlocked,
|
|
birthdayOrders: this.bakerySystem.birthdayCakeOrders
|
|
}
|
|
};
|
|
|
|
localStorage.setItem('game_save', JSON.stringify(saveData));
|
|
}
|
|
|
|
// Load game state
|
|
loadGame() {
|
|
const saveData = JSON.parse(localStorage.getItem('game_save'));
|
|
|
|
if (saveData) {
|
|
// Restore sleep system
|
|
saveData.sleepSystem.unlockedBeds.forEach(bedId => {
|
|
const bedType = Object.keys(this.sleepSystem.bedTypes)
|
|
.find(key => this.sleepSystem.bedTypes[key].id === bedId);
|
|
if (bedType) {
|
|
this.sleepSystem.bedTypes[bedType].unlocked = true;
|
|
}
|
|
});
|
|
|
|
// Restore crafting system
|
|
this.craftingSystem.tables.LARGE.unlocked = saveData.craftingSystem.largeTableUnlocked;
|
|
this.craftingSystem.unlockedRecipes = saveData.craftingSystem.unlockedRecipes;
|
|
|
|
// Restore bakery system
|
|
this.bakerySystem.isUnlocked = saveData.bakerySystem.isUnlocked;
|
|
this.bakerySystem.birthdayCakeOrders = saveData.bakerySystem.birthdayOrders;
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
**Created:** January 4, 2026
|
|
**Status:** Ready for implementation ✅
|