v0.2.37 - Improve UI/UX and add dynamic game state handling

Updated the version in `__init__.py` to `0.2.37`. Added a new
`new_game` session state flag in `_new_game` to track game
restarts. Enhanced `_game_over_content` with dynamic
`subscriber_html` for displaying game mode, wordlist, and
subscription details. Updated dialog titles to "Congratulations!"
for a more engaging experience.

Modified `run_app` to adjust fade-in duration and improve session
state handling. Refactored `_render_game_tab` to reload the page
on "New Game" button click using JavaScript. Fixed fade-in
transitions in `start_root_fade_in`.

Enhanced `inject_styles` with hover effects, consistent colors,
and faster transitions. Improved overall UI responsiveness,
visual consistency, and user experience. Minor bug fixes and
optimizations included.

README.md

@@ -19,12 +19,17 @@ tags:
 
 > **This project is used by [huggingface.co](https://huggingface.co/spaces/Surn/BattleWords) as a demonstration of interactive word games in Python.**
 
-**Current Version:** 0.2.36
-**Last Updated:** 2026-02-01
+**Current Version:** 0.2.37
+**Last Updated:** 2026-02-10
 
 BattleWords is a vocabulary learning game inspired by classic Battleship mechanics. The objective is to discover hidden words on a grid, earning points for strategic guessing before all letters are revealed.
 
 ## Recent Changes
+- version 0.2.37
+- Footer navigation uses query-parameter links (`?page=play|leaderboard|settings`) via custom footer links
+- In-game "New Game" button behavior is now navigation-style (rerun) rather than a full session reset
+- Game over flow continues to support integrated challenge submission and optional share-link visibility
+
 - version 0.2.36
 - Added `user_id` and `subscription_level` to game state/results for user-specific features
 - Expanded `game_mode` options (includes `easy`)
@@ -208,6 +213,10 @@ CRYPTO_PK=                             # Reserved for future signing
  - Local persistent storage for personal game history (offline-capable)
  - Personal high scores sidebar with filtering
  - Player statistics tracking (games played, averages, bests)
+
+ - version 0.2.37
+  - Footer navigation uses query-parameter links (Play/Leaderboard/Settings)
+  - Play navigation behaves like a route change (query param) rather than invoking the New Game reset callback
  
  - version 0.2.36
   - Added `user_id` and `subscription_level` to game state/results for user-specific features

battlewords/__init__.py

@@ -1,2 +1,2 @@
-__version__ = "0.2.36"
+__version__ = "0.2.37"
 __all__ = ["models", "generator", "logic", "ui", "game_storage", "modules"]

battlewords/ui.py

@@ -205,6 +205,9 @@ def _new_game() -> None:
          st.session_state.end_time = None
          st.session_state.incorrect_guesses = [] # Clear incorrect guesses for new game
          _init_session()
+         st.session_state.new_game = True  # Flag to indicate a new game was started
+         
+         
 
 
 def _to_state() -> GameState:
@@ -1189,17 +1192,19 @@ def _game_over_content(state: GameState) -> None:
         """,
         unsafe_allow_html=True,
     )
+    subscriber_html = (       
+        f'<div class=\"mb-2\">Time: <strong>{timer_str}</strong></div>'
+        f'<div class=\"mb-2\">Game Mode: <strong>{state.game_mode}</strong></div>'
+        f'<div class=\"mb-2\">Wordlist: <strong>{st.session_state.get('selected_wordlist', '')}</strong></div>'
+        if st.session_state.get("subscription_level", 0) > 0 else "<div class=\"mb-2\">&nbsp;</div>")
 
     st.markdown(
         f"""
         <div class="bw-dialog-container shiny-border">
-          <div class="p-3 pt-2">
-            <div class="mb-2">Congratulations!</div>
-            <div class="mb-2">Final score: <strong class="text-success">{state.score}</strong></div>
-            <div class="mb-2">Time: <strong>{timer_str}</strong></div>            
+          <div class="p-3 pt-2">            
+            <div class="mb-2">Final score: <strong class="text-success">{state.score}</strong></div>                      
             <div class="mb-2">Tier: <strong>{compute_tier(state.score)}</strong></div>
-            <div class="mb-2">Game Mode: <strong>{state.game_mode}</strong></div>
-            <div class="mb-2">Wordlist: <strong>{st.session_state.get('selected_wordlist', '')}</strong></div>
+            {subscriber_html}
             <div class="mb-0">{table_html}</div>            
           </div>
         </div>
@@ -1395,18 +1400,18 @@ def _game_over_content(state: GameState) -> None:
 # Prefer st.dialog/experimental_dialog; fallback to st.modal if unavailable
 _Dialog = getattr(st, "dialog", getattr(st, "experimental_dialog", None))
 if _Dialog:
-    @_Dialog("Game Over")
+    @_Dialog("Congratulations!")
     def _game_over_dialog(state: GameState):
         _game_over_content(state)
 else:
     def _game_over_dialog(state: GameState):
         modal_ctx = getattr(st, "modal", None)
         if callable(modal_ctx):
-            with modal_ctx("Game Over"):
+            with modal_ctx("Congratulations!"):
                 _game_over_content(state)
         else:
             # Last-resort inline render
-            st.subheader("Game Over")
+            st.subheader("Congratulations!")
             _game_over_content(state)
 
 def _render_game_over(state: GameState):
@@ -1479,7 +1484,7 @@ def _on_game_option_change() -> None:
     _new_game()
 
 def run_app():
-    start_root_fade_in(0.2)
+    start_root_fade_in(0.0)
     # Render PWA service worker registration (meta tags in <head> via Docker)
     # Streamlit reruns the script frequently; inject this only once per session.
     if not st.session_state.get("pwa_injected", False):
@@ -1518,7 +1523,7 @@ def run_app():
         spinner_placeholder = st.empty()
         with CustomSpinner(spinner_placeholder, "Initial Load..."):
             st.session_state["initial_page_loaded"] = True
-            st.session_state["last_nav_page"] = page            
+            st.session_state["last_nav_page"] = page    
             # st.rerun()
 
     # Show spinner when navigating via menu (query param page change)
@@ -1617,7 +1622,7 @@ def _render_game_tab():
     """
         Render the main game tab layout.
     """
-    # start_root_fade_in(0.0)
+    # start_root_fade_in(0.5)
     _init_session()
     st.markdown(ocean_background_css, unsafe_allow_html=True)
     #inject_ocean_layers()  # <-- add the animated layers
@@ -1644,11 +1649,17 @@ def _render_game_tab():
         _render_guess_form(state)
         _render_score_panel(state)
     with left:
-        st.button("New Game", width=125, on_click=_new_game, key="new_game_btn")
-        _render_grid(
-            state,
-            st.session_state.letter_map,
-            show_grid_ticks=st.session_state.get("show_grid_ticks", True),
-        )
+        #st.button("New Game", width=125, on_click=_new_game, key="new_game_btn")        
+        if st.button("New Game", width=125, key="new_game_btn"):
+            components.html(
+                "<script>window.parent.location.reload();</script>",
+                height=0,
+            )
+        else:
+            _render_grid(
+                state,
+                st.session_state.letter_map,
+                show_grid_ticks=st.session_state.get("show_grid_ticks", True),
+            )
 
     # finish_root_fade_in(0.3)

battlewords/ui_helpers.py

@@ -329,7 +329,7 @@ def start_root_fade_in(duration_s: float = 0.35) -> None:
             root.style.setProperty('visibility', 'hidden', 'important');
             // Force style/layout flush so opacity=0 commits before re-enabling transition.
             void root.offsetHeight;
-            // root.style.setProperty('transition', 'opacity {duration_s:.3f}s ease, visibility {duration_s:.3f}s ease', 'important');
+            root.style.setProperty('transition', 'opacity {duration_s:.3f}s ease, visibility {duration_s:.3f}s ease', 'important');
           }} catch (e) {{ /* no-op */ }}
         }})();
         </script>
@@ -461,6 +461,8 @@ def inject_styles() -> None:
           }
           div[data-testid="stButton"] button { max-width: 100%; aspect-ratio: 1 / 1; min-height: 1.75rem; display: flex;}  
           .st-key-new_game_btn > div[data-testid="stButton"] button, .st-key-sort_wordlist_btn > div[data-testid="stButton"] button, .st-key-filter_wordlist_btn > div[data-testid="stButton"] button { min-height: calc(100% + 20px) !important; padding: 0.25rem 0.75rem;}
+          /* Hover should match the default Streamlit blue (rgb(30, 105, 210)). */
+          .st-emotion-cache-1tj828o:hover, .st-emotion-cache-1tj828o:active,.st-emotion-cache-1tj828o:focus-visible, div[data-testid="stButton"] button:hover {background-color: rgba(215, 250, 255, 0.75) !important; border-color: rgb(30, 105, 210) !important;}
           /* div[data-testid="stButton"] button { max-width: 100%; aspect-ratio: 1 / 1; border-radius: 0; background: #1d64c8; color: #ffffff; font-weight: 700; padding: 0.5rem 0.75rem; min-height: 2.5rem; min-width: 2.5rem;} */
           .st-key-new_game_btn, .st-key-sort_wordlist_btn, .st-key-filter_wordlist_btn, .st-key-settings_save_apply_btn, .st-key-settings_discard_btn { margin: 0 auto; aspect-ratio: unset; z-index:9999;}
           .st-key-new_game_btn > div[data-testid="stButton"] button, .st-key-sort_wordlist_btn > div[data-testid="stButton"] button, .st-key-filter_wordlist_btn > div[data-testid="stButton"] button, .st-key-settings_save_apply_btn > div[data-testid="stButton"] button, .st-key-settings_discard_btn > div[data-testid="stButton"] button { aspect-ratio: unset; text-align:center; height: auto; width: 160px; border-radius:8px;}
@@ -475,7 +477,7 @@ def inject_styles() -> None:
             opacity: 1 !important;            
           }
 
-          div[data-testid="column"], .st-emotion-cache-zh2fnc, .st-emotion-cache-1tj828o, .st-emotion-cache-1anq8dj { width: auto !important; flex: 1 1 auto !important; min-width: 100% !important; max-width: 100% !important; border-radius:0; background-color: #1e69d2; border: 1px solid transparent;}
+          div[data-testid="column"], .st-emotion-cache-zh2fnc, .st-emotion-cache-1tj828o, .st-emotion-cache-1anq8dj { width: auto !important; flex: 1 1 auto !important; min-width: 100% !important; max-width: 100% !important; border-radius:0; background-color: rgb(30, 105, 210); border: 1px solid rgb(30, 105, 210);}
           .st-emotion-cache-1permvm, .st-emotion-cache-1n6tfoc { gap:0.15rem !important; min-height: 2.5rem; min-width: 2.5rem;}   
           .stColumn.st-emotion-cache-1ruy632, .stColumn.st-emotion-cache-t2z0eb  {margin-top:0;}
 
@@ -494,8 +496,8 @@ def inject_styles() -> None:
            .st-emotion-cache-ckafi0 { gap:0.1rem !important; min-height: calc(100% + 20px) !important; aspect-ratio: 1 / 1; width: auto !important;  flex: 1 1 auto !important;  min-width: 100% !important;  max-width: 100% !important;}
            /*.st-emotion-cache-1n6tfoc { aspect-ratio: 1 / 1; min-height: calc(100% + 20px) !important;}*/
            .st-emotion-cache-1n6tfoc::before { min-height: calc(80% + 20px) !important; }
-
           }
+
           div[data-testid="stElementToolbarButtonContainer"], button[data-testid="stBaseButton-elementToolbar"], button[data-testid="stBaseButton-elementToolbar"]:hover {
                display: none;
           }
@@ -508,7 +510,14 @@ def inject_styles() -> None:
             #bw-main-anchor + div[data-testid="stHorizontalBlock"] { flex-direction: column-reverse !important; width: 100% !important; max-width: 100vw !important; }
             #bw-main-anchor + div[data-testid="stHorizontalBlock"] > div[data-testid="column"] { width: 100% !important; min-width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }
             .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] { flex-wrap: nowrap !important; overflow-x: auto !important; margin: 2px 0 !important; }
-            .st-emotion-cache-17i4tbh, .st-emotion-cache-1yoilpv { min-width: calc(8.33333% - 1rem); aspect-ratio: 1 / 1;}            
+            .st-emotion-cache-17i4tbh, .st-emotion-cache-1yoilpv { min-width: calc(8.33333% - 1rem); aspect-ratio: 1 / 1;}   
+            .stColumn.st-emotion-cache-1ruy632 {min-width: calc(50% - 1rem);}
+            .stColumn.st-emotion-cache-t2z0eb {min-width: calc(46% - 1rem);}
+            .stColumn.st-emotion-cache-10dewhz {min-width: calc(3.5% - 1rem);}
+          }
+
+          @media (max-width: 560px) {
+            div[data-testid="stButton"] button {min-height: 2.25rem;}
           }
 
           .bold-text { font-weight: 700; }
@@ -519,7 +528,7 @@ def inject_styles() -> None:
           .shiny-border:hover::before { left: 100%; }
 
           .st-emotion-cache-1n1mx2j p {font-size: 1rem;}
-          .bw-radio-group { display:flex; align-items:flex-start; gap: 5px; flex-flow: row; min-height: 92px; transition: opacity 1.5s ease-in, visibility 1.5s ease-in, display 1.5s allow-discrete; transition-behavior: allow-discrete; visibility: inherit;}
+          .bw-radio-group { display:flex; align-items:flex-start; gap: 5px; flex-flow: row; min-height: 92px; transition: opacity 0.3s ease-in, visibility 0.3s ease-in, display 0.3s allow-discrete; transition-behavior: allow-discrete; visibility: inherit;}
           .bw-radio-item { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
           .bw-radio-circle { width: 45px; height: 45px; border-radius: 50%; border: 4px solid; background: rgba(255,255,255,0.06); display: grid; place-items: center; color:#fff; font-weight:700; }
           .bw-radio-circle .dot { width: 14px; height: 14px; border-radius: 50%; background:#777; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); }

claude.md

@@ -3,8 +3,8 @@
 ## Project Overview
 BattleWords is a vocabulary learning game inspired by Battleship mechanics, built with Streamlit and Python 3.12. Players reveal cells on a 12x12 grid to discover hidden words and earn points for strategic guessing.
 
-**Current Version:** 0.2.36 (Stable - User Features, UI Enhancements)
-**Last Updated:** 2026-02-01
+**Current Version:** 0.2.37 (Stable - User Features, UI Enhancements)
+**Last Updated:** 2026-02-10
 **Next Version:** 0.3.0 (In Development - Wrdler improvements)
 **Repository:** https://github.com/Oncorporation/BattleWords.git
 **Live Demo:** https://huggingface.co/spaces/Surn/BattleWords
@@ -16,22 +16,6 @@ The detailed porting checklist lives in `specs/upgrade.mdx`.
 ## Recent Changes
 See `README.md` for the canonical release notes: [Recent Changes](README.md#recent-changes)
 
-- v0.2.36
-  - Added `user_id` and `subscription_level` to game state/results for user-specific features
-  - Expanded `game_mode` options (includes `easy`)
-  - UI polish: improved guess input styling (placeholder, typography) and layout tweaks (dialog/footer)
-  - Conditional rendering for subscription-based features (difficulty and timer display)
-
-- v0.2.35
-  - New spinner implementation for loading states
-  - Updated graphics and improved visual polish
-  - Favicon added for browser tab branding
-  - Favicon added for browser tab branding
-  - Leaderboard navigation moved to footer menu (not sidebar)
-  - Game over dialog integrates leaderboard submission and displays qualification results
-  - Leaderboard page routing uses query parameters and custom navigation links
-  - Footer navigation links to Leaderboard, Play, and Settings pages
-
 ## Core Gameplay
 - 12x12 grid with 6 hidden words (2×4-letter, 2×5-letter, 2×6-letter)
 - Words placed horizontally or vertically, no overlaps

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "battlewords"
-version = "0.2.36"
+version = "0.2.37"
 description = "BattleWords vocabulary game with game sharing via shortened game_id URL referencing server-side JSON settings"
 readme = "README.md"
 requires-python = ">=3.12,<3.13"

specs/requirements.mdx

@@ -1,16 +1,11 @@
 # Battlewords: Implementation Requirements
 
-**Current Version:** 0.2.36
-**Last Updated:** 2026-02-01
+**Current Version:** 0.2.37
+**Last Updated:** 2026-02-10
 
-## Recent Changes (v0.2.36)
+## Recent Changes (v0.2.37)
 See `README.md` for the canonical release notes: [Recent Changes](README.md#recent-changes)
 
-- Added `user_id` and `subscription_level` to game state/results for user-specific features
-- Expanded `game_mode` options (includes `easy`)
-- UI polish: improved guess input styling (placeholder, typography) and layout tweaks (dialog/footer)
-- Conditional rendering for subscription-based features (difficulty and timer display)
-
 This document breaks down the tasks to build Battlewords using the game rules described in `specs.md`. It is organized in phases: a minimal Proof of Concept (POC), a Beta Version (0.5.0), and a Full Version (1.0.0).
 
 Assumptions

specs/specs.mdx

@@ -1,7 +1,7 @@
 # Battlewords Game Requirements (specs.md)
 
-**Current Version:** 0.2.36
-**Last Updated:** 2026-02-01
+**Current Version:** 0.2.37
+**Last Updated:** 2026-02-10
 
 ## Overview
 Battlewords is inspired by the classic Battleship game, but uses words instead of ships. The objective is to discover hidden words on a grid, earning points for strategic guessing before all letters are revealed.
@@ -9,14 +9,9 @@ Battlewords is inspired by the classic Battleship game, but uses words instead o
 ## Upgrade Checklist
 The detailed Wrdler  BattleWords porting checklist is tracked in `specs/upgrade.mdx`.
 
-## Recent Changes (v0.2.36)
+## Recent Changes (v0.2.37)
 See `README.md` for the canonical release notes: [Recent Changes](README.md#recent-changes)
 
-- Added `user_id` and `subscription_level` to game state/results for user-specific features
-- Expanded `game_mode` options (includes `easy`)
-- UI polish: improved guess input styling (placeholder, typography) and layout tweaks (dialog/footer)
-- Conditional rendering for subscription-based features (difficulty and timer display)
-
 ---
 
 ## Game Board