Bug Fixes 0.2.14

- bug fix on final score popup
- score panel alignment centered
- change incorrect guess history UI

README.md

@@ -106,6 +106,11 @@ docker run -p 8501:8501 battlewords
 
 ## Changelog
 
+-0.2.14
+  - bug fix on final score popup
+  - score panel alignment centered
+  - change incorrect guess history UI
+
 -0.2.13
   - upgrade background ocean view 
   - apply volume control to sound effects

battlewords/__init__.py

@@ -1,2 +1,2 @@
-__version__ = "0.2.13"
+__version__ = "0.2.14"
 __all__ = ["models", "generator", "logic", "ui"]

battlewords/ui.py

@@ -240,7 +240,7 @@ def inject_styles() -> None:
             min-width: 1.25em;
             transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
             background: #1d64c8;   /* Base cell color */
-            color: #ffffff;         /* Base text color for contrast */
+            color: #FFFFFF;         /* Base text color for contrast */
           }
           /* Found letter cells */
           .bw-cell.letter { background: #d7faff; color: #050057; }
@@ -298,7 +298,8 @@ def inject_styles() -> None:
           .metal-border { position: relative; padding: 20px; background: #333; color: white; border: 4px solid; border-image: linear-gradient(45deg, #a1a1a1, #ffffff, #a1a1a1, #666666) 1; border-radius: 8px; }
           .shiny-border { position: relative; padding: 12px; background: #333; color: white; border-radius: 1.25rem; overflow: hidden; }
           .shiny-border::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.5s; }
-          .bw-score-panel-container { height: 100%; overflow: hidden; }
+          .bw-score-panel-container { height: 100%; overflow: hidden; text-align:center;}
+          .bw-score-panel-container table tbody tr h3 {display: flex;flex-direction: row;justify-content: space-evenly;flex-wrap: wrap;}
           .shiny-border:hover::before { left: 100%; }
 
           .bw-radio-group { display:flex; align-items:flex-start; gap: 10px; flex-flow: row; }
@@ -1031,12 +1032,23 @@ def _render_guess_form(state: GameState):
         <style>
         .bw-incorrect-guesses {
             font-size: 0.7rem;
-            color: #fff;
+            color: #ff9999;
             margin-top: -10px;
-            # padding: 2px 4px;
-            # background: rgba(255, 255, 255, 0.05);
-            # border-radius: 10px;
-            # font-style: italic;
+            #padding: 4px 8px;
+            #background: rgba(255, 255, 255, 0.05);
+            #border-radius: 4px;
+            font-style: italic;
+        }
+        .stTooltipIcon {
+            position: absolute;
+            left: 0;
+            bottom: -22px;
+        }
+        .stForm {
+            padding-bottom: 30px;
+        }
+        @media (max-width: 640px) {
+            .st-emotion-cache-1xwdq91, .st-emotion-cache-1r70o5b {max-width: max-content; min-width:33%;}
         }
         </style>
         """,
@@ -1051,17 +1063,18 @@ def _render_guess_form(state: GameState):
                 value="", 
                 max_chars=10, 
                 width=200, 
-                key="guess_input"                
+                key="guess_input",
+                help=tooltip_text,  # Use Streamlit's built-in help parameter for tooltip                
             )
         with col2:
             submitted = st.form_submit_button("OK", disabled=not state.can_guess, width=100, key="guess_submit")
         
         # Show compact list below input if setting is enabled
-        if st.session_state.get("show_incorrect_guesses", False) and recent_incorrect:
-            st.markdown(
-                f'<div class="bw-incorrect-guesses" title="{tooltip_text}">Recent incorrect guesses:</div>',
-                unsafe_allow_html=True,
-            )
+        #if st.session_state.get("show_incorrect_guesses", False) and recent_incorrect:
+        #    st.markdown(
+        #        f'<div class="bw-incorrect-guesses">Recent: {", ".join(recent_incorrect)}</div>',
+        #        unsafe_allow_html=True,
+        #    )
         
         if submitted:
             correct, _ = guess_word(state, guess_text)
@@ -1070,12 +1083,12 @@ def _render_guess_form(state: GameState):
             if correct:
                 st.session_state.radar_gif_path = None
                 st.session_state.radar_gif_signature = None
-                play_sound_effect("correct_guess", volume=(st.session_state.get("effects_volume", 50) / 100))
+                play_sound_effect("correct_guess", volume=0.6)
             else:
                 # Update incorrect guesses list - keep only last 10
                 st.session_state.incorrect_guesses.append(guess_text)
                 st.session_state.incorrect_guesses = st.session_state.incorrect_guesses[-10:]
-                play_sound_effect("incorrect_guess", volume=(st.session_state.get("effects_volume", 50) / 100))
+                play_sound_effect("incorrect_guess", volume=0.5)
             st.rerun()
 
 
@@ -1146,6 +1159,8 @@ def _render_score_panel(state: GameState):
         .bold-text {{ font-weight: 700; }}
         .blue-background {{ background:#1d64c8; opacity:0.9; color:#fff; }}
         .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;}}
+        .bw-score-panel-container table tbody tr h3 {{display: flex;flex-direction: row;justify-content: space-evenly;flex-wrap: wrap;}}
         table {{ width: 100%; margin: 0 auto; border-collapse: separate; border-spacing: 0; }}
         th, td {{ padding: 6px 8px; }}
       </style>
@@ -1211,7 +1226,7 @@ def _game_over_content(state: GameState) -> None:
     if os.path.exists(congrats_music_path):
         src_url = _load_audio_data_url(congrats_music_path)
         # Play once (no loop) at configured volume
-        _mount_background_audio(enabled=True, src_url=src_url, volume=(st.session_state.get("music_volume", 100)) / 100, loop=False)
+        _mount_background_audio(enabled=True,src_data_url=src_url, volume=(st.session_state.get("music_volume", 100)) / 100, loop=False)
     else:
         _mount_background_audio(False, None, 0.0)
 
@@ -1245,7 +1260,7 @@ def _game_over_content(state: GameState) -> None:
         "<th scope=\"col\">Extra</th>"
         "</tr></thead>"
         f"<tbody>{''.join(word_rows)}"
-        f"<tr><td colspan=\"3\"><h5 class=\"m-2\">Total: {state.score} <span style='font-size:1rem; color:#1d64c8;'>&nbsp;⏱ {timer_str}</span></h5></td></tr>"
+        f"<tr><td colspan=\"3\"><h5 class=\"m-2\">Total: {state.score} <span style='font-size:1.25rem; color:#1d64c8;'>&nbsp;⏱ {timer_str}</span></h5></td></tr>"
         "</tbody>"
         "</table>"
     )
@@ -1269,6 +1284,7 @@ def _game_over_content(state: GameState) -> None:
               min-width: unset !important;
               margin: 25px auto 0;
            }
+           .m-2 {display: flex;flex-direction: row;justify-content: space-evenly;flex-wrap: wrap;font-size: 1.25rem; font-weight: bold;}
            .st-key-new_game_btn_dialog button, .st-key-close_game_over button {
             height: 50px !important;
            }
@@ -1330,7 +1346,7 @@ def _render_game_over(state: GameState):
         congrats_music_path = os.path.join(music_dir, "congratulations.mp3")
         if os.path.exists(congrats_music_path):
             src_url = _load_audio_data_url(congrats_music_path)
-            _mount_background_audio(enabled=True, src_url=src_url, volume=(st.session_state.get("music_volume", 100)) / 100, loop=False)
+            _mount_background_audio(enabled=True, src_data_url=src_url, volume=(st.session_state.get("music_volume", 100)) / 100, loop=False)
         else:
             _mount_background_audio(False, None, 0.0)
         _game_over_dialog(state)