feat: Add 4 new music tracks and improve loading progress UI across scenes

- Added track_05.mp3 through track_08.mp3 with corresponding metadata to tracks.json
- Implemented consistent loading progress text (960,540 center, white on black stroke) in MainMenuScene, NewPuzzleScene, and PuzzleScene
- Added per-scene load progress listeners to show real-time loading percentage
- Ensured proper cleanup of progress text and event listeners on load completion

assets/audio/music/tracks.json

@@ -18,5 +18,25 @@
     "path": "assets/audio/music/track_04.mp3",
     "title": "Just Puzzlin'",
     "artist": "AI Earthless"
+  },
+  {
+    "path": "assets/audio/music/track_05.mp3",
+    "title": "Relaxing Sunday",
+    "artist": "AI Dave Matthews"
+  },
+  {
+    "path": "assets/audio/music/track_06.mp3",
+    "title": "Memory's Reflection",
+    "artist": "AI Dire Straits"
+  },
+  {
+    "path": "assets/audio/music/track_07.mp3",
+    "title": "Infinite Imagination",
+    "artist": "AI M83"
+  },
+  {
+    "path": "assets/audio/music/track_07.mp3",
+    "title": "Digital Industry",
+    "artist": "AI Zedd"
   }
 ]

js/scenes/MainMenuScene.js

@@ -18,6 +18,31 @@ class MainMenuScene extends Phaser.Scene {
     if (!this.cache.audio.exists('main_menu_music')) {
       this.load.audio('main_menu_music', 'assets/audio/music/main_menu.mp3');
     }
+
+    // Loading progress text
+    this._loadingText = this.add.text(960, 540, 'Loading 0%...', {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: '36px',
+      color: '#ffffff',
+      stroke: '#000000',
+      strokeThickness: 4,
+    }).setOrigin(0.5);
+
+    this._onLoadProgress = (value) => {
+      if (this._loadingText) {
+        this._loadingText.setText(`Loading ${Math.round(value * 100)}%...`);
+      }
+    };
+    this._onLoadComplete = () => {
+      if (this._loadingText) {
+        this._loadingText.destroy();
+        this._loadingText = null;
+      }
+      this.load.off('progress', this._onLoadProgress);
+      this.load.off('complete', this._onLoadComplete);
+    };
+    this.load.on('progress', this._onLoadProgress);
+    this.load.on('complete', this._onLoadComplete);
   }
 
   create() {

js/scenes/NewPuzzleScene.js

@@ -22,6 +22,31 @@ class NewPuzzleScene extends Phaser.Scene {
     // Load puzzle list and thumbnail manifest; full images are loaded by PuzzleScene
     this.load.json('puzzle_list', 'assets/puzzles.json');
     this.load.json('thumbnail_list', 'assets/thumbnails.json');
+
+    // Loading progress text
+    this._loadingText = this.add.text(960, 540, 'Loading 0%...', {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: '36px',
+      color: '#ffffff',
+      stroke: '#000000',
+      strokeThickness: 4,
+    }).setOrigin(0.5);
+
+    this._onLoadProgress = (value) => {
+      if (this._loadingText) {
+        this._loadingText.setText(`Loading ${Math.round(value * 100)}%...`);
+      }
+    };
+    this._onLoadComplete = () => {
+      if (this._loadingText) {
+        this._loadingText.destroy();
+        this._loadingText = null;
+      }
+      this.load.off('progress', this._onLoadProgress);
+      this.load.off('complete', this._onLoadComplete);
+    };
+    this.load.on('progress', this._onLoadProgress);
+    this.load.on('complete', this._onLoadComplete);
   }
 
   create() {
@@ -79,7 +104,28 @@ class NewPuzzleScene extends Phaser.Scene {
     const toLoad = this._thumbnails.filter(t => !this.textures.exists(t.key));
     if (toLoad.length > 0) {
       toLoad.forEach(t => this.load.image(t.key, t.path));
-      this.load.once('complete', () => this._buildDomUI());
+
+      // Show loading text for thumbnail loading
+      this._loadingText = this.add.text(960, 540, 'Loading 0%...', {
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '36px',
+        color: '#ffffff',
+        stroke: '#000000',
+        strokeThickness: 4,
+      }).setOrigin(0.5).setDepth(9999);
+
+      this.load.on('progress', (value) => {
+        if (this._loadingText) {
+          this._loadingText.setText(`Loading ${Math.round(value * 100)}%...`);
+        }
+      });
+      this.load.once('complete', () => {
+        if (this._loadingText) {
+          this._loadingText.destroy();
+          this._loadingText = null;
+        }
+        this._buildDomUI();
+      });
       this.load.start();
     } else {
       this._buildDomUI();

js/scenes/PuzzleScene.js

@@ -143,6 +143,31 @@ class PuzzleScene extends Phaser.Scene {
         this.load.image(this.cfg.imageKey, this.cfg.imagePath);
       }
     }
+
+    // Loading progress text
+    this._loadingText = this.add.text(960, 540, 'Loading 0%...', {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: '36px',
+      color: '#ffffff',
+      stroke: '#000000',
+      strokeThickness: 4,
+    }).setOrigin(0.5).setDepth(9999);
+
+    this._onLoadProgress = (value) => {
+      if (this._loadingText) {
+        this._loadingText.setText(`Loading ${Math.round(value * 100)}%...`);
+      }
+    };
+    this._onLoadComplete = () => {
+      if (this._loadingText) {
+        this._loadingText.destroy();
+        this._loadingText = null;
+      }
+      this.load.off('progress', this._onLoadProgress);
+      this.load.off('complete', this._onLoadComplete);
+    };
+    this.load.on('progress', this._onLoadProgress);
+    this.load.on('complete', this._onLoadComplete);
   }
 
   create() {