V.9

src/GameScene.js

@@ -15,7 +15,7 @@ export class GameScene extends Phaser.Scene {
 
         // Stats
         this.numberOfJewels = 4;
-        this.startRows = 2;
+        this.startRows = 5;
         this.level = 1;
         this.matchesNeeded = 8;
         this.score = 0;
@@ -111,7 +111,7 @@ export class GameScene extends Phaser.Scene {
         this.createStart();
 
         // Background Music
-        this.bgMusic = this.sound.add(`${this.ally}-music`, { volume: 0.25 });
+        this.bgMusic = this.sound.add(`${this.ally}-music`, { volume: 0.35 });
         this.bgMusic.loop = true;
         this.bgMusic.play();
 
@@ -1222,7 +1222,8 @@ export class GameScene extends Phaser.Scene {
                             duration: 1500,
                             ease: 'Linear',
                             onComplete: () => {
-                                this.scene.restart();
+                                this.sound.stopAll();
+                                this.scene.start('MenuScene');
                             }
                         });
                     });

src/MenuScene.js

@@ -12,6 +12,9 @@ export class MenuScene extends Phaser.Scene {
 
         this.load.image('menuBackground', 'assets/menuBackground.png');
         this.load.image('menuLogo', 'assets/menuLogo.png');
+        this.load.image('menuPlate', 'assets/menuPlate.png');
+        this.load.audio('menuMusic', 'assets/menuMusic.mp3');
+        this.load.font('royalAcid', 'assets/Royalacid.ttf');
     }
 
     create() {
@@ -23,6 +26,11 @@ export class MenuScene extends Phaser.Scene {
             this.game.config.height / background.height
         );
 
+        // Theme Music
+        this.bgMusic = this.sound.add('menuMusic');
+        this.bgMusic.loop = true;
+        this.bgMusic.play();
+
         // Create array to store jewel objects
         this.jewels = [];
         
@@ -34,6 +42,53 @@ export class MenuScene extends Phaser.Scene {
             loop: true
         });
 
+        // Setup Menu
+        this.startMenu = this.add.image(300, 650, 'menuPlate').setOrigin(0.5).setScale(0);
+        this.startMenu.preFX.addShadow(-5, -5, .005);
+        
+        // Make the start menu clickable
+        this.startMenu.setInteractive();
+        this.startMenu.on('pointerdown', () => {
+            // Create fade overlay
+            const fadeOverlay = this.add.rectangle(
+                0, 0,
+                this.game.config.width,
+                this.game.config.height,
+                0x000000
+            );
+            fadeOverlay.setOrigin(0, 0);
+            
+            // Fade out overlay and transition to GameScene
+            this.tweens.add({
+                targets: fadeOverlay,
+                alpha: 1,
+                duration: 1000,
+                onComplete: () => {
+                    // Stop and destroy the music after fadeout
+                    this.bgMusic.stop();
+                    this.bgMusic.destroy();
+                    
+                    // Start the game scene
+                    this.scene.start('GameScene');
+                }
+            });
+        });
+
+        this.startMenuText = this.add.text(180, 630, 'New Game', {
+            fontFamily: 'royalAcid, arial',
+            fontSize: '56px',
+            fill: '#f375ed', // Primary color for the text
+            stroke: '#40faf6', // Secondary color for stroke (creates gradient effect)
+            strokeThickness: 2,
+            shadow: {
+                offsetX: 3,
+                offsetY: 3,
+                color: '#1b426e',
+                blur: 5,
+                fill: true
+            }
+        }).setAlpha(0);
+
         // Create and animate menu logo
         this.menuLogo = this.add.image(-300, -300, 'menuLogo');
         this.menuLogo.setOrigin(0.5, 0.5);
@@ -44,10 +99,11 @@ export class MenuScene extends Phaser.Scene {
             x: this.game.config.width / 2,
             y: 350,
             scale: .9,
-            duration: 2000,
+            duration: 4000,
             ease: 'Back.out',
             delay: 500,
             onComplete: () => {
+                // Pulse Menu
                 this.tweens.add({
                     targets: this.menuLogo,
                     scale: .8,
@@ -55,6 +111,22 @@ export class MenuScene extends Phaser.Scene {
                     yoyo: true,
                     repeat: -1
                 });
+
+                // Start Button  
+                this.tweens.add({
+                    targets: this.startMenu,
+                    angle: 1080,
+                    duration: 1000,
+                    scale: 1,
+                    ease: 'Quart.out',
+                    onComplete: () => {
+                        this.tweens.add({
+                            targets: this.startMenuText,
+                            duration: 1000,
+                            alpha: 1
+                        });
+                    }
+                });
             }
         });
     }

src/config.js

@@ -81,7 +81,7 @@ export const LEVEL_CONFIG = {
     },
     11: {
         numberOfJewels: 7,
-        matchesNeeded: 9,
+        matchesNeeded: 8,
         moveInterval: 8500,
         ally: 'bear',
         spritePlus: 11,
@@ -89,7 +89,7 @@ export const LEVEL_CONFIG = {
     },
     12: {
         numberOfJewels: 7,
-        matchesNeeded: 8,
+        matchesNeeded: 6,
         moveInterval: 8000,
         ally: 'bear',
         spritePlus: 11,