Version 0.2.11: UI Enhancements and Bug Fixes

Updated version to 0.2.11 in `__init__.py`. Removed fullscreen image tooltip from `README.md`. Updated `incorrect_guess.mp3` using Git LFS. Added `streamlit.components.v1` import in `ui.py`. Enhanced `inject_styles` with new CSS for `.stHeading` and toolbar button hiding. Improved layout and styling in `ui.py`. Clarified game instructions in `_render_header`. Refactored timer logic in `_render_score_panel` for better accuracy and reduced layout jumps. Simplified game over dialog actions and added audio remount logic. Made minor formatting adjustments in `run_app`.

README.md

@@ -109,6 +109,7 @@ docker run -p 8501:8501 battlewords
 -0.2.11
   - update timer to be live during gameplay, but reset with each action
   - compact design
+  - remove fullscreen image tooltip
 
 -0.2.10
   - reduce sonar graphic size

battlewords/__init__.py

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

battlewords/assets/audio/effects/incorrect_guess.mp3

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1cc06c8c57a1f5acd81661723bcfbf945a253110279b9db7eaca02f89c61667d
+oid sha256:dda2212a4c7fab5d3a402d4639c11fc80d93f01e14523a20bbbfd747e873d13d
 size 49663

battlewords/ui.py

@@ -2,6 +2,7 @@ from __future__ import annotations
 from . import __version__ as version
 from typing import Iterable, Tuple, Optional
 import streamlit as st
+import streamlit.components.v1 as components
 
 import matplotlib.pyplot as plt
 from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
@@ -112,6 +113,12 @@ def inject_styles() -> None:
            .stMainBlockContainer {
             max-width: 1100px;
            }
+           .stHeading {
+                margin-bottom: 0rem !important;
+                margin-top: 0rem !important;
+                font-size: 2rem !important; /* Title */
+                line-height: 1.1 !important;
+           }
           /* Base grid cell visuals */
           .bw-row { display: flex; gap: 0.1rem; flex-wrap: nowrap; min-height: 48px;}
           .bw-cell {
@@ -172,6 +179,9 @@ def inject_styles() -> None:
            .st-emotion-cache-1n6tfoc::before { min-height: calc(100% + 20px) !important; }
 
           }
+          div[data-testid="stElementToolbarButtonContainer"], button[data-testid="stBaseButton-elementToolbar"], button[data-testid="stBaseButton-elementToolbar"]:hover {
+               display: none;
+          }
 
           /* Mobile styles */
           @media (max-width: 640px) {
@@ -216,17 +226,17 @@ def inject_styles() -> None:
               scrollbar-color: transparent transparent;
           }
 
-          .st-emotion-cache-wp60of {
+         .st-emotion-cache-wp60of {
              width: 720px;
              position: absolute;     
              max-width:100%;
           }
-          .stImage { max-width:300px;}
-          #text_input_2 {
+         .stImage { max-width:300px;}
+         #text_input_3,#text_input_1 {
           background-color:#fff;
           color:#000;
           caret-color:#333;}
-
+        
          @media (min-width:720px) {
           .st-emotion-cache-wp60of {
             left: calc(calc(100% - 720px) / 2);
@@ -339,7 +349,7 @@ def _sync_back(state: GameState) -> None:
 
 def _render_header():
     st.title(f"Battlewords v{version}")
-    st.subheader("Reveal cells, then guess the hidden words.")
+    st.subheader("Reveal letters in cells, then guess the words!")
     # st.markdown(
     #     "- Grid is 12×12 with 6 words (two 4-letter, two 5-letter, two 6-letter).\n"
     #     "- After each reveal, you may submit one word guess below.\n"
@@ -348,7 +358,15 @@ def _render_header():
     #     "- Words do not overlap, but may be touching.")
     inject_styles()
 
+    st.markdown(
+    """
+    <style>
+    /* Compact title and subheader */
 
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
 def _render_sidebar():
     with st.sidebar:
         st.header("SETTINGS")        
@@ -697,10 +715,10 @@ def _render_grid(state: GameState, letter_map, show_grid_ticks: bool = True):
     st.markdown(
         """
         <style>
-        div[data-testid=\"column\"] {
+        div[data-testid="column"] {
             padding: 0 !important;
         }
-        button[data-testid=\"stButton\"] {
+        button[data-testid="stButton"] {
             width: 32px !important;
             height: 32px !important;
             min-width: 32px !important;
@@ -983,20 +1001,16 @@ def _render_score_panel(state: GameState):
             )
             rows_html.append(row_html)
 
-    # Timer calculation (initial render value)
+    # Initial time shown from server; JS will tick client-side
     now = datetime.now()
     start = state.start_time or now
     end = state.end_time or (now if is_game_over(state) else None)
     elapsed = (end or now) - start
-    elapsed_seconds = int(elapsed.total_seconds())
-    mins, secs = divmod(elapsed_seconds, 60)
+    mins, secs = divmod(int(elapsed.total_seconds()), 60)
     timer_str = f"{mins:02d}:{secs:02d}"
 
-    # Unique id for the timer span (use puzzle uid when available)
     span_id = f"bw-timer-{getattr(state.puzzle, 'uid', 'default')}"
-    timer_span_html = (
-        f"<span id=\"{span_id}\" style='font-size:1rem; color:#ffffff;'>&nbsp;⏱ {timer_str}</span>"
-    )
+    timer_span_html = f"<span id=\"{span_id}\" style='font-size:1rem; color:#ffffff;'>&nbsp;⏱ {timer_str}</span>"
 
     total_row_html = (
         f"<tr class=\"blue-background\"><td colspan='3'>"
@@ -1005,58 +1019,72 @@ def _render_score_panel(state: GameState):
     )
     rows_html.append(total_row_html)
 
-    table_html = (
-        "<table class='shiny-border' style=\"background: linear-gradient(-45deg, #a1a1a1, #ffffff, #a1a1a1, #666666); width:100%; margin: 0 auto;border-collapse:separate; border-spacing:0;\">"
-        f"{''.join(rows_html)}"
-        "</table>"
-    )
-    st.markdown(f"<div class='bw-score-panel-container'>{table_html}</div>", unsafe_allow_html=True)
-
-    # Inject client-side timer updater script so only the timer text updates
+    # Build a self-contained HTML document so JS runs inside the component iframe
     start_ms = int(start.timestamp() * 1000)
     end_ms = int(end.timestamp() * 1000) if end else None
-    js = f"""
-    <script>
-    (function() {{
-      try {{
-        window.bwTimers = window.bwTimers || {{}};
-        var key = "{span_id}";
-        if (window.bwTimers[key]) {{
-          clearInterval(window.bwTimers[key]);
-        }}
-        var span = document.getElementById("{span_id}");
-        if (!span) return;
-
-        var startMs = {start_ms};
-        var endMs = {"null" if end_ms is None else end_ms};
-
-        function fmt(ms) {{
-          var total = Math.max(0, Math.floor(ms / 1000));
-          var m = Math.floor(total / 60);
-          var s = total % 60;
-          return (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s;
-        }}
-
-        function tick() {{
-          var now = Date.now();
-          var t = (endMs !== null ? endMs : now) - startMs;
-          span.textContent = "⏱ " + fmt(t);
-          if (endMs !== null) {{
-            clearInterval(window.bwTimers[key]);
+
+    table_inner = "".join(rows_html)
+    html_doc = f"""
+    <div class='bw-score-panel-container'>
+      <style>
+        .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; }}
+        table {{ width: 100%; margin: 0 auto; border-collapse: separate; border-spacing: 0; }}
+        th, td {{ padding: 6px 8px; }}
+      </style>
+      <table class='shiny-border' style="background: linear-gradient(-45deg, #a1a1a1, #ffffff, #a1a1a1, #666666);">
+        {table_inner}
+      </table>
+      <script>
+        (function() {{
+          try {{
+            var span = document.getElementById("{span_id}");
+            if (!span) return;
+            var startMs = {start_ms};
+            var endMs = {"null" if end_ms is None else end_ms};
+
+            function fmt(ms) {{
+              var total = Math.max(0, Math.floor(ms / 1000));
+              var m = Math.floor(total / 60);
+              var s = total % 60;
+              return (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s;
+            }}
+
+            function render(ms) {{
+              if (endMs !== null) {{
+                span.textContent = "⏱ " + fmt(endMs - startMs);
+                return;
+              }}
+              var now = Date.now();
+              span.textContent = "⏱ " + fmt(Math.max(0, now - startMs));
+            }}
+
+            function tick() {{
+              if (endMs !== null) {{
+                render(endMs - startMs);
+                return;
+              }}
+              var now = Date.now();
+              render(Math.max(0, now - startMs));
+            }}
+
+            tick();
+            if (endMs === null) {{
+              setInterval(tick, 1000);
+            }}
+          }} catch (e) {{
+            // no-op
           }}
-        }}
-
-        tick();
-        if (endMs === null) {{
-          window.bwTimers[key] = setInterval(tick, 1000);
-        }}
-      }} catch (e) {{
-        // no-op
-      }}
-    }})();
-    </script>
+        }})();
+      </script>
+    </div>
     """
-    st.markdown(js, unsafe_allow_html=True)
+
+    # Height heuristic to avoid layout jumps
+    num_rows = len(rows_html)
+    height = 40 + (num_rows * 36)
+    components.html(html_doc, height=height, scrolling=False)
 
 # -------------------- Game Over Dialog --------------------
 
@@ -1157,13 +1185,10 @@ def _game_over_content(state: GameState) -> None:
     )
 
     # Dialog actions
-    cols = st.columns([1, 1])
-    with cols[0]:
-        if st.button("Close", key="close_game_over"):
-            st.session_state["show_gameover_overlay"] = False
-            st.rerun()
-    with cols[1]:
-        st.button("New Game", key="new_game_btn_dialog", on_click=_new_game)
+    if st.button("Close", key="close_game_over"):
+        st.session_state["show_gameover_overlay"] = False
+        st.session_state["remount_background_audio"] = True  # <-- set flag
+        st.rerun()
 
 # Prefer st.dialog/experimental_dialog; fallback to st.modal if unavailable
 _Dialog = getattr(st, "dialog", getattr(st, "experimental_dialog", None))
@@ -1185,6 +1210,16 @@ else:
 def _render_game_over(state: GameState):
     # Determine visibility
     visible = bool(st.session_state.get("show_gameover_overlay", True)) and is_game_over(state)
+    if not visible and st.session_state.get("remount_background_audio", False):
+        # Remount background audio when modal is dismissed (X or button)
+        music_dir = _get_music_dir()
+        background_path = os.path.join(music_dir, "background.mp3")
+        if os.path.exists(background_path):
+            src_url = _load_audio_data_url(background_path)
+            _mount_background_audio(True, src_url, (st.session_state.get("music_volume", 100)) / 100)
+        else:
+            _mount_background_audio(False, None, 0.0)
+        st.session_state["remount_background_audio"] = False  # reset flag
     if visible:
         _game_over_dialog(state)
 
@@ -1232,7 +1267,7 @@ def run_app():
     st.markdown('<div id="bw-main-anchor"></div>', unsafe_allow_html=True)
     left, right = st.columns([3, 2], gap="medium")
     with right:
-        _render_radar(state.puzzle, size=state.grid_size, r_max=0.8, max_frames=25, sinusoid_expand=True, stagger_radar=False, show_ticks=st.session_state.get("show_grid_ticks", False))    
+        _render_radar(state.puzzle, size=state.grid_size, r_max=0.8, max_frames=25, sinusoid_expand=True, stagger_radar=False, show_ticks=st.session_state.get("show_grid_ticks", False))
         one, two = st.columns([1, 2], gap="medium")
         with one:
             _render_correct_try_again(state)