feat: redesign main menu with background image and animated logos

- Add `main-menu.png` background image that scales to fit the screen
- Replace static text titles with animated `logo-title` and `logo-people` images
- Add sine-wave tweens for logo scale and rotation effects
- Comment out the previous text-based game list (preserved for reference)

src/scenes/MainMenu.js

@@ -10,6 +10,7 @@ export default class MainMenu extends Phaser.Scene {
         this.load.audio('mainTheme', 'assets/music/00-main-theme.mp3');
         this.load.image('logo-title', 'assets/images/logo-title.png');
         this.load.image('logo-people', 'assets/images/logo-people.png');
+        this.load.image('main-menu', 'assets/images/main-menu.png');
     }
 
     shutdown() {
@@ -21,35 +22,65 @@ export default class MainMenu extends Phaser.Scene {
 
         const cx = 800, cy = 450;
 
-        // Title
+        // Add background image
-        this.add.text(cx, 280, 'ATTENTION RETRO DISORDER', {
+        const bg = this.add.image(cx, cy, 'main-menu').setOrigin(0.5);
-            fontSize: '64px',
+        const scaleX = this.cameras.main.width / bg.width;
-            fontFamily: 'monospace',
+        const scaleY = this.cameras.main.height / bg.height;
-            color: '#00ff00',
+        bg.setScale(Math.max(scaleX, scaleY));
-            stroke: '#005500',
-            strokeThickness: 4,
-        }).setOrigin(0.5);
 
-        this.add.text(cx, 370, 'A MULTI-GAME RETRO EXPERIENCE', {
+        // Images
-            fontSize: '28px',
+        const logoPeople = this.add.image(cx, 350, 'logo-people').setOrigin(0.5).setScale(.70).setAngle(-15);
-            fontFamily: 'monospace',
+        const logoTitle = this.add.image(cx, 350, 'logo-title').setOrigin(0.5).setScale(.75).setAngle(5);
-            color: '#00aa00',
-        }).setOrigin(0.5);
 
-        // Game list
+        this.tweens.add({
-        const games = [
+            targets: logoPeople,
-            '★  COLORADO DEFENSE  (Missile Command)',
+            scaleX: 0.80,
-            '★  CODE BUG INVADERS  (Space Invaders)',
+            scaleY: 0.80,
-            '★  DOT DUDE  (Pac-Man)',
+            duration: 3000,
-            '★  SMASH OUT  (Arkanoid)',
+            yoyo: true,
-        ];
+            repeat: -1,
-        games.forEach((txt, i) => {
+            ease: 'Sine.easeInOut',
-            this.add.text(cx, 470 + i * 38, txt, {
-                fontSize: '22px',
-                fontFamily: 'monospace',
-                color: '#ffff00',
-            }).setOrigin(0.5);
         });
+        this.tweens.add({
+            targets: logoPeople,
+            angle: 15,
+            duration: 2000,
+            yoyo: true,
+            repeat: -1,
+            ease: 'Sine.easeInOut',
+        });
+        this.tweens.add({
+            targets: logoTitle,
+            angle: -5,
+            duration: 5000,
+            yoyo: true,
+            repeat: -1,
+            ease: 'Sine.easeInOut',
+        });
+        this.tweens.add({
+            targets: logoTitle,
+            scaleX: 0.90,
+            scaleY: 0.90,
+            duration: 8000,
+            yoyo: true,
+            repeat: -1,
+            ease: 'Sine.easeInOut',
+        });
+
+        // // Game list
+        // const games = [
+        //     '★  COLORADO DEFENSE  (Missile Command)',
+        //     '★  CODE BUG INVADERS  (Space Invaders)',
+        //     '★  DOT DUDE  (Pac-Man)',
+        //     '★  SMASH OUT  (Arkanoid)',
+        // ];
+        // games.forEach((txt, i) => {
+        //     this.add.text(cx, 470 + i * 38, txt, {
+        //         fontSize: '22px',
+        //         fontFamily: 'monospace',
+        //         color: '#ffff00',
+        //     }).setOrigin(0.5);
+        // });
 
         // Blink "Press SPACE"
         const prompt = this.add.text(cx, 730, 'PRESS SPACE OR CLICK TO START', {