Add hoopshype-official premium theme (#51) with bg image and custom font support

- New theme with dark carbon fiber mesh background, Futura Today font,
inside-bar labels, rectangle headshots, rounded bars, uppercase date
- Add bg_image, font_custom_dir, date_uppercase fields to Theme dataclass
- Implement background image loading (cover resize) in render.py
- Implement custom font directory resolution in FrameRenderer
- Skip code vignette when bg_image provides its own
- Set hoopshype-official as default theme in config.py and customizer
- Asset placeholders: fonts in assets/fonts/, mesh3.jpg in assets/backgrounds/
- Mirror all changes to hf_space/bar_race/

https://claude.ai/code/session_01PzSuVpJ1KAsAPLLEw75nZS

bar_race/config.py

@@ -159,7 +159,7 @@ class Config:
     watermark: str = ""
 
     # --- theme -------------------------------------------------------------
-    theme: str = "midnight-premium"
+    theme: str = "hoopshype-official"
 
     # --- visual tweaks -----------------------------------------------------
     bg_gradient: tuple[str, str] = ("#0f0c29", "#302b63")

bar_race/render.py

@@ -233,7 +233,32 @@ def _render_split_bg(
     return img
 
 
+def _load_bg_image(path: str, width: int, height: int) -> Image.Image:
+    """Load a background image, resize to cover the target dimensions."""
+    img = Image.open(path).convert("RGBA")
+    # Cover: scale so smallest dimension fills, then center-crop.
+    src_w, src_h = img.size
+    scale = max(width / src_w, height / src_h)
+    new_w = int(src_w * scale)
+    new_h = int(src_h * scale)
+    img = img.resize((new_w, new_h), Image.LANCZOS)
+    # Center crop.
+    left = (new_w - width) // 2
+    top = (new_h - height) // 2
+    return img.crop((left, top, left + width, top + height))
+
+
 def _build_background(theme: Theme, width: int, height: int) -> Image.Image:
+    # If a background image is set, use it instead of gradient.
+    if theme.bg_image:
+        bg_path = Path(theme.bg_image)
+        if not bg_path.is_absolute():
+            # Resolve relative to package root (two levels up from this file).
+            pkg_root = Path(__file__).resolve().parent.parent.parent
+            bg_path = pkg_root / bg_path
+        if bg_path.is_file():
+            return _load_bg_image(str(bg_path), width, height)
+
     colors = [_hex_to_rgb(c) for c in theme.bg_colors]
     c1 = colors[0]
     c2 = colors[1] if len(colors) > 1 else c1
@@ -814,8 +839,40 @@ class FrameRenderer:
         regular_path = cfg.font_regular
         light_path = cfg.font_light
 
+        # Custom font directory: map weights to specific font files.
+        if th.font_custom_dir:
+            custom_dir = Path(th.font_custom_dir)
+            if not custom_dir.is_absolute():
+                pkg_root = Path(__file__).resolve().parent.parent.parent
+                custom_dir = pkg_root / custom_dir
+            _custom_map = {
+                "bold": "Futura_Today_Bold.otf",
+                "medium": "Futura_Today_DemiBold.otf",
+                "regular": "Futura_Today_Normal.otf",
+                "light": "Futura_Today_Light.otf",
+            }
+            all_found = True
+            for weight, filename in _custom_map.items():
+                candidate = custom_dir / filename
+                if candidate.is_file():
+                    if weight == "bold":
+                        bold_path = str(candidate)
+                    elif weight == "medium":
+                        medium_path = str(candidate)
+                    elif weight == "regular":
+                        regular_path = str(candidate)
+                    elif weight == "light":
+                        light_path = str(candidate)
+                else:
+                    all_found = False
+            # If not all custom fonts found, fall back to standard resolution.
+            if not all_found:
+                bold_path = cfg.font_bold
+                medium_path = cfg.font_medium
+                regular_path = cfg.font_regular
+                light_path = cfg.font_light
         # Override with font_family if config used defaults (auto-resolved).
-        if family != "sans":
+        elif family != "sans":
             bold_path = _resolve_font(family, "bold")
             medium_path = _resolve_font(family, "medium")
             regular_path = _resolve_font(family, "regular")
@@ -835,7 +892,7 @@ class FrameRenderer:
 
         # Precompute background.
         self._bg = _build_background(th, self.W, self.H)
-        if th.vignette:
+        if th.vignette and not th.bg_image:
             self._bg = _apply_vignette(self._bg)
 
         # Draw static decorative elements on background.
@@ -1225,8 +1282,11 @@ class FrameRenderer:
         date_alpha = int(255 * th.date_opacity)
         date_xy = (self.W - self._margin_right - 10,
                    int(self.H * 0.93))
+        date_text = state.date_label
+        if th.date_uppercase:
+            date_text = date_text.upper()
         draw.text(
-            date_xy, state.date_label,
+            date_xy, date_text,
             fill=(*date_c, date_alpha),
             font=self.font_date, anchor="rt",
         )

bar_race/themes.py

@@ -89,6 +89,15 @@ class Theme:
     noise: bool = True
     bar_shadow: bool = True
 
+    # Background image (optional — overrides gradient when set)
+    bg_image: str = ""  # path to background image file
+
+    # Custom font directory (optional — overrides font_family when set)
+    font_custom_dir: str = ""  # directory containing custom .otf/.ttf files
+
+    # Date formatting
+    date_uppercase: bool = False  # uppercase month abbreviation (JAN vs Jan)
+
 
 # ---------------------------------------------------------------------------
 # Theme definitions
@@ -943,6 +952,39 @@ _register(
        show_grid_lines=True,
        border_frame="left-accent",
        vignette=False, noise=False, bar_shadow=False),
+
+    # 51
+    _t("hoopshype-official", "HoopsHype Official",
+       "Premium broadcast look. Dark carbon fiber mesh background with Futura Today font.",
+       bg_type="solid", bg_colors=["#1a1a1a"],
+       bg_image="assets/backgrounds/mesh3.jpg",
+       font_family="sans",
+       font_custom_dir="assets/fonts",
+       accent_color="#ffffff", accent_secondary="#888888",
+       bar_radius=6, bar_opacity=1.0,
+       bar_border=True, bar_border_width=1,
+       bar_gradient=False, bar_team_stripe=False,
+       show_highlight_strip=True, show_shadow_strip=False,
+       leader_glow=False, leader_outline=False,
+       leader_underline=False, leader_bg_highlight=False,
+       show_rank_numbers=False, rank_giant_watermark=False,
+       text_color="#ffffff", text_secondary_color="#cccccc",
+       label_case="normal",
+       label_position="inside",
+       value_suffix="",
+       title_color="#ffffff",
+       title_position="top-left",
+       date_color="#ffffff", date_opacity=0.9,
+       date_uppercase=True,
+       headshot_shape="rounded", headshot_style="rectangle",
+       headshot_border=False,
+       headshot_position="in-bar",
+       show_branding_tag=False,
+       show_accent_line=False, show_diagonal_slash=False,
+       show_court_lines=False,
+       show_background_circle=False, show_grid_lines=False,
+       border_frame="none",
+       vignette=False, noise=False, bar_shadow=False),
 )