refactor: update music track metadata format and display

- Change tracks.json from string array to structured objects with path, title, artist
- Update PuzzleScene to use new metadata format for audio loading and track info display
- Add DOM element to show current track title and artist in the UI

assets/audio/music/tracks.json

@@ -1,6 +1,22 @@
 [
-  "assets/audio/music/track_01.mp3",
+  {
-  "assets/audio/music/track_02.mp3",
+    "path": "assets/audio/music/track_01.mp3",
-  "assets/audio/music/track_03.mp3",
+    "title": "Track 01",
-  "assets/audio/music/track_04.mp3"
+    "artist": "Unknown Artist"
-]
+  },
+  {
+    "path": "assets/audio/music/track_02.mp3",
+    "title": "Track 02",
+    "artist": "Unknown Artist"
+  },
+  {
+    "path": "assets/audio/music/track_03.mp3",
+    "title": "Track 03",
+    "artist": "Unknown Artist"
+  },
+  {
+    "path": "assets/audio/music/track_04.mp3",
+    "title": "Track 04",
+    "artist": "Unknown Artist"
+  }
+]

js/scenes/PuzzleScene.js

@@ -916,18 +916,19 @@ class PuzzleScene extends Phaser.Scene {
   // ─── Music ──────────────────────────────────────────────────────────
 
   _setupMusic() {
-    const trackPaths = this.cache.json.get('music_tracks') || [];
+    const trackData = this.cache.json.get('music_tracks') || [];
-    this._musicTracks = trackPaths.slice();
+    this._musicTracks = trackData.slice();
     this._musicQueue = [];
     this._musicMuted = localStorage.getItem('ipuzzle_musicMuted') === 'true';
     this._currentMusic = null;
+    this._trackInfoEl = null;
 
     // Load all tracks that aren't cached yet
     let needsLoad = false;
-    this._musicTracks.forEach((path, i) => {
+    this._musicTracks.forEach((track, i) => {
       const key = `music_${i}`;
       if (!this.cache.audio.exists(key)) {
-        this.load.audio(key, path);
+        this.load.audio(key, track.path);
         needsLoad = true;
       }
     });
@@ -978,6 +979,12 @@ class PuzzleScene extends Phaser.Scene {
     this._currentMusic.setMute(this._musicMuted);
     this._currentMusic.play();
 
+    // Update track info display
+    const track = this._musicTracks[idx];
+    if (this._trackInfoEl && track) {
+      this._trackInfoEl.textContent = `${track.title} — ${track.artist}`;
+    }
+
     // When track ends, play next
     this._currentMusic.once('complete', () => this._playNextTrack());
   }
@@ -1114,6 +1121,25 @@ class PuzzleScene extends Phaser.Scene {
     musicRow.appendChild(this._muteBtn);
     this._uiLayer.appendChild(musicRow);
 
+    // Track info display — below music controls
+    this._trackInfoEl = document.createElement('div');
+    Object.assign(this._trackInfoEl.style, {
+      position: 'absolute',
+      top: '4.5%',
+      right: '0.5%',
+      color: '#8899bb',
+      fontSize: '1.3vmin',
+      fontFamily: 'Arial, sans-serif',
+      textAlign: 'right',
+      pointerEvents: 'none',
+      maxWidth: '20%',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+    });
+    this._trackInfoEl.textContent = '';
+    this._uiLayer.appendChild(this._trackInfoEl);
+
     // Clean up DOM when the scene shuts down
     this.events.once('shutdown', () => this._destroyDomUI());
   }