Add visual container system with stacked barrels

- Replace single barrels with dynamic stacked containers
- 1 barrel = 10 units (100 fuel = 10 barrels, 50 oil = 5 barrels)
- Fuel barrels stacked on left, oil barrels on right
- Interactive zones for each barrel group
- Barrels update dynamically when inventory changes
- Realistic ship storage appearance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/scenes/ShipDeckScene.js

@@ -48,33 +48,13 @@ export default class ShipDeckScene extends Phaser.Scene {
     }
 
     createBarrels() {
-        // Fuel barrel
+        // Initialize barrel arrays
-        const fuelBarrel = this.add.rectangle(150, 350, 60, 80, 0x8B0000);
+        this.fuelBarrels = [];
-        fuelBarrel.setInteractive({ useHandCursor: true });
+        this.oilBarrels = [];
-        fuelBarrel.setStrokeStyle(3, 0x000000);
 
-        this.add.text(150, 350, 'FUEL', {
+        // Create stacked barrels
-            fontSize: '12px',
+        this.createFuelBarrels();
-            fill: '#fff'
+        this.createOilBarrels();
-        }).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!`);
-        });
 
         // 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() {