diff --git a/app.py b/app.py
index 8c61f0c..2c91c7e 100644
--- a/app.py
+++ b/app.py
@@ -1,6 +1,7 @@
import logging
from flask import Flask
+from flask_cors import cross_origin
import config
from dto.requests import GameStartRequestDTO
@@ -12,6 +13,7 @@ jb_client = JuliusBaerApiClient()
@app.route('/new-game', methods=['POST'])
+@cross_origin() # allow all origins all methods
def new_game():
game_start_request = GameStartRequestDTO(player_name=config.API_TEAM)
res = jb_client.start_game(game_start_request)
diff --git a/frontend/src/index.html b/frontend/src/index.html
index f7f2345..c61aa0c 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -6,7 +6,26 @@
PDF Viewer
-
+
+
+
+
+ Loading game data...
+
+
+
+
+
+
+
+
+
+
Game Ready!
+
Session ID:
+
First Client ID:
+
Hello, Bootstrap and Vite!
diff --git a/frontend/src/js/main.js b/frontend/src/js/main.js
index f20c7d3..f49da2e 100644
--- a/frontend/src/js/main.js
+++ b/frontend/src/js/main.js
@@ -7,6 +7,64 @@ import Alpine from 'alpinejs'
window.Alpine = Alpine
+// Define an Alpine component to manage the game state
+Alpine.data('gameManager', () => ({
+ // --- Component State ---
+ isLoading: false,
+ error: null,
+ gameData: null,
+
+ init() {
+ console.log('Game manager initializing...');
+ this.startNewGame();
+ },
+
+ startNewGame() {
+ this.isLoading = true;
+ this.error = null;
+ this.gameData = null;
+
+ // Use the browser's fetch API
+ fetch('http://127.0.0.1:5000/new-game', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ .then(response => {
+ // Check if the request was successful (status code 2xx)
+ if (!response.ok) {
+ // If not okay, throw an error to be caught by .catch()
+ // Try to get error details from response body if possible
+ return response.json().then(errData => {
+ throw new Error(errData.detail || `HTTP error! status: ${response.status}`);
+ }).catch(() => {
+ // Fallback if response is not JSON or other error
+ throw new Error(`HTTP error! status: ${response.status}`);
+ });
+ }
+ // If okay, parse the JSON response body
+ return response.json();
+ })
+ .then(data => {
+ // Success! Store the received game data
+ console.log('New game data received:', data);
+ this.gameData = data; // e.g., { message, session_id, client_id, ... }
+ })
+ .catch(error => {
+ // Handle any errors during fetch or processing
+ console.error('Error starting new game:', error);
+ this.error = error.message || 'Failed to start game. Check console/backend.';
+ })
+ .finally(() => {
+ // This runs regardless of success or failure
+ this.isLoading = false; // Turn off loading indicator
+ });
+ }
+
+ // submitDecision(decision) { ... }
+}));
+
Alpine.data('pdfViewer', () => ({
pdfUrl: null,
diff --git a/requirements.txt b/requirements.txt
index 5fba858..f4c415c 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -39,3 +39,4 @@ Flask==3.1.0
annotated-types==0.7.0
blinker==1.9.0
langchain-google-genai==2.1.2
+flask-cors==5.0.1