feat(ui): create dedicated UI modules

jonathan-irvin · claude · jonathan-irvin · commit 8cbabe345630 · 2025-03-02T14:48:36.000-06:00
Extract UI-related functionality into separate files: - Create components.py for reusable UI elements - Create board_view.py for board rendering - Create pages.py for page definitions and handlers - Create styling.py for style-related functions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/src/ui/__init__.py b/src/ui/__init__.py
@@ -0,0 +1 @@
+# UI components package initialization
diff --git a/src/ui/board_view.py b/src/ui/board_view.py
@@ -0,0 +1,86 @@
+# Board UI construction
+from nicegui import ui
+import logging
+from typing import Dict, Callable, List, Tuple, Any
+
+from src.config.constants import (
+    FREE_SPACE_TEXT, FREE_SPACE_TEXT_COLOR,
+    TILE_CLICKED_BG_COLOR, TILE_CLICKED_TEXT_COLOR,
+    TILE_UNCLICKED_BG_COLOR, TILE_UNCLICKED_TEXT_COLOR
+)
+from src.config.styles import (
+    GRID_CONTAINER_CLASS, GRID_CLASSES, CARD_CLASSES,
+    LABEL_CLASSES, LABEL_SMALL_CLASSES
+)
+from src.utils.text_processing import split_phrase_into_lines
+from src.ui.styling import get_line_style_for_lines
+from src.utils.javascript import run_fitty_js
+
+def build_board(parent, board: List[List[str]], clicked_tiles: set, tile_buttons_dict: dict, on_tile_click: Callable):
+    """Build the Bingo board UI."""
+    with parent:
+        with ui.element("div").classes(GRID_CONTAINER_CLASS):
+            with ui.grid(columns=5).classes(GRID_CLASSES):
+                for row_idx, row in enumerate(board):
+                    for col_idx, phrase in enumerate(row):
+                        card = ui.card().classes(CARD_CLASSES).style("cursor: pointer;")
+                        labels_list = []  # initialize list for storing label metadata
+                        
+                        with card:
+                            with ui.column().classes("flex flex-col items-center justify-center gap-0 w-full"):
+                                default_text_color = FREE_SPACE_TEXT_COLOR if phrase.upper() == FREE_SPACE_TEXT else TILE_UNCLICKED_TEXT_COLOR
+                                lines = split_phrase_into_lines(phrase)
+                                line_count = len(lines)
+                                
+                                for line in lines:
+                                    with ui.row().classes("w-full items-center justify-center"):
+                                        base_class = LABEL_SMALL_CLASSES if len(line) <= 3 else LABEL_CLASSES
+                                        lbl = ui.label(line).classes(base_class).style(
+                                            get_line_style_for_lines(line_count, default_text_color)
+                                        )
+                                        labels_list.append({
+                                            "ref": lbl,
+                                            "base_classes": base_class,
+                                            "base_style": get_line_style_for_lines(line_count, default_text_color)
+                                        })
+                                        
+                        tile_buttons_dict[(row_idx, col_idx)] = {"card": card, "labels": labels_list}
+                        
+                        if phrase.upper() == FREE_SPACE_TEXT:
+                            clicked_tiles.add((row_idx, col_idx))
+                            card.style(f"color: {FREE_SPACE_TEXT_COLOR}; border: none; outline: 3px solid {TILE_CLICKED_TEXT_COLOR};")
+                        else:
+                            card.on("click", lambda e, r=row_idx, c=col_idx: on_tile_click(r, c))
+                            
+    return tile_buttons_dict
+
+def update_tile_styles(board: List[List[str]], clicked_tiles: set, tile_buttons_dict: dict):
+    """Update styles for each tile based on clicked state."""
+    for (r, c), tile in tile_buttons_dict.items():
+        phrase = board[r][c]
+        
+        if (r, c) in clicked_tiles:
+            new_card_style = f"background-color: {TILE_CLICKED_BG_COLOR}; color: {TILE_CLICKED_TEXT_COLOR}; border: none; outline: 3px solid {TILE_CLICKED_TEXT_COLOR};"
+            new_label_color = TILE_CLICKED_TEXT_COLOR
+        else:
+            new_card_style = f"background-color: {TILE_UNCLICKED_BG_COLOR}; color: {TILE_UNCLICKED_TEXT_COLOR}; border: none;"
+            new_label_color = TILE_UNCLICKED_TEXT_COLOR
+        
+        # Update the card style
+        tile["card"].style(new_card_style)
+        tile["card"].update()
+        
+        # Recalculate the styles for labels
+        lines = split_phrase_into_lines(phrase)
+        line_count = len(lines)
+        new_label_style = get_line_style_for_lines(line_count, new_label_color)
+        
+        # Update all label elements for this tile
+        for label_info in tile["labels"]:
+            lbl = label_info["ref"]
+            lbl.classes(label_info["base_classes"])
+            lbl.style(new_label_style)
+            lbl.update()
+    
+    # Run fitty JavaScript to resize text
+    run_fitty_js()
diff --git a/src/ui/components.py b/src/ui/components.py
@@ -0,0 +1,35 @@
+# Reusable UI components
+from nicegui import ui
+from typing import Dict, Callable, List, Tuple, Any
+
+from src.config.constants import (
+    HEADER_TEXT, HEADER_TEXT_COLOR, HEADER_FONT_FAMILY,
+    BOARD_TILE_FONT, FREE_SPACE_TEXT, FREE_SPACE_TEXT_COLOR,
+    TILE_CLICKED_BG_COLOR, TILE_CLICKED_TEXT_COLOR,
+    TILE_UNCLICKED_BG_COLOR, TILE_UNCLICKED_TEXT_COLOR
+)
+from src.config.styles import (
+    GRID_CONTAINER_CLASS, GRID_CLASSES,
+    CARD_CLASSES, LABEL_CLASSES, LABEL_SMALL_CLASSES
+)
+from src.utils.text_processing import split_phrase_into_lines
+from src.ui.styling import get_line_style_for_lines
+
+def create_header():
+    """Create the application header."""
+    with ui.element("div").classes("w-full"):
+        ui.label(f"{HEADER_TEXT}").classes("fit-header text-center").style(
+            f"font-family: {HEADER_FONT_FAMILY}; color: {HEADER_TEXT_COLOR};"
+        )
+
+def create_board_controls(on_reset: Callable, on_new_board: Callable, seed_text: str):
+    """Create board control buttons."""
+    with ui.row().classes("w-full mt-4 items-center justify-center gap-4"):
+        with ui.button("", icon="refresh", on_click=on_reset).classes("rounded-full w-12 h-12") as reset_btn:
+            ui.tooltip("Reset Board")
+        with ui.button("", icon="autorenew", on_click=on_new_board).classes("rounded-full w-12 h-12") as new_board_btn:
+            ui.tooltip("New Board")
+        seed_label = ui.label(f"Seed: {seed_text}").classes("text-sm text-center").style(
+            f"font-family: '{BOARD_TILE_FONT}', sans-serif; color: {TILE_UNCLICKED_BG_COLOR};"
+        )
+    return seed_label
diff --git a/src/ui/pages.py b/src/ui/pages.py
@@ -0,0 +1,118 @@
+# Page definitions
+from nicegui import ui
+import logging
+from typing import Dict, Tuple, List, Set, Any
+
+from src.config.constants import (
+    HOME_BG_COLOR, STREAM_BG_COLOR
+)
+from src.core.board import (
+    board, clicked_tiles, board_views, 
+    generate_board, reset_board, generate_new_board,
+    toggle_tile, today_seed
+)
+from src.core.win_patterns import check_winner, process_win_notifications
+from src.core.phrases import check_phrases_file_change
+from src.ui.styling import setup_head
+from src.ui.components import create_header, create_board_controls
+from src.ui.board_view import build_board, update_tile_styles
+from src.utils.javascript import setup_javascript, run_fitty_js
+
+# Global variable for the seed label
+seed_label = None
+
+def toggle_tile_handler(row: int, col: int):
+    """Handle tile click events."""
+    toggle_tile(row, col)
+    
+    # Check for win conditions
+    new_patterns = check_winner(clicked_tiles)
+    process_win_notifications(new_patterns)
+    
+    # Update all board views
+    sync_board_state()
+
+def sync_board_state():
+    """Synchronize the board state across all views."""
+    try:
+        # Update tile styles in every board view
+        for view_key, (container, tile_buttons_local) in board_views.items():
+            update_tile_styles(board, clicked_tiles, tile_buttons_local)
+            container.update()
+        
+        # Run fitty to resize text
+        run_fitty_js()
+    except Exception as e:
+        logging.debug(f"Error in sync_board_state: {e}")
+
+def create_board_view(background_color: str, is_global: bool):
+    """Create a board view (home or stream)."""
+    # Setup page head elements
+    setup_head(background_color)
+    setup_javascript()
+    
+    # Create header
+    create_header()
+    
+    # Create board container
+    if is_global:
+        container = ui.element("div").classes("home-board-container flex justify-center items-center w-full")
+        try:
+            ui.run_javascript("document.querySelector('.home-board-container').id = 'board-container'")
+        except Exception as e:
+            logging.debug(f"Setting board container ID failed: {e}")
+    else:
+        container = ui.element("div").classes("stream-board-container flex justify-center items-center w-full")
+        try:
+            ui.run_javascript("document.querySelector('.stream-board-container').id = 'board-container-stream'")
+        except Exception as e:
+            logging.debug(f"Setting stream container ID failed: {e}")
+    
+    if is_global:
+        # For home view, use global state
+        global seed_label
+        tile_buttons_dict = {}
+        build_board(container, board, clicked_tiles, tile_buttons_dict, toggle_tile_handler)
+        board_views["home"] = (container, tile_buttons_dict)
+        
+        # Add phrase file watcher
+        try:
+            check_timer = ui.timer(1, check_phrases_file_change)
+        except Exception as e:
+            logging.warning(f"Error setting up timer: {e}")
+        
+        # Add board controls
+        seed_label = create_board_controls(reset_board, generate_new_board, today_seed)
+    else:
+        # For stream view, create local state
+        local_tile_buttons = {}
+        build_board(container, board, clicked_tiles, local_tile_buttons, toggle_tile_handler)
+        board_views["stream"] = (container, local_tile_buttons)
+
+@ui.page("/")
+def home_page():
+    """Home page with interactive board."""
+    create_board_view(HOME_BG_COLOR, True)
+    try:
+        # Create a timer that deactivates when the client disconnects
+        timer = ui.timer(0.1, sync_board_state)
+    except Exception as e:
+        logging.warning(f"Error creating timer: {e}")
+
+@ui.page("/stream")
+def stream_page():
+    """Stream overlay page."""
+    create_board_view(STREAM_BG_COLOR, False)
+    try:
+        # Create a timer that deactivates when the client disconnects
+        timer = ui.timer(0.1, sync_board_state)
+    except Exception as e:
+        logging.warning(f"Error creating timer: {e}")
+
+def setup_pages():
+    """Initialize all pages."""
+    # Make sure the page routes are registered
+    # The decorators should handle registration, but we include the functions here
+    # to ensure they're imported properly
+    home_page
+    stream_page
diff --git a/src/ui/styling.py b/src/ui/styling.py
@@ -0,0 +1,57 @@
+# UI styling functions
+from nicegui import ui
+from src.config.constants import (
+    BOARD_TILE_FONT, BOARD_TILE_FONT_WEIGHT, 
+    BOARD_TILE_FONT_STYLE
+)
+
+def get_line_style_for_lines(line_count: int, text_color: str) -> str:
+    """Return a style string with adjusted line-height based on line count."""
+    if line_count == 1:
+        lh = "1.5em"  # More spacing for a single line
+    elif line_count == 2:
+        lh = "1.2em"  # Slightly reduced spacing for two lines
+    elif line_count == 3:
+        lh = "0.9em"  # Even tighter spacing for three lines
+    else:
+        lh = "0.7em"  # For four or more lines
+        
+    return f"font-family: '{BOARD_TILE_FONT}', sans-serif; font-weight: {BOARD_TILE_FONT_WEIGHT}; font-style: {BOARD_TILE_FONT_STYLE}; padding: 0; margin: 0; color: {text_color}; line-height: {lh};"
+
+def get_google_font_css(font_name: str, weight: str, style: str, uniquifier: str) -> str:
+    """Generate CSS for the specified Google font."""
+    return f"""
+<style>
+.{uniquifier} {{
+  font-family: "{font_name}", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: {weight};
+  font-style: {style};
+}}
+</style>
+"""
+
+def setup_head(background_color: str):
+    """Set up common page head elements."""
+    # Add Super Carnival font
+    ui.add_css("""
+        @font-face {
+            font-family: 'Super Carnival';
+            font-style: normal;
+            font-weight: 400;
+            src: url('/static/Super%20Carnival.woff') format('woff');
+        }
+    """)
+    
+    # Add Google Fonts
+    ui.add_head_html(f"""
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family={BOARD_TILE_FONT.replace(" ", "+")}&display=swap" rel="stylesheet">
+    """)
+    
+    # Add CSS class for board tile fonts
+    ui.add_head_html(get_google_font_css(BOARD_TILE_FONT, BOARD_TILE_FONT_WEIGHT, BOARD_TILE_FONT_STYLE, "board_tile"))
+    
+    # Set background color
+    ui.add_head_html(f'<style>body {{ background-color: {background_color}; }}</style>')
