Layout Update

battlewords/ui.py

@@ -10,6 +10,88 @@ from .logic import build_letter_map, reveal_cell, guess_word, is_game_over, comp
 from .models import Coord, GameState, Puzzle
 
 
+CoordLike = Tuple[int, int]
+
+
+def _coord_to_xy(c) -> CoordLike:
+    # Supports dataclass Coord(x, y) or a 2-tuple/list.
+    if hasattr(c, "x") and hasattr(c, "y"):
+        return int(c.x), int(c.y)
+    if isinstance(c, (tuple, list)) and len(c) == 2:
+        return int(c[0]), int(c[1])
+    raise TypeError(f"Unsupported Coord type: {type(c)!r}")
+
+
+def _normalize_revealed(revealed: Iterable) -> set[CoordLike]:
+    return {(_coord_to_xy(c) if not (isinstance(c, tuple) and len(c) == 2 and isinstance(c[0], int)) else c) for c in revealed}
+
+
+def _build_letter_map(puzzle) -> dict[CoordLike, str]:
+    letters: dict[CoordLike, str] = {}
+    for w in getattr(puzzle, "words", []):
+        text = getattr(w, "text", "")
+        cells = getattr(w, "cells", [])
+        for i, c in enumerate(cells):
+            xy = _coord_to_xy(c)
+            if 0 <= i < len(text):
+                letters[xy] = text[i]
+    return letters
+
+
+def inject_styles() -> None:
+    st.markdown(
+        """
+        <style>
+          .bw-row { display: flex; gap: 4px; flex-wrap: nowrap; }
+          .bw-cell {
+            width: 100%;
+            aspect-ratio: 1 / 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #3a3a3a;
+            border-radius: 4px;
+            font-weight: 700;
+            user-select: none;
+          }
+          .bw-cell.letter { background: #1e1e1e; color: #eaeaea; }
+          .bw-cell.empty  { background: #0f0f0f; }
+          div[data-testid="stButton"] button {
+            width: 100%;
+            aspect-ratio: 1 / 1;
+            border-radius: 4px;
+            border: 1px solid #3a3a3a;
+          }
+          /* Mobile styles */
+          @media (max-width: 640px) {
+            /* stColumns: force 100% width and column-reverse for radar */
+            div[data-testid="stHorizontalBlock"] {
+              # flex-direction: column-reverse !important;
+              width: 100% !important;
+              max-width: 100vw !important;
+            }
+            div[data-testid="column"] {
+              width: 100% !important;
+              min-width: 100% !important;
+              max-width: 100vw !important;
+              flex: 1 1 100% !important;
+            }
+            div[data-testid="stLayoutWrapper"] .stHorizontalBlock div[data-testid="stColumn"]:first-child {
+                min-width: calc(8.33333% - 1rem) !important;
+            }
+            /* Prevent grid from wrapping */
+            .bw-row {
+              flex-wrap: nowrap !important;
+              width: 100vw !important;
+              overflow-x: auto;
+            }
+          }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
 def _init_session() -> None:
     if "initialized" in st.session_state and st.session_state.initialized:
         return
@@ -63,6 +145,7 @@ def _render_header():
         "- Grid is 12×12 with 6 words (two 4-letter, two 5-letter, two 6-letter).\n"
         "- After each reveal, you may submit one guess.\n"
         "- Scoring: length + unrevealed letters of that word at guess time.")
+    inject_styles()
 
 
 def _render_sidebar():

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "battlewords"
 version = "0.1.0"
-description = "Add your description here"
+description = "BattleWords vocabulary game"
 readme = "README.md"
 requires-python = ">=3.13"
 dependencies = [