lol

index.html

@@ -245,6 +245,7 @@
     <script src="src/scenes/BootScene.js"></script>
     <script src="src/scenes/PreloadScene.js"></script>
     <script src="src/scenes/IntroScene.js"></script> <!-- 🎬 INTRO SEQUENCE (Jan 10, 2026) -->
+    <script src="src/scenes/MainMenuScene.js"></script> <!-- 🎮 MAIN MENU (Style 32) -->
     <!-- <script src="src/scenes/DemoScene.js"></script> --> <!-- 🎮 DEMO SCENE (DISABLED) -->
     <!-- <script src="src/scenes/DemoSceneEnhanced.js"></script> --> <!-- ✨ ENHANCED DEMO (DISABLED) -->
     <script src="src/scenes/TiledTestScene.js"></script> <!-- 🗺️ Tiled Map Test Scene -->

src/game.js

@@ -81,6 +81,7 @@ const config = {
         PreloadScene,
         AssetTestScene,
         IntroScene,
+        MainMenuScene,
         PrologueScene,
         EnhancedPrologueScene,
         UltimatePrologueScene,

src/scenes/MainMenuScene.js

@@ -0,0 +1,113 @@
+class MainMenuScene extends Phaser.Scene {
+    constructor() {
+        super({ key: 'MainMenuScene' });
+    }
+
+    preload() {
+        // 1. GLASBA
+        this.load.audio('main_theme', 'assets/audio/music/main_theme.mp3');
+
+        // 2. OZADJE (Placeholder logic incase image is missing)
+        // If you have the specific file: 'assets/slike/main_menu/menu_bg_noir.png'
+        this.load.image('menu_bg_noir', 'assets/slike/gui/menu_bg_noir.png');
+    }
+
+    create() {
+        // 1. GLASBA: Takojšen začetek (Loop)
+        if (!this.sound.get('main_theme')) {
+            this.sound.play('main_theme', { loop: true, volume: 0.5 });
+        }
+
+        // 2. OZADJE: Kai na spalni vreči, Noir stil
+        // Add image centered
+        const bg = this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, 'menu_bg_noir');
+        // Fit to screen (cover)
+        const scaleX = this.cameras.main.width / bg.width;
+        const scaleY = this.cameras.main.height / bg.height;
+        const scale = Math.max(scaleX, scaleY);
+        bg.setScale(scale).setTint(0x888888); // Slight dark tint base
+
+        // VIGNETTE EFFECT (Temni robovi) - Noir Stil
+        // Create a radial gradient texture on the fly or use an overlay
+        const vignette = this.add.graphics();
+        vignette.fillStyle(0x000000, 1);
+        // Draw separate rects or use a texture, simplest is a big circle cut out or just overlay image
+        // For pure code vignette:
+        // We will simple darken edges using a radial gradient Sprite if possible, 
+        // but Phaser Graphics doesn't support radial gradients easily in WebGL without texture.
+        // Alternative: Add a dark border overlay.
+
+        // Simulating vignette with dark overlay and lower alpha in center (hacky but works without assets)
+        // Ideally we load a 'vignette.png'
+
+        // Let's use a Title Text for Flair
+        this.add.text(this.cameras.main.centerX, 100, "MRTVA DOLINA", {
+            fontFamily: 'Access', // Or your game font
+            fontSize: '84px',
+            color: '#FFFFFF',
+            stroke: '#000000',
+            strokeThickness: 8
+        }).setOrigin(0.5);
+
+
+        // 3. GUMB ZA ZAČETEK: Style 32 (5px rob)
+        this.createStyle32Button(this.cameras.main.centerX, 400, "ZAČNI POT", () => {
+            // Stop music if you want fresh start or keep it
+            this.sound.stopAll();
+
+            // Ko klikneš, ugasnemo meni in zaženemo INTRO
+            this.scene.start('IntroScene');
+        });
+    }
+
+    /**
+     * Helper to create Style 32 Button
+     * 5px Black Border, White Text, Hover Effect
+     */
+    createStyle32Button(x, y, text, onClick) {
+        // Container
+        const button = this.add.container(x, y);
+
+        // Background (White inside)
+        const bg = this.add.rectangle(0, 0, 300, 60, 0xFFFFFF);
+        // Border (Black 5px) - simulated by a larger black rectangle behind or stroke
+        // Actually Phaser Rectangle allows stroke
+        bg.setStrokeStyle(5, 0x000000); // 5px Black Border
+        bg.setInteractive({ useHandCursor: true });
+
+        // Text
+        const label = this.add.text(0, 0, text, {
+            fontFamily: 'Arial', // Replace with game font
+            fontSize: '28px',
+            color: '#000000',
+            fontStyle: 'bold'
+        }).setOrigin(0.5);
+
+        button.add([bg, label]);
+
+        // Interactions
+        bg.on('pointerdown', () => {
+            bg.setFillStyle(0xDDDDDD); // Press effect
+        });
+
+        bg.on('pointerup', () => {
+            bg.setFillStyle(0xFFFFFF);
+            onClick();
+        });
+
+        bg.on('pointerover', () => {
+            bg.setFillStyle(0xEEEEEE); // Hover light gray
+            label.setScale(1.1); // Pop effect
+        });
+
+        bg.on('pointerout', () => {
+            bg.setFillStyle(0xFFFFFF);
+            label.setScale(1.0);
+        });
+    }
+}
+
+// Export for node/webpack env (if needed) or global
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = MainMenuScene;
+}

src/scenes/PreloadScene.js

@@ -551,7 +551,7 @@ class PreloadScene extends Phaser.Scene {
                     // ✅ Starting INTRO SEQUENCE (NEW! Jan 10, 2026)
                     this.time.delayedCall(500, () => {
                         console.log('🎬 Starting GameScene (DEMO MODE - SKIP INTRO)...');
-                        this.scene.start('GameScene'); // ← NEW INTRO SEQUENCE
+                        this.scene.start('MainMenuScene'); // 🎮 MENU START
                     });
                 }
             });