Fix overlay fixture data not being received by iframe

- Add await to initializeOverlayController() in player.js to ensure proper initialization order
- Add better logging to overlay-controller.js for debugging postMessage communication
- Add sessionStorage check to getAuthToken() for more robust token retrieval
- Add error handling and logging to fetchFixtureData() and apiRequest() methods

This fixes the issue where the overlay iframe was requesting fixture data but not receiving it from the parent window.

web/overlay-controller.js

@@ -105,6 +105,7 @@ class WebOverlayController {
         
         // Set up message listener for iframe communication
         window.addEventListener('message', this.onIframeMessage.bind(this));
+        this.log('Message listener set up for iframe communication');
         
         // Set up resize observer for overlay scaling
         this.setupResizeObserver();
@@ -573,11 +574,14 @@ class WebOverlayController {
      */
     async fetchFixtureData() {
         try {
+            console.log('[OverlayController] Fetching fixture data from API...');
             const response = await this.apiRequest('/fixtures');
+            console.log('[OverlayController] Fixture data API response:', response);
             this.fixtureData = response;
             return response;
         } catch (error) {
             console.error('[OverlayController] Failed to fetch fixture data:', error);
+            console.error('[OverlayController] Error details:', error.message, error.stack);
             return [];
         }
     }
@@ -649,20 +653,31 @@ class WebOverlayController {
     getAuthToken() {
         // First check if we have a token set directly
         if (this.authToken) {
+            this.log('Using directly set auth token');
             return this.authToken;
         }
         
         // Check localStorage (where app.js stores it)
         const storedToken = localStorage.getItem('authToken');
         if (storedToken) {
+            this.log('Found auth token in localStorage, length:', storedToken.length);
             return storedToken;
         }
         
         // Check global authToken variable (from app.js)
         if (typeof authToken !== 'undefined' && authToken) {
+            this.log('Found auth token in global variable');
             return authToken;
         }
         
+        // Also check for token in sessionStorage
+        const sessionToken = sessionStorage.getItem('authToken');
+        if (sessionToken) {
+            this.log('Found auth token in sessionStorage, length:', sessionToken.length);
+            return sessionToken;
+        }
+        
+        this.log('No auth token found in any location');
         return null;
     }
     
@@ -684,18 +699,34 @@ class WebOverlayController {
         const token = this.getAuthToken();
         if (token) {
             headers['Authorization'] = `Bearer ${token}`;
+            console.log('[OverlayController] API request to:', endpoint, 'with auth token');
+        } else {
+            console.warn('[OverlayController] API request to:', endpoint, 'WITHOUT auth token - may fail if endpoint requires authentication');
         }
         
-        const response = await fetch(url, {
-            ...options,
-            headers
-        });
+        console.log('[OverlayController] Making API request to:', url);
         
-        if (!response.ok) {
-            throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+        try {
+            const response = await fetch(url, {
+                ...options,
+                headers
+            });
+            
+            console.log('[OverlayController] API response status:', response.status, response.statusText);
+            
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error('[OverlayController] API error response:', errorText);
+                throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+            }
+            
+            const data = await response.json();
+            console.log('[OverlayController] API response data:', data);
+            return data;
+        } catch (error) {
+            console.error('[OverlayController] API request error:', error);
+            throw error;
         }
-        
-        return await response.json();
     }
     
     /**
@@ -726,11 +757,15 @@ class WebOverlayController {
         }
         
         console.log('[OverlayController] Received iframe message:', message.type, 'from origin:', event.origin);
+        console.log('[OverlayController] Message source is our iframe:', event.source === this.overlayIframe?.contentWindow);
+        console.log('[OverlayController] Overlay iframe exists:', !!this.overlayIframe);
+        console.log('[OverlayController] Overlay iframe contentWindow exists:', !!this.overlayIframe?.contentWindow);
         
         // Handle different message types from iframe
         switch (message.type) {
             case 'requestInitialData':
                 // Send current overlay data to iframe
+                console.log('[OverlayController] Processing requestInitialData');
                 this.sendMessageToOverlay('initialData', {
                     overlayData: this.overlayData,
                     timerState: this.timerState,
@@ -739,8 +774,15 @@ class WebOverlayController {
                 break;
                 
             case 'requestFixtureData':
-                const fixtureData = await this.fetchFixtureData();
-                this.sendMessageToOverlay('fixtureData', { fixtures: fixtureData });
+                console.log('[OverlayController] Processing requestFixtureData');
+                try {
+                    const fixtureData = await this.fetchFixtureData();
+                    console.log('[OverlayController] Fetched fixture data:', fixtureData ? fixtureData.length + ' fixtures' : 'null');
+                    this.sendMessageToOverlay('fixtureData', { fixtures: fixtureData });
+                } catch (error) {
+                    console.error('[OverlayController] Error fetching fixture data:', error);
+                    this.sendMessageToOverlay('fixtureData', { fixtures: [] });
+                }
                 break;
                 
             case 'requestTimerState':

web/player.js

@@ -442,7 +442,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         loadPlayerData();
         loadMatches();
         initializeAndStartStream();
-        initializeOverlayController();
+        await initializeOverlayController();
     } else {
         // Redirect to login if no token
         window.location.href = 'index.html';