Fixed Achievements widget layout on mobile. Minor fixes for class selector (achievement requirements now shown when selecting a locked class)

game_server.py

@@ -545,7 +545,7 @@ def buy_weapon():
 
 @app.route('/get-available-classes', methods=['GET'])
 def get_available_classes():
-    current_user = get_current_user()  # Implement this function to get the current user
+    current_user = get_current_user()
     classes = list(classes_collection.find())
     for class_data in classes:
         class_data['_id'] = str(class_data['_id'])
@@ -560,9 +560,14 @@ def get_available_classes():
             )
         else:
             class_data['unlocked'] = class_data['unlocked_by_default']
+        
+        # Include unlock requirements for locked classes
+        if not class_data['unlocked']:
+            class_data['unlock_requirements_text'] = get_unlock_requirements_text(class_data)
     
     return jsonify(classes)
 
+
 @app.route('/select-class', methods=['POST'])
 @token_required
 def select_class(current_user_id):
@@ -1166,6 +1171,15 @@ def on_upgrade_selected(data):
     else:
         print(f"Error: Player ID {player_id} not found in game state")
 
+def get_unlock_requirements_text(class_data):
+    if 'unlock_requirements' in class_data:
+        if 'achievement' in class_data['unlock_requirements']:
+            achievement = achievements_collection.find_one({'id': class_data['unlock_requirements']['achievement']})
+            if achievement:
+                return f"Unlock the '{achievement['name']}' achievement"
+    return "Unlock requirements not specified"
+
+
 def get_current_user():
     auth_token = request.headers.get('Authorization')
     if auth_token:

static/js/game.js

@@ -1390,9 +1390,11 @@ function displayClassInfo(playerClass) {
         <p>Damage: ${playerClass.base_attributes.damage_multiplier}</p>
     `;
 
-    // Add a visual indicator for locked classes in the info box
-    if (!playerClass.unlocked_by_default) {
-        className.innerHTML += ' <span class="locked-indicator">(Locked)</span>';
+    // Remove the locked indicator if the class is unlocked
+    if (playerClass.unlocked) {
+        className.innerHTML = playerClass.name;
+    } else {
+        className.innerHTML = `${playerClass.name} <span class="locked-indicator">(Locked)</span>`;
     }
 }
 
@@ -3306,7 +3308,8 @@ function drawGameObjects() {
 
 function selectClass(playerClass) {
     if (!playerClass.unlocked) {
-        notificationSystem.showNotification('This class is locked. Unlock it to select.');
+        const unlockRequirements = playerClass.unlock_requirements_text || "Unlock requirements not available";
+        notificationSystem.showNotification(`This class is locked. ${unlockRequirements}`);
         return;
     }
 

static/styles.css

@@ -1615,6 +1615,47 @@ img {
   }
   
 
+  @media (max-width: 768px) {
+    .achievements-container {
+        flex-direction: column;
+    }
+
+    .achievements-grid {
+        max-height: 40vh;
+        overflow-y: auto;
+    }
+
+    .achievement-info-box {
+        width: 100%;
+        border-left: none;
+        border-top: 2px solid #00ffff;
+        padding: 10px;
+    }
+
+    .achievement-info-box img {
+        width: 60px;
+        height: 60px;
+    }
+
+    .achievement-info-box h3 {
+        font-size: 1.2em;
+    }
+
+    .achievement-info-box p {
+        font-size: 0.9em;
+    }
+
+    .unlock-item img {
+        width: 20px;
+        height: 20px;
+    }
+
+    .unlock-item span {
+        font-size: 0.8em;
+    }
+}
+
+
 /* Hide custom cursor for mobile devices */
 @media (hover: none) and (pointer: coarse) {
     body {