Update app.py

app.py

@@ -1,22 +1,17 @@
 import streamlit as st
 import requests
 from time import sleep
-import datetime
-from typing import List, Dict, Optional
 
-# Constants
+
 STEAM_STORE_URL = "https://store.steampowered.com/app/{}"
 STEAM_CDN_COVER = "https://cdn.cloudflare.steamstatic.com/steam/apps/{}/capsule_184x69.jpg"
 FALLBACK_COVER = "https://cdn.cloudflare.steamstatic.com/steam/store_capsule.jpg"
 
-# Page config
-st.set_page_config(
-    page_title="Steam Top 20 Dashboard",
-    layout="wide",
-    initial_sidebar_state="collapsed"
-)
 
-# Enhanced CSS with view toggle and auto-refresh
+st.set_page_config(layout="wide")
+
+
+# Modern CSS for small cards, centered layout, left-aligned text block
 st.markdown("""
     <style>
     html, body, .main, .block-container {
@@ -24,11 +19,6 @@ st.markdown("""
         background: linear-gradient(135deg, #141e30 0%, #243b55 100%) !important;
         color: #e2eeff !important;
     }
-    
-    .stApp > header {
-        background-color: transparent;
-    }
-    
     .modern-header {
         margin-top: 26px;
         font-size: 2.4rem;
@@ -39,7 +29,6 @@ st.markdown("""
         letter-spacing: 1px;
         text-align: center;
     }
-    
     .modern-subtitle {
         color: #b5e3f1;
         font-size: 1.05rem;
@@ -47,192 +36,48 @@ st.markdown("""
         margin-bottom: 21px;
         text-align: center;
     }
-    
-    .controls-container {
-        background: rgba(35, 47, 66, 0.6);
-        padding: 15px 20px;
-        border-radius: 10px;
-        border: 1px solid #364f6b;
-        margin-bottom: 20px;
-    }
-    
-    .status-indicator {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        color: #b5e3f1;
-        font-size: 14px;
-        padding: 8px 12px;
-        background: rgba(54, 79, 107, 0.4);
-        border-radius: 6px;
-    }
-    
-    .update-dot {
-        width: 8px;
-        height: 8px;
-        background: #4ade80;
-        border-radius: 50%;
-        animation: pulse 2s ease-in-out infinite;
-    }
-    
-    @keyframes pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.4; }
-    }
-    
-    .game-card-grid {
-        background: linear-gradient(135deg, #232f42 70%, #2e3f54 100%);
-        border: 1px solid #364f6b;
-        border-radius: 10px;
-        padding: 15px;
-        margin-bottom: 15px;
-        text-align: center;
-        transition: all 0.3s ease;
-        min-height: 280px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .game-card-grid:hover {
-        transform: translateY(-3px);
-        border-color: #48c6ef;
-        box-shadow: 0 5px 20px rgba(72, 198, 239, 0.3);
-    }
-    
-    .game-card-grid img {
-        border-radius: 7px;
-        box-shadow: 0 3px 10px rgba(0,0,0,0.4);
-        margin-bottom: 12px;
-        max-width: 150px;
-        width: 100%;
-    }
-    
-    .game-card-list {
-        background: linear-gradient(135deg, #232f42 70%, #2e3f54 100%);
-        border: 1px solid #364f6b;
-        border-radius: 10px;
-        padding: 15px;
-        margin-bottom: 10px;
-        transition: all 0.3s ease;
-        display: flex;
-        align-items: center;
-        gap: 15px;
-    }
-    
-    .game-card-list:hover {
-        transform: translateX(5px);
-        border-color: #48c6ef;
-        box-shadow: 0 3px 15px rgba(72, 198, 239, 0.2);
-    }
-    
-    .game-card-list img {
-        border-radius: 7px;
-        box-shadow: 0 3px 10px rgba(0,0,0,0.4);
-        max-width: 120px;
-        width: 100%;
-    }
-    
-    .game-title {
-        color: #69e2ff;
-        font-weight: 500;
-        font-size: 15px;
-        margin-bottom: 8px;
-        line-height: 1.3;
-    }
-    
-    .game-detail {
-        font-size: 12px;
-        color: #d7e5f7;
-        margin-bottom: 3px;
-    }
-    
-    .sale-badge {
-        color: #7bffc9;
-        font-weight: 500;
-        font-size: 13px;
-    }
-    
-    .metacritic {
-        color: #ffe761;
-        font-size: 13px;
-        font-weight: 600;
-    }
-    
-    .current-players {
-        color: #a1eafc;
-        font-size: 12.5px;
-        font-weight: 600;
-    }
-    
-    .list-cover {
-        flex-shrink: 0;
-    }
-    
-    .list-info {
-        flex: 1;
-        display: grid;
-        grid-template-columns: 2fr 1fr 1fr 1fr;
-        gap: 15px;
-        align-items: center;
-    }
-    
-    .list-info a {
-        text-decoration: none;
-        color: inherit;
-    }
-    
-    @media (max-width: 768px) {
-        .list-info {
-            grid-template-columns: 1fr;
-            gap: 8px;
-        }
-    }
     </style>
     """, unsafe_allow_html=True)
 
-@st.cache_data(ttl=300)
-def get_top_games(limit: int = 20) -> List[int]:
-    """Fetch top games from Steam API"""
-    try:
-        url = "https://api.steampowered.com/ISteamChartsService/GetMostPlayedGames/v1/"
-        response = requests.get(url, timeout=10)
-        response.raise_for_status()
-        data = response.json()
-        ranks = data["response"]["ranks"][:limit]
-        return [g["appid"] for g in ranks]
-    except Exception as e:
-        st.error(f"Error fetching top games: {e}")
-        return []
 
-def resolve_cover_url(appid: int) -> str:
-    """Check if cover image exists, return fallback if not"""
+st.markdown('<div class="modern-header">Steam Top 20: Live Trending Games</div>', unsafe_allow_html=True)
+st.markdown('<div class="modern-subtitle">Discover what the world is playing right now.<br>This dashboard shows live player counts, deals, and essential info—always fresh from official Steam data.</div>', unsafe_allow_html=True)
+
+
+@st.cache_data
+def get_top_games(limit=20):
+    url = "https://api.steampowered.com/ISteamChartsService/GetMostPlayedGames/v1/"
+    response = requests.get(url)
+    response.raise_for_status()
+    data = response.json()
+    ranks = data["response"]["ranks"][:limit]
+    return [g["appid"] for g in ranks]
+
+
+def resolve_cover_url(appid):
     test_url = f"https://cdn.cloudflare.steamstatic.com/steam/apps/{appid}/capsule_184x69.jpg"
+    fallback_url = FALLBACK_COVER
     try:
-        resp = requests.head(test_url, timeout=3)
-        if resp.status_code == 200:
+        resp = requests.get(test_url, timeout=2.5)
+        if resp.status_code == 200 and (resp.content and not resp.url.endswith("trans.gif")):
             return test_url
     except Exception:
         pass
-    return FALLBACK_COVER
+    return fallback_url
+
 
-@st.cache_data(ttl=300)
-def get_game_details(appid: int) -> Optional[Dict]:
-    """Fetch detailed game information"""
+def get_game_details(appid):
     url = f"https://store.steampowered.com/api/appdetails?appids={appid}&cc=us&l=en"
     try:
-        r = requests.get(url, timeout=10)
+        r = requests.get(url)
         r.raise_for_status()
         item = r.json().get(str(appid), {})
         if not item.get("success"):
             return None
-        
         info = item["data"]
         price = info.get("price_overview", {})
         metacritic = info.get("metacritic", {})
         cover_url = resolve_cover_url(appid)
-        
         return {
             "appid": appid,
             "name": info.get("name", "Unknown"),
@@ -244,183 +89,73 @@ def get_game_details(appid: int) -> Optional[Dict]:
             "box_art": cover_url,
             "steam_link": STEAM_STORE_URL.format(appid),
         }
-    except Exception as e:
+    except Exception:
         return None
 
-@st.cache_data(ttl=180)
-def get_current_player_count(appid: int) -> int:
-    """Fetch current player count"""
+
+def get_current_player_count(appid):
     url = f"https://api.steampowered.com/ISteamUserStats/GetNumberOfCurrentPlayers/v1/?appid={appid}"
     try:
-        r = requests.get(url, timeout=5)
+        r = requests.get(url)
         data = r.json()
         return data.get("response", {}).get("player_count", 0)
     except Exception:
         return 0
 
-def format_card_grid(game: Dict) -> str:
-    """Format game card for grid view"""
-    discount_html = ""
-    if game["on_sale"]:
-        discount_html = f'<div class="sale-badge">-{game["discount"]}% OFF</div>'
 
-    metacritic_text = f"Metacritic: {game['metacritic']}" if game["metacritic"] else "Metacritic: N/A"
-
-    return f'''
-    <a href="{game["steam_link"]}" target="_blank" style="text-decoration:none; color:inherit;">
-        <div class="game-card-grid">
-            <img src="{game["box_art"]}" alt="{game["name"]}" />
-            <div class="game-title">{game["name"]}</div>
-            <div class="game-detail">Release: {game["release_date"]}</div>
-            {discount_html}
-            <div class="game-detail">Price: {game["price"]}</div>
-            <div class="metacritic">{metacritic_text}</div>
-            <div class="current-players">Current Players: <b>{game["current_players"]:,}</b></div>
-        </div>
-    </a>
-    '''
-
-def format_card_list(game: Dict) -> str:
-    """Format game card for list view"""
+def format_card(game):
     discount_html = ""
+    price_html = f'<div style="font-size:13px;">Price: {game["price"]}</div>'
     if game["on_sale"]:
-        discount_html = f'<div class="sale-badge">-{game["discount"]}% OFF</div>'
+        discount_html = f'<div style="color:#7bffc9; font-weight:500; margin-bottom:2px; font-size:13px;">-{game["discount"]}% OFF</div>'
+        price_html = f'{discount_html}{price_html}'
 
-    metacritic_text = f"MC: {game['metacritic']}" if game["metacritic"] else "MC: N/A"
 
+    # Center image and text block, but text within that block is always left-aligned
     return f'''
-    <div class="game-card-list">
-        <div class="list-cover">
-            <img src="{game["box_art"]}" alt="{game["name"]}" />
-        </div>
-        <div class="list-info">
-            <div>
-                <a href="{game["steam_link"]}" target="_blank">
-                    <div class="game-title">{game["name"]}</div>
-                </a>
-                <div class="game-detail">Release: {game["release_date"]}</div>
-            </div>
-            <div>
-                {discount_html}
-                <div class="game-detail">Price: {game["price"]}</div>
-            </div>
-            <div>
-                <div class="metacritic">{metacritic_text}</div>
-            </div>
-            <div>
-                <div class="current-players"><b>{game["current_players"]:,}</b> players</div>
+    <div style="
+        background: linear-gradient(135deg, #232f42 70%, #2e3f54 100%);
+        border:1px solid #364f6b;
+        border-radius:10px;
+        padding:10px 10px 13px 10px;
+        margin-bottom:13px;
+        min-height:238px;
+        display:flex;
+        flex-direction:column;
+        align-items:center;
+        justify-content:center;">
+        <a href="{game["steam_link"]}" target="_blank" style="text-decoration:none;">
+            <img src="{game["box_art"]}" width="130" style="border-radius:7px; box-shadow:0 3px 10px -4px #000; margin:0 auto 8px auto; display:block;" />
+            <div style="width:165px; max-width:90vw; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;">
+                <h3 style="margin:7px 0 3px 0; color:#69e2ff; font-family: 'Segoe UI', 'Roboto', sans-serif; font-weight:500; font-size:15px; line-height:1.13; text-align:left;">{game["name"]}</h3>
+                <div style="font-size:12px; color:#d7e5f7; margin-bottom:2px; text-align:left;">Release: {game["release_date"]}</div>
+                {price_html}
+                <div style="color:#ffe761; font-size:13px; font-weight:600; margin-bottom:2px; text-align:left;">{"Metacritic: "+str(game["metacritic"]) if game["metacritic"] else "Metacritic: N/A"}</div>
+                <div style="margin-top:2px; font-size:12.5px; color:#a1eafc; text-align:left;">Current Players: <b>{game["current_players"]:,}</b></div>
             </div>
-        </div>
+        </a>
     </div>
     '''
 
+
 def main():
-    # Header
-    st.markdown('<div class="modern-header">Steam Top 20: Live Trending Games</div>', unsafe_allow_html=True)
-    st.markdown('<div class="modern-subtitle">Discover what the world is playing right now.<br>This dashboard shows live player counts, deals, and essential info—always fresh from official Steam data.</div>', unsafe_allow_html=True)
-    
-    # Initialize session state
-    if 'view_mode' not in st.session_state:
-        st.session_state.view_mode = 'grid'
-    if 'auto_refresh' not in st.session_state:
-        st.session_state.auto_refresh = False
-    if 'last_update' not in st.session_state:
-        st.session_state.last_update = None
-    
-    # Create three columns for controls
-    col1, col2, col3 = st.columns([2, 3, 2])
-    
-    with col1:
-        st.write("**View Mode:**")
-        view_mode = st.radio(
-            "View",
-            options=['grid', 'list'],
-            index=0 if st.session_state.view_mode == 'grid' else 1,
-            horizontal=True,
-            label_visibility='collapsed'
-        )
-        st.session_state.view_mode = view_mode
-    
-    with col2:
-        # Last updated status
-        if st.session_state.last_update:
-            time_diff = datetime.datetime.now() - st.session_state.last_update
-            if time_diff.total_seconds() < 60:
-                time_text = "Just now"
-            elif time_diff.total_seconds() < 3600:
-                mins = int(time_diff.total_seconds() // 60)
-                time_text = f"{mins} minute{'s' if mins > 1 else ''} ago"
-            else:
-                hours = int(time_diff.total_seconds() // 3600)
-                time_text = f"{hours} hour{'s' if hours > 1 else ''} ago"
-        else:
-            time_text = "Loading..."
-        
-        st.markdown(f'''
-        <div class="status-indicator">
-            <div class="update-dot"></div>
-            Last updated: {time_text}
-        </div>
-        ''', unsafe_allow_html=True)
-    
-    with col3:
-        st.write("**Auto-refresh (5min):**")
-        auto_refresh = st.checkbox(
-            "Enable auto-refresh",
-            value=st.session_state.auto_refresh,
-            label_visibility='collapsed'
-        )
-        st.session_state.auto_refresh = auto_refresh
-        
-        if st.button("🔄 Refresh Now", use_container_width=True):
-            st.cache_data.clear()
-            st.rerun()
-    
-    st.markdown("---")
-    
-    # Auto-refresh logic
-    if st.session_state.auto_refresh:
-        st.info("⏱️ Auto-refresh enabled - Page will update every 5 minutes")
-    
-    # Fetch and display games
-    with st.spinner("Fetching top games..."):
-        appids = get_top_games(20)
-        
-        if not appids:
-            st.error("Failed to fetch games. Please try again later.")
-            return
-        
-        games = []
-        progress_bar = st.progress(0, text="Loading game details...")
-        
-        for idx, appid in enumerate(appids):
-            details = get_game_details(appid)
-            if details:
-                details["current_players"] = get_current_player_count(appid)
-                games.append(details)
-            
-            progress_bar.progress(
-                (idx + 1) / len(appids),
-                text=f"Loading game details... ({idx + 1}/{len(appids)})"
-            )
-            sleep(0.1)
-        
-        progress_bar.empty()
-        st.session_state.last_update = datetime.datetime.now()
-    
-    # Display games based on view mode
-    if st.session_state.view_mode == 'grid':
-        cols = st.columns(4)
-        for idx, game in enumerate(games):
-            with cols[idx % 4]:
-                st.markdown(format_card_grid(game), unsafe_allow_html=True)
-    else:
-        for game in games:
-            st.markdown(format_card_list(game), unsafe_allow_html=True)
-    
-    # Footer info
-    st.markdown("---")
-    st.markdown(f"**Total games loaded:** {len(games)} | **Data source:** Steam Public APIs")
+    appids = get_top_games(20)
+    games = []
+    progress_bar = st.progress(0)
+    for idx, aid in enumerate(appids):
+        details = get_game_details(aid)
+        if details:
+            details["current_players"] = get_current_player_count(aid)
+            games.append(details)
+        progress_bar.progress((idx + 1) / len(appids))
+        sleep(0.1)
+
+
+    columns = st.columns(4)
+    for idx, game in enumerate(games):
+        with columns[idx % 4]:
+            st.markdown(format_card(game), unsafe_allow_html=True)
+
 
 if __name__ == "__main__":
-    main()
+    main()