Added a Song duration bar. Contains the song name, song duration and duration bar. Song duration acts as a countdown timer, same as the duration bar. Styling for mobile may need to be adjusted. Name/Duration/Timer updates correctly when the song changes.

static/js/game.js

@@ -30,7 +30,8 @@ let gameStarted = false;
 let joystick = { active: false, startX: 0, startY: 0, endX: 0, endY: 0 };
 let isDebugging = document.getElementById('debugCheckbox').checked;
 let socket;
-let currentSongDuration = 180; // Default to 3 minutes
+let currentSongDuration = 0;
+let songStartTime = 0;
 let backgroundCanvas, backgroundCtx;
 let uiButton, uiWidget, menuButton;
 let isWidgetVisible = false;
@@ -72,6 +73,7 @@ let shootingJoystick = {
 };
 let lastUpdateTime = Date.now();
 let impactEffects = [];
+let currentSongName = '';
 
 
 
@@ -2188,6 +2190,15 @@ function startGame() {
         });
     });
 
+    socket.on('server_restart', (data) => {
+        notificationSystem.showNotification(data.message);
+        // Optionally, you could implement a reconnection attempt after a short delay
+        setTimeout(() => {
+            location.reload();
+        }, 5000);  // Wait for 5 seconds before reloading the page
+    });
+    
+
     socket.on('achievement_unlocked', handleAchievementUnlock);
 
 
@@ -2232,8 +2243,13 @@ function startGame() {
         if (gameStarted) {
             const serverClientTimeDiff = Date.now() / 1000 - data.serverTime;
             currentSongDuration = data.songDuration || 180; // Use the provided duration or default to 3 minutes
+            songStartTime = data.startTime + serverClientTimeDiff;
             const songPosition = (Date.now() / 1000 - data.startTime - serverClientTimeDiff) % currentSongDuration;
             setupAudio(data.song, songPosition);
+
+            currentSongName = data.song.split('/').pop();          
+            updateSongDurationBar();
+          
         }
     });
 
@@ -2527,10 +2543,14 @@ socket.on('bullet_impact', (data) => {
         switch(data.action) {
             case 'start':
             case 'change':
-                const currentTime = Date.now() / 1000;
-                const elapsedTime = currentTime - data.startTime;
+                const serverClientTimeDiff = Date.now() / 1000 - data.serverTime;
                 currentSongDuration = data.songDuration || 180; // Use the provided duration or default to 3 minutes
-                setupAudio(data.song, elapsedTime % currentSongDuration);
+                songStartTime = data.startTime + serverClientTimeDiff;
+                const songPosition = 0; // Start from the beginning for 'change' action
+                setupAudio(data.song, songPosition);
+    
+                currentSongName = data.song.split('/').pop();          
+                updateSongDurationBar();
                 break;
             case 'stop':
                 if (audioElement) {
@@ -2539,7 +2559,7 @@ socket.on('bullet_impact', (data) => {
                 break;
         }
     });
-
+    
     socket.on('skin_update', (data) => {
         const { player_id, skin_data } = data;
         if (player_id === socket.id) {
@@ -2550,7 +2570,7 @@ socket.on('bullet_impact', (data) => {
             otherPlayers[player_id].setSkin(skin_data);
         }
     });
-    
+    showSongDurationBar();
 }
 
 function hideShopButton() {
@@ -3179,6 +3199,9 @@ function update() {
     if (gameStarted) {
         alertSystem.draw(ctx);
     }
+    if (gameStarted) {
+        updateSongDurationBar();
+    }
     requestAnimationFrame(update);
     debugLog('Player position:', player.x, player.y);
     debugLog('Number of enemies:', serverEnemies.length);
@@ -3798,6 +3821,34 @@ class ImpactEffect {
     }
 }
 
+function updateSongDurationBar() {
+    const now = Date.now() / 1000;
+    const elapsed = now - songStartTime;
+    const remaining = Math.max(0, currentSongDuration - elapsed);
+    const progress = Math.min(1, elapsed / currentSongDuration);
+
+    const fillElement = document.getElementById('songDurationFill');
+    const timerElement = document.getElementById('songTimer');
+    const songNameElement = document.querySelector('#songName .scrolling-text');
+
+    fillElement.style.width = `${(1 - progress) * 100}%`;
+    timerElement.textContent = formatTime(remaining);
+    songNameElement.textContent = `Now playing: ${currentSongName}`;
+}
+  
+function formatTime(seconds) {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+  
+function showSongDurationBar() {
+    document.getElementById('songDurationBar').style.display = 'block';
+}
+
+function hideSongDurationBar() {
+    document.getElementById('songDurationBar').style.display = 'none';
+}
 
 
-init();
+init();