inventori
This commit is contained in:
240
src/systems/FullInventoryUI.js
Normal file
240
src/systems/FullInventoryUI.js
Normal file
@@ -0,0 +1,240 @@
|
||||
/**
|
||||
* 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');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user