From a17500dff4d2bf41b61de0f71405c27bf55a26e8 Mon Sep 17 00:00:00 2001
From: Thomas Richter <git@tricnet.de>
Date: Wed, 17 Dec 2025 03:43:27 +0100
Subject: [PATCH] Add intro scene with title screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create IntroScene with ocean-themed background
- Display game title and 18th century whaling subtitle
- Add decorative waves and ship silhouette
- Implement START GAME button with hover effects
- Initialize inventory and transition to ShipDeckScene

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/main.js              |   3 +-
 src/scenes/IntroScene.js | 120 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 src/scenes/IntroScene.js

diff --git a/src/main.js b/src/main.js
index ecfa924..95acc92 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import Phaser from 'phaser';
+import IntroScene from './scenes/IntroScene.js';
 import ShipDeckScene from './scenes/ShipDeckScene.js';
 import MapScene from './scenes/MapScene.js';
 import TransitionScene from './scenes/TransitionScene.js';
@@ -10,7 +11,7 @@ const config = {
     height: 600,
     parent: 'game-container',
     backgroundColor: '#2d5f8e',
-    scene: [ShipDeckScene, MapScene, TransitionScene, HuntingScene],
+    scene: [IntroScene, ShipDeckScene, MapScene, TransitionScene, HuntingScene],
     physics: {
         default: 'arcade',
         arcade: {
diff --git a/src/scenes/IntroScene.js b/src/scenes/IntroScene.js
new file mode 100644
index 0000000..ac81f5f
--- /dev/null
+++ b/src/scenes/IntroScene.js
@@ -0,0 +1,120 @@
+export default class IntroScene extends Phaser.Scene {
+    constructor() {
+        super({ key: 'IntroScene' });
+    }
+
+    init(data) {
+        // No data needed - this is the entry point
+    }
+
+    create() {
+        // Ocean blue background
+        this.add.rectangle(400, 300, 800, 600, 0x1e5a8e);
+
+        // Draw decorative waves
+        this.drawWaves();
+
+        // Ship silhouette (decorative element)
+        this.drawShip();
+
+        // Game title
+        const title = this.add.text(400, 150, 'WHALE HUNTING', {
+            fontSize: '56px',
+            fill: '#ffffff',
+            fontStyle: 'bold'
+        }).setOrigin(0.5);
+        title.setStroke('#000000', 3);
+
+        // Subtitle
+        this.add.text(400, 210, 'An 18th Century Whaling Voyage', {
+            fontSize: '22px',
+            fill: '#cccccc',
+            fontStyle: 'italic'
+        }).setOrigin(0.5);
+
+        // Decorative separator line
+        const line = this.add.graphics();
+        line.lineStyle(3, 0xcccccc, 0.6);
+        line.lineBetween(200, 240, 600, 240);
+
+        // Start button
+        const buttonBg = this.add.rectangle(400, 400, 200, 60, 0x2d5f8e);
+        buttonBg.setStrokeStyle(3, 0xffffff);
+        buttonBg.setInteractive({ useHandCursor: true });
+
+        const buttonText = this.add.text(400, 400, 'START GAME', {
+            fontSize: '28px',
+            fill: '#ffffff',
+            fontStyle: 'bold'
+        }).setOrigin(0.5);
+
+        // Button hover effects
+        buttonBg.on('pointerover', () => {
+            buttonBg.setFillStyle(0x4a90c4);
+        });
+
+        buttonBg.on('pointerout', () => {
+            buttonBg.setFillStyle(0x2d5f8e);
+        });
+
+        // Button click handler
+        buttonBg.on('pointerdown', () => {
+            this.startGame();
+        });
+
+        // Instructions text
+        this.add.text(400, 530, 'Click to begin your adventure', {
+            fontSize: '16px',
+            fill: '#ffff99'
+        }).setOrigin(0.5);
+    }
+
+    drawWaves() {
+        const waves = this.add.graphics();
+        waves.lineStyle(2, 0x4a90c4, 0.5);
+
+        // Draw 8 wavy horizontal lines
+        for (let i = 0; i < 8; i++) {
+            const y = 80 + (i * 60);
+            waves.beginPath();
+            waves.moveTo(0, y);
+
+            // Create wave pattern
+            for (let x = 0; x <= 800; x += 20) {
+                const waveY = y + Math.sin((x + i * 50) * 0.02) * 8;
+                waves.lineTo(x, waveY);
+            }
+
+            waves.strokePath();
+        }
+    }
+
+    drawShip() {
+        const ship = this.add.graphics();
+
+        // Hull
+        ship.fillStyle(0x654321);
+        ship.fillRect(655, 427, 90, 45);
+
+        // Sail (triangle)
+        ship.fillStyle(0x8B4513);
+        ship.beginPath();
+        ship.moveTo(700, 380);  // Top of sail
+        ship.lineTo(680, 430);  // Bottom left
+        ship.lineTo(720, 430);  // Bottom right
+        ship.closePath();
+        ship.fillPath();
+    }
+
+    startGame() {
+        // Initialize inventory with starting values
+        const inventory = {
+            whaleOil: 0,
+            fuel: 100,
+            penguins: 0
+        };
+
+        // Transition to ship deck
+        this.scene.start('ShipDeckScene', { inventory: inventory });
+    }
+}