Smoothing transitions

battlewords/ui.py

@@ -28,24 +28,26 @@ from .audio import (
 )
 from .game_storage import load_game_from_sid, save_game_to_hf, get_shareable_url, add_user_result_to_game
 from .settings_page import render_settings_page
-from .ui_helpers import render_footer, inject_styles, fig_to_pil_rgba, ocean_background_css, inject_ocean_layers, pwa_service_worker, show_spinner
+from .ui_helpers import render_footer, inject_styles, fig_to_pil_rgba, ocean_background_css, inject_ocean_layers, pwa_service_worker, show_spinner, fade_out_spinner, start_root_fade_in, finish_root_fade_in
 
 # --- Spinner context manager for custom spinner ---
 class CustomSpinner:
     """Context manager for showing custom spinner with wrdler.gif"""
-    def __init__(self, placeholder, message: str = "Loading..."):
+    def __init__(self, placeholder, message: str = "Loading...", duration: float = 1.0):
         self.placeholder = placeholder
         self.message = message
+        self.duration = duration
 
     def __enter__(self):
         with self.placeholder.container():
             show_spinner(self.message)
         #wait 1 sec to ensure spinner is visible
-        time.sleep(0.8)
-
+        time.sleep(0.7)
         return self
 
-    def __exit__(self, *args):
+    def __exit__(self, *args):                
+        # fade_out_spinner(self.duration)
+        # time.sleep(self.duration)
         self.placeholder.empty()
 
 CoordLike = Tuple[int, int]
@@ -160,44 +162,46 @@ def _init_session() -> None:
             st.session_state.enable_sound_effects = False
 
 def _new_game() -> None:
-     selected = st.session_state.get("selected_wordlist")
-     mode = st.session_state.get("game_mode")
-     show_grid_ticks = st.session_state.get("show_grid_ticks", False)
-     spacer = st.session_state.get("spacer",1)
-     show_incorrect_guesses = st.session_state.get("show_incorrect_guesses", False)
-     # --- Preserve music and effects settings ---
-     music_enabled = st.session_state.get("music_enabled", False)
-     music_track_path = st.session_state.get("music_track_path")
-     music_volume = st.session_state.get("music_volume",15)
-     effects_volume = st.session_state.get("effects_volume",25)
-     enable_sound_effects = st.session_state.get("enable_sound_effects", True)
-     # NEW: Preserve Show Challenge Share Links
-     show_challenge_share_links = st.session_state.get("show_challenge_share_links", False)
-
-     st.session_state.clear()
-     if selected:
-        st.session_state.selected_wordlist = selected
-     if mode:
-        st.session_state.game_mode = mode
-     st.session_state.show_grid_ticks = show_grid_ticks
-     st.session_state.spacer = spacer
-     st.session_state.show_incorrect_guesses = show_incorrect_guesses
-     # --- Restore music/effects settings ---
-     st.session_state.music_enabled = music_enabled
-     if music_track_path:
-        st.session_state.music_track_path = music_track_path
-     st.session_state.music_volume = music_volume
-     st.session_state.effects_volume = effects_volume
-     st.session_state.enable_sound_effects = enable_sound_effects
-     # NEW: Restore Show Challenge Share Links
-     st.session_state.show_challenge_share_links = show_challenge_share_links
-
-     st.session_state.radar_gif_path = None
-     st.session_state.radar_gif_signature = None
-     st.session_state.start_time = datetime.now() # Reset timer on new game
-     st.session_state.end_time = None
-     st.session_state.incorrect_guesses = [] # Clear incorrect guesses for new game
-     _init_session()
+     spinner_placeholder = st.empty()
+     with CustomSpinner(spinner_placeholder, "Initializing New Game..."):
+         selected = st.session_state.get("selected_wordlist")
+         mode = st.session_state.get("game_mode")
+         show_grid_ticks = st.session_state.get("show_grid_ticks", False)
+         spacer = st.session_state.get("spacer",1)
+         show_incorrect_guesses = st.session_state.get("show_incorrect_guesses", False)
+         # --- Preserve music and effects settings ---
+         music_enabled = st.session_state.get("music_enabled", False)
+         music_track_path = st.session_state.get("music_track_path")
+         music_volume = st.session_state.get("music_volume",15)
+         effects_volume = st.session_state.get("effects_volume",25)
+         enable_sound_effects = st.session_state.get("enable_sound_effects", True)
+         # NEW: Preserve Show Challenge Share Links
+         show_challenge_share_links = st.session_state.get("show_challenge_share_links", False)
+
+         st.session_state.clear()
+         if selected:
+            st.session_state.selected_wordlist = selected
+         if mode:
+            st.session_state.game_mode = mode
+         st.session_state.show_grid_ticks = show_grid_ticks
+         st.session_state.spacer = spacer
+         st.session_state.show_incorrect_guesses = show_incorrect_guesses
+         # --- Restore music/effects settings ---
+         st.session_state.music_enabled = music_enabled
+         if music_track_path:
+            st.session_state.music_track_path = music_track_path
+         st.session_state.music_volume = music_volume
+         st.session_state.effects_volume = effects_volume
+         st.session_state.enable_sound_effects = enable_sound_effects
+         # NEW: Restore Show Challenge Share Links
+         st.session_state.show_challenge_share_links = show_challenge_share_links
+
+         st.session_state.radar_gif_path = None
+         st.session_state.radar_gif_signature = None
+         st.session_state.start_time = datetime.now() # Reset timer on new game
+         st.session_state.end_time = None
+         st.session_state.incorrect_guesses = [] # Clear incorrect guesses for new game
+         _init_session()
 
 
 def _to_state() -> GameState:
@@ -765,6 +769,17 @@ def _render_guess_form(state: GameState):
     st.markdown(
         """
         <style>
+        /* Grey-out the guess textbox when disabled */
+        .st-key-guess_input input:disabled {
+            background-color: #ffffff66 !important;
+            color: #ffffff !important;
+            -webkit-text-fill-color: #ffffff !important;
+            opacity: 1 !important;
+        }
+        /* Match the disabled textbox border to the label color */
+        .st-key-guess_input input:disabled {
+            border-color: #ffffff !important;
+        }
         .bw-incorrect-guesses {
             font-size: 0.7rem;
             color: #ff9999;
@@ -1412,7 +1427,10 @@ def _on_game_option_change() -> None:
 
 def run_app():
     # Render PWA service worker registration (meta tags in <head> via Docker)
-    st.markdown(pwa_service_worker, unsafe_allow_html=True)
+    # Streamlit reruns the script frequently; inject this only once per session.
+    if not st.session_state.get("pwa_injected", False):
+        st.markdown(pwa_service_worker, unsafe_allow_html=True)
+        st.session_state["pwa_injected"] = True
 
     # try:
     #     st.set_page_config(initial_sidebar_state="collapsed")
@@ -1442,26 +1460,23 @@ 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
-            pass
-        st.rerun()
+            st.session_state["last_nav_page"] = page            
+            st.rerun()
 
     # Show spinner when navigating via menu (query param page change)
     last_nav_page = st.session_state.get("last_nav_page")
     if last_nav_page is not None and last_nav_page != page:
         spinner_placeholder = st.empty()
         with CustomSpinner(spinner_placeholder, "Loading..."):
-            st.session_state["last_nav_page"] = page
-            pass
-        st.rerun()
+            st.session_state["last_nav_page"] = page            
+            st.rerun()
 
     # One-time spinner on initial display of the main UI.
     if page == "play" and not st.session_state.get("initial_page_loaded", False):
         spinner_placeholder = st.empty()
         with CustomSpinner(spinner_placeholder, "Loading Game..."):
-            st.session_state["initial_page_loaded"] = True
-            pass
-        st.rerun()
+            st.session_state["initial_page_loaded"] = True            
+            st.rerun()
 
     if page == "settings":
         spinner_placeholder = st.empty()
@@ -1537,6 +1552,7 @@ def _render_game_tab():
     """
         Render the main game tab layout.
     """
+    start_root_fade_in(0.3)
     _init_session()
     st.markdown(ocean_background_css, unsafe_allow_html=True)
     #inject_ocean_layers()  # <-- add the animated layers
@@ -1569,3 +1585,5 @@ def _render_game_tab():
             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

@@ -10,6 +10,7 @@ from . import __version__ as version
 from .modules.constants import APP_SETTINGS
 import base64
 import os
+import streamlit.components.v1 as components
 
 def fig_to_pil_rgba(fig):
     canvas = FigureCanvas(fig)
@@ -312,6 +313,86 @@ def inject_ocean_layers() -> None:
     )
 
 
+def start_root_fade_in(duration_s: float = 0.35) -> None:
+    """Hide the app root and prepare a fade-in transition."""
+    components.html(
+        f"""
+        <script>
+        (function() {{
+          try {{
+            var parentDoc = (window.parent && window.parent.document) ? window.parent.document : document;
+            var root = parentDoc.getElementById('root');
+            if (!root) return;
+            root.classList.add('bw-fadein-prep');
+            // Immediately hide before any Streamlit render updates become visible.
+            root.style.setProperty('opacity', '0', 'important');
+            // Force style/layout flush so the opacity=0 takes effect before transition is applied.
+            void root.offsetHeight;
+            root.style.setProperty('transition', 'opacity {duration_s:.3f}s ease', 'important');
+          }} catch (e) {{ /* no-op */ }}
+        }})();
+        </script>
+        """,
+        height=0,
+    )
+
+
+def finish_root_fade_in(duration_s: float = 0.35) -> None:
+    """Trigger the fade-in transition for the app root."""
+    components.html(
+        f"""
+        <script>
+        (function() {{
+          try {{
+            var parentDoc = (window.parent && window.parent.document) ? window.parent.document : document;
+            var root = parentDoc.getElementById('root');
+            if (!root) return;
+            root.style.transition = 'opacity {duration_s:.3f}s ease';
+            root.style.opacity = '1';
+            root.classList.remove('bw-fadein-prep');
+          }} catch (e) {{ /* no-op */ }}
+        }})();
+        </script>
+        """,
+        height=0,
+    )
+
+
+def fade_out_spinner(duration_s: float = 0.5) -> None:
+    """Trigger a client-side fade-out of the spinner overlay (if present)."""
+    ms = max(0, int(duration_s * 1000))
+    # Use a component iframe so JS actually executes reliably.
+    # This script reaches up to the parent document to find the overlay.
+    components.html(
+        f"""
+        <script>
+        (function() {{
+          try {{
+            var parentDoc = (window.parent && window.parent.document) ? window.parent.document : document;
+            // Ensure the app stays hidden while we perform the fade-out.
+            try {{
+              var root = parentDoc.getElementById('root');
+              if (root) root.classList.add('bw-spinner-active');
+            }} catch (e) {{ /* no-op */ }}
+            var el = parentDoc.getElementById('bw-spinner-overlay');
+            if (!el) return;
+            el.style.transition = 'opacity {duration_s:.3f}s ease';
+            el.classList.add('bw-spinner-fadeout');
+            window.setTimeout(function() {{
+              try {{ el.remove(); }} catch (e) {{ /* no-op */ }}
+              try {{
+                var root = parentDoc.getElementById('root');
+                if (root) root.classList.remove('bw-spinner-active');
+              }} catch (e) {{ /* no-op */ }}
+            }}, {ms});
+          }} catch (e) {{ /* no-op */ }}
+        }})();
+        </script>        
+        """,
+        height=0,
+    )
+
+
 def inject_styles() -> None:
     st.markdown(
         """
@@ -379,7 +460,10 @@ def inject_styles() -> None:
           /* 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;}
-          
+          .stVerticalBlock .st-emotion-cache-tn0cau.e1wguzas3 div:first-child { display: none; } 
+          .stVerticalBlock .st-emotion-cache-tn0cau.e1wguzas3 div:nth-child(2) { display: none; }
+          .stVerticalBlock .st-emotion-cache-tn0cau.e1wguzas3 div:nth-child(3) { display: none; }    
+          .st-emotion-cache-18kf3ut.e1wguzas41 { display: none; }    
 
           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;}
           .st-emotion-cache-1permvm, .st-emotion-cache-1n6tfoc { gap:0.15rem !important; min-height: 2.5rem; min-width: 2.5rem;}          
@@ -465,10 +549,19 @@ def inject_styles() -> None:
           }
          }
 
-          /* Helper to absolutely/fixed position Streamlit component wrapper when showing modal */
-          .bw-component-abs { position: fixed !important; inset: 0 !important; z-index: 99999 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; }
-          /* Generic hide utility */
-          .hide { display: none !important; pointer-events: none !important; }
+        /* Helper to absolutely/fixed position Streamlit component wrapper when showing modal */
+        .bw-component-abs { position: fixed !important; inset: 0 !important; z-index: 99999 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; }
+        /* Generic hide utility */
+        .hide { display: none !important; pointer-events: none !important; }
+        .invisible { visibility: hidden !important; }
+
+        /* While spinner is active, hide the underlying app to prevent flashes. */
+        #root.bw-spinner-active .stApp {
+            visibility: hidden;
+        }
+        #root.bw-spinner-active #bw-spinner-overlay {
+            visibility: visible;
+        }
         </style>
         """,
         unsafe_allow_html=True,
@@ -582,9 +675,14 @@ def show_spinner(message: str = "Loading..."):
         <style>
         .bw-spinner-overlay {{
             position: fixed; z-index: 99999; top: 0; left: 0; width: 100vw; height: 100vh;
-            # transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+            opacity: 1;
+            transition: opacity 0.5s ease;
             background: rgba(11,42,74,1.0); display: flex; align-items: center; justify-content: center;            
         }}
+        .bw-spinner-overlay.bw-spinner-fadeout {{
+            opacity: 0;
+            pointer-events: none;
+        }}
         .bw-spinner-img {{
             width: 150px; height: 150px; border-radius: 16px; box-shadow: 0 0 8px #1d64c8;
             background: #fff; display: flex; align-items: center; justify-content: center;
@@ -598,7 +696,15 @@ def show_spinner(message: str = "Loading..."):
             color: #1d64c8; font-size: 1.2rem; margin-top: 1.5rem; text-align: center; font-weight: 600;
         }}
         </style>
-        <div class="bw-spinner-overlay">
+        <script>
+          (function() {{
+            try {{
+              var root = document.getElementById('root');
+              if (root) root.classList.add('bw-spinner-active');
+            }} catch (e) {{ /* no-op */ }}
+          }})();
+        </script>
+        <div class="bw-spinner-overlay" id="bw-spinner-overlay">
             <div class="modal-spinner-inner" style="display:flex; flex-direction:column; align-items:center;">
                 <div class="bw-spinner-img stImage"><img src="/app/static/battlewords.gif" alt="Loading..." width="192" height="192" /></div>
                 <div class="bw-spinner-msg">{message}</div>