diff --git a/src/scenes/ShipDeckScene.js b/src/scenes/ShipDeckScene.js index 07a52a2..dba662d 100644 --- a/src/scenes/ShipDeckScene.js +++ b/src/scenes/ShipDeckScene.js @@ -48,33 +48,13 @@ export default class ShipDeckScene extends Phaser.Scene { } createBarrels() { - // Fuel barrel - const fuelBarrel = this.add.rectangle(150, 350, 60, 80, 0x8B0000); - fuelBarrel.setInteractive({ useHandCursor: true }); - fuelBarrel.setStrokeStyle(3, 0x000000); + // Initialize barrel arrays + this.fuelBarrels = []; + this.oilBarrels = []; - this.add.text(150, 350, 'FUEL', { - fontSize: '12px', - fill: '#fff' - }).setOrigin(0.5); - - fuelBarrel.on('pointerdown', () => { - this.showMessage(`Fuel barrel: ${this.inventory.fuel} units remaining. Needed for boiling down whale blubber.`); - }); - - // Whale oil barrel - const oilBarrel = this.add.rectangle(250, 350, 60, 80, 0x4B4B00); - oilBarrel.setInteractive({ useHandCursor: true }); - oilBarrel.setStrokeStyle(3, 0x000000); - - this.add.text(250, 350, 'OIL', { - fontSize: '12px', - fill: '#fff' - }).setOrigin(0.5); - - oilBarrel.on('pointerdown', () => { - this.showMessage(`Whale oil: ${this.inventory.whaleOil} barrels. Your precious cargo!`); - }); + // Create stacked barrels + this.createFuelBarrels(); + this.createOilBarrels(); // Penguin cage (hidden until discovered) this.penguinCage = this.add.rectangle(650, 350, 80, 80, 0x333333); @@ -99,6 +79,110 @@ export default class ShipDeckScene extends Phaser.Scene { }); } + createFuelBarrels() { + const barrelCount = Math.ceil(this.inventory.fuel / 10); + if (barrelCount === 0) return; + + const baseX = 150; + const baseY = 420; + const barrelWidth = 60; + const barrelHeight = 80; + const horizontalSpacing = 70; + const verticalSpacing = 85; + const barrelsPerRow = 4; + + // Create barrels in stacking pattern + for (let i = 0; i < barrelCount; i++) { + const row = i % barrelsPerRow; + const stackLevel = Math.floor(i / barrelsPerRow); + const x = baseX + (row * horizontalSpacing); + const y = baseY - (stackLevel * verticalSpacing); + + const barrel = this.add.rectangle(x, y, barrelWidth, barrelHeight, 0x8B0000); + barrel.setStrokeStyle(3, 0x000000); + this.fuelBarrels.push(barrel); + + // Add label only on first barrel + if (i === 0) { + const label = this.add.text(x, y, 'FUEL', { + fontSize: '12px', + fill: '#fff' + }).setOrigin(0.5); + this.fuelBarrels.push(label); + } + } + + // Create interactive zone covering all fuel barrels + const zoneWidth = Math.min(barrelCount, barrelsPerRow) * horizontalSpacing + barrelWidth; + const zoneHeight = Math.ceil(barrelCount / barrelsPerRow) * verticalSpacing + barrelHeight; + const zoneX = baseX + ((Math.min(barrelCount, barrelsPerRow) - 1) * horizontalSpacing) / 2; + const zoneY = baseY - ((Math.ceil(barrelCount / barrelsPerRow) - 1) * verticalSpacing) / 2; + + const interactiveZone = this.add.rectangle(zoneX, zoneY, zoneWidth, zoneHeight, 0x000000, 0); + interactiveZone.setInteractive({ useHandCursor: true }); + interactiveZone.on('pointerdown', () => { + this.showMessage(`Fuel supply: ${barrelCount} barrels (${this.inventory.fuel} units). Needed for boiling down whale blubber.`); + }); + this.fuelBarrels.push(interactiveZone); + } + + createOilBarrels() { + const barrelCount = Math.ceil(this.inventory.whaleOil / 10); + if (barrelCount === 0) return; + + const baseX = 300; + const baseY = 420; + const barrelWidth = 60; + const barrelHeight = 80; + const horizontalSpacing = 70; + const verticalSpacing = 85; + const barrelsPerRow = 3; + + // Create barrels in stacking pattern + for (let i = 0; i < barrelCount; i++) { + const row = i % barrelsPerRow; + const stackLevel = Math.floor(i / barrelsPerRow); + const x = baseX + (row * horizontalSpacing); + const y = baseY - (stackLevel * verticalSpacing); + + const barrel = this.add.rectangle(x, y, barrelWidth, barrelHeight, 0x4B4B00); + barrel.setStrokeStyle(3, 0x000000); + this.oilBarrels.push(barrel); + + // Add label only on first barrel + if (i === 0) { + const label = this.add.text(x, y, 'OIL', { + fontSize: '12px', + fill: '#fff' + }).setOrigin(0.5); + this.oilBarrels.push(label); + } + } + + // Create interactive zone covering all oil barrels + const zoneWidth = Math.min(barrelCount, barrelsPerRow) * horizontalSpacing + barrelWidth; + const zoneHeight = Math.ceil(barrelCount / barrelsPerRow) * verticalSpacing + barrelHeight; + const zoneX = baseX + ((Math.min(barrelCount, barrelsPerRow) - 1) * horizontalSpacing) / 2; + const zoneY = baseY - ((Math.ceil(barrelCount / barrelsPerRow) - 1) * verticalSpacing) / 2; + + const interactiveZone = this.add.rectangle(zoneX, zoneY, zoneWidth, zoneHeight, 0x000000, 0); + interactiveZone.setInteractive({ useHandCursor: true }); + interactiveZone.on('pointerdown', () => { + this.showMessage(`Whale oil: ${barrelCount} barrels (${this.inventory.whaleOil} units). Your precious cargo!`); + }); + this.oilBarrels.push(interactiveZone); + } + + clearBarrels() { + // Destroy all fuel barrels + this.fuelBarrels.forEach(barrel => barrel.destroy()); + this.fuelBarrels = []; + + // Destroy all oil barrels + this.oilBarrels.forEach(barrel => barrel.destroy()); + this.oilBarrels = []; + } + createWheel() { // Ship's wheel const wheel = this.add.circle(550, 200, 40, 0x8B4513); @@ -154,6 +238,11 @@ export default class ShipDeckScene extends Phaser.Scene { this.penguinCage.setVisible(discovered); this.penguinEmoji.setVisible(discovered); } + + // Refresh barrel visualization + this.clearBarrels(); + this.createFuelBarrels(); + this.createOilBarrels(); } createMessageBox() {