UI update 0.1.3 - Radar screen v2

battlewords/__init__.py

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

battlewords/ui.py

@@ -3,7 +3,8 @@ from . import __version__ as version
 from typing import Iterable, Tuple, Optional
 
 import matplotlib.pyplot as plt
-import streamlit as st
+import tempfile
+import os
 
 from .generator import generate_puzzle, sort_word_file
 from .logic import build_letter_map, reveal_cell, guess_word, is_game_over, compute_tier
@@ -106,7 +107,7 @@ def inject_styles() -> None:
           }
           .bw-grid-row-anchor { height: 0; margin: 0; padding: 0; }
           .st-emotion-cache-1n6tfoc {  
-            background: linear-gradient(-45deg, #a1a1a1, #ffffff, #a1a1a1, #666666);;
+            background: linear-gradient(-45deg, #a1a1a1, #ffffff, #a1a1a1, #666666);
             gap: 0.1rem !important;
             color: white;
             # border: 10px solid;
@@ -288,7 +289,13 @@ def _render_sidebar():
             st.info("No word lists found in words/ directory. Using built-in fallback.")
 
 
-def _render_radar(puzzle: Puzzle, size: int):
+def _render_radar(puzzle: Puzzle, size: int, r_max: float = 0.85, max_frames: int = 30, sinusoid_expand: bool = True, stagger_radar: bool = False):
+    import numpy as np
+    import matplotlib.pyplot as plt
+    from matplotlib.animation import FuncAnimation, PillowWriter
+    from matplotlib.patches import Circle
+    from matplotlib import colors as mcolors
+
     st.markdown(
         """
         <style>
@@ -301,25 +308,112 @@ def _render_radar(puzzle: Puzzle, size: int):
         unsafe_allow_html=True,
     )
     st.subheader("Score Board")
-    fig, ax = plt.subplots(figsize=(4, 4))
-    xs = [c.y + 1 for c in puzzle.radar]  # columns on x-axis
-    ys = [c.x + 1 for c in puzzle.radar]  # rows on y-axis
-    ax.scatter(xs, ys, c="red", s=60, marker="o")
-    ax.set_xlim(0.5, size)
-    ax.set_ylim(size, 0)
+
+    # Radar blip positions
+    xs = np.array([c.y + 1 for c in puzzle.radar])
+    ys = np.array([c.x + 1 for c in puzzle.radar])
+    n_points = len(xs)
+
+    # Animation parameters (in data units)
+    r_min = 0.15
+    ring_linewidth = 4  # thickness of the ring stroke
+
+    fig, ax = plt.subplots(figsize=(3, 3))
+    ax.set_xlim(0.2, size)
+    ax.set_ylim(size, 0.2)
     ax.set_xticks(range(1, size + 1))
     ax.set_yticks(range(1, size + 1))
     ax.grid(True, which="both", linestyle="--", alpha=0.3)
-    ax.set_title("Radar")
-    st.pyplot(fig, width="stretch")
-    plt.close(fig)
+    # ax.set_title("Radar")
+    ax.set_aspect('equal', adjustable='box')
+
+    # Build a linear gradient background on the figure (outside the main axes)
+    def _make_linear_gradient(width: int, height: int, angle_deg: float,
+                              colors_hex: list[str], stops: list[float]) -> np.ndarray:
+        yy, xx = np.meshgrid(np.linspace(0, 1, height), np.linspace(0, 1, width), indexing='ij')
+        theta = np.deg2rad(angle_deg)
+        proj = np.cos(theta) * xx + np.sin(theta) * yy
+        # Normalize projection to [0,1] using corner extrema
+        corners = np.array([[0, 0], [1, 0], [0, 1], [1, 1]], dtype=float)
+        pc = np.cos(theta) * corners[:, 0] + np.sin(theta) * corners[:, 1]
+        proj = (proj - pc.min()) / (pc.max() - pc.min() + 1e-12)
+        proj = np.clip(proj, 0.0, 1.0)
+
+        stop_arr = np.asarray(stops, dtype=float)
+        cols = np.asarray([mcolors.to_rgb(c) for c in colors_hex], dtype=float)
+
+        # For each pixel pick the interval and interpolate colors
+        j = np.clip(np.searchsorted(stop_arr, proj, side='right') - 1, 0, len(stop_arr) - 2)
+        a = stop_arr[j]
+        b = stop_arr[j + 1]
+        w = ((proj - a) / (b - a + 1e-12))[..., None]
+        c0 = cols[j]
+        c1 = cols[j + 1]
+        img = (1.0 - w) * c0 + w * c1
+        return img
+
+    # Size gradient to the rendered figure pixel size
+    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,
+        angle_deg=-45.0,
+        colors_hex=['#a1a1a1', '#ffffff', '#a1a1a1', '#666666'],
+        stops=[0.0, 1.0 / 3.0, 2.0 / 3.0, 1.0],
+    )
+    # Background axes that spans the whole figure (zorder below main axes)
+    bg_ax = fig.add_axes([0, 0, 1, 1], zorder=0)
+    bg_ax.imshow(grad_img, aspect='auto', interpolation='bilinear')
+    bg_ax.axis('off')
+
+    # Main axes above the background, with solid interior color for the radar grid
+    ax.set_facecolor('#4b7bc4')  # interior of the radar
+    ax.set_zorder(1)
+
+    # Create ring (annulus-like) patches for each radar blip using Circle with stroke
+    rings: list[Circle] = []
+    for x, y in zip(xs, ys):
+        ring = Circle((x, y), radius=r_min, fill=False, edgecolor='#9ceffe', linewidth=ring_linewidth, alpha=1.0, zorder=2)
+        ax.add_patch(ring)
+        rings.append(ring)
+
+    def update(frame):
+        if sinusoid_expand:
+            phase = 2 * np.pi * frame / max_frames
+            r = r_min + (r_max - r_min) * (0.5 + 0.5 * np.sin(phase))
+            alpha = 0.5 + 0.5 * np.cos(phase)
+            for ring in rings:
+                ring.set_radius(r)
+                ring.set_alpha(alpha)
+        else:
+            base_t = (frame % max_frames) / max_frames
+            offset = max(1, max_frames // max(1, n_points)) if stagger_radar else 0
+            for idx, ring in enumerate(rings):
+                t_i = ((frame + idx * offset) % max_frames) / max_frames if stagger_radar else base_t
+                r_i = r_min + (r_max - r_min) * t_i
+                alpha_i = 1.0 - t_i
+                ring.set_radius(r_i)
+                ring.set_alpha(alpha_i)
+        return rings
+
+    ani = FuncAnimation(fig, update, frames=max_frames, interval=50, blit=True)
+
+    # Save animation to a temporary GIF file
+    with tempfile.NamedTemporaryFile(suffix=".gif", delete=False) as tmpfile:
+        ani.save(tmpfile.name, writer=PillowWriter(fps=20))
+        plt.close(fig)
+        # Read the GIF into memory
+        tmpfile.seek(0)
+        gif_bytes = tmpfile.read()
+    st.image(gif_bytes, width='stretch')
+    os.unlink(tmpfile.name)  # Now safe to delete
 
 
 def _render_grid(state: GameState, letter_map):
     size = state.grid_size
     clicked: Optional[Coord] = None
 
-    # Inject CSS for grid lines and button styling
+    # Inject CSS for grid lines
     st.markdown(
         """
         <style>
@@ -344,6 +438,14 @@ def _render_grid(state: GameState, letter_map):
         .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] {
             margin: 2px 0 !important;
         }
+        .st-emotion-cache-14d5v98 {
+            position:relative;
+        }
+        .st-emotion-cache-7czcpc > img {
+            border-radius: 1.25rem;
+            max-width:300px !important;
+            margin: 0 auto !important;
+        }
         </style>
         """,
         unsafe_allow_html=True,
@@ -412,11 +514,15 @@ def _render_score_panel(state: GameState):
         st.metric("Score", state.score)
     with col2:
         st.markdown(f"Last action: {state.last_action}")
-    with st.expander("Game summary", expanded=True):
-        for w in state.puzzle.words:
-            pts = state.points_by_word.get(w.text, 0)
-            st.markdown(f"- {w.text} ({len(w.text)}): +{pts} points")
-        st.markdown(f"**Total**: {state.score}")
+    if is_game_over(state):
+        _render_game_over(state)
+    else:
+        with st.expander("Game summary", expanded=True):
+            for w in state.puzzle.words:
+                pts = state.points_by_word.get(w.text, 0)
+                if pts > 0:
+                    st.markdown(f"- {w.text} ({len(w.text)}): +{pts} points")
+            st.markdown(f"**Total**: {state.score}")
 
 
 def _render_game_over(state: GameState):
@@ -469,12 +575,12 @@ def run_app():
     left, right = st.columns([2, 2], gap="medium")
     with left:
         _render_grid(state, st.session_state.letter_map)
+        st.divider()
+        _render_guess_form(state)
     with right:
-        _render_radar(state.puzzle, size=state.grid_size)
+        _render_radar(state.puzzle, size=state.grid_size, r_max=1.6, max_frames=60, sinusoid_expand=False, stagger_radar=True)
         _render_score_panel(state)
 
-    st.divider()
-    _render_guess_form(state)
 
     # End condition
     state = _to_state()