add frontend next

frontend/src/index.html

@@ -26,6 +26,40 @@
             </div>
     </template>
 
+    <template x-if="gameData && !isLoading && !error">
+        <div>
+            <p>Current Score: <strong x-text="gameData.score"></strong></p>
+            <p>Status: <span x-text="gameData.status"></span></p>
+            <p>Session ID: <code x-text="gameData.session_id"></code></p>
+            <p>Client ID to process: <code x-text="gameData.client_id"></code></p>
+
+            <hr>
+
+            <div x-show="gameData.status !== 'gameover'">
+                 <h4>Make Decision:</h4>
+                 <button
+                     type="button"
+                     class="btn btn-success me-2"
+                     @click="submitDecision('Accept')"
+                     :disabled="isLoading">
+                     Accept
+                 </button>
+                 <button
+                     type="button"
+                     class="btn btn-danger"
+                     @click="submitDecision('Reject')"
+                     :disabled="isLoading">
+                     Reject
+                 </button>
+            </div>
+
+             <div x-show="gameData.status === 'gameover'" class="alert alert-warning mt-3">
+                 Game Over! Final Score: <strong x-text="gameData.score"></strong>
+             </div>
+
+        </div>
+    </template>
+
     <div class="container py-4 px-3 mx-auto">
       <h1>Hello, Bootstrap and Vite!</h1>
       <button class="btn btn-primary">Primary button</button>

frontend/src/js/main.js

@@ -60,9 +60,97 @@ Alpine.data('gameManager', () => ({
             // This runs regardless of success or failure
             this.isLoading = false; // Turn off loading indicator
         });
-    }
+    },
 
-    // submitDecision(decision) { ... }
+    submitDecision(decision) {
+        // Basic validation
+        if (!decision || (decision !== 'Accept' && decision !== 'Reject')) {
+            this.error = 'Invalid decision provided.';
+            console.error('Invalid decision:', decision);
+            return;
+        }
+        if (!this.gameData || !this.gameData.session_id || !this.gameData.client_id) {
+            this.error = 'Missing game data (session or client ID). Cannot submit decision.';
+            console.error('Missing game data for decision:', this.gameData);
+            return;
+        }
+        if (this.isLoading) {
+            console.warn('Already processing a request.');
+            return; // Prevent double clicks
+        }
+        if (this.gameData.status === 'gameover') {
+             console.warn('Game is already over.');
+             return;
+        }
+
+
+        console.log(`Submitting decision: ${decision} for client: ${this.gameData.client_id}`);
+        this.isLoading = true;
+        this.error = null;
+
+        // Prepare the request body
+        const requestBody = {
+            decision: decision,
+            session_id: this.gameData.session_id,
+            client_id: this.gameData.client_id
+        };
+
+        fetch('http://127.0.0.1:5000/next', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(requestBody)
+        })
+        .then(response => {
+             if (!response.ok) {
+                 // Improved error handling for non-JSON or text responses
+                return response.text().then(text => {
+                    try {
+                        const errData = JSON.parse(text); // Try parsing as JSON
+                        throw new Error(errData.detail || `HTTP error! status: ${response.status}`);
+                    } catch (e) {
+                        throw new Error(text || `HTTP error! status: ${response.status}`); // Use text if not JSON
+                    }
+                });
+            }
+            return response.json();
+        })
+        .then(data => {
+            // Success! Update the game state with the response
+            console.log('Decision response received:', data);
+            // Update score and status directly
+            this.gameData.score = data.score;
+            this.gameData.status = data.status;
+
+            // IMPORTANT: Update client_id and client_data ONLY if they are present in the response
+            // Otherwise, keep the old ones (needed if status is 'gameover')
+            if (data.client_id) {
+                this.gameData.client_id = data.client_id;
+            } else if (data.status !== 'gameover') {
+                // This case shouldn't happen based on spec, but good to log
+                 console.warn("Game continues but no new client ID received from /next endpoint.");
+            }
+
+            if (data.client_data) {
+                 this.gameData.client_data = data.client_data;
+                 // You might trigger logic here to update file viewers based on new client_data
+                 console.log("New client_data received, update viewers if necessary.");
+            } else if (data.status !== 'gameover') {
+                 console.warn("Game continues but no new client data received from /next endpoint.");
+            }
+
+            if (data.status === 'gameover') {
+                console.log('Game Over! Final score:', this.gameData.score);
+                // Maybe clear client_data visually or show a game over message
+            }
+        })
+        .catch(error => {
+            console.error('Error submitting decision:', error);
+            this.error = error.message || 'Failed to submit decision.';
+        })
+        .finally(() => {
+            this.isLoading = false;
+        });
+    }
 }));
 
 Alpine.data('pdfViewer', () => ({