Fix CORS problem hopefully (408 steam error code)

Author: Not-Baguette

src/components/SteamWidget.css

@@ -124,9 +124,18 @@ body.dark-mode .steam-game-fallback {
 }
 
 .steam-loading,
-.steam-no-games {
+.steam-no-games,
+.steam-error {
   text-align: center;
   padding: 10px;
   color: #8B8B8B;
   font-style: italic;
+}
+
+.steam-error {
+  color: #E74C3C;
+}
+
+body.dark-mode .steam-error {
+  color: #F08080;
 }

src/components/SteamWidget.tsx

@@ -5,15 +5,18 @@ import './SteamWidget.css';
 export const SteamWidget: React.FC = () => {
   const [games, setGames] = useState<SteamGame[]>([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const loadGames = async () => {
       try {
         setLoading(true);
+        setError(null);
         const recentGames = await fetchRecentGames();
         setGames(recentGames);
       } catch (error) {
         console.error('Error loading Steam games:', error);
+        setError('Failed to load Steam games');
       } finally {
         setLoading(false);
       }
@@ -30,6 +33,11 @@ export const SteamWidget: React.FC = () => {
       <div className="steam-games-list">
         {loading ? (
           <div className="steam-loading">Loading games... ✨</div>
+        ) : error ? (
+          <div className="steam-error">
+            <div>🎮 Unable to load games right now</div>
+            <div style={{ fontSize: '0.8em', opacity: 0.7 }}>Steam API temporarily unavailable</div>
+          </div>
         ) : games.length > 0 ? (
           games.map((game) => (
             <a 

src/utils/steam.ts

@@ -15,6 +15,69 @@ export interface SteamRecentGamesResponse {
   };
 }
 
+// more cors proxy cuz reliability issues
+const CORS_PROXIES = [
+  'https://api.codetabs.com/v1/proxy?quest=',
+  'https://api.allorigins.win/get?url=',
+  'https://corsproxy.io/?',
+  'https://cors-anywhere.herokuapp.com/',
+];
+
+const fetchWithProxy = async (apiUrl: string, proxyIndex = 0): Promise<any> => {
+  if (proxyIndex >= CORS_PROXIES.length) {
+    throw new Error('All proxy services failed');
+  }
+  
+  const proxy = CORS_PROXIES[proxyIndex];
+  let proxyUrl: string;
+  
+  // Different proxies have different URL formats
+  if (proxy.includes('allorigins')) {
+    proxyUrl = `${proxy}${encodeURIComponent(apiUrl)}`;
+  } else if (proxy.includes('codetabs')) {
+    proxyUrl = `${proxy}${encodeURIComponent(apiUrl)}`;
+  } else {
+    proxyUrl = `${proxy}${apiUrl}`;
+  }
+  
+  try {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+    
+    const response = await fetch(proxyUrl, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      },
+      signal: controller.signal
+    });
+    
+    clearTimeout(timeoutId);
+    
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    
+    const data = await response.json();
+    
+    // Handle different proxy response formats
+    if (proxy.includes('allorigins') && data.contents) {
+      return JSON.parse(data.contents);
+    } else if (proxy.includes('codetabs') && data) {
+      return data;
+    } else if (data) {
+      return data;
+    } else {
+      throw new Error('No valid data in response');
+    }
+    
+  } catch (error) {
+    console.warn(`Proxy ${proxy} failed:`, error);
+    // Try next proxy
+    return fetchWithProxy(apiUrl, proxyIndex + 1);
+  }
+};
+
 /**
  * Fetch recently played Steam games
  */
@@ -28,31 +91,15 @@ export const fetchRecentGames = async (): Promise<SteamGame[]> => {
       return [];
     }
 
-    // Use CORS proxy directly to avoid CORS errors
+    // Build Steam API URL
     const apiUrl = `https://api.steampowered.com/IPlayerService/GetRecentlyPlayedGames/v1/?key=${STEAM_API_KEY}&steamid=${STEAM_ID}&format=json`;
-    const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(apiUrl)}`;
 
-    const response = await fetch(proxyUrl, {
-      method: 'GET',
-      headers: {
-        'Accept': 'application/json',
-      }
-    });
-    
-    if (!response.ok) {
-      throw new Error(`Proxy request failed: ${response.status}`);
-    }
-    
-    const proxyData = await response.json();
-    
-    if (!proxyData.contents) {
-      throw new Error('No data received from proxy');
-    }
-    
-    const steamData: SteamRecentGamesResponse = JSON.parse(proxyData.contents);
+    // Try fetching with different proxy services
+    const steamData: SteamRecentGamesResponse = await fetchWithProxy(apiUrl);
 
     if (!steamData.response || !steamData.response.games) {
-      throw new Error('Invalid Steam API response');
+      console.warn('No recent games found in Steam API response');
+      return [];
     }
 
     return steamData.response.games.slice(0, 4); // Show top 4 games