Adjustments to achievement tab, now displays all achievements locked and unlocked.

static/js/game.js

@@ -163,7 +163,7 @@ function fetchUserAchievements() {
     })
     .then(achievements => {
         if (Array.isArray(achievements) && achievements.length > 0) {
-            displayUserAchievements(achievements);
+            displayAllAchievements(achievements);
         } else {
             displayNoAchievementsMessage(achievementsGrid);
         }
@@ -200,8 +200,7 @@ function displayErrorMessage(container, message) {
     `;
 }
 
-
-function displayUserAchievements(achievements) {
+function displayAllAchievements(achievements) {
     const achievementsGrid = document.getElementById('achievementsGrid');
     if (!achievementsGrid) {
         console.error('Achievements grid not found');
@@ -212,7 +211,13 @@ function displayUserAchievements(achievements) {
     achievements.forEach(achievement => {
         const achievementElement = document.createElement('div');
         achievementElement.classList.add('achievement');
-        achievementElement.innerHTML = `<img src="${achievement.image}" alt="${achievement.name}">`;
+        if (!achievement.unlocked) {
+            achievementElement.classList.add('locked');
+        }
+        achievementElement.innerHTML = `
+            <img src="${achievement.image}" alt="${achievement.name}">
+            ${!achievement.unlocked ? '<div class="lock-overlay"><i class="fas fa-lock"></i></div>' : ''}
+        `;
         achievementElement.addEventListener('click', () => showAchievementInfo(achievement));
         achievementElement.addEventListener('mouseover', () => showAchievementInfo(achievement));
         achievementsGrid.appendChild(achievementElement);
@@ -224,6 +229,7 @@ function displayUserAchievements(achievements) {
     }
 }
 
+
 function showAchievementInfo(achievement) {
     const image = document.getElementById('achievementImage');
     const name = document.getElementById('achievementName');
@@ -233,9 +239,17 @@ function showAchievementInfo(achievement) {
 
     image.src = achievement.image;
     name.textContent = achievement.name;
-    description.textContent = achievement.description;
 
-    unlockedClasses.innerHTML = '<h5>Classes:</h5>';
+    if (achievement.unlocked) {
+        name.classList.remove('locked');
+        description.textContent = achievement.description;
+    } else {
+        name.classList.add('locked');
+        description.textContent = `Unlock Requirements: ${achievement.unlock_requirements}`;
+    }
+
+    // Display unlockable items for both locked and unlocked achievements
+    unlockedClasses.innerHTML = '<h5>Classes Unlocked:</h5>';
     if (achievement.unlocked_classes && achievement.unlocked_classes.length > 0) {
         achievement.unlocked_classes.forEach(c => {
             unlockedClasses.innerHTML += `<div class="unlock-item"><img src="${c.image}" alt="${c.name}"><span>${c.name}</span></div>`;
@@ -244,7 +258,7 @@ function showAchievementInfo(achievement) {
         unlockedClasses.innerHTML += '<p>No classes unlocked</p>';
     }
 
-    unlockedSkins.innerHTML = '<h5>Skins:</h5>';
+    unlockedSkins.innerHTML = '<h5>Skins Unlocked:</h5>';
     if (achievement.unlocked_skins && achievement.unlocked_skins.length > 0) {
         achievement.unlocked_skins.forEach(s => {
             unlockedSkins.innerHTML += `<div class="unlock-item"><img src="${s.image}" alt="${s.name}"><span>${s.name}</span></div>`;
@@ -253,8 +267,8 @@ function showAchievementInfo(achievement) {
         unlockedSkins.innerHTML += '<p>No skins unlocked</p>';
     }
 
-    // For debugging
-    debugLog('Achievement:', achievement);
+    unlockedClasses.style.display = 'block';
+    unlockedSkins.style.display = 'block';
 }
 
 function hideAchievementInfo() {