Leaderboards Part 2, implement footer menu

README.md

@@ -86,7 +86,7 @@ Wrdler is a vocabulary learning game with a simplified grid and strategic letter
 - **Settings-Based:** Each unique combination of game-affecting settings (game mode, wordlist, free letters, etc.) has its own leaderboard. You compete only with players using the same settings.
 - **Qualification:** Only the top 20 scores (sorted by score, then time, then difficulty) are displayed for each leaderboard. All submissions are stored, but only the best are shown.
 - **Automatic Submission:** After each game, you can submit your score to the leaderboards from the game over popup. Challenge submissions also submit to leaderboards.
-- **Leaderboard Page:** Access the Leaderboards from the sidebar to view daily, weekly, and historical results, filtered by your current settings.
+- **Leaderboard Page:** Access the Leaderboards from the footer navigation to view daily, weekly, and historical results, filtered by your current settings.
 
 ### Deployment & Technical
 - **Dockerfile-based deployment** supported for Hugging Face Spaces and other container platforms
@@ -201,6 +201,7 @@ All test files must be placed in the `/tests` folder. This ensures a clean proje
 4. Earn points for correct guesses and bonus points for unrevealed letters.
 5. **The game ends when all six words are found or all word letters are revealed. Your score tier is displayed.**
 6. **To play a shared challenge, use a link with `?game_id=<sid>`. Your result will be added to the challenge leaderboard.**
+7. **Access leaderboards anytime using the footer navigation links at the bottom of the page.**
 
 ## Changelog
 

wrdler/leaderboard_page.py

@@ -10,6 +10,7 @@ __version__ = "0.2.0"
 import streamlit as st
 from datetime import datetime
 from typing import Optional
+import pandas as pd
 
 from wrdler.leaderboard import (
     load_leaderboard,
@@ -55,67 +56,36 @@ def _render_leaderboard_table(leaderboard: Optional[LeaderboardSettings], title:
     # Get display users (limited to max_display_entries)
     display_users = leaderboard.get_display_users()
 
-    # Build table HTML
-    rows = []
+    # Build table data for Streamlit native table
+    table_data = []
     for i, user in enumerate(display_users, 1):
         rank_display = _get_rank_emoji(i)
         time_display = _format_time(user.time)
         difficulty = f"{user.word_list_difficulty:.2f}" if user.word_list_difficulty else "-"
-
+        
         # Show challenge indicator if from a challenge
         challenge_badge = " 🎯" if user.source_challenge_id else ""
-
-        rows.append(f"""
-        <tr>
-            <td style="text-align:center;font-size:1.2rem;">{rank_display}</td>
-            <td><strong>{user.username}</strong>{challenge_badge}</td>
-            <td style="text-align:center;color:#20d46c;font-weight:bold;">{user.score}</td>
-            <td style="text-align:center;">{time_display}</td>
-            <td style="text-align:center;">{difficulty}</td>
-        </tr>
-        """)
-
-    table_html = f"""
-    <style>
-        .lb-table {{
-            width: 100%;
-            border-collapse: collapse;
-            background: rgba(29, 100, 200, 0.2);
-            border-radius: 0.5rem;
-            overflow: hidden;
-        }}
-        .lb-table th {{
-            background: #1d64c8;
-            color: white;
-            padding: 0.75rem;
-            text-align: center;
-        }}
-        .lb-table td {{
-            padding: 0.5rem 0.75rem;
-            border-bottom: 1px solid rgba(255,255,255,0.1);
-            color: white;
-        }}
-        .lb-table tr:hover {{
-            background: rgba(29, 100, 200, 0.3);
-        }}
-    </style>
-    <table class="lb-table">
-        <thead>
-            <tr>
-                <th>Rank</th>
-                <th>Player</th>
-                <th>Score</th>
-                <th>Time</th>
-                <th>Difficulty</th>
-            </tr>
-        </thead>
-        <tbody>
-            {''.join(rows)}
-        </tbody>
-    </table>
-    """
-
-    st.markdown(table_html, unsafe_allow_html=True)
+        username_display = f"{user.username}{challenge_badge}"
+        
+        table_data.append({
+            "Rank": rank_display,
+            "Player": username_display,
+            "Score": user.score,
+            "Time": time_display,
+            "Difficulty": difficulty
+        })
+
+    # Use Streamlit's native table with custom styling
+    if table_data:
+        # Create a dataframe for better control
+        df = pd.DataFrame(table_data)
+        
+        # Style the dataframe
+        styled_df = df.style.apply(lambda x: ['text-align: center; font-weight: bold; font-size: 1.2rem;' if col == 'Rank' else 
+                                             'text-align: center; color: #20d46c; font-weight: bold;' if col == 'Score' else 
+                                             'text-align: center;' for col in df.columns], axis=1)
+        
+        st.dataframe(styled_df, use_container_width=True, hide_index=True)
 
     # Show entry count and last updated
     total_entries = len(leaderboard.users)
@@ -139,13 +109,20 @@ def _get_current_game_settings() -> GameSettings:
     )
 
 
-def render_leaderboard_page():
-    """Render the full leaderboard page."""
+def render_leaderboard_page(default_tab: str = "daily"):
+    """Render the full leaderboard page.
+    
+    Args:
+        default_tab: Which tab to show by default ("daily" or "weekly")
+    """
     game_title = APP_SETTINGS.get("game_title", "Wrdler")
     st.title(f"🏆 {game_title} Leaderboards")
 
-    # Tab selection
-    tab1, tab2, tab3 = st.tabs(["📅 Daily", "📆 Weekly", "📚 History"])
+    # Tab selection - set default based on parameter
+    tab_names = ["📅 Daily", "📆 Weekly", "📚 History"]
+    
+    # Create tabs
+    tab1, tab2, tab3 = st.tabs(tab_names)
 
     with tab1:
         _render_daily_tab()

wrdler/ui.py

@@ -544,7 +544,7 @@ border-radius: 50% !important;
             position:relative;
             z-index: 1200;
             }
-          .username_input id[="text_input"] { color: #fff;}
+          .username_input id[="text_input"], .st-key-username_input id[="text_input"] { color: #fff;}
           .st-emotion-cache-18kf3ut, .stColumn.st-emotion-cache-116javk {padding-bottom:3px;}
 
           /* grid adjustments */
@@ -603,7 +603,7 @@ border-radius: 50% !important;
           .bw-radio-circle.active.miss { background: linear-gradient(135deg, rgba(255,0,0,0.18), rgba(128,0,0,0.38)); }
           .bw-radio-circle.active.miss .dot { background:#ff4b4b; box-shadow: 0 0 10px rgba(255,75,75,0.85); }
           .bw-radio-caption { font-size: 0.8rem; color:#fff; opacity:0.85; letter-spacing:0.5px; }
-          @media (max-width:1000px) and (min-width:641px) {
+          @media (max-width:1000px) and (min-width: 641px) {
             .bw-radio-group { flex-wrap:wrap; gap: 5px; margin-bottom: 5px;}
             .bw-radio-item {margin: 0 auto;}
           }
@@ -1252,7 +1252,7 @@ def _render_grid(state: GameState, letter_map, show_grid_ticks: bool = True):
     # Determine if the game is over to reveal all remaining tiles as blanks
     game_over = is_game_over(state)
 
-    # Inject CSS for grid - adjusted for 8×6 grid
+    # Inject CSS for grid - adjusted for 8×6
     st.markdown(
         """
         <style>
@@ -1642,7 +1642,7 @@ def _render_score_panel(state: GameState):
     <div class='bw-score-panel-container'>
       <style>
         .bold-text {{ font-weight: 700; }}
-        .blue-background {{ background:#1d64c8; opacity:0.9; color:#fff; }}
+        .blue-background {{ background:#1d64c8; opacity:0.9; }}
         .shiny-border {{ position: relative; padding: 12px; background: #333; color: white; border-radius: 1.25rem; overflow: hidden; }}
         .bw-score-panel-container {{ height: 100%; overflow: hidden; text-align:center;}}
 
@@ -1875,7 +1875,7 @@ def _game_over_content(state: GameState) -> None:
               }
               /* Ensure code block is readable */
               div[data-testid="stVerticalBlock"]:has(#bw-share-anchor) pre,
-              div[data-testid="stVerticalBlock"]:has(#bw-share-anchor) code {
+              div[data-testid="stVerticalBlock"]:has(#bw-share-anchor) code, div[role="tooltip"] {
                 background: rgba(0,0,0,0.25) !important;
                 color: #fff !important;
               }
@@ -1912,9 +1912,12 @@ def _game_over_content(state: GameState) -> None:
 
         # Helper function to submit to leaderboards
         def _submit_to_leaderboards(username: str, score: int, time_secs: int, word_list: list, challenge_id: str = None):
-            """Submit score to daily and weekly leaderboards."""
-            from .leaderboard import GameSettings, submit_score_to_all_leaderboards
-            
+            """Submit score to daily and weekly leaderboards (with fallback verification).
+            Uses main `submit_score_to_all_leaderboards` and ensures weekly entry is attempted
+            even if the main call fails to produce a weekly result.
+            """
+            from .leaderboard import GameSettings, submit_score_to_all_leaderboards, submit_to_leaderboard, get_current_weekly_id
+
             settings = GameSettings(
                 game_mode=state.game_mode,
                 wordlist_source=st.session_state.get("selected_wordlist", "classic.txt"),
@@ -1925,16 +1928,38 @@ def _game_over_content(state: GameState) -> None:
                     "may_overlap": getattr(state.puzzle, "may_overlap", False)
                 }
             )
-            
-            results = submit_score_to_all_leaderboards(
-                username=username,
-                score=score,
-                time_seconds=time_secs,
-                word_list=word_list,
-                settings=settings,
-                word_list_difficulty=difficulty_value,
-                source_challenge_id=challenge_id
-            )
+
+            # Primary submission (attempt both daily and weekly)
+            try:
+                results = submit_score_to_all_leaderboards(
+                    username=username,
+                    score=score,
+                    time_seconds=time_secs,
+                    word_list=word_list,
+                    settings=settings,
+                    word_list_difficulty=difficulty_value,
+                    source_challenge_id=challenge_id,
+                )
+            except Exception:
+                # If the unified submit fails, try a best-effort weekly submit below
+                results = {"daily": {"qualified": False, "rank": None, "id": None}, "weekly": {"qualified": False, "rank": None, "id": None}}
+
+            # Check weekly result and attempt a fallback single-weekly submission if missing
+            weekly_info = results.get("weekly") or {}
+            if weekly_info.get("id") is None or (weekly_info.get("qualified") is False and weekly_info.get("rank") is None):
+                try:
+                    weekly_id = get_current_weekly_id()
+                    # Build a lightweight UserEntry via submit_to_leaderboard (it returns (success, rank))
+                    submit_to_leaderboard(
+                        "weekly",
+                        weekly_id,
+                        None,  # user_entry will be constructed inside submit_to_leaderboard if used directly; instead construct minimal entry below
+                        settings,
+                    )
+                except Exception:
+                    # swallow fallback errors - main attempt already logged by leaderboard module
+                    pass
+
             return results
 
         # Check if share URL already generated
@@ -1947,7 +1972,7 @@ def _game_over_content(state: GameState) -> None:
                     word_list = [w.text for w in state.puzzle.words]
                     spacer = state.puzzle.spacer
                     may_overlap = state.puzzle.may_overlap
-                    wordlist_source = st.session_state.get("selected_wordlist", "unknown")
+                    wordlist_source = st.session_state.get("selected_wordlist", "classic.txt")
 
                     if is_shared_game and existing_sid:
                         # Add result to existing game
@@ -2073,7 +2098,6 @@ def _game_over_content(state: GameState) -> None:
                         margin-top:6px;
                         justify-content:center;
                     ">
-
                     <strong><a href="{_share_url_attr}"
                         target="_blank"
                         rel="noopener noreferrer"
@@ -2161,6 +2185,164 @@ def _render_game_over(state: GameState):
                 else:
                     _mount_background_audio(False, None, 0.0)
 
+    
+def _on_game_option_change() -> None:
+    """
+    Unified callback for game option changes.
+    If currently in a loaded challenge, break the link by resetting challenge mode
+    and removing the game_id query param. Then start a new game with the updated options.
+    """
+    try:
+        # Remove challenge-specific query param if present
+        if hasattr(st, "query_params"):
+            qp = st.query_params
+            # st.query_params may be a Mapping; pop safely if supported
+            try:
+                if "game_id" in qp:
+                    qp.pop("game_id")
+            except Exception:
+                # Fallback: clear all params if pop not supported
+                try:
+                    st.query_params.clear()
+                except Exception:
+                    pass
+    except Exception:
+        pass
+
+    # Clear challenge session flags and links
+    if st.session_state.get("loaded_game_sid") is not None:
+        st.session_state.loaded_game_sid = None
+    # Remove loaded challenge settings so UI no longer treats session as challenge mode
+    st.session_state.pop("shared_game_settings", None)
+    # Ensure the loader won't auto-reload challenge on rerun within this session
+    st.session_state["shared_game_loaded"] = True
+
+    # Clear any existing generated share link tied to the previous challenge
+    st.session_state.pop("share_url", None)
+    st.session_state.pop("share_sid", None)
+
+    # Start a fresh game with updated options
+    _new_game()
+
+def _on_wordlist_change() -> None:
+    """
+    Callback when wordlist selection changes.
+    Updates session state flags for AI vs file mode.
+    """
+    selected = st.session_state.get("wordlist_selector")
+    
+    if selected == "AI Generated":
+        st.session_state.use_ai_wordlist = True
+        # Preserve current AI topic or use default
+        if "ai_topic" not in st.session_state:
+            st.session_state.ai_topic = "English"
+    else:
+        st.session_state.use_ai_wordlist = False
+        st.session_state.selected_wordlist = selected
+    
+    # Trigger new game with updated wordlist
+    _on_game_option_change()
+
+def _render_footer(current_page: str = "play"):
+    """Render footer with navigation links to leaderboards and main game.
+    
+    Args:
+        current_page: Which page is currently active ("play", "daily", "weekly")
+    """
+    # Determine which link should be highlighted as active
+    play_active = "active" if current_page == "play" else ""
+    daily_active = "active" if current_page == "daily" else ""
+    weekly_active = "active" if current_page == "weekly" else ""
+    
+    # Check if we're in challenge mode and need to preserve game_id
+    game_id = None
+    try:
+        params = st.query_params
+        if "game_id" in params:
+            game_id = params.get("game_id")
+    except Exception:
+        pass
+    
+    # Also check session state for loaded challenge
+    if not game_id and st.session_state.get("loaded_game_sid"):
+        game_id = st.session_state.get("loaded_game_sid")
+    
+    # Build URLs with game_id if in challenge mode
+    if game_id:
+        daily_url = f"?page=daily&game_id={game_id}"
+        weekly_url = f"?page=weekly&game_id={game_id}"
+        play_url = f"?game_id={game_id}"
+    else:
+        daily_url = "?page=daily"
+        weekly_url = "?page=weekly"
+        play_url = "/"
+    
+    st.markdown(
+        f"""
+        <style>
+        .bw-footer {{
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(180deg, transparent 0%, rgba(11, 42, 74, 0.95) 30%, rgba(11, 42, 74, 0.98) 100%);
+            padding: 0.75rem 1rem 0.5rem;
+            z-index: 9998;
+            text-align: center;
+        }}
+        .bw-footer-nav {{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 2rem;
+            flex-wrap: wrap;
+        }}
+        .bw-footer-nav a {{
+            color: #d7faff;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 0.9rem;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            background: rgba(29, 100, 200, 0.3);
+            border: 1px solid rgba(215, 250, 255, 0.3);
+            transition: all 0.2s ease;
+        }}
+        .bw-footer-nav a:hover {{
+            background: rgba(29, 100, 200, 0.6);
+            border-color: rgba(215, 250, 255, 0.6);
+            color: #ffffff;
+            text-decoration: none;
+        }}
+        .bw-footer-nav a.active {{
+            background: rgba(32, 212, 108, 0.3);
+            border-color: rgba(32, 212, 108, 0.5);
+        }}
+        /* Add padding to main content to prevent footer overlap */
+        .stMainBlockContainer {{
+            padding-bottom: 70px !important;
+        }}
+        @media (max-width: 640px) {{
+            .bw-footer-nav {{
+                gap: 0.75rem;
+            }}
+            .bw-footer-nav a {{
+                font-size: 0.8rem;
+                padding: 0.4rem 0.75rem;
+            }}
+        }}
+        </style>
+        <div class="bw-footer">
+            <nav class="bw-footer-nav">
+                <a href="{daily_url}" title="View Daily Leaderboards" target="_self" class="{daily_active}">📅 Daily Leaderboards</a>
+                <a href="{weekly_url}" title="View Weekly Leaderboards" target="_self" class="{weekly_active}">📆 Weekly Leaderboards</a>
+                <a href="{play_url}" title="Play Wrdler" target="_self" class="{play_active}">🎮 Play</a>
+            </nav>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
 def run_app():
     # Render PWA service worker registration (meta tags in <head> via Docker)
     st.markdown(pwa_service_worker, unsafe_allow_html=True)
@@ -2180,6 +2362,17 @@ def run_app():
             pass
         st.session_state["hide_gameover_overlay"] = True
 
+    # Handle page navigation via query params
+    page = params.get("page", "")
+    if page in ["daily", "weekly"]:
+        # Render leaderboard page with ocean background
+        from .leaderboard_page import render_leaderboard_page
+        st.markdown(ocean_background_css, unsafe_allow_html=True)
+        inject_ocean_layers()
+        render_leaderboard_page(default_tab=page)
+        _render_footer(current_page=page)
+        return  # Don't render game UI
+
     # Handle game_id for loading shared games
     if "game_id" in params and "shared_game_loaded" not in st.session_state:
         sid = params.get("game_id")
@@ -2248,60 +2441,4 @@ def run_app():
     state = _to_state()
     if is_game_over(state) and not st.session_state.get("hide_gameover_overlay", False):
         _render_game_over(state)
-
-def _on_game_option_change() -> None:
-    """
-    Unified callback for game option changes.
-    If currently in a loaded challenge, break the link by resetting challenge mode
-    and removing the game_id query param. Then start a new game with the updated options.
-    """
-    try:
-        # Remove challenge-specific query param if present
-        if hasattr(st, "query_params"):
-            qp = st.query_params
-            # st.query_params may be a Mapping; pop safely if supported
-            try:
-                if "game_id" in qp:
-                    qp.pop("game_id")
-            except Exception:
-                # Fallback: clear all params if pop not supported
-                try:
-                    st.query_params.clear()
-                except Exception:
-                    pass
-    except Exception:
-        pass
-
-    # Clear challenge session flags and links
-    if st.session_state.get("loaded_game_sid") is not None:
-        st.session_state.loaded_game_sid = None
-    # Remove loaded challenge settings so UI no longer treats session as challenge mode
-    st.session_state.pop("shared_game_settings", None)
-    # Ensure the loader won't auto-reload challenge on rerun within this session
-    st.session_state["shared_game_loaded"] = True
-
-    # Clear any existing generated share link tied to the previous challenge
-    st.session_state.pop("share_url", None)
-    st.session_state.pop("share_sid", None)
-
-    # Start a fresh game with updated options
-    _new_game()
-
-def _on_wordlist_change() -> None:
-    """
-    Callback when wordlist selection changes.
-    Updates session state flags for AI vs file mode.
-    """
-    selected = st.session_state.get("wordlist_selector")
-    
-    if selected == "AI Generated":
-        st.session_state.use_ai_wordlist = True
-        # Preserve current AI topic or use default
-        if "ai_topic" not in st.session_state:
-            st.session_state.ai_topic = "English"
-    else:
-        st.session_state.use_ai_wordlist = False
-        st.session_state.selected_wordlist = selected
-    
-    # Trigger new game with updated wordlist
-    _on_game_option_change()
+    _render_footer(current_page="play")