Finalize changes

restore submit button

break on purpose

v2 transition update

Adjust render transitions

Add rnder_game_tab fade in

app.py

@@ -19,7 +19,20 @@ def main(opened=False):
     )
 
     st.markdown(
-        "<style>div[data-testid='stSidebar'] { display: none !important; }</style>",
+        """<style>
+                div[data-testid='stSidebar'] { display: none !important; }
+                /* #root {transition: opacity 1s ease, visibility 1s ease;} */
+                .bw-fadein-prep {visibility: hidden !important; opacity: 0.75; transition: opacity 1s ease, visibility 1s ease !important}
+                .bw-fadein-prep #bw-spinner-overlay {
+                    visibility: visible !important;
+                    opacity: 1 !important;
+                }
+                /* #REMOVE ALERT */
+                .st-emotion-cache-15g2oxy.emjbblw2 { 
+                    opacity: 0;
+                    display: none;
+                }
+          </style>""",
         unsafe_allow_html=True,
     )
     run_app()

battlewords/ui.py

@@ -464,7 +464,7 @@ def _render_grid(show_grid_ticks: bool = True):
             to   { opacity: 1; transform: scale(1); }
         }
         .bw-cell.letter, .bw-cell.empty, .bw-cell.bw-cell-complete {
-            animation: bw-reveal 0.20s ease-out;
+            animation: bw-reveal 0.15s ease-out;            
         }
         </style>
         """,
@@ -701,18 +701,18 @@ 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;
-            transition: opacity 1.5s ease-in, visibility 1.5s ease-in, display 1.5s allow-discrete;
-            transition-behavior: allow-discrete;           
+            /* 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;
+            /* transition: opacity 1.5s ease-in, visibility 1.5s ease-in, display 1.5s allow-discrete;
+            transition-behavior: allow-discrete; */
         }
-        .stColumn.st-emotion-cache-bw9c3d,  .stColumn.st-emotion-cache-drrz8i, .stColumn.st-emotion-cache-bah2wz  {
+        .stColumn.st-emotion-cache-bw9c3d,  .stColumn.st-emotion-cache-drrz8i, .stColumn.st-emotion-cache-bah2wz, .st-emotion-cache-tuze3w   {
             margin-top: 0px;
         }
-        .stColumn.st-emotion-cache-1lo9blm, .stColumn.st-emotion-cache-1w9nhvb{
+        .stColumn.st-emotion-cache-1lo9blm, .stColumn.st-emotion-cache-1w9nhvb, .st-emotion-cache-nwgyir  {
             margin-top: 31px;
         }
         .st-key-guess_input .stTextInput input {
@@ -852,7 +852,7 @@ def _render_guess_form(state: GameState):
         with col2:
             submitted = st.form_submit_button("OK", disabled=not state.can_guess, width=100, key="guess_submit")
         with col3:
-            _render_correct_try_again(state)
+            _render_correct_try_again(state)            
         
         if submitted:
             # Only process guesses with at least 4 characters (prevent blank/short submissions)
@@ -1175,7 +1175,7 @@ def _render_game_over(state: GameState):
             _game_over_dialog(state)
 
 def run_app():
-    start_root_fade_in(0.0)
+    start_root_fade_in(0.1)
 
     # Handle query params using new API
     try:
@@ -1202,7 +1202,7 @@ def run_app():
 
     if st.session_state.get("needs_initialization", True):
         spinner_placeholder = st.empty()
-        with CustomSpinner(spinner_placeholder, "Initializing Game..."):
+        with CustomSpinner(spinner_placeholder, "Initializing Game...", 2.0):
             st.session_state.needs_initialization = False
             _render_game_tab()
         try:
@@ -1227,14 +1227,14 @@ def run_app():
         time.sleep(1.0)  # slight delay to ensure radar and grid render before overlay appears
         _render_game_over(state)
 
-    finish_root_fade_in(2.0)
+    finish_root_fade_in(2.1)
 
 
 def _render_game_tab():
     """
         Render the main game tab layout.
     """
-    # start_root_fade_in(0.5)
+    #start_root_fade_in(0.35)
     _init_session()
     st.markdown(ocean_background_css, unsafe_allow_html=True)
     #inject_ocean_layers()  # <-- add the animated layers
@@ -1272,4 +1272,4 @@ def _render_game_tab():
                 show_grid_ticks=st.session_state.get("show_grid_ticks", True),
             )
 
-    # finish_root_fade_in(0.3)
+    #finish_root_fade_in(5.0)

battlewords/ui_helpers.py

@@ -192,7 +192,7 @@ def start_root_fade_in(duration_s: float = 0.35) -> None:
             if (!root) return;
             root.classList.add('bw-fadein-prep');
             // Hide immediately with no transition so a later step can fade in.
-            root.style.setProperty('transition', 'none', 'important');
+            //root.style.setProperty('transition', 'none', 'important');
             root.style.setProperty('visibility', 'hidden', 'important');
             // Force style/layout flush so opacity=0 commits before re-enabling transition.
             void root.offsetHeight;
@@ -214,10 +214,10 @@ def finish_root_fade_in(duration_s: float = 0.35) -> None:
           try {{
             var parentDoc = (window.parent && window.parent.document) ? window.parent.document : document;
             var root = parentDoc.getElementById('root');
-            if (!root) return;
-            root.style.opacity = '0';
+            if (!root) return;            
+            root.style.opacity = '0';            
+            root.style.setProperty('transition', 'opacity {duration_s:.3f}s ease-in-out, visibility {duration_s:.3f}s ease-in-out', 'important');            
             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 */ }}
@@ -338,12 +338,6 @@ def inject_styles() -> None:
           .stVerticalBlock.st-emotion-cache-tn0cau.e1wguzas3 div.element-container:nth-child(3), .stVerticalBlock.st-emotion-cache-tn0cau.ek2vi383 div.element-container:nth-child(3)  { display: none; }    
           .st-emotion-cache-18kf3ut.e1wguzas41 { display: 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: rgb(30, 105, 210); border: 1px solid rgb(30, 105, 210); border-bottom: 1.3px 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;}
@@ -352,7 +346,6 @@ def inject_styles() -> None:
           .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] > div[data-testid="column"] { flex: 0 0 auto !important; }
           .bw-grid-row-anchor { height: 0; margin: 0; padding: 0; }
           .st-emotion-cache-1n6tfoc { background: linear-gradient(-45deg, #a1a1a1, #ffffff, #a1a1a1, #666666); gap: 0.1rem !important; color: white; border-radius:15px; padding: 10px 10px 10px 5px; }
-          .st-emotion-cache-1n6tfoc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; margin: 5px;}
           .st-emotion-cache-t9ul8o .st-emotion-cache-1n6tfoc, .st-emotion-cache-1pgyx24 .st-emotion-cache-1n6tfoc {background: none; padding: 0; z-index:-1;}
           .st-key-guess_input, .st-key-guess_submit { flex-direction: row; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; }          
 
@@ -396,7 +389,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 0.3s ease-in, visibility 0.3s ease-in, display 0.3s 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); }