Spaces:

Surn
/

BattleWords

Running

App Files Files Community

Surn commited on 11 days ago

Commit

8c564f0

1 Parent(s): 1ef2bdb

Fade out update

Browse files

Files changed (2) hide show

battlewords/ui.py +25 -7
battlewords/ui_helpers.py +18 -14

battlewords/ui.py CHANGED Viewed

@@ -161,6 +161,9 @@ def _init_session() -> None:
         if "enable_sound_effects" not in st.session_state:
             st.session_state.enable_sound_effects = False
 def _new_game() -> None:
      spinner_placeholder = st.empty()
      with CustomSpinner(spinner_placeholder, "Initializing New Game..."):
@@ -771,7 +774,14 @@ def _render_guess_form(state: GameState):
         <style>
         .st-key-guess_input .stTextInput label .st-emotion-cache-lyi571, .st-key-guess_input .stTextInput label .st-emotion-cache-on6lu2  {
             font-size: 1.2em;
         }
         .st-key-guess_input .stTextInput input {
             font-size: 1.1em;
         }
@@ -863,7 +873,8 @@ def _render_guess_form(state: GameState):
             color: #ff9999;
         }
-        .stForm { padding-bottom: 30px; }
         .stColumn .st-emotion-cache-6023h2 {margin-top:0px;}
         /*.stColumn .st-emotion-cache-1w9nhvb { display:none;}  hide OK BUTTON col spacing under form */
@@ -1468,7 +1479,7 @@ def _on_game_option_change() -> None:
     _new_game()
 def run_app():
-    start_root_fade_in(0.3)
     # 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):
@@ -1486,6 +1497,10 @@ def run_app():
     except Exception:
         params = {}
     # Handle overlay dismissal
     if params.get("overlay") == "0":
         # Clear param and remember to hide overlay this session
@@ -1528,7 +1543,8 @@ def run_app():
             #inject_ocean_layers()
             inject_styles()
             render_settings_page(_on_game_option_change)
-            render_footer(current_page="settings")
         return
     if page == "leaderboard":
@@ -1539,7 +1555,8 @@ def run_app():
             inject_styles()
             st.header("Leaderboard")
             st.caption("Leaderboard UI will be added as part of the upgrade checklist.")
-            render_footer(current_page="leaderboard")
         return
     # Handle game_id for loading shared games
@@ -1592,14 +1609,15 @@ 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)
-    render_footer(current_page="play")
-    finish_root_fade_in(0.3)
 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

         if "enable_sound_effects" not in st.session_state:
             st.session_state.enable_sound_effects = False
+        if "hide_footer" not in st.session_state:
+            st.session_state["hide_footer"] = False
 def _new_game() -> None:
      spinner_placeholder = st.empty()
      with CustomSpinner(spinner_placeholder, "Initializing New Game..."):
         <style>
         .st-key-guess_input .stTextInput label .st-emotion-cache-lyi571, .st-key-guess_input .stTextInput label .st-emotion-cache-on6lu2  {
             font-size: 1.2em;
+            transition: opacity 1.5s ease-in, visibility 1.5s ease-in, display 1.5s allow-discrete;
+            transition-behavior: allow-discrete;
         }
+        .st-emotion-cache-on6lu2, .st-emotion-cache-6c7yup , .st-emotion-cache-1pcf7lv {
+            visibility: inherit !important;
+            transition: opacity 1.5s ease-in, visibility 1.5s ease-in, display 1.5s allow-discrete;
+            transition-behavior: allow-discrete;
+        }
         .st-key-guess_input .stTextInput input {
             font-size: 1.1em;
         }
             color: #ff9999;
         }
+        .stForm { padding-bottom: 30px; transition: opacity 1.5s ease-in, visibility 1.5s ease; display 1.5s allow-discrete;
+            transition-behavior: allow-discrete;}
         .stColumn .st-emotion-cache-6023h2 {margin-top:0px;}
         /*.stColumn .st-emotion-cache-1w9nhvb { display:none;}  hide OK BUTTON col spacing under form */
     _new_game()
 def run_app():
+    start_root_fade_in(0.2)
     # 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):
     except Exception:
         params = {}
+    # handle no footer query string param (for embedding use cases)
+    if "nofooter" in params:
+        st.session_state["hide_footer"] = True
     # Handle overlay dismissal
     if params.get("overlay") == "0":
         # Clear param and remember to hide overlay this session
             #inject_ocean_layers()
             inject_styles()
             render_settings_page(_on_game_option_change)
+            if  st.session_state["hide_footer"] is not True:
+                render_footer(current_page="settings", params=params)
         return
     if page == "leaderboard":
             inject_styles()
             st.header("Leaderboard")
             st.caption("Leaderboard UI will be added as part of the upgrade checklist.")
+            if  st.session_state["hide_footer"] is not True:
+                render_footer(current_page="leaderboard", params=params)
         return
     # Handle game_id for loading shared games
     state = _to_state()
     if is_game_over(state) and not st.session_state.get("hide_gameover_overlay", False):
         _render_game_over(state)
+    if  st.session_state["hide_footer"] is not True:
+        render_footer(current_page="play", params=params)
+    finish_root_fade_in(2.0)
 def _render_game_tab():
     """
         Render the main game tab layout.
     """
+    # start_root_fade_in(0.0)
     _init_session()
     st.markdown(ocean_background_css, unsafe_allow_html=True)
     #inject_ocean_layers()  # <-- add the animated layers

battlewords/ui_helpers.py CHANGED Viewed

@@ -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', 'important');
           }} catch (e) {{ /* no-op */ }}
         }})();
         </script>
@@ -350,7 +350,7 @@ def finish_root_fade_in(duration_s: float = 0.35) -> None:
             if (!root) return;
             root.style.opacity = '0';
             root.style.visibility = 'visible';
-            root.style.transition = 'opacity {duration_s:.3f}s ease';
             root.style.opacity = '1';
             root.classList.remove('bw-fadein-prep');
           }} catch (e) {{ /* no-op */ }}
@@ -435,7 +435,8 @@ def inject_styles() -> None:
             font-size: 1.8rem;
             min-height: 2.5rem;
             min-width: 0.5em;
-            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
             background: #1d64c8;   /* Base cell color */
             color: #FFFFFF;         /* Base text color for contrast */
           }
@@ -471,11 +472,12 @@ def inject_styles() -> None:
           .bw-fadein-prep {visibility: hidden !important;}
           .bw-fadein-prep #bw-spinner-overlay {
             visibility: visible !important;
-            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;}
-          .st-emotion-cache-1permvm, .st-emotion-cache-1n6tfoc { gap:0.15rem !important; min-height: 2.5rem; min-width: 2.5rem;}
           .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] { flex-wrap: nowrap !important; overflow-x: auto !important; margin: 2px 0 !important; }
           .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] > div[data-testid="column"] { flex: 0 0 auto !important; }
@@ -517,7 +519,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;}
           .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); }
@@ -581,22 +583,21 @@ def inject_styles() -> None:
     )
 # --- Footer Navigation ---
-def render_footer(current_page: str = "play") -> None:
     """Render footer navigation.
     Args:
         current_page: Active page key ("play", "leaderboard", "settings").
     """
     play_active = "active" if current_page == "play" else ""
     leaderboard_active = "active" if current_page == "leaderboard" else ""
     settings_active = "active" if current_page == "settings" else ""
-    params = {}
-    try:
-        params = st.query_params
-    except Exception:
-        params = {}
     game_id: Optional[str] = None
     if isinstance(params, dict):
         game_id = params.get("game_id")
@@ -689,13 +690,16 @@ def show_spinner(message: str = "Loading..."):
         .bw-spinner-overlay {{
             position: fixed; z-index: 99999; top: 0; left: 0; width: 100vw; height: 100vh;
             opacity: 1;
-            transition: opacity 1.5s ease;
             background: rgb(29, 100, 200); display: flex; align-items: center; justify-content: center;
             visibility: visible;
         }}
         .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;

             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');
           }} catch (e) {{ /* no-op */ }}
         }})();
         </script>
             if (!root) return;
             root.style.opacity = '0';
             root.style.visibility = 'visible';
+            root.style.transition = 'opacity {duration_s:.3f}s ease-in, visibility {duration_s:.3f}s ease-in !important';
             root.style.opacity = '1';
             root.classList.remove('bw-fadein-prep');
           }} catch (e) {{ /* no-op */ }}
             font-size: 1.8rem;
             min-height: 2.5rem;
             min-width: 0.5em;
+            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease display 0.15s allow-discrete;
+            transition-behavior: allow-discrete;
             background: #1d64c8;   /* Base cell color */
             color: #FFFFFF;         /* Base text color for contrast */
           }
           .bw-fadein-prep {visibility: hidden !important;}
           .bw-fadein-prep #bw-spinner-overlay {
             visibility: visible !important;
+            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;}
+          .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;}
           .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] { flex-wrap: nowrap !important; overflow-x: auto !important; margin: 2px 0 !important; }
           .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] > div[data-testid="column"] { flex: 0 0 auto !important; }
           .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-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); }
     )
 # --- Footer Navigation ---
+def render_footer(current_page: str = "play", params: dict = {}) -> None:
     """Render footer navigation.
     Args:
         current_page: Active page key ("play", "leaderboard", "settings").
     """
+    # If nofooter=1 is present, do not render the footer
+    if isinstance(params, dict) and params.get("nofooter") == "1":
+        return
     play_active = "active" if current_page == "play" else ""
     leaderboard_active = "active" if current_page == "leaderboard" else ""
     settings_active = "active" if current_page == "settings" else ""
     game_id: Optional[str] = None
     if isinstance(params, dict):
         game_id = params.get("game_id")
         .bw-spinner-overlay {{
             position: fixed; z-index: 99999; top: 0; left: 0; width: 100vw; height: 100vh;
             opacity: 1;
+            transition: opacity 1.5s ease-out, visibility 1.5s ease-out, display 1.5s allow-discrete;
+            transition-behavior: allow-discrete;
             background: rgb(29, 100, 200); display: flex; align-items: center; justify-content: center;
             visibility: visible;
         }}
         .bw-spinner-overlay.bw-spinner-fadeout {{
             opacity: 0;
             pointer-events: none;
+            transition: opacity 1.5s ease, visibility 1.5s ease, display 1.5s allow-discrete;
+            transition-behavior: allow-discrete;
         }}
         .bw-spinner-img {{
             width: 150px; height: 150px; border-radius: 16px; box-shadow: 0 0 8px #1d64c8;