Added unlocked evidence tracking, updated tool costs, and improving UI interactions for evidence display and tool usage

app.py

@@ -41,12 +41,23 @@ class GameSession:
     def _get_init_data(self):
         if not self.game:
             return None
+            
+        # Prepare static data for tools
+        cameras = list(self.game.scenario["evidence"]["footage_data"].keys())
+        
+        dna_map = {}
+        for k, v in self.game.scenario["evidence"]["dna_evidence"].items():
+            dna_map[k] = v.get("label", k) # Fallback to ID if no label
+            
         return {
             "action": "init_game",
             "data": {
                 "scenario": self.game.scenario,
                 "round": self.game.round,
-                "points": self.game.points
+                "points": self.game.points,
+                "available_cameras": cameras,
+                "dna_map": dna_map,
+                "unlocked_evidence": self.game.unlocked_evidence
             }
         }
 
@@ -171,8 +182,12 @@ class GameSession:
             # Format the result nicely
             evidence_data = format_tool_response(tool_name, arg, result, self.game.scenario)
             
-            # Include updated points in response
+            # Include updated points and unlocks in response
             evidence_data["updated_points"] = self.game.points
+            evidence_data["unlocked_evidence"] = self.game.unlocked_evidence
+            
+            if "newly_unlocked" in result and result["newly_unlocked"]:
+                evidence_data["newly_unlocked"] = result["newly_unlocked"]
             
             return {
                 "action": "add_evidence",

game/game_engine.py

@@ -17,6 +17,7 @@ class GameInstance:
         self.verdict_correct = False
         self.eliminated_suspects = []
         self.max_rounds = 3 # 3 Chances
+        self.unlocked_evidence = [] # Track unlocked DNA items
         
         # Initialize Agents
         self._init_agents()
@@ -88,10 +89,20 @@ class GameInstance:
             cost = 2
             result = tools.get_location(self.scenario, kwargs.get("phone_number"), kwargs.get("timestamp"))
         elif tool_name == "get_footage":
-            cost = 2
+            cost = 3
             result = tools.get_footage(self.scenario, kwargs.get("location"), kwargs.get("time_range"))
+            
+            # Handle unlocks
+            if "unlocks" in result:
+                new_items = []
+                for item_id in result["unlocks"]:
+                    if item_id not in self.unlocked_evidence:
+                        self.unlocked_evidence.append(item_id)
+                        new_items.append(item_id)
+                result["newly_unlocked"] = new_items
+                
         elif tool_name == "get_dna_test":
-            cost = 3
+            cost = 4
             result = tools.get_dna_test(self.scenario, kwargs.get("evidence_id"))
         elif tool_name == "call_alibi":
             cost = 1

mcp/tools.py

@@ -96,16 +96,26 @@ def get_footage(case_data, location: str, time_range: str = None) -> dict:
              return {"error": f"No footage for time {time_range}. Available: {list(loc_footage.keys())}"}
     else:
         # Return the first available clip info
-        first_key = list(loc_footage.keys())[0]
+        # keys() might include "unlocks", so filter for time-like keys? 
+        # Actually, logic assumes keys are time ranges. 
+        # "unlocks" is a key but not a time range.
+        # We should find a key that contains ":" or is not "unlocks"
+        
+        valid_keys = [k for k in loc_footage.keys() if k != "unlocks"]
+        if not valid_keys:
+             return {"error": "No footage clips available."}
+             
+        first_key = valid_keys[0]
         footage = loc_footage[first_key]
         time_range = first_key # Update for return
     
     return {
         "location": target_loc_key,
         "time_range": time_range,
-        "visible_people": footage["visible_people"],
-        "quality": footage["quality"],
-        "key_details": footage.get("key_frame", "No significant events")
+        "visible_people": footage.get("visible_people", []),
+        "quality": footage.get("quality", "Unknown"),
+        "key_details": footage.get("key_frame", "No significant events"),
+        "unlocks": loc_footage.get("unlocks", []) # Fix: Get form camera level
     }
 
 def get_dna_test(case_data, evidence_id: str) -> dict:

scenarios/silicon_valley.json

@@ -80,22 +80,35 @@
           "visible_people": ["Person in black hoodie entering"],
           "quality": "Grainy",
           "key_frame": "8:47 PM - figure strikes victim with trophy"
-        }
+        },
+        "unlocks": ["trophy_weapon", "door_handle"] 
       },
       "lobby_camera": {
         "8:40-8:55 PM": {
           "visible_people": ["Suspect 1 entering at 8:43", "Suspect 1 leaving at 8:52"],
+          "quality": "Grainy",
           "notes": "Suspect changed clothes, looks flustered"
-        }
+        },
+        "unlocks": []
+      },
+      "kitchen_camera": {
+        "8:40-8:55 PM": {
+          "visible_people": ["Empty"],
+          "quality": "Low",
+          "notes": "Nothing happening."
+        },
+        "unlocks": []
       }
     },
     "dna_evidence": {
       "trophy_weapon": {
+        "label": "Trophy (Found in Office)",
         "primary_match": "suspect_1",
         "confidence": "95%",
         "notes": "Clear fingerprints found on the base"
       },
       "door_handle": {
+        "label": "Door Handle (10th Floor)",
         "matches": ["suspect_1", "suspect_2", "victim"],
         "notes": "Multiple people touched door recently"
       }
@@ -133,4 +146,4 @@
     "8:47 PM": "Murder occurs",
     "8:52 PM": "Suspect 1 leaves building"
   }
-}
+}

ui/static/css/noir.css

@@ -434,6 +434,28 @@ button.send-btn:hover {
     to { transform: rotate(360deg); }
 }
 
+@keyframes wiggle {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(-10deg); }
+    50% { transform: rotate(10deg); }
+    75% { transform: rotate(-5deg); }
+    100% { transform: rotate(0deg); }
+}
+
+.wiggle {
+    animation: wiggle 0.5s ease-in-out infinite;
+    border-color: var(--accent-red) !important;
+    color: var(--accent-red) !important;
+}
+
+.unlocked-list {
+    margin-top: 10px;
+    background: rgba(0,0,0,0.1);
+    padding: 5px;
+    border: 1px dashed #555;
+    font-size: 0.8rem;
+}
+
 /* --- Tool Modal --- */
 .modal-overlay {
     position: fixed;
@@ -484,6 +506,42 @@ button.send-btn:hover {
     box-sizing: border-box;
 }
 
+/* Option List (Radio/Checkbox alternative) */
+.modal-option-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 20px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.modal-option-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background: rgba(0,0,0,0.1);
+    border: 1px dashed #555;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.modal-option-item:hover {
+    background: rgba(0,0,0,0.2);
+}
+
+.modal-option-item input {
+    margin-right: 10px;
+    transform: scale(1.2);
+    accent-color: var(--accent-red);
+}
+
+.modal-option-item label {
+    cursor: pointer;
+    flex-grow: 1;
+    font-family: 'Courier New', monospace;
+}
+
 .modal-actions {
     display: flex;
     justify-content: flex-end;

ui/static/js/game_logic.js

@@ -8,7 +8,10 @@ let gameState = {
     evidence: [],
     chatLog: [],
     currentSuspect: null,
-    nextEvidenceSlot: 0 // Track grid position for new cards
+    nextEvidenceSlot: 0, // Track grid position for new cards
+    availableCameras: [],
+    dnaMap: {},
+    unlockedEvidence: []
 };
 
 // --- Bridge: Communication with Parent (Python/Gradio) ---
@@ -63,6 +66,25 @@ function handleServerMessage(message) {
             if (data.updated_points !== undefined) {
                 document.getElementById('points-display').innerText = data.updated_points;
             }
+            // console.log("Evidence Data:", data);
+            if (data.newly_unlocked && data.newly_unlocked.length > 0) {
+                console.log("🔓 Unlocking items:", data.newly_unlocked);
+                data.newly_unlocked.forEach(id => {
+                    if (!gameState.unlockedEvidence.includes(id)) {
+                        gameState.unlockedEvidence.push(id);
+                    }
+                });
+                showNotification("🔍 NEW EVIDENCE UNLOCKED");
+                
+                // Wiggle DNA button
+                const dnaBtn = document.getElementById('tool-dna');
+                dnaBtn.classList.add('wiggle');
+                
+                // Append to html_content for board display
+                let unlockHtml = `<div style="margin-top:5px; border-top:1px solid #ccc; padding-top:2px; font-size:0.8em; color:var(--accent-red);">🔓 NEW ITEMS UNLOCKED</div>`;
+                if (data.html_content) data.html_content += unlockHtml;
+                else data.description += unlockHtml; // Fallback
+            }
             addEvidenceToBoard(data);
             break;
         case 'tool_error':
@@ -105,6 +127,11 @@ function initializeGame(data) {
     document.getElementById('round-display').innerText = `${data.round}/3`;
     document.getElementById('points-display').innerText = data.points;
     
+    // Store Tool Data
+    gameState.availableCameras = data.available_cameras || [];
+    gameState.dnaMap = data.dna_map || {};
+    gameState.unlockedEvidence = data.unlocked_evidence || [];
+    
     renderCaseFile(data.scenario);
 }
 
@@ -448,6 +475,7 @@ function useTool(toolName) {
     pendingTool = toolName;
     const modal = document.getElementById('tool-modal');
     const input = document.getElementById('modal-input');
+    const optionsContainer = document.getElementById('modal-options');
     const promptText = document.getElementById('modal-prompt-text');
     
     const section2 = document.getElementById('modal-section-2');
@@ -456,6 +484,8 @@ function useTool(toolName) {
     
     // Reset
     section2.style.display = 'none';
+    input.style.display = 'block';
+    optionsContainer.style.display = 'none';
     input.value = '';
     input2.value = '';
     
@@ -467,10 +497,23 @@ function useTool(toolName) {
         section2.style.display = 'block';
         promptText2.innerText = "Question for Alibi:";
     } else if (toolName === 'get_dna_test') {
-        promptText.innerText = "Enter Evidence ID:";
+        promptText.innerText = "Select Evidence to Test:";
+        
+        // Stop wiggling if clicked
+        document.getElementById('tool-dna').classList.remove('wiggle');
+        
+        if (gameState.unlockedEvidence.length === 0) {
+            showNotification("⚠️ No physical evidence found yet. Check camera footage!");
+            return; 
+        }
+        input.style.display = 'none';
+        populateOptionList(gameState.unlockedEvidence, gameState.dnaMap);
     } else if (toolName === 'get_footage') {
-        promptText.innerText = "Enter Camera Location:";
+        promptText.innerText = "Select Camera Feed:";
+        input.style.display = 'none';
+        populateOptionList(gameState.availableCameras);
     } else if (toolName === 'accuse') {
+        // ... existing accuse logic ...
         if (!gameState.currentSuspect) {
             showNotification("⚠️ Select a suspect to accuse!");
             closeModal();
@@ -482,17 +525,67 @@ function useTool(toolName) {
     }
     
     modal.classList.add('active');
-    input.focus();
+    if (input.style.display !== 'none') input.focus();
+}
+
+function populateOptionList(items, labelMap = null) {
+    const container = document.getElementById('modal-options');
+    container.innerHTML = '';
+    container.style.display = 'flex';
+    
+    items.forEach((item, index) => {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'modal-option-item';
+        wrapper.onclick = () => {
+            wrapper.querySelector('input').checked = true;
+        };
+        
+        const radio = document.createElement('input');
+        radio.type = 'radio';
+        radio.name = 'tool-option';
+        radio.value = item;
+        radio.id = `opt-${index}`;
+        if (index === 0) radio.checked = true;
+        
+        const label = document.createElement('label');
+        label.htmlFor = `opt-${index}`;
+        
+        let text = item;
+        if (labelMap && labelMap[item]) {
+            text = labelMap[item];
+        } else {
+            text = item.replace(/_/g, ' ').toUpperCase();
+        }
+        label.innerText = text;
+        
+        wrapper.appendChild(radio);
+        wrapper.appendChild(label);
+        container.appendChild(wrapper);
+    });
 }
 
 function submitTool() {
     const input = document.getElementById('modal-input');
-    const value = input.value.trim();
+    const optionsContainer = document.getElementById('modal-options');
+    
+    let value = input.value.trim();
+    
+    // Use radio value if visible
+    if (optionsContainer.style.display !== 'none') {
+        const selected = optionsContainer.querySelector('input[name="tool-option"]:checked');
+        if (selected) {
+            value = selected.value;
+        } else {
+            value = '';
+        }
+    }
+    
     const confirmBtn = document.getElementById('modal-confirm');
     
     if (!pendingTool) return;
     
     let payload = null;
+    // ... rest of submitTool ... (Logic remains same as it uses 'value')
     
     if (pendingTool === 'call_alibi') {
         const input2 = document.getElementById('modal-input-2');
@@ -509,7 +602,7 @@ function submitTool() {
             return;
         }
     } else if (pendingTool === 'accuse') {
-        if (value.toUpperCase() === 'GUILTY') {
+         if (value.toUpperCase() === 'GUILTY') {
             payload = { 
                 tool: 'accuse', 
                 suspect_id: gameState.currentSuspect 
@@ -535,6 +628,11 @@ function submitTool() {
             
             if (result && result.action === 'tool_error') {
                 showModalError(result.data.message);
+            } else if (result && result.action === 'add_evidence') {
+                // Success: Show result in modal
+                showModalResult(result.data);
+                // Auto-close after 5s
+                setTimeout(closeModal, 5000);
             } else {
                 closeModal();
             }
@@ -542,6 +640,51 @@ function submitTool() {
     }
 }
 
+function showModalResult(data) {
+    // Hide inputs
+    document.getElementById('modal-input').style.display = 'none';
+    document.getElementById('modal-options').style.display = 'none';
+    document.getElementById('modal-section-2').style.display = 'none';
+    document.getElementById('modal-prompt-text').style.display = 'none';
+    
+    // Show result
+    let resultDiv = document.getElementById('modal-result');
+    if (!resultDiv) {
+        resultDiv = document.createElement('div');
+        resultDiv.id = 'modal-result';
+        resultDiv.style.marginTop = '20px';
+        resultDiv.style.borderTop = '2px dashed var(--ink-color)';
+        resultDiv.style.paddingTop = '10px';
+        document.querySelector('.modal-content').insertBefore(resultDiv, document.querySelector('.modal-actions'));
+    }
+    
+    resultDiv.style.display = 'block';
+    
+    let html = `
+        <div style="font-weight:bold; margin-bottom:5px;">RESULT:</div>
+        ${data.html_content || data.description}
+    `;
+    
+    if (data.newly_unlocked && data.newly_unlocked.length > 0) {
+        html += `<div class="unlocked-list"><strong>🔓 UNLOCKED FOR DNA TEST:</strong><ul>`;
+        data.newly_unlocked.forEach(id => {
+            let label = id;
+            if (gameState.dnaMap && gameState.dnaMap[id]) {
+                label = gameState.dnaMap[id];
+            }
+            html += `<li>${label}</li>`;
+        });
+        html += `</ul></div>`;
+    }
+    
+    resultDiv.innerHTML = html;
+    
+    // Change button
+    const btn = document.getElementById('modal-confirm');
+    btn.innerText = "CLOSE";
+    btn.onclick = closeModal;
+}
+
 function showModalError(msg) {
     let errDiv = document.getElementById('modal-error');
     if (!errDiv) {
@@ -561,6 +704,18 @@ function closeModal() {
     pendingTool = null;
     const errDiv = document.getElementById('modal-error');
     if (errDiv) errDiv.innerText = ''; 
+    
+    const resultDiv = document.getElementById('modal-result');
+    if (resultDiv) resultDiv.style.display = 'none';
+    
+    const btn = document.getElementById('modal-confirm');
+    btn.innerText = "SUBMIT";
+    btn.onclick = submitTool;
+    btn.disabled = false;
+    
+    // Reset inputs visibility for next time (useTool will override, but safe default)
+    document.getElementById('modal-input').style.display = 'block';
+    document.getElementById('modal-prompt-text').style.display = 'block';
 }
 
 // --- Listeners ---

ui/templates/game_interface.html

@@ -47,7 +47,7 @@
             <div class="tool-btn" id="tool-camera">
                 <span class="tool-icon">📹</span>
                 <span>Footage</span>
-                <span class="tool-cost">2 pts</span>
+                <span class="tool-cost">3 pts</span>
             </div>
             <div class="tool-btn" id="tool-phone">
                 <span class="tool-icon">📞</span>
@@ -57,7 +57,7 @@
             <div class="tool-btn" id="tool-dna">
                 <span class="tool-icon">🔬</span>
                 <span>DNA Test</span>
-                <span class="tool-cost">3 pts</span>
+                <span class="tool-cost">4 pts</span>
             </div>
             <div class="tool-btn" id="tool-accuse" style="margin-top: auto; border-color: red; color: red;">
                 <span class="tool-icon">⚖️</span>
@@ -85,6 +85,9 @@
             <div id="modal-prompt-text">Enter details:</div>
             <input type="text" id="modal-input" class="modal-input" placeholder="...">
             
+            <div id="modal-options" class="modal-option-list" style="display:none"></div>
+            <select id="modal-select" class="modal-input" style="display:none"></select>
+            
             <div id="modal-section-2" style="display:none">
                 <div id="modal-prompt-text-2">Question:</div>
                 <input type="text" id="modal-input-2" class="modal-input" placeholder="What do you want to ask?">