241 lines
7.8 KiB
JavaScript
241 lines
7.8 KiB
JavaScript
/**
|
||
* FULL INVENTORY SYSTEM
|
||
* 24 slots total: 9 hotbar + 15 backpack
|
||
* Press I to open/close
|
||
*/
|
||
class FullInventoryUI {
|
||
constructor(scene) {
|
||
this.scene = scene;
|
||
this.isOpen = false;
|
||
|
||
// Create inventory panel (hidden by default)
|
||
this.createInventoryPanel();
|
||
|
||
// Keyboard toggle (I key)
|
||
scene.input.keyboard.on('keydown-I', () => {
|
||
this.toggle();
|
||
});
|
||
|
||
console.log('🎒 Full Inventory UI created (Press I to open)');
|
||
}
|
||
|
||
createInventoryPanel() {
|
||
const uiScene = this.scene.scene.get('UIScene');
|
||
if (!uiScene) return;
|
||
|
||
const centerX = uiScene.scale.width / 2;
|
||
const centerY = uiScene.scale.height / 2;
|
||
|
||
// Container
|
||
this.container = uiScene.add.container(centerX, centerY);
|
||
this.container.setDepth(50000); // Above everything
|
||
this.container.setScrollFactor(0);
|
||
this.container.setVisible(false);
|
||
|
||
// Semi-transparent background overlay
|
||
const overlay = uiScene.add.rectangle(0, 0,
|
||
uiScene.scale.width * 2,
|
||
uiScene.scale.height * 2,
|
||
0x000000, 0.7);
|
||
overlay.setInteractive(); // Block clicks
|
||
this.container.add(overlay);
|
||
|
||
// Main panel background
|
||
const panelWidth = 400;
|
||
const panelHeight = 500;
|
||
|
||
const bg = uiScene.add.graphics();
|
||
bg.fillStyle(0x2a4a2a, 0.95); // Dark green
|
||
bg.fillRoundedRect(-panelWidth / 2, -panelHeight / 2, panelWidth, panelHeight, 16);
|
||
bg.lineStyle(4, 0x90EE90, 1); // Light green border
|
||
bg.strokeRoundedRect(-panelWidth / 2, -panelHeight / 2, panelWidth, panelHeight, 16);
|
||
this.container.add(bg);
|
||
|
||
// Title
|
||
const title = uiScene.add.text(0, -panelHeight / 2 + 20, '🎒 INVENTORY', {
|
||
fontSize: '28px',
|
||
fontFamily: 'Arial',
|
||
fill: '#FFD700',
|
||
fontStyle: 'bold'
|
||
}).setOrigin(0.5);
|
||
this.container.add(title);
|
||
|
||
// Subtitle
|
||
const subtitle = uiScene.add.text(0, -panelHeight / 2 + 50, '24 Slots Total', {
|
||
fontSize: '14px',
|
||
fill: '#aaaaaa'
|
||
}).setOrigin(0.5);
|
||
this.container.add(subtitle);
|
||
|
||
// Hotbar section (6 slots)
|
||
const hotbarLabel = uiScene.add.text(-panelWidth / 2 + 20, -panelHeight / 2 + 80,
|
||
'HOTBAR (1-6):', {
|
||
fontSize: '16px',
|
||
fill: '#FFD700',
|
||
fontStyle: 'bold'
|
||
});
|
||
this.container.add(hotbarLabel);
|
||
|
||
// Draw hotbar slots
|
||
this.hotbarSlots = [];
|
||
const slotSize = 50;
|
||
const slotSpacing = 10;
|
||
const startX = -panelWidth / 2 + 20;
|
||
const hotbarY = -panelHeight / 2 + 110;
|
||
|
||
for (let i = 0; i < 6; i++) {
|
||
const x = startX + (i % 6) * (slotSize + slotSpacing);
|
||
const slot = this.createSlot(uiScene, x, hotbarY, slotSize, i);
|
||
this.hotbarSlots.push(slot);
|
||
this.container.add(slot.bg);
|
||
this.container.add(slot.text);
|
||
}
|
||
|
||
// Backpack section (15 slots in 3 rows of 5)
|
||
const backpackLabel = uiScene.add.text(-panelWidth / 2 + 20, hotbarY + 80,
|
||
'BACKPACK:', {
|
||
fontSize: '16px',
|
||
fill: '#FFD700',
|
||
fontStyle: 'bold'
|
||
});
|
||
this.container.add(backpackLabel);
|
||
|
||
this.backpackSlots = [];
|
||
const backpackStartY = hotbarY + 110;
|
||
|
||
for (let i = 0; i < 18; i++) {
|
||
const row = Math.floor(i / 6);
|
||
const col = i % 6;
|
||
const x = startX + col * (slotSize + slotSpacing);
|
||
const y = backpackStartY + row * (slotSize + slotSpacing);
|
||
const slot = this.createSlot(uiScene, x, y, slotSize, i + 6);
|
||
this.backpackSlots.push(slot);
|
||
this.container.add(slot.bg);
|
||
this.container.add(slot.text);
|
||
}
|
||
|
||
// Close button
|
||
const closeBtn = uiScene.add.text(0, panelHeight / 2 - 40, '[ CLOSE (I) ]', {
|
||
fontSize: '18px',
|
||
color: '#00ff00',
|
||
backgroundColor: '#003300',
|
||
padding: { x: 20, y: 10 },
|
||
fontStyle: 'bold'
|
||
}).setOrigin(0.5);
|
||
|
||
closeBtn.setInteractive({ useHandCursor: true });
|
||
closeBtn.on('pointerover', () => closeBtn.setScale(1.1));
|
||
closeBtn.on('pointerout', () => closeBtn.setScale(1.0));
|
||
closeBtn.on('pointerdown', () => this.toggle());
|
||
this.container.add(closeBtn);
|
||
|
||
// Instructions
|
||
const instructions = uiScene.add.text(0, panelHeight / 2 - 80,
|
||
'Click slot to select • Press I to close', {
|
||
fontSize: '12px',
|
||
fill: '#888888'
|
||
}).setOrigin(0.5);
|
||
this.container.add(instructions);
|
||
}
|
||
|
||
createSlot(scene, x, y, size, index) {
|
||
// Background
|
||
const bg = scene.add.graphics();
|
||
bg.fillStyle(0x4a3520, 0.8); // Brown
|
||
bg.fillRoundedRect(x, y, size, size, 4);
|
||
bg.lineStyle(2, 0x8B4513, 1);
|
||
bg.strokeRoundedRect(x, y, size, size, 4);
|
||
|
||
// Slot number
|
||
const text = scene.add.text(x + size / 2, y + size / 2, `${index + 1}`, {
|
||
fontSize: '12px',
|
||
fill: '#ffffff'
|
||
}).setOrigin(0.5);
|
||
|
||
// Make interactive
|
||
const hitArea = new Phaser.Geom.Rectangle(x, y, size, size);
|
||
bg.setInteractive(hitArea, Phaser.Geom.Rectangle.Contains);
|
||
bg.on('pointerdown', () => {
|
||
this.selectSlot(index);
|
||
});
|
||
bg.on('pointerover', () => {
|
||
bg.clear();
|
||
bg.fillStyle(0x6a5520, 0.9); // Lighter brown
|
||
bg.fillRoundedRect(x, y, size, size, 4);
|
||
bg.lineStyle(2, 0xFFD700, 1); // Gold border
|
||
bg.strokeRoundedRect(x, y, size, size, 4);
|
||
});
|
||
bg.on('pointerout', () => {
|
||
bg.clear();
|
||
bg.fillStyle(0x4a3520, 0.8);
|
||
bg.fillRoundedRect(x, y, size, size, 4);
|
||
bg.lineStyle(2, 0x8B4513, 1);
|
||
bg.strokeRoundedRect(x, y, size, size, 4);
|
||
});
|
||
|
||
return { bg, text, index };
|
||
}
|
||
|
||
selectSlot(index) {
|
||
console.log(`📦 Selected slot ${index + 1}`);
|
||
|
||
// Update UIScene selected slot
|
||
const uiScene = this.scene.scene.get('UIScene');
|
||
if (uiScene && uiScene.selectSlot) {
|
||
uiScene.selectSlot(index);
|
||
}
|
||
|
||
// Close inventory if hotbar slot (0-5)
|
||
if (index < 6) {
|
||
this.toggle();
|
||
}
|
||
}
|
||
|
||
toggle() {
|
||
this.isOpen = !this.isOpen;
|
||
|
||
if (this.container) {
|
||
this.container.setVisible(this.isOpen);
|
||
}
|
||
|
||
console.log(`🎒 Inventory: ${this.isOpen ? 'OPEN' : 'CLOSED'}`);
|
||
|
||
// Pause game when open
|
||
if (this.scene.physics) {
|
||
this.scene.physics.world.isPaused = this.isOpen;
|
||
}
|
||
}
|
||
|
||
update() {
|
||
if (!this.isOpen) return;
|
||
|
||
// Update slot contents from inventory system
|
||
const inv = this.scene.inventorySystem;
|
||
if (!inv || !inv.slots) return;
|
||
|
||
// Update hotbar slots (0-5)
|
||
this.hotbarSlots.forEach((slot, i) => {
|
||
const invSlot = inv.slots[i];
|
||
if (invSlot && invSlot.item) {
|
||
slot.text.setText(`${invSlot.item.id}\n×${invSlot.quantity || 1}`);
|
||
slot.text.setFontSize('10px');
|
||
} else {
|
||
slot.text.setText(`${i + 1}`);
|
||
slot.text.setFontSize('12px');
|
||
}
|
||
});
|
||
|
||
// Update backpack slots (6-23)
|
||
this.backpackSlots.forEach((slot, i) => {
|
||
const invSlot = inv.slots[i + 6];
|
||
if (invSlot && invSlot.item) {
|
||
slot.text.setText(`${invSlot.item.id}\n×${invSlot.quantity || 1}`);
|
||
slot.text.setFontSize('10px');
|
||
} else {
|
||
slot.text.setText(`${i + 10}`);
|
||
slot.text.setFontSize('12px');
|
||
}
|
||
});
|
||
}
|
||
}
|