Display GAME CLOSED message when game is closed

main.py

@@ -418,9 +418,10 @@ def sync_board_state():
                 header_label.set_text(CLOSED_HEADER_TEXT)
                 header_label.update()
 
-            # Hide all board views
+            # Show closed message in all board views
             for view_key, (container, _) in board_views.items():
-                container.style("display: none;")
+                container.clear()
+                build_closed_message(container)
                 container.update()
 
             # Make sure controls row is showing only the Start New Game button
@@ -915,9 +916,39 @@ def generate_new_board():
     reset_board()
 
 
+def build_closed_message(parent):
+    """
+    Build a message indicating the game is closed, to be displayed in place of the board.
+
+    Args:
+        parent: The parent UI element to build the message in
+    """
+    with parent:
+        with ui.element("div").classes(GRID_CONTAINER_CLASS):
+            with ui.element("div").classes(
+                "flex justify-center items-center h-full w-full"
+            ):
+                ui.label("GAME CLOSED").classes("text-center fit-header").style(
+                    f"font-family: {HEADER_FONT_FAMILY}; color: {FREE_SPACE_TEXT_COLOR}; font-size: 6rem;"
+                )
+
+    # Run JavaScript to ensure text is resized properly
+    try:
+        js_code = """
+            setTimeout(function() {
+                if (typeof fitty !== 'undefined') {
+                    fitty('.fit-header', { multiLine: true, minSize: 10, maxSize: 2000 });
+                }
+            }, 50);
+        """
+        ui.run_javascript(js_code)
+    except Exception as e:
+        logging.debug(f"JavaScript execution failed: {e}")
+
+
 def close_game():
     """
-    Close the game - hide the board and update the header text.
+    Close the game - show closed message instead of the board and update the header text.
     This function is called when the close button is clicked.
     """
     global is_game_closed, header_label
@@ -928,9 +959,10 @@ def close_game():
         header_label.set_text(CLOSED_HEADER_TEXT)
         header_label.update()
 
-    # Hide all board views (both home and stream)
+    # Show closed message in all board views
     for view_key, (container, tile_buttons_local) in board_views.items():
-        container.style("display: none;")
+        container.clear()
+        build_closed_message(container)
         container.update()
 
     # Modify the controls row to only show the New Board button

pyproject.toml

@@ -20,6 +20,7 @@ flake8 = "^7.0.0"
 black = "^24.2.0"
 isort = "^5.13.2"
 python-semantic-release = "^9.1.1"
+mypy = "^1.15.0"
 
 [build-system]
 requires = ["poetry-core>=1.8"]

src/config/constants.py

@@ -2,40 +2,53 @@
 Configuration constants for the Bingo application.
 """
 
+from typing import Final, Literal
+
+# Type definitions for CSS properties
+CssColor = str  # Hex color code like "#123456" or named color like "red"
+CssFontFamily = str  # Font family names like "'Font Name', sans-serif"
+CssFontWeight = str  # Font weight like "400", "700", etc.
+CssFontStyle = Literal["normal", "italic", "oblique"]
+CssClass = str  # CSS class name or space-separated class names
+
 # Header text and display settings
-HEADER_TEXT = "COMMIT !BINGO"
-HEADER_TEXT_COLOR = "#0CB2B3"
-CLOSED_HEADER_TEXT = "Bingo Is Closed"
+HEADER_TEXT: Final[str] = "COMMIT !BINGO"
+HEADER_TEXT_COLOR: Final[CssColor] = "#0CB2B3"
+CLOSED_HEADER_TEXT: Final[str] = "Bingo Is Closed"
+CLOSED_MESSAGE_TEXT: Final[str] = "GAME CLOSED"
+CLOSED_MESSAGE_COLOR: Final[CssColor] = "#FF7f33"
 
 # Free space settings
-FREE_SPACE_TEXT = "FREE MEAT"
-FREE_SPACE_TEXT_COLOR = "#FF7f33"
+FREE_SPACE_TEXT: Final[str] = "FREE MEAT"
+FREE_SPACE_TEXT_COLOR: Final[CssColor] = "#FF7f33"
 
 # Tile appearance settings
-TILE_CLICKED_BG_COLOR = "#100079"
-TILE_CLICKED_TEXT_COLOR = "#1BEFF5"
-TILE_UNCLICKED_BG_COLOR = "#1BEFF5"
-TILE_UNCLICKED_TEXT_COLOR = "#100079"
+TILE_CLICKED_BG_COLOR: Final[CssColor] = "#100079"
+TILE_CLICKED_TEXT_COLOR: Final[CssColor] = "#1BEFF5"
+TILE_UNCLICKED_BG_COLOR: Final[CssColor] = "#1BEFF5"
+TILE_UNCLICKED_TEXT_COLOR: Final[CssColor] = "#100079"
 
 # Page backgrounds
-HOME_BG_COLOR = "#100079"
-STREAM_BG_COLOR = "#00FF00"
+HOME_BG_COLOR: Final[CssColor] = "#100079"
+STREAM_BG_COLOR: Final[CssColor] = "#00FF00"
 
 # Font settings
-HEADER_FONT_FAMILY = "'Super Carnival', sans-serif"
-BOARD_TILE_FONT = "Inter"
-BOARD_TILE_FONT_WEIGHT = "700"
-BOARD_TILE_FONT_STYLE = "normal"
+HEADER_FONT_FAMILY: Final[CssFontFamily] = "'Super Carnival', sans-serif"
+BOARD_TILE_FONT: Final[str] = "Inter"
+BOARD_TILE_FONT_WEIGHT: Final[CssFontWeight] = "700"
+BOARD_TILE_FONT_STYLE: Final[CssFontStyle] = "normal"
 
 # UI Class Constants
-BOARD_CONTAINER_CLASS = "flex justify-center items-center w-full"
-HEADER_CONTAINER_CLASS = "w-full"
-CARD_CLASSES = (
+BOARD_CONTAINER_CLASS: Final[CssClass] = "flex justify-center items-center w-full"
+HEADER_CONTAINER_CLASS: Final[CssClass] = "w-full"
+CARD_CLASSES: Final[CssClass] = (
     "relative p-2 rounded-xl shadow-8 w-full h-full flex items-center justify-center"
 )
-COLUMN_CLASSES = "flex flex-col items-center justify-center gap-0 w-full"
-GRID_CONTAINER_CLASS = "w-full aspect-square p-4"
-GRID_CLASSES = "gap-2 h-full grid-rows-5"
-ROW_CLASSES = "w-full"
-LABEL_SMALL_CLASSES = "fit-text-small text-center select-none"
-LABEL_CLASSES = "fit-text text-center select-none"
+COLUMN_CLASSES: Final[CssClass] = (
+    "flex flex-col items-center justify-center gap-0 w-full"
+)
+GRID_CONTAINER_CLASS: Final[CssClass] = "w-full aspect-square p-4"
+GRID_CLASSES: Final[CssClass] = "gap-2 h-full grid-rows-5"
+ROW_CLASSES: Final[CssClass] = "w-full"
+LABEL_SMALL_CLASSES: Final[CssClass] = "fit-text-small text-center select-none"
+LABEL_CLASSES: Final[CssClass] = "fit-text text-center select-none"