Refactor UI and enhance styling for score panel

Updated the version to 0.1.12. Added new CSS classes `.bold-text` and `.blue-background` for improved text and background styling. Modified `.shiny-border` to adjust padding and border-radius for a more polished appearance.

Refactored `_render_score_panel` to replace the `st.expander`-based layout with an HTML-based table, introducing independent column backgrounds, visible gaps, and a new "extra points" calculation. Added a total row with enhanced styling.

Reorganized `run_app` for better layout structure and removed redundant state assignment.

README.md

@@ -104,6 +104,11 @@ docker run -p 8501:8501 battlewords
 4. **The game ends when all six words are found or all word letters are revealed. Your score tier is displayed.**
 
 ## Changelog
+- 0.1.12
+  - Updated the version to 0.1.12. Added new CSS classes `.bold-text` and `.blue-background` for improved text and background styling. Modified `.shiny-border` to adjust padding and border-radius for a more polished appearance.
+  - Refactored `_render_score_panel` to replace the `st.expander`-based layout with an HTML-based table, introducing independent column backgrounds, visible gaps, and a new "extra points" calculation. Added a total row with enhanced styling.
+  - Reorganized `run_app` for better layout structure and removed redundant state assignment.
+  
 - 0.1.11
   - Added game-ending condition: the game now ends when all six words are guessed or all word letters are revealed.
   - implemented word spacing logic to prevent adjacent partial words and allow for future enhancements like overlaps.

battlewords/__init__.py

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

battlewords/ui.py

@@ -230,6 +230,13 @@ def inject_styles() -> None:
             }
           }
 
+        .bold-text { 
+          font-weight: 700;
+        }
+        .blue-background {
+            background:#1d64c8;
+            opacity:0.9;
+        }
         .metal-border {
           position: relative;
           padding: 20px;
@@ -242,10 +249,10 @@ def inject_styles() -> None:
 
         .shiny-border {
           position: relative;
-          padding: 20px;
+          padding: 12px;
           background: #333;
           color: white;
-          border-radius: 8px;
+          border-radius: 1.25rem;
           overflow: hidden;
         }
 
@@ -835,22 +842,42 @@ def _render_score_panel(state: GameState):
     if is_game_over(state):
         _render_game_over(state)
     else:
-        with st.expander("Game summary", expanded=True):
-            header_cols = st.columns([1, 1, 1])
-            header_cols[0].markdown("**Word**")
-            header_cols[1].markdown("**Letters**")
-            header_cols[2].markdown("**Extra**")
-            for w in state.puzzle.words:
-                pts = state.points_by_word.get(w.text, 0)
-                if pts > 0 or state.game_mode=="too easy":
-                    word_display = w.text 
-                    letters_display = str(len(w.text))
-                    extra_display = f"+{pts} points"
-                    row_cols = st.columns([1, 1, 1])
-                    row_cols[0].markdown(f"{word_display}")
-                    row_cols[1].markdown(f"{letters_display}")
-                    row_cols[2].markdown(f"{extra_display}")
-            st.markdown(f"**Total**: {state.score}")
+        # Build a simple table with independent column backgrounds and visible gaps
+        rows_html = []
+        # Header row
+        header_html = (
+            "<tr>"
+            "<th class=\"blue-background bold-text\">Word</th>"
+            "<th class=\"blue-background bold-text\">Letters</th>"
+            "<th class=\"blue-background bold-text\">Extra</th>"
+            "</tr>"
+        )
+        rows_html.append(header_html)
+
+        for w in state.puzzle.words:
+            pts = state.points_by_word.get(w.text, 0)
+            if pts > 0 or state.game_mode == "too easy":
+                word_display = w.text
+                letters_display = len(w.text)
+                # Extra = total points for the word minus its length (bonus earned)
+                extra_pts = max(0, pts - letters_display)
+                row_html = (
+                    "<tr>"
+                    f"<td class=\"blue-background \">{word_display}</td>"
+                    f"<td class=\"blue-background \">{letters_display}</td>"
+                    f"<td class=\"blue-background \">{extra_pts}</td>"
+                    "</tr>"
+                )
+                rows_html.append(row_html)
+        total_row_html = (f"<tr class=\"blue-background\"><td colspan='3'><h3 class=\"bold-text\">Total: {state.score}</h3></td></tr>")
+        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(table_html, unsafe_allow_html=True)
+        
 
 
 def _render_game_over(state: GameState):
@@ -915,10 +942,6 @@ def run_app():
     # Anchor to target the main two-column layout for mobile reversal
     st.markdown('<div id="bw-main-anchor"></div>', unsafe_allow_html=True)
     left, right = st.columns([2, 2], gap="medium")
-    with left:
-        _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")
-
     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))    
         one, two = st.columns([1, 3], gap="medium")
@@ -929,6 +952,9 @@ def run_app():
             _render_guess_form(state)
         #st.divider()        
         _render_score_panel(state)
+    with left:
+        _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