Add accusation feature and update tool cost display in game interface

app.py

@@ -94,6 +94,16 @@ class GameSession:
             tool_name = payload.get("tool")
             arg = payload.get("input") # Default for single-input tools
             
+            if tool_name == "accuse":
+                result_msg = self.game.make_accusation(payload.get("suspect_id"))
+                return {
+                    "action": "game_over",
+                    "data": {
+                        "message": result_msg,
+                        "verdict": self.game.verdict_correct
+                    }
+                }
+
             kwargs = {}
             if tool_name == "get_location":
                 kwargs = {"phone_number": arg}
@@ -123,6 +133,9 @@ class GameSession:
             # Format the result nicely
             evidence_data = format_tool_response(tool_name, arg, result, self.game.scenario)
             
+            # Include updated points in response
+            evidence_data["updated_points"] = self.game.points
+            
             return {
                 "action": "add_evidence",
                 "data": evidence_data

ui/static/css/noir.css

@@ -284,6 +284,19 @@ body, html {
     font-size: 1.5rem;
 }
 
+.tool-cost {
+    font-size: 0.7rem;
+    color: #888;
+    margin-top: 2px;
+    border-top: 1px solid #444;
+    padding-top: 2px;
+    width: 100%;
+}
+
+.tool-btn:hover .tool-cost {
+    color: #aaa;
+}
+
 /* --- Bottom Panel: Chat / Log --- */
 #chat-panel {
     grid-column: 1 / -1;

ui/static/js/game_logic.js

@@ -60,6 +60,9 @@ function handleServerMessage(message) {
             addChatMessage(data.role, data.content, data.name);
             break;
         case 'add_evidence':
+            if (data.updated_points !== undefined) {
+                document.getElementById('points-display').innerText = data.updated_points;
+            }
             addEvidenceToBoard(data);
             break;
         case 'tool_error':
@@ -114,6 +117,55 @@ function renderCaseFile(scenario) {
     }, 20, 20);
 }
 
+function triggerGameOver(data) {
+    const overlay = document.createElement('div');
+    overlay.id = 'game-over-overlay';
+    overlay.style.position = 'fixed';
+    overlay.style.top = '0';
+    overlay.style.left = '0';
+    overlay.style.width = '100%';
+    overlay.style.height = '100%';
+    overlay.style.backgroundColor = 'rgba(0,0,0,0.9)';
+    overlay.style.color = 'white';
+    overlay.style.display = 'flex';
+    overlay.style.flexDirection = 'column';
+    overlay.style.alignItems = 'center';
+    overlay.style.justifyContent = 'center';
+    overlay.style.zIndex = '1000';
+    overlay.style.fontFamily = "'Special Elite', cursive";
+    
+    const title = document.createElement('div');
+    title.style.fontSize = '3rem';
+    title.style.marginBottom = '20px';
+    
+    if (data.verdict) {
+        title.innerText = "CASE SOLVED";
+        title.style.color = "#4caf50";
+    } else {
+        title.innerText = "WRONG ACCUSATION";
+        title.style.color = "#f44336";
+    }
+    
+    const msg = document.createElement('div');
+    msg.innerText = data.message;
+    msg.style.fontSize = '1.5rem';
+    msg.style.maxWidth = '600px';
+    msg.style.textAlign = 'center';
+    msg.style.marginBottom = '40px';
+    
+    const btn = document.createElement('button');
+    btn.innerText = "PLAY AGAIN";
+    btn.className = "modal-btn confirm";
+    btn.style.fontSize = "1.5rem";
+    btn.onclick = () => location.reload();
+    
+    overlay.appendChild(title);
+    overlay.appendChild(msg);
+    overlay.appendChild(btn);
+    
+    document.body.appendChild(overlay);
+}
+
 // --- UI Rendering: Suspects ---
 
 function renderSuspects() {
@@ -375,6 +427,15 @@ function useTool(toolName) {
         promptText.innerText = "Enter Evidence ID:";
     } else if (toolName === 'get_footage') {
         promptText.innerText = "Enter Camera Location:";
+    } else if (toolName === 'accuse') {
+        if (!gameState.currentSuspect) {
+            showNotification("⚠️ Select a suspect to accuse!");
+            closeModal();
+            return;
+        }
+        const suspect = gameState.scenario.suspects.find(s => s.id === gameState.currentSuspect);
+        promptText.innerText = `ACCUSE ${suspect.name.toUpperCase()}?`;
+        input.placeholder = "Type 'GUILTY' to confirm";
     }
     
     modal.classList.add('active');
@@ -404,6 +465,16 @@ function submitTool() {
             showModalError("Both fields are required.");
             return;
         }
+    } else if (pendingTool === 'accuse') {
+        if (value.toUpperCase() === 'GUILTY') {
+            payload = { 
+                tool: 'accuse', 
+                suspect_id: gameState.currentSuspect 
+            };
+        } else {
+            showModalError("Type 'GUILTY' to confirm accusation.");
+            return;
+        }
     } else {
         if (value) {
             payload = { tool: pendingTool, input: value };
@@ -470,6 +541,7 @@ document.getElementById('tool-map').onclick = () => useTool('get_location');
 document.getElementById('tool-camera').onclick = () => useTool('get_footage');
 document.getElementById('tool-phone').onclick = () => useTool('call_alibi');
 document.getElementById('tool-dna').onclick = () => useTool('get_dna_test');
+document.getElementById('tool-accuse').onclick = () => useTool('accuse');
 
 // Notify Parent that we are ready (Retry loop)
 console.log("📡 Attempting to connect to game server...");

ui/templates/game_interface.html

@@ -42,18 +42,22 @@
             <div class="tool-btn" id="tool-map">
                 <span class="tool-icon">🗺️</span>
                 <span>Location</span>
+                <span class="tool-cost">2 pts</span>
             </div>
             <div class="tool-btn" id="tool-camera">
                 <span class="tool-icon">📹</span>
                 <span>Footage</span>
+                <span class="tool-cost">2 pts</span>
             </div>
             <div class="tool-btn" id="tool-phone">
                 <span class="tool-icon">📞</span>
                 <span>Call Alibi</span>
+                <span class="tool-cost">1 pt</span>
             </div>
             <div class="tool-btn" id="tool-dna">
                 <span class="tool-icon">🔬</span>
                 <span>DNA Test</span>
+                <span class="tool-cost">3 pts</span>
             </div>
             <div class="tool-btn" id="tool-accuse" style="margin-top: auto; border-color: red; color: red;">
                 <span class="tool-icon">⚖️</span>