Use real images for FancyStageBanner

app/components/tournament/FancyStageBanner.tsx

@@ -1,7 +1,11 @@
 import * as React from "react";
 import type { Mode } from "@prisma/client";
 import { modesShortToLong } from "~/constants";
-import { modeToImageUrl } from "~/utils";
+import {
+  modeToImageUrl,
+  MyCSSProperties,
+  stageNameToBannerImageUrl,
+} from "~/utils";
 import clsx from "clsx";
 
 export function FancyStageBanner({
@@ -15,12 +19,17 @@ export function FancyStageBanner({
   infos?: JSX.Element[];
   children?: React.ReactNode;
 }) {
+  const style: MyCSSProperties = {
+    "--_tournament-bg-url": `url("${stageNameToBannerImageUrl(stage.name)}")`,
+  };
+
   return (
     <>
       <div
         className={clsx("tournament-bracket__stage-banner", {
           rounded: !infos,
         })}
+        style={style}
       >
         <div className="tournament-bracket__stage-banner__top-bar">
           <h4 className="tournament-bracket__stage-banner__top-bar__header">

app/routes/to/$organization.$tournament.tsx

@@ -130,7 +130,6 @@ export default function TournamentPage() {
     "--tournaments-bg": data.bannerBackground,
     "--tournaments-text": data.CSSProperties.text,
     "--tournaments-text-transparent": data.CSSProperties.textTransparent,
-    // todo: could make a TS helper type for this that checks for leading --
   };
 
   const linksContainerStyle: MyCSSProperties = {

app/styles/tournament-bracket.css

@@ -19,9 +19,7 @@
   height: 10rem;
   flex-direction: column;
   justify-content: space-between;
-
-  /* TODO: */
-  background-image: url("https://pbs.twimg.com/media/DoAV42MXsAAtHCh?format=jpg&name=large");
+  background-image: var(--_tournament-bg-url);
   background-position: center;
   border-start-end-radius: var(--rounded);
   border-start-start-radius: var(--rounded);

app/utils/index.ts

@@ -59,6 +59,11 @@ export function stageNameToImageUrl(name: string) {
   return `/img/stages/${name.replaceAll(" ", "-").toLowerCase()}.webp`;
 }
 
+export function stageNameToBannerImageUrl(name: string) {
+  // TODO: webp
+  return `/img/stage-banners/${name.replaceAll(" ", "-").toLowerCase()}.png`;
+}
+
 export function modeToImageUrl(mode: Mode) {
   return `/img/modes/${mode}.webp`;
 }
@@ -124,10 +129,12 @@ export type MyReducerAction<
     }
   : { type: K };
 
+// TODO: make everything start with _ like _tournament-bg-url to avoid collision with global css vars
 export interface MyCSSProperties extends CSSProperties {
   "--tournaments-bg"?: string;
   "--tournaments-text"?: string;
   "--tournaments-text-transparent"?: string;
+  "--_tournament-bg-url"?: string;
   "--action-section-icon-color"?: string;
   "--brackets-columns"?: number;
   "--brackets-max-matches"?: number;