Enhance gameplay and UI; add Playwright tests

Updated README.md to document version 0.2.9 changes, including a fix for sonar grid alignment and a new feature to auto-mark words as found when all letters are revealed. Updated __init__.py to version 0.2.9. Added `auto_mark_completed_words` function in logic.py and integrated it into ui.py. Refactored UI functions for improved layout stability and style consistency. Modified scope_blue.png (details not specified).

.gitignore

@@ -488,3 +488,5 @@ secrets.*
 /.vs
 /battlewords/__pycache__/ui.cpython-311.pyc
 /battlewords/__pycache__/__init__.cpython-311.pyc
+/package.json
+/package-lock.json

README.md

@@ -106,6 +106,10 @@ docker run -p 8501:8501 battlewords
 
 ## Changelog
 
+-0.2.9
+  - fix sonar grid alignment issue on some browsers
+  - When all letters of a word are revealed, it is automatically marked as found.
+
 -0.2.8
   - Add 10 incorrect guess limit per game
 

battlewords/__init__.py

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

battlewords/logic.py

@@ -141,4 +141,28 @@ def compute_tier(score: int) -> str:
         return "Great"
     if 34 <= score <= 37:
         return "Good"
-    return "Keep practicing"
+    return "Keep practicing"
+
+
+def auto_mark_completed_words(state: GameState) -> bool:
+    """Automatically mark words as found when all their letters are revealed.
+
+    Returns True if any word state changed (e.g., guessed/score/points).
+    Scoring in this case is base length only (no unrevealed bonus).
+    """
+    changed = False
+    for w in state.puzzle.words:
+        if w.text in state.guessed:
+            continue
+        if all(c in state.revealed for c in w.cells):
+            # Award base points if not already assigned
+            if w.text not in state.points_by_word:
+                base_points = w.length
+                state.points_by_word[w.text] = base_points
+                state.score += base_points
+            state.guessed.add(w.text)
+            changed = True
+    if changed:
+        # Do not alter can_guess; just note the auto-complete
+        state.last_action = (state.last_action or "") + "\nAuto-complete: revealed word(s) marked as found."
+    return changed

battlewords/ui.py

@@ -14,7 +14,7 @@ import time
 from datetime import datetime
 
 from .generator import generate_puzzle, sort_word_file
-from .logic import build_letter_map, reveal_cell, guess_word, is_game_over, compute_tier
+from .logic import build_letter_map, reveal_cell, guess_word, is_game_over, compute_tier, auto_mark_completed_words
 from .models import Coord, GameState, Puzzle
 from .word_loader import get_wordlist_files, load_word_list  # use loader directly
 from .version_info import versions_html  # version info footer
@@ -491,7 +491,7 @@ def get_scope_image(uid: str, size=4, bgcolor="none", scope_color="green", img_n
     return imgscope
 
 def _create_radar_scope(size=4, bgcolor="none", scope_color="green"):
-    fig, ax = plt.subplots(figsize=(size, size), dpi=96)
+    fig, ax = plt.subplots(figsize=(size, size), dpi=144)
     ax.set_facecolor(bgcolor)
     fig.patch.set_alpha(0.5)
     ax.set_zorder(0)
@@ -523,10 +523,10 @@ def _create_radar_scope(size=4, bgcolor="none", scope_color="green"):
         ax.plot([0, x], [0, y], color=scope_color, alpha=0.5, zorder=1)
     
     # Set limits and remove axes
-    #ax.set_xlim(-0.5, 0.5)
-    #ax.set_ylim(-0.5, 0.5)
+    ax.set_xlim(-0.5, 0.5)
+    ax.set_ylim(-0.5, 0.5)
     ax.set_aspect('equal', adjustable='box')
-    #ax.axis('off')
+    ax.axis('off')
     
     return fig, ax
 
@@ -548,7 +548,7 @@ def _render_radar(puzzle: Puzzle, size: int, r_max: float = 0.8, max_frames: int
     max_x = max(xs - 0.5) + r_max
     min_y = min(ys - 0.5) - r_max  # Note: ys are inverted in plot
     max_y = max(ys - 0.5) + r_max
-    ring_linewidth = 4
+    ring_linewidth = 3
 
     rgba_labels = mcolors.to_rgba("#FFFFFF", 0.7)
     rgba_ticks  = mcolors.to_rgba("#FFFFFF", 0.66) 
@@ -565,23 +565,13 @@ def _render_radar(puzzle: Puzzle, size: int, r_max: float = 0.8, max_frames: int
 
     # Use per-puzzle scope image keyed by puzzle.uid
     imgscope = get_scope_image(uid=puzzle.uid, size=scope_size, bgcolor=bgcolor, scope_color=scope_color)
-    fig, ax = plt.subplots(figsize=(scope_size, scope_size))
-    fig.subplots_adjust(left=0, right=0.9, top=0.9, bottom=0)
-    fig.patch.set_alpha(0.0)
-    ax.set_position([0.02, 0.02, 0.98, 0.98])
-    ax.set_xlim(min_x, max_x)
-    ax.set_ylim(max_y, min_y)  # Inverted for grid coordinates
 
-    if show_ticks:
-        ax.set_xticks(range(1, size + 1))
-        ax.set_yticks(range(1, size + 1))
-        ax.tick_params(axis="both", which="both", labelcolor=rgba_labels)
-        ax.tick_params(axis="both", which="both", colors=rgba_ticks)
-    else:
-        ax.set_xticks([])
-        ax.set_yticks([])
-
-    ax.set_aspect('equal', adjustable='box')
+    # Build figure with explicit axes occupying full canvas to avoid browser-specific padding
+    fig = plt.figure(figsize=(scope_size, scope_size), dpi=144)
+    # Background gradient covering full figure
+    bg_ax = fig.add_axes([0, 0, 1, 1], zorder=0)
+    fig.canvas.draw()  # ensure size
+    fig_w, fig_h = [int(v) for v in fig.canvas.get_width_height()]
 
     def _make_linear_gradient(width: int, height: int, angle_deg: float,
                               colors_hex: list[str], stops: list[float]) -> np.ndarray:
@@ -605,7 +595,6 @@ def _render_radar(puzzle: Puzzle, size: int, r_max: float = 0.8, max_frames: int
         img = (1.0 - w) * c0 + w * c1
         return img
 
-    fig_w, fig_h = [int(v) for v in fig.canvas.get_width_height()]
     grad_img = _make_linear_gradient(
         width=fig_w,
         height=fig_h,
@@ -613,23 +602,37 @@ def _render_radar(puzzle: Puzzle, size: int, r_max: float = 0.8, max_frames: int
         colors_hex=['#a1a1a1', '#ffffff', '#a1a1a1', '#666666'],
         stops=[0.0, 1.0 / 3.0, 2.0 / 3.0, 1.0],
     )
-    bg_ax = fig.add_axes([0, 0, 1, 1], zorder=0)
     bg_ax.imshow(grad_img, aspect='auto', interpolation='bilinear')
     bg_ax.axis('off')
 
-    scope_ax = fig.add_axes([-0.1, -0.095, 1.18, 1.195], zorder=1)  
-    # scope_ax.set_position([0, 0, 1, 1]) 
+    # Decorative scope image as overlay (does not affect coordinates)
+    scope_ax = fig.add_axes([0, 0, 1, 1], zorder=1)
     scope_ax.imshow(imgscope, aspect='auto', interpolation='lanczos')
     scope_ax.axis('off')
 
+    # Main axes for rings and ticks with fixed limits to stabilize layout across browsers
+    ax = fig.add_axes([0, 0, 1, 1], zorder=2)
     ax.set_facecolor('none')
-    ax.set_zorder(2)
+    ax.set_xlim(0.5, size + 0.5)
+    ax.set_ylim(size + 0.5, 0.5)  # Inverted for grid coordinates
+
+    if show_ticks:
+        ax.set_xticks(range(1, size + 1))
+        ax.set_yticks(range(1, size + 1))
+        ax.tick_params(axis="both", which="both", labelcolor=rgba_labels)
+        ax.tick_params(axis="both", which="both", colors=rgba_ticks)
+    else:
+        ax.set_xticks([])
+        ax.set_yticks([])
+
+    ax.set_aspect('equal', adjustable='box')
     for spine in ax.spines.values():
         spine.set_visible(False)
 
+    # Build rings centered on exact cell centers (integer coords)
     rings: list[Circle] = []
     for x, y in zip(xs, ys):
-        ring = Circle((x - 0.5, y - 0.5), radius=r_min, fill=False, edgecolor='#9ceffe', linewidth=ring_linewidth, alpha=1.0, zorder=3)
+        ring = Circle((x, y), radius=r_min, fill=False, edgecolor='#9ceffe', linewidth=ring_linewidth, alpha=1.0, zorder=3)
         ax.add_patch(ring)
         rings.append(ring)
 
@@ -664,7 +667,7 @@ def _render_radar(puzzle: Puzzle, size: int, r_max: float = 0.8, max_frames: int
     if cached_path and os.path.exists(cached_path) and cached_sig == gif_signature:
         with open(cached_path, "rb") as f:
             gif_bytes = f.read()
-        st.image(gif_bytes, width='content', output_format="auto")
+        st.image(gif_bytes, use_container_width=True)
         plt.close(fig)
         return
 
@@ -677,7 +680,7 @@ def _render_radar(puzzle: Puzzle, size: int, r_max: float = 0.8, max_frames: int
         gif_bytes = tmpfile.read()
         st.session_state.radar_gif_path = tmpfile.name  # Save path for reuse
         st.session_state.radar_gif_signature = gif_signature  # Save signature to detect changes
-    st.image(gif_bytes, width='content', output_format="auto")
+    st.image(gif_bytes, use_container_width=True)
 
 def _render_grid(state: GameState, letter_map, show_grid_ticks: bool = True):
     size = state.grid_size
@@ -798,6 +801,11 @@ def _render_grid(state: GameState, letter_map, show_grid_ticks: bool = True):
         
     if clicked is not None:
         reveal_cell(state, letter_map, clicked)
+        # Auto-mark and award base points for any fully revealed words
+        if auto_mark_completed_words(state):
+            # Invalidate radar GIF cache to hide completed rings
+            st.session_state.radar_gif_path = None
+            st.session_state.radar_gif_signature = None
         st.session_state.letter_map = build_letter_map(st.session_state.puzzle)
         _sync_back(state)
 
@@ -838,20 +846,7 @@ def _render_hit_miss(state: GameState):
     # Render as a circular radio group, side-by-side
     st.markdown(
         f"""
-        <div class=\"bw-radio-group\" role=\"radiogroup\" aria-label=\"Hit or Miss\">
-          <div class=\"bw-radio-item\">
-            <div class=\"bw-radio-circle {'active hit' if is_hit else ''}\" role=\"radio\" aria-checked=\"{'true' if is_hit else 'false'}\" aria-label=\"Hit\">
-              <span class=\"dot\"></span>
-            </div>
-            <div class=\"bw-radio-caption\">HIT</div>
-          </div>
-          <div class=\"bw-radio-item\">
-            <div class=\"bw-radio-circle {'active miss' if is_miss else ''}\" role=\"radio\" aria-checked=\"{'true' if is_miss else 'false'}\" aria-label=\"Miss\">
-              <span class=\"dot\"></span>
-            </div>
-            <div class=\"bw-radio-caption\">MISS</div>
-          </div>
-        </div>
+        <div class=\"bw-radio-group\" role=\"radiogroup\" aria-label=\"Hit or Miss\">\n          <div class=\"bw-radio-item\">\n            <div class=\"bw-radio-circle {'active hit' if is_hit else ''}\" role=\"radio\" aria-checked=\"{'true' if is_hit else 'false'}\" aria-label=\"Hit\">\n              <span class=\"dot\"></span>\n            </div>\n            <div class=\"bw-radio-caption\">HIT</div>\n          </div>\n          <div class=\"bw-radio-item\">\n            <div class=\"bw-radio-circle {'active miss' if is_miss else ''}\" role=\"radio\" aria-checked=\"{'true' if is_miss else 'false'}\" aria-label=\"Miss\">\n              <span class=\"dot\"></span>\n            </div>\n            <div class=\"bw-radio-caption\">MISS</div>\n          </div>\n        </div>
         """,
         unsafe_allow_html=True,
     )
@@ -874,20 +869,7 @@ def _render_correct_try_again(state: GameState):
 
     st.markdown(
         f"""
-        <div class=\"bw-radio-group\" role=\"radiogroup\" aria-label=\"Correct or Try Again\">
-          <div class=\"bw-radio-item\">
-            <div class=\"bw-radio-circle {'active hit' if is_correct else ''}\" role=\"radio\" aria-checked=\"{'true' if is_correct else 'false'}\" aria-label=\"Correct\">
-              <span class=\"dot\"></span>
-            </div>
-            <div class=\"bw-radio-caption{' inactive' if not is_correct else ''}\">CORRECT!</div>
-          </div>
-          <div class=\"bw-radio-item\">
-            <div class=\"bw-radio-circle {'active miss' if is_try_again else ''}\" role=\"radio\" aria-checked=\"{'true' if is_try_again else 'false'}\" aria-label=\"Try Again\">
-              <span class=\"dot\"></span>
-            </div>
-            <div class=\"bw-radio-caption{' inactive' if not is_try_again else ''}\">TRY AGAIN</div>
-          </div>
-        </div>
+        <div class=\"bw-radio-group\" role=\"radiogroup\" aria-label=\"Correct or Try Again\">\n          <div class=\"bw-radio-item\">\n            <div class=\"bw-radio-circle {'active hit' if is_correct else ''}\" role=\"radio\" aria-checked=\"{'true' if is_correct else 'false'}\" aria-label=\"Correct\">\n              <span class=\"dot\"></span>\n            </div>\n            <div class=\"bw-radio-caption{' inactive' if not is_correct else ''}\">CORRECT!</div>\n          </div>\n          <div class=\"bw-radio-item\">\n            <div class=\"bw-radio-circle {'active miss' if is_try_again else ''}\" role=\"radio\" aria-checked=\"{'true' if is_try_again else 'false'}\" aria-label=\"Try Again\">\n              <span class=\"dot\"></span>\n            </div>\n            <div class=\"bw-radio-caption{' inactive' if not is_try_again else ''}\">TRY AGAIN</div>\n          </div>\n        </div>
         """,
         unsafe_allow_html=True,
     )
@@ -1116,7 +1098,7 @@ def _game_over_content(state: GameState) -> None:
             padding: 16px;
           }
           .bw-dialog-header { display:flex; justify-content: space-between; align-items:center; }
-          .bw-dialog-title, .st-emotion-cache-11elpad p { margin: 0; font-weight: bold;font-size: 1.5rem;text-align: center;flex: auto;filter:drop-shadow(1px 1px 2px #003);}
+          .bw-dialog-title, .st-emotion-cache-11elpad p { margin: 0; font-weight: bold;font-size: 1.5rem;text-align: center;flex: auto;filter:drop-shadow(1px 1px 2px #003);} 
           .text-success { color: #20d46c;font-weight: bold;font-size: 1.5rem;text-align: center;flex: auto;filter:drop-shadow(1px 1px 2px #003); }
           .st-key-new_game_btn_dialog, .st-key-close_game_over { width: 50% !important;
               height: auto;
@@ -1132,7 +1114,7 @@ def _game_over_content(state: GameState) -> None:
               /*filter:drop-shadow(1px 1px 2px #003);*/
               /*filter: invert(1);*/
            }
-           .st-bb {background-color: rgba(29, 100, 200, 0.5);}
+           .st-bb {background-color: rgba(29, 100, 200, 0.5);} 
         </style>
         """,
         unsafe_allow_html=True,
@@ -1140,8 +1122,7 @@ def _game_over_content(state: GameState) -> None:
 
     st.markdown(
         f"""
-        <div class=\"bw-dialog-container shiny-border\">
-          <div class=\"p-3 pt-2\">\n            <div class=\"mb-2\">Congratulations!</div>
+        <div class=\"bw-dialog-container shiny-border\">\n          <div class=\"p-3 pt-2\">\n            <div class=\"mb-2\">Congratulations!</div>
             <div class=\"mb-2\">Final score: <strong class=\"text-success\">{state.score}</strong></div>
             <div class=\"mb-2\">Time: <strong>{timer_str}</strong></div>
             <div class=\"mb-2\">Tier: <strong>{compute_tier(state.score)}</strong></div>
@@ -1243,7 +1224,7 @@ def run_app():
         _render_grid(state, st.session_state.letter_map, show_grid_ticks=st.session_state.get("show_grid_ticks", True))
         st.button("New Game", width=125, on_click=_new_game, key="new_game_btn")
 
-    # End condition (only show overlay if not dismissed)
+    # End condition (only show overlay if dismissed)
     state = _to_state()
     if is_game_over(state) and not st.session_state.get("hide_gameover_overlay", False):
         _render_game_over(state)