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`);

static/styles.css

@@ -1460,7 +1460,7 @@ body {
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 2000;
+    z-index: 9999;
 }
 
 .achievements-grid {
@@ -1668,6 +1668,12 @@ body {
     transform: translateY(0);
 }
 
+.custom-notification.fade-out {
+    opacity: 0;
+    transform: translateY(-20px);
+}
+
+
 .custom-notification .notification-content {
     display: flex;
     flex-direction: column;
@@ -1683,13 +1689,13 @@ body {
     color: white;
     border: none;
     padding: 8px 16px;
-    
     font-family: 'Orbitron', sans-serif;
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: all 0.3s ease;
     border-radius: 5px;
+    cursor: none;
 }
 
 .custom-notification .close-notification:hover {
@@ -1699,6 +1705,13 @@ body {
     box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
 }
 
+.notification-image {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+}
+
+
 body {
     -webkit-user-select: none;
     -moz-user-select: none;