Fixing achievement notifications

static/js/game.js

@@ -75,10 +75,6 @@ let lastUpdateTime = Date.now();
 let impactEffects = [];
 let currentSongName = '';
 
-
-
-
-
 class NotificationSystem {
     constructor() {
         this.notificationContainer = null;
@@ -91,46 +87,73 @@ class NotificationSystem {
         document.body.appendChild(this.notificationContainer);
     }
 
-    showNotification(message, image = null) {
+    showNotification(message, image) {
+        console.log('showNotification called with message:', message, 'and image:', image);
         const notificationElement = document.createElement('div');
         notificationElement.className = 'custom-notification draggable';
         
         let content = `<div class="notification-content">`;
-        if (image) {
-            content += `<img src="${image}" alt="Achievement" class="notification-image">`;
+        if (image && typeof image === 'string') {
+            console.log('Adding image to notification:', image);
+            content += `<img src="${image}" alt="Achievement" class="notification-image" onerror="console.error('Failed to load image:', this.src);">`;
+        } else {
+            console.log('No valid image provided for notification');
         }
         content += `
             <p>${message}</p>
             <button class="close-notification">Close</button>
         </div>`;
         
+        console.log('Notification content:', content);
+        
         notificationElement.innerHTML = content;
-    
+
         const closeButton = notificationElement.querySelector('.close-notification');
         closeButton.addEventListener('click', () => this.closeNotification(notificationElement));
-    
+
         this.notificationContainer.appendChild(notificationElement);
         setTimeout(() => notificationElement.classList.add('show'), 10);
-    
+
         makeDraggable(notificationElement);
+
+        // Add auto-hide after 3 seconds
+        setTimeout(() => this.closeNotification(notificationElement), 3000);
     }
 
-    
-    
     closeNotification(notificationElement) {
         notificationElement.classList.remove('show');
         setTimeout(() => notificationElement.remove(), 300);
     }
 }
 
+
 const notificationSystem = new NotificationSystem();
 
-function handleAchievementUnlock(data) {
-    const message = `Achievement Unlocked: ${data.name}\n${data.description}`;
-    notificationSystem.showNotification(message, data.image);
-    
+function preloadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = src;
+    });
 }
 
+
+function handleAchievementUnlock(data) {
+    console.log('Achievement unlocked (full data):', JSON.stringify(data));
+    if (!notificationSystem) {
+        console.error('NotificationSystem not initialized');
+        return;
+    }
+    const message = `Achievement Unlocked: ${data.name}\n${data.description}`;
+    console.log('Showing notification:', message);
+    console.log('Achievement image path:', data.image);
+    console.log('Calling showNotification with message:', message, 'and image:', data.image);
+    notificationSystem.showNotification(message, data.image);
+}
+
+
+
 function fetchUserAchievements() {
     const achievementsGrid = document.getElementById('achievementsGrid');
     const achievementInfoBox = document.getElementById('achievementInfoBox');
@@ -2199,8 +2222,11 @@ function startGame() {
     });
     
 
-    socket.on('achievement_unlocked', handleAchievementUnlock);
-
+    socket.on('achievement_unlocked', (data) => {
+        console.log('Received achievement_unlocked event:', data);
+        handleAchievementUnlock(data);
+    });
+        
 
     socket.on('reconnect', (attemptNumber) => {
         debugLog(`Reconnected to server after ${attemptNumber} attempts`);