merge geoguessr

geoguessr/geo_server.py

@@ -4,6 +4,8 @@ import base64
 from dotenv import load_dotenv
 from mcp.server.fastmcp import FastMCP, Image
 
+load_dotenv()
+
 mcp = FastMCP(name="GeoServer", stateless_http=True)
 
 
@@ -11,10 +13,22 @@ mcp = FastMCP(name="GeoServer", stateless_http=True)
 # Store the current game ID and basic state
 active_game = {}
 
-# --- Flask API Helper Functions ---
-def call_flask_api(endpoint, method='GET', json_data=None):
-    """Helper function to call Flask API endpoints"""
-    url = f"{FLASK_API_URL}{endpoint}"
+# --- FastAPI endpoint base URL ---
+PORT = os.environ.get("PORT", "10000")
+SPACE_HOST = os.environ.get("SPACE_HOST")
+if SPACE_HOST and SPACE_HOST.strip():
+    BASE_HOST = SPACE_HOST.strip().rstrip("/")
+else:
+    BASE_HOST = f"http://localhost:{PORT}"
+
+# Allow override; default to the mounted FastAPI app
+API_BASE_URL = os.environ.get("GEOGUESSR_API_URL", f"{BASE_HOST}/geoguessr_app")
+
+
+# --- HTTP Helper Function ---
+def call_api(endpoint, method='GET', json_data=None):
+    """Helper function to call GeoGuessr FastAPI endpoints"""
+    url = f"{API_BASE_URL}{endpoint}"
     try:
         if method == 'POST':
             response = requests.post(url, json=json_data, headers={'Content-Type': 'application/json'}, timeout=30)
@@ -25,14 +39,14 @@ def call_flask_api(endpoint, method='GET', json_data=None):
             return response.json()
         else:
             error_msg = f"API call failed: {response.status_code} - {response.text}"
-            print(f"Flask API Error: {error_msg}")
+            print(f"Geo API Error: {error_msg}")
             raise Exception(error_msg)
     except requests.exceptions.ConnectionError as e:
-        error_msg = f"Could not connect to Flask API at {FLASK_API_URL}. Make sure the Flask server is running. Error: {str(e)}"
+        error_msg = f"Could not connect to Geo API at {API_BASE_URL}. Make sure the FastAPI server is running. Error: {str(e)}"
         print(f"Connection Error: {error_msg}")
         raise Exception(error_msg)
     except requests.exceptions.Timeout as e:
-        error_msg = f"Timeout calling Flask API at {FLASK_API_URL}. Error: {str(e)}"
+        error_msg = f"Timeout calling Geo API at {API_BASE_URL}. Error: {str(e)}"
         print(f"Timeout Error: {error_msg}")
         raise Exception(error_msg)
     except Exception as e:
@@ -77,8 +91,8 @@ def start_game(difficulty: str = "easy", player_name: str = "MCP Agent") -> Imag
     """
     global active_game
     
-    # Call Flask API to start game
-    game_data = call_flask_api('/start_game', 'POST', {
+    # Call FastAPI to start game
+    game_data = call_api('/start_game', 'POST', {
         'difficulty': difficulty,
         'player_name': player_name
     })
@@ -131,9 +145,9 @@ def move(direction: str = None, degree: float = None, distance: float = 0.1) ->
     else:
         raise ValueError("Must provide either direction or degree parameter.")
     
-    # Call Flask API to move
+    # Call FastAPI to move
     game_id = active_game['game_id']
-    move_result = call_flask_api(f'/game/{game_id}/move', 'POST', move_data)
+    move_result = call_api(f'/game/{game_id}/move', 'POST', move_data)
     
     # Convert base64 image to bytes and return as Image
     if move_result.get('streetview_image'):
@@ -188,9 +202,9 @@ def make_final_guess() -> dict:
     # Get the placeholder guess
     guess_location = active_game['placeholder_guess']
     
-    # Call Flask API to make the final guess
+    # Call FastAPI to make the final guess
     game_id = active_game['game_id']
-    guess_result = call_flask_api(f'/game/{game_id}/guess', 'POST', {
+    guess_result = call_api(f'/game/{game_id}/guess', 'POST', {
         'lat': guess_location['lat'],
         'lng': guess_location['lng']
     })
@@ -217,7 +231,7 @@ def get_game_state() -> dict:
         raise ValueError("Game not started.")
     
     game_id = active_game['game_id']
-    game_state = call_flask_api(f'/game/{game_id}/state')
+    game_state = call_api(f'/game/{game_id}/state')
     
     # Don't expose the actual coordinates - keep the guessing challenge
     state_info = {

geoguessr/static/admin.js

@@ -0,0 +1,139 @@
+let map;
+let drawingManager;
+let lastDrawnShape = null;
+let displayedShapes = [];
+
+const difficultyColors = {
+    easy: '#34A853',
+    medium: '#F9AB00',
+    hard: '#EA4335'
+};
+
+function api(path) {
+    return path.startsWith('/') ? path.slice(1) : path;
+}
+
+function initAdminMap() {
+    map = new google.maps.Map(document.getElementById('map'), {
+        center: { lat: 20, lng: 0 },
+        zoom: 2,
+    });
+
+    drawingManager = new google.maps.drawing.DrawingManager({
+        drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
+        drawingControl: true,
+        drawingControlOptions: {
+            position: google.maps.ControlPosition.TOP_CENTER,
+            drawingModes: [google.maps.drawing.OverlayType.RECTANGLE],
+        },
+        rectangleOptions: {
+            fillColor: '#F97316',
+            fillOpacity: 0.3,
+            strokeWeight: 1,
+            clickable: true,
+            editable: true,
+            zIndex: 1,
+        },
+    });
+
+    drawingManager.setMap(map);
+
+    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
+        if (lastDrawnShape) {
+            lastDrawnShape.setMap(null);
+        }
+        lastDrawnShape = event.overlay;
+        drawingManager.setDrawingMode(null);
+        document.getElementById('save-zone').disabled = false;
+    });
+
+    document.getElementById('save-zone').addEventListener('click', saveLastZone);
+    document.getElementById('new-zone-btn').addEventListener('click', () => {
+        drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
+        document.getElementById('save-zone').disabled = true;
+    });
+
+    loadExistingZones();
+}
+
+function saveLastZone() {
+    if (!lastDrawnShape) {
+        alert('Please draw a zone first.');
+        return;
+    }
+
+    const difficulty = document.getElementById('difficulty-select').value;
+    const bounds = lastDrawnShape.getBounds().toJSON();
+
+    const zoneData = { type: 'rectangle', bounds: bounds };
+
+    fetch(api('/api/zones'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ difficulty: difficulty, zone: zoneData }),
+    })
+    .then(response => response.json())
+    .then(data => {
+        const statusMsg = document.getElementById('status-message');
+        statusMsg.textContent = data.message || `Error: ${data.error}`;
+        setTimeout(() => statusMsg.textContent = '', 3000);
+        if (lastDrawnShape) {
+            lastDrawnShape.setMap(null);
+            lastDrawnShape = null;
+        }
+        document.getElementById('save-zone').disabled = true;
+        loadExistingZones();
+    });
+}
+
+function loadExistingZones() {
+    displayedShapes.forEach(shape => shape.setMap(null));
+    displayedShapes = [];
+
+    fetch(api('/api/zones'))
+        .then(response => response.json())
+        .then(zones => {
+            for (const difficulty in zones) {
+                zones[difficulty].forEach(zone => {
+                    if (zone.type === 'rectangle') {
+                        const rectangle = new google.maps.Rectangle({
+                            bounds: zone.bounds,
+                            map: map,
+                            fillColor: difficultyColors[difficulty],
+                            fillOpacity: 0.35,
+                            strokeColor: difficultyColors[difficulty],
+                            strokeWeight: 2,
+                            editable: false,
+                            clickable: true,
+                        });
+                        rectangle.zoneId = zone.id;
+                        google.maps.event.addListener(rectangle, 'click', function() {
+                            if (confirm('Are you sure you want to delete this zone?')) {
+                                deleteZone(this.zoneId, this);
+                            }
+                        });
+                        displayedShapes.push(rectangle);
+                    }
+                });
+            }
+        });
+}
+
+function deleteZone(zoneId, shape) {
+    fetch(api('/api/zones'), {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ zone_id: zoneId })
+    })
+    .then(response => response.json())
+    .then(data => {
+        const statusMsg = document.getElementById('status-message');
+        statusMsg.textContent = data.message || `Error: ${data.error}`;
+        setTimeout(() => statusMsg.textContent = '', 3000);
+        if (data.message) {
+            shape.setMap(null);
+        }
+    });
+}
+
+

geoguessr/static/script.js

@@ -0,0 +1,243 @@
+let map, panorama, guessMarker, gameId, googleMapsApiKey;
+let startLocation;
+let onFirstLinksLoaded;
+
+function api(path) {
+    // Use relative paths so mounting under a subpath works
+    return path.startsWith('/') ? path.slice(1) : path;
+}
+
+function initLobby() {
+    const replayForm = document.getElementById('replay-form');
+    if (replayForm) {
+        replayForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            replayGame();
+        });
+    }
+    const playAgain = document.getElementById('play-again');
+    if (playAgain) {
+        playAgain.addEventListener('click', showLobby);
+    }
+}
+
+function showLobby() {
+    document.getElementById('lobby-container').style.display = 'block';
+    document.getElementById('game-container').style.display = 'none';
+    document.getElementById('result-screen').style.display = 'none';
+}
+
+function showGame() {
+    document.getElementById('lobby-container').style.display = 'none';
+    document.getElementById('game-container').style.display = 'flex';
+    document.getElementById('result-screen').style.display = 'none';
+}
+
+function startGame() {
+    showGame();
+    const difficultyEl = document.getElementById('difficulty-select-lobby');
+    const difficulty = difficultyEl ? difficultyEl.value : 'easy';
+    fetch(api('/start_game'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ difficulty: difficulty })
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                alert(data.error);
+                showLobby();
+                return;
+            }
+            gameId = data.game_id;
+            startLocation = data.start_location || null;
+            googleMapsApiKey = data.google_maps_api_key || null;
+
+            const chatLog = document.getElementById('chat-log');
+            chatLog.innerHTML = '';
+            addChatMessage('Agent', `New game started (ID: ${gameId}). Finding my location...`);
+
+            if (startLocation) {
+                initStreetView(startLocation);
+                initMap();
+            }
+        });
+}
+
+function replayGame() {
+    const replayId = document.getElementById('replay-id-input').value;
+    if (!replayId) {
+        alert('Please enter a Game ID to replay.');
+        return;
+    }
+
+    fetch(api(`/game/${replayId}/state`))
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Game not found.');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (!data.game_over) {
+                alert('This game has not finished yet.');
+                return;
+            }
+            showGame();
+            gameId = replayId;
+            startLocation = data.start_location;
+
+            const chatLog = document.getElementById('chat-log');
+            chatLog.innerHTML = '';
+            addChatMessage('System', `Replaying game: ${gameId}`);
+
+            initStreetView(startLocation);
+            initMap(true);
+            replayActions(data.actions);
+        })
+        .catch(error => {
+            alert(error.message);
+        });
+}
+
+async function replayActions(actions) {
+    for (const action of actions) {
+        await sleep(2000);
+        if (action.type === 'move') {
+            addChatMessage('Agent (Replay)', `Moved to: ${action.location.lat.toFixed(4)}, ${action.location.lng.toFixed(4)}`);
+            panorama.setPosition(action.location);
+        } else if (action.type === 'guess') {
+            addChatMessage('Agent (Replay)', `Guessed: ${action.location.lat.toFixed(4)}, ${action.location.lng.toFixed(4)}`);
+            placeGuessMarker(action.location);
+            await sleep(2000);
+            const resultData = {
+                guess_location: action.location,
+                actual_location: startLocation,
+                distance_km: action.result.distance_km,
+                score: action.result.score
+            };
+            showResultScreen(resultData);
+        }
+    }
+}
+
+function initStreetView(location) {
+    onFirstLinksLoaded = new Promise(resolve => {
+        panorama = new google.maps.StreetViewPanorama(
+            document.getElementById('streetview'), {
+                position: location,
+                pov: { heading: 34, pitch: 10 },
+                visible: true,
+                linksControl: true,
+                clickToGo: true,
+            }
+        );
+
+        const linksChangedListener = panorama.addListener('links_changed', () => {
+            google.maps.event.removeListener(linksChangedListener);
+            resolve();
+        });
+
+        panorama.addListener('position_changed', function() {
+            const newLocation = panorama.getPosition();
+            updateAgentLocation(newLocation.lat(), newLocation.lng());
+        });
+    });
+}
+
+function initMap(isReplay = false) {
+    map = new google.maps.Map(document.getElementById('map'), {
+        center: { lat: 0, lng: 0 },
+        zoom: 1,
+    });
+
+    if (!isReplay) {
+        map.addListener('click', function(e) {
+            placeGuessMarker(e.latLng);
+            makeGuess(e.latLng.lat(), e.latLng.lng());
+        });
+    }
+}
+
+function placeGuessMarker(location) {
+    if (guessMarker) {
+        guessMarker.setMap(null);
+    }
+    guessMarker = new google.maps.Marker({
+        position: location,
+        map: map
+    });
+    map.setCenter(location);
+}
+
+function addChatMessage(sender, message) {
+    const chatLog = document.getElementById('chat-log');
+    const messageElement = document.createElement('div');
+    messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
+    chatLog.appendChild(messageElement);
+    chatLog.scrollTop = chatLog.scrollHeight;
+}
+
+async function runFakeAgent() {}
+
+async function takeActionWithScreenshot(actionMessage) {}
+
+async function updateAgentLocation(lat, lng) {
+    await fetch(api(`/game/${gameId}/move`), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ lat: lat, lng: lng }),
+    });
+}
+
+async function makeGuess(lat, lng) {
+    addChatMessage('You', `Guessed: ${lat.toFixed(4)}, ${lng.toFixed(4)}`);
+    const response = await fetch(api(`/game/${gameId}/guess`), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ lat: lat, lng: lng }),
+    });
+    const result = await response.json();
+    showResultScreen(result);
+}
+
+function showResultScreen(result) {
+    document.getElementById('game-container').style.display = 'none';
+    document.getElementById('result-screen').style.display = 'block';
+
+    const resultSummary = document.getElementById('result-summary');
+    resultSummary.innerHTML = `
+        <p>Your guess was ${result.distance_km.toFixed(2)} km away.</p>
+        <p>You scored ${result.score.toFixed(0)} points.</p>
+    `;
+
+    const resultMap = new google.maps.Map(document.getElementById('result-map'), {
+        zoom: 3,
+        center: result.actual_location
+    });
+
+    new google.maps.Marker({
+        position: result.actual_location,
+        map: resultMap,
+        label: 'A'
+    });
+    new google.maps.Marker({
+        position: result.guess_location,
+        map: resultMap,
+        label: 'G'
+    });
+    new google.maps.Polyline({
+        path: [result.actual_location, result.guess_location],
+        geodesic: true,
+        strokeColor: '#F97316',
+        strokeOpacity: 1.0,
+        strokeWeight: 2,
+        map: resultMap
+    });
+}
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+

geoguessr/static/style.css

@@ -0,0 +1,171 @@
+:root {
+    --primary-color: #F97316; /* Orange */
+    --secondary-color: #EA580C; /* Darker Orange */
+    --accent-color: #FB923C; /* Lighter Orange */
+    --dark-color: #202124;
+    --light-color: #FFFBEB; /* Creamy White */
+    --border-radius: 8px;
+}
+
+body {
+    font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: var(--light-color);
+    color: var(--dark-color);
+}
+
+h1 {
+    text-align: center;
+    margin: 20px 0;
+    color: var(--primary-color);
+    font-size: 2.5rem;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+#game-container {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px;
+    height: 80vh;
+    gap: 20px;
+    display: none; /* Hidden by default */
+}
+
+#streetview-container {
+    width: 50%;
+    height: 100%;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+#map-container {
+    width: 30%;
+    height: 100%;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+#chat-container {
+    width: 20%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--border-radius);
+    background-color: white;
+    padding: 15px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+#streetview, #map, #result-map {
+    height: 100%;
+    width: 100%;
+    border-radius: var(--border-radius);
+}
+
+#chat-log {
+    flex-grow: 1;
+    overflow-y: auto;
+    margin-bottom: 15px;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border-radius: var(--border-radius);
+}
+
+#chat-log div {
+    margin-bottom: 10px;
+    padding: 8px 12px;
+    background-color: white;
+    border-radius: 18px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
+#chat-log div strong {
+    color: var(--primary-color);
+}
+
+#controls {
+    display: flex;
+    justify-content: center;
+}
+
+button {
+    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+button:hover {
+    background: linear-gradient(135deg, #D9500B, #E56A15); /* Slightly darker gradient on hover */
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+#result-screen {
+    margin: 20px auto;
+    max-width: 800px;
+    text-align: center;
+    background-color: white;
+    padding: 30px;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+#result-summary {
+    margin: 20px 0;
+    font-size: 1.2rem;
+}
+
+#result-summary p {
+    margin: 10px 0;
+}
+
+.marker-label {
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    padding: 2px 6px;
+    border-radius: 50%;
+}
+
+#lobby-container {
+    max-width: 500px;
+    margin: 40px auto;
+    padding: 30px;
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+#lobby-container h2 {
+    margin-top: 0;
+    margin-bottom: 20px;
+}
+
+#lobby-container hr {
+    margin: 20px 0;
+    border: 0;
+    border-top: 1px solid #eee;
+}
+
+#lobby-container input {
+    width: calc(100% - 22px);
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: var(--border-radius);
+}
+
+/* Hide the address text in Street View */
+.gm-iv-address {
+    display: none !important;
+}
+
+

geoguessr/templates/admin.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Admin Panel - LLM GeoGuessr</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='style.css') }}">
+    <style>
+        h1 {
+            color: var(--dark-color);
+            text-align: center;
+        }
+        #controls {
+            width: 90%;
+            max-width: 800px;
+            margin: 20px auto;
+            padding: 20px;
+            background-color: white;
+            border-radius: var(--border-radius);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            flex-wrap: wrap;
+        }
+        #controls h2 {
+            display: none; /* Title is obvious from context */
+        }
+        #controls .control-item {
+            margin: 5px 10px;
+        }
+        #controls .control-item p {
+            margin: 0;
+            font-size: 0.9rem;
+            color: #555;
+        }
+        #controls .control-item label {
+            margin-right: 5px;
+        }
+        #controls .control-item select,
+        #controls .control-item button {
+            width: 100%;
+            padding: 10px;
+            box-sizing: border-box; /* Ensures padding is included in the width */
+        }
+        #map {
+            height: 75vh;
+            margin: 0 auto;
+            width: calc(100% - 40px);
+            border-radius: var(--border-radius);
+        }
+    </style>
+</head>
+<body>
+    <h1>Admin Panel</h1>
+    <div id="controls">
+        <div class="control-item">
+            <p>Select "Draw" then use the rectangle tool on the map.</p>
+        </div>
+        <div class="control-item">
+            <button id="new-zone-btn">Draw New Zone</button>
+        </div>
+        <div class="control-item">
+            <label for="difficulty-select">Difficulty:</label>
+            <select id="difficulty-select">
+                <option value="easy">Easy</option>
+                <option value="medium">Medium</option>
+                <option value="hard">Hard</option>
+            </select>
+        </div>
+        <div class="control-item">
+            <button id="save-zone" disabled>Save Zone</button>
+        </div>
+    </div>
+    <div id="status-message-container" style="text-align: center; margin-bottom: 10px;">
+         <p id="status-message"></p>
+    </div>
+    <div id="map"></div>
+    <script src="{{ url_for('static', path='admin.js') }}"></script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&libraries=drawing&callback=initAdminMap"></script>
+</body>
+</html>
+

geoguessr/templates/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>LLM GeoGuessr</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='style.css') }}">
+</head>
+<body>
+    <h1>LLM GeoGuessr</h1>
+
+    <div id="lobby-container">
+        <h2>Welcome</h2>
+        <form id="replay-form">
+            <p>Replay a previous game:</p>    
+            <input type="text" id="replay-id-input" placeholder="Enter Game ID">
+            <button type="submit">Replay Game</button>
+        </form>
+    </div>
+
+    <div id="game-container" style="display: none;">
+        <div id="streetview-container">
+            <div id="streetview"></div>
+        </div>
+        <div id="map-container">
+            <div id="map"></div>
+        </div>
+        <div id="chat-container">
+            <div id="chat-log"></div>
+            <div id="controls">
+                <!-- In-game controls can go here -->
+            </div>
+        </div>
+    </div>
+
+    <div id="result-screen" style="display: none;">
+        <h2>Results</h2>
+        <div id="result-map"></div>
+        <div id="result-summary"></div>
+        <button id="play-again">Back to Lobby</button>
+    </div>
+
+    <script src="{{ url_for('static', path='script.js') }}"></script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&callback=initLobby"></script>
+</body>
+</html>
+

geoguessr/web_app.py

@@ -0,0 +1,431 @@
+import os
+import json
+import uuid
+import math
+import random
+import base64
+import io
+import requests
+
+from fastapi import FastAPI, Request, Depends, HTTPException, status
+from fastapi.responses import JSONResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi.security import HTTPBasic, HTTPBasicCredentials
+from dotenv import load_dotenv
+from PIL import Image, ImageDraw, ImageFont
+
+
+load_dotenv()
+
+
+# Paths
+BASE_DIR = os.path.dirname(__file__)
+TEMPLATES_DIR = os.path.join(BASE_DIR, "templates")
+STATIC_DIR = os.path.join(BASE_DIR, "static")
+ZONES_FILE = os.path.join(BASE_DIR, "zones.json")
+
+
+app = FastAPI()
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+templates = Jinja2Templates(directory=TEMPLATES_DIR)
+
+
+# In-memory state
+games = {}
+zones = {"easy": [], "medium": [], "hard": []}
+
+
+# --- Zone Persistence Functions ---
+def save_zones_to_file() -> None:
+    try:
+        with open(ZONES_FILE, 'w') as f:
+            json.dump(zones, f, indent=4)
+    except Exception as e:
+        print(f"Error saving zones: {e}")
+
+
+def load_zones_from_file() -> None:
+    global zones
+    if os.path.exists(ZONES_FILE):
+        try:
+            with open(ZONES_FILE, 'r') as f:
+                loaded_zones = json.load(f)
+
+            if not (isinstance(loaded_zones, dict) and all(k in loaded_zones for k in ["easy", "medium", "hard"])):
+                raise ValueError("Invalid zones format")
+
+            migrated = False
+            for difficulty in loaded_zones:
+                for zone in loaded_zones[difficulty]:
+                    if 'id' not in zone:
+                        zone['id'] = uuid.uuid4().hex
+                        migrated = True
+
+            zones = loaded_zones
+            if migrated:
+                save_zones_to_file()
+        except Exception as e:
+            print(f"Warning: '{ZONES_FILE}' is corrupted or invalid ({e}). Recreating with empty zones.")
+            save_zones_to_file()
+    else:
+        save_zones_to_file()
+
+
+# Predefined fallback locations
+LOCATIONS = [
+    {'lat': 48.85824, 'lng': 2.2945},      # Eiffel Tower, Paris
+    {'lat': 40.748440, 'lng': -73.985664}, # Empire State Building, New York
+    {'lat': 35.689487, 'lng': 139.691711}, # Tokyo, Japan
+    {'lat': -33.856784, 'lng': 151.215297} # Sydney Opera House, Australia
+]
+
+
+def generate_game_id() -> str:
+    return ''.join(random.choices('abcdefghijklmnopqrstuvwxyz0123456789', k=10))
+
+
+def draw_compass_on_image(image_data_base64: str, heading: int) -> str:
+    try:
+        img = Image.open(io.BytesIO(base64.b64decode(image_data_base64)))
+
+        img_with_compass = img.copy()
+        draw = ImageDraw.Draw(img_with_compass)
+
+        compass_size = 80
+        margin = 20
+        x = img.width - compass_size - margin
+        y = margin
+        center_x = x + compass_size // 2
+        center_y = y + compass_size // 2
+
+        draw.ellipse([x, y, x + compass_size, y + compass_size], fill=(240, 240, 240), outline=(249, 115, 22), width=3)
+
+        font_size = 12
+        try:
+            font = ImageFont.truetype("/System/Library/Fonts/Arial.ttf", font_size)
+        except Exception:
+            try:
+                font = ImageFont.truetype("arial.ttf", font_size)
+            except Exception:
+                font = ImageFont.load_default()
+
+        directions = [
+            ("N", center_x, y + 8, (220, 38, 38)),
+            ("E", x + compass_size - 15, center_y, (249, 115, 22)),
+            ("S", center_x, y + compass_size - 20, (249, 115, 22)),
+            ("W", x + 8, center_y, (249, 115, 22)),
+        ]
+        for text, text_x, text_y, color in directions:
+            bbox = draw.textbbox((0, 0), text, font=font)
+            text_width = bbox[2] - bbox[0]
+            text_height = bbox[3] - bbox[1]
+
+            circle_radius = 10
+            draw.ellipse([text_x - circle_radius, text_y - circle_radius, text_x + circle_radius, text_y + circle_radius], fill=(255, 255, 255), outline=color, width=1)
+            draw.text((text_x - text_width // 2, text_y - text_height // 2), text, font=font, fill=color)
+
+        needle_length = compass_size // 2 - 15
+        needle_angle = math.radians(heading)
+        end_x = center_x + needle_length * math.sin(needle_angle)
+        end_y = center_y - needle_length * math.cos(needle_angle)
+        draw.line([center_x, center_y, end_x, end_y], fill=(220, 38, 38), width=4)
+        tip_radius = 3
+        draw.ellipse([end_x - tip_radius, end_y - tip_radius, end_x + tip_radius, end_y + tip_radius], fill=(220, 38, 38))
+        center_radius = 4
+        draw.ellipse([center_x - center_radius, center_y - center_radius, center_x + center_radius, center_y + center_radius], fill=(249, 115, 22))
+
+        label_y = y + compass_size + 5
+        label_text = f"{heading}°"
+        bbox = draw.textbbox((0, 0), label_text, font=font)
+        label_width = bbox[2] - bbox[0]
+        draw.text((center_x - label_width // 2, label_y), label_text, font=font, fill=(249, 115, 22))
+
+        buffer = io.BytesIO()
+        img_with_compass.save(buffer, format='JPEG', quality=85)
+        return base64.b64encode(buffer.getvalue()).decode('utf-8')
+    except Exception as e:
+        print(f"Error drawing compass: {e}")
+        return image_data_base64
+
+
+# --- Auth ---
+security = HTTPBasic()
+
+
+def verify_basic_auth(credentials: HTTPBasicCredentials = Depends(security)) -> None:
+    admin_user = os.getenv('ADMIN_USERNAME', 'admin')
+    admin_pass = os.getenv('ADMIN_PASSWORD', 'password')
+    if not (credentials.username == admin_user and credentials.password == admin_pass):
+        raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="Unauthorized", headers={"WWW-Authenticate": "Basic"})
+
+
+@app.get("/", response_class=HTMLResponse)
+def index(request: Request):
+    google_maps_api_key = os.getenv('GOOGLE_MAPS_API_KEY')
+    if not google_maps_api_key:
+        return HTMLResponse("Error: GOOGLE_MAPS_API_KEY not set. Please set it in a .env file.", status_code=500)
+    base_path = request.scope.get('root_path', '')
+    return templates.TemplateResponse("index.html", {"request": request, "google_maps_api_key": google_maps_api_key, "base_path": base_path})
+
+
+@app.get("/admin", response_class=HTMLResponse)
+def admin(request: Request, _: None = Depends(verify_basic_auth)):
+    google_maps_api_key = os.getenv('GOOGLE_MAPS_API_KEY')
+    if not google_maps_api_key:
+        return HTMLResponse("Error: GOOGLE_MAPS_API_KEY not set. Please set it in a .env file.", status_code=500)
+    base_path = request.scope.get('root_path', '')
+    return templates.TemplateResponse("admin.html", {"request": request, "google_maps_api_key": google_maps_api_key, "base_path": base_path})
+
+
+@app.get("/api/zones")
+def get_zones():
+    return JSONResponse(zones)
+
+
+@app.post("/api/zones")
+def create_zone(payload: dict):
+    difficulty = payload.get('difficulty')
+    zone_data = payload.get('zone')
+    if difficulty and zone_data and difficulty in zones:
+        zone_data['id'] = uuid.uuid4().hex
+        zones[difficulty].append(zone_data)
+        save_zones_to_file()
+        return {"message": "Zone saved successfully"}
+    raise HTTPException(status_code=400, detail="Invalid data")
+
+
+@app.delete("/api/zones")
+def delete_zone(payload: dict):
+    zone_id = payload.get('zone_id')
+    if not zone_id:
+        raise HTTPException(status_code=400, detail="Zone ID is required")
+    for difficulty in zones:
+        zones[difficulty] = [z for z in zones[difficulty] if z.get('id') != zone_id]
+    save_zones_to_file()
+    return {"message": "Zone deleted successfully"}
+
+
+def direction_to_degree(direction: str):
+    directions = {
+        'N': 0, 'NORTH': 0,
+        'NE': 45, 'NORTHEAST': 45,
+        'E': 90, 'EAST': 90,
+        'SE': 135, 'SOUTHEAST': 135,
+        'S': 180, 'SOUTH': 180,
+        'SW': 225, 'SOUTHWEST': 225,
+        'W': 270, 'WEST': 270,
+        'NW': 315, 'NORTHWEST': 315
+    }
+    return directions.get(direction.upper()) if isinstance(direction, str) else None
+
+
+def calculate_new_location(current_lat: float, current_lng: float, degree: float, distance_km: float = 0.1):
+    lat_rad = math.radians(current_lat)
+    lng_rad = math.radians(current_lng)
+    bearing_rad = math.radians(degree)
+    R = 6371.0
+
+    new_lat_rad = math.asin(
+        math.sin(lat_rad) * math.cos(distance_km / R) +
+        math.cos(lat_rad) * math.sin(distance_km / R) * math.cos(bearing_rad)
+    )
+
+    new_lng_rad = lng_rad + math.atan2(
+        math.sin(bearing_rad) * math.sin(distance_km / R) * math.cos(lat_rad),
+        math.cos(distance_km / R) - math.sin(lat_rad) * math.sin(new_lat_rad)
+    )
+
+    new_lat = math.degrees(new_lat_rad)
+    new_lng = math.degrees(new_lng_rad)
+    new_lng = ((new_lng + 180) % 360) - 180
+    return new_lat, new_lng
+
+
+@app.post("/start_game")
+def start_game(payload: dict):
+    difficulty = payload.get('difficulty', 'easy') if payload else 'easy'
+    player_name = payload.get('player_name', 'Anonymous Player') if payload else 'Anonymous Player'
+    player_google_api_key = payload.get('google_api_key') if payload else None
+
+    start_location = None
+    if difficulty in zones and zones[difficulty]:
+        selected_zone = random.choice(zones[difficulty])
+        if selected_zone.get('type') == 'rectangle':
+            bounds = selected_zone['bounds']
+            north, south, east, west = bounds['north'], bounds['south'], bounds['east'], bounds['west']
+            if west > east:
+                east += 360
+            rand_lng = random.uniform(west, east)
+            if rand_lng > 180:
+                rand_lng -= 360
+            rand_lat = random.uniform(south, north)
+            start_location = {'lat': rand_lat, 'lng': rand_lng}
+
+    if not start_location:
+        start_location = random.choice(LOCATIONS)
+
+    game_id = generate_game_id()
+    games[game_id] = {
+        'start_location': start_location,
+        'current_location': start_location,
+        'guesses': [],
+        'moves': 0,
+        'actions': [],
+        'game_over': False,
+        'player_name': player_name,
+        'player_google_api_key': player_google_api_key,
+        'created_at': __import__('datetime').datetime.now().isoformat()
+    }
+
+    google_maps_api_key = player_google_api_key or os.getenv('GOOGLE_MAPS_API_KEY')
+
+    streetview_image = None
+    compass_heading = random.randint(0, 359)
+    if google_maps_api_key:
+        try:
+            lat, lng = start_location['lat'], start_location['lng']
+            streetview_url = f"https://maps.googleapis.com/maps/api/streetview?size=640x400&location={lat},{lng}&heading={compass_heading}&pitch=0&fov=90&key={google_maps_api_key}"
+            response = requests.get(streetview_url, timeout=20)
+            if response.status_code == 200:
+                base_image = base64.b64encode(response.content).decode('utf-8')
+                streetview_image = draw_compass_on_image(base_image, compass_heading)
+        except Exception as e:
+            print(f"Error fetching Street View image: {e}")
+
+    return {
+        'game_id': game_id,
+        'player_name': player_name,
+        'streetview_image': streetview_image,
+        'compass_heading': compass_heading
+    }
+
+
+@app.get("/game/{game_id}/state")
+def get_game_state(game_id: str):
+    game = games.get(game_id)
+    if not game:
+        raise HTTPException(status_code=404, detail='Game not found')
+    return game
+
+
+@app.post("/game/{game_id}/move")
+def move(game_id: str, payload: dict):
+    game = games.get(game_id)
+    if not game:
+        raise HTTPException(status_code=404, detail='Game not found')
+    if game['game_over']:
+        raise HTTPException(status_code=400, detail='Game is over')
+
+    direction = payload.get('direction') if payload else None
+    degree = payload.get('degree') if payload else None
+    distance = payload.get('distance', 0.1) if payload else 0.1
+
+    if direction is None and degree is None:
+        raise HTTPException(status_code=400, detail='Must provide either direction (N, NE, E, etc.) or degree (0-360)')
+
+    if direction is not None:
+        degree = direction_to_degree(direction)
+        if degree is None:
+            raise HTTPException(status_code=400, detail='Invalid direction. Use N, NE, E, SE, S, SW, W, NW or their full names')
+
+    if not (0 <= degree <= 360):
+        raise HTTPException(status_code=400, detail='Degree must be between 0 and 360')
+
+    if not (0.01 <= distance <= 10):
+        raise HTTPException(status_code=400, detail='Distance must be between 0.01 and 10 km')
+
+    current_lat = game['current_location']['lat']
+    current_lng = game['current_location']['lng']
+    new_lat, new_lng = calculate_new_location(current_lat, current_lng, degree, distance)
+
+    game['current_location'] = {'lat': new_lat, 'lng': new_lng}
+    game['moves'] += 1
+    game['actions'].append({
+        'type': 'move',
+        'location': {'lat': new_lat, 'lng': new_lng},
+        'direction': direction,
+        'degree': degree,
+        'distance_km': distance
+    })
+
+    google_maps_api_key = game.get('player_google_api_key') or os.getenv('GOOGLE_MAPS_API_KEY')
+    streetview_image = None
+    compass_heading = random.randint(0, 359)
+    if google_maps_api_key:
+        try:
+            streetview_url = f"https://maps.googleapis.com/maps/api/streetview?size=640x400&location={new_lat},{new_lng}&heading={compass_heading}&pitch=0&fov=90&key={google_maps_api_key}"
+            response = requests.get(streetview_url, timeout=20)
+            if response.status_code == 200:
+                base_image = base64.b64encode(response.content).decode('utf-8')
+                streetview_image = draw_compass_on_image(base_image, compass_heading)
+        except Exception as e:
+            print(f"Error fetching Street View image: {e}")
+
+    return {
+        'message': 'Move successful',
+        'streetview_image': streetview_image,
+        'compass_heading': compass_heading,
+        'moved_direction': direction or f"{degree}°",
+        'distance_moved_km': distance
+    }
+
+
+@app.post("/game/{game_id}/guess")
+def guess(game_id: str, payload: dict):
+    game = games.get(game_id)
+    if not game:
+        raise HTTPException(status_code=404, detail='Game not found')
+    if game['game_over']:
+        raise HTTPException(status_code=400, detail='Game is over')
+
+    guess_lat = payload.get('lat') if payload else None
+    guess_lng = payload.get('lng') if payload else None
+    if guess_lat is None or guess_lng is None:
+        raise HTTPException(status_code=400, detail='Missing lat/lng for guess')
+
+    guess_location = {'lat': guess_lat, 'lng': guess_lng}
+    game['guesses'].append(guess_location)
+
+    from math import radians, cos, sin, asin, sqrt
+
+    def haversine(lat1, lon1, lat2, lon2):
+        lon1, lat1, lon2, lat2 = map(radians, [lon1, lat1, lon2, lat2])
+        dlon = lon2 - lon1
+        dlat = lat2 - lat1
+        a = sin(dlat/2)**2 + cos(lat1) * cos(lat2) * sin(dlon/2)**2
+        c = 2 * asin(sqrt(a))
+        r = 6371
+        return c * r
+
+    distance = haversine(
+        game['start_location']['lat'], game['start_location']['lng'],
+        guess_lat, guess_lng
+    )
+
+    max_score = 5000
+    score = max(0, max_score - distance)
+
+    game['actions'].append({
+        'type': 'guess',
+        'location': guess_location,
+        'result': {
+            'distance_km': distance,
+            'score': score
+        }
+    })
+    game['game_over'] = True
+
+    return {
+        'message': 'Guess received',
+        'guess_location': guess_location,
+        'actual_location': game['start_location'],
+        'distance_km': distance,
+        'score': score
+    }
+
+
+# Load zones at startup
+load_zones_from_file()
+
+

geoguessr/zones.json

@@ -0,0 +1,67 @@
+{
+    "easy": [
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 48.8336736971006,
+                "west": 2.28515625,
+                "north": 48.87885155432368,
+                "east": 2.39776611328125
+            },
+            "id": "fc849008dae8481092eb79750ffb29b3"
+        },
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 35.66847408359237,
+                "west": 139.62718704877395,
+                "north": 35.737615509324385,
+                "east": 139.8218510502388
+            },
+            "id": "898886b44cad43b9abfec296a553daea"
+        },
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 37.536938882023136,
+                "west": 126.94755460738277,
+                "north": 37.557898527241505,
+                "east": 127.01244260787105
+            },
+            "id": "ba27424f2f584ed0b238795608503149"
+        },
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 18.953448012353313,
+                "west": 72.81336899465802,
+                "north": 18.976825403712557,
+                "east": 72.83911820120099
+            },
+            "id": "71ec558ad7d7476297452801a170f10c"
+        },
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 40.713060179679026,
+                "west": -74.00079248380419,
+                "north": 40.76040587151275,
+                "east": -73.97933481168505
+            },
+            "id": "c03e32aeb33a444f8eac20b24d946b34"
+        },
+        {
+            "type": "rectangle",
+            "bounds": {
+                "south": 37.77180843179515,
+                "west": -122.4442846812313,
+                "north": 37.80328200680126,
+                "east": -122.40857911482505
+            },
+            "id": "41ce7507e12a44b8b964d9c1d2755c42"
+        }
+    ],
+    "medium": [],
+    "hard": []
+}
+

server.py

@@ -5,6 +5,7 @@ from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from pokemon.pokemon_server import mcp as pokemon_mcp
 from geoguessr.geo_server import mcp as geogussr_mcp
+from geoguessr.web_app import app as geoguessr_app
 import os
 
 
@@ -42,6 +43,9 @@ async def index(request: Request):
 app.mount("/geoguessr", geogussr_mcp.streamable_http_app())
 app.mount("/Pokemon", pokemon_mcp.streamable_http_app())
 
+# Mount GeoGuessr FastAPI web app (UI + API)
+app.mount("/geoguessr_app", geoguessr_app)
+
 PORT = int(os.environ.get("PORT", "10000"))
 
 if __name__ == "__main__":