Add fullscreen toggle functionality to menu scene with updated styling

- Added fullscreen menu option alongside existing start menu
- Implemented fullscreen toggle functionality using Phaser's scale manager
- Updated text styling for both menu items with consistent color scheme
- Modified tween animations to include the new fullscreen menu element
- Adjusted positioning and visual elements for better UI layout

src/MenuScene.js

@@ -91,6 +91,7 @@ export class MenuScene extends Phaser.Scene {
 
         // Setup Menu
         this.startMenu = this.add.image(300, 650, 'menuPlate').setOrigin(0.5).setScale(0);
+        this.fullscreenMenu = this.add.image(300, 250, 'menuPlate').setOrigin(0.5).setScale(0);
         this.startMenu.preFX.addShadow(-5, -5, .005);
         
         // Make the start menu clickable
@@ -123,16 +124,40 @@ export class MenuScene extends Phaser.Scene {
             });
         });
 
+        this.fullscreenMenu.setInteractive();
+        this.fullscreenMenu.on('pointerdown', () => {
+            if (this.scale.isFullscreen) {
+                this.scale.stopFullscreen();
+            } else {
+                this.scale.startFullscreen();
+            }
+        });
+
         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)
+            stroke: '#86710fff', // Secondary color for stroke (creates gradient effect)
             strokeThickness: 2,
             shadow: {
                 offsetX: 3,
                 offsetY: 3,
-                color: '#1b426e',
+                color: '#07121fff',
+                blur: 5,
+                fill: true
+            }
+        }).setAlpha(0);
+
+        this.toggleFullscreenText = this.add.text(160, 240, 'Toggle Fullscreen', {
+            fontFamily: 'royalAcid, arial',
+            fontSize: '36px',
+            fill: '#f375ed', // Primary color for the text
+            stroke: '#86710fff', // Secondary color for stroke (creates gradient effect)
+            strokeThickness: 2,
+            shadow: {
+                offsetX: 3,
+                offsetY: 3,
+                color: '#07121fff',
                 blur: 5,
                 fill: true
             }
@@ -220,7 +245,7 @@ export class MenuScene extends Phaser.Scene {
 
                 // Start Button  
                 this.tweens.add({
-                    targets: this.startMenu,
+                    targets: [this.startMenu, this.fullscreenMenu],
                     angle: 1080,
                     duration: 1000,
                     scale: 1,
@@ -229,6 +254,7 @@ export class MenuScene extends Phaser.Scene {
                         this.tweens.add({
                             targets: [
                                 this.startMenuText, 
+                                this.toggleFullscreenText,
                                 this.allyMenuText, 
                                 this.allyMenuDifficulty, 
                                 this.allyImage,