From 25972a6f073c2e2c8d7b7b1ac112de100e656c45 Mon Sep 17 00:00:00 2001 From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com> Date: Sun, 23 Jan 2022 00:51:39 +0200 Subject: [PATCH] Use real images for FancyStageBanner --- .../tournament/FancyStageBanner.tsx | 11 ++++++++++- app/routes/to/$organization.$tournament.tsx | 1 - app/styles/tournament-bracket.css | 4 +--- app/utils/index.ts | 7 +++++++ public/img/stage-banners/ancho-v-games.png | Bin 0 -> 444124 bytes public/img/stage-banners/arowana-mall.png | Bin 0 -> 424283 bytes .../stage-banners/blackbelly-skatepark.png | Bin 0 -> 1702605 bytes public/img/stage-banners/camp-triggerfish.png | Bin 0 -> 498121 bytes public/img/stage-banners/goby-arena.png | Bin 0 -> 464794 bytes .../img/stage-banners/humpback-pump-track.png | Bin 0 -> 1634274 bytes .../img/stage-banners/inkblot-art-academy.png | Bin 0 -> 1312485 bytes public/img/stage-banners/kelp-dome.png | Bin 0 -> 534836 bytes public/img/stage-banners/makomart.png | Bin 0 -> 413333 bytes public/img/stage-banners/manta-maria.png | Bin 0 -> 1469176 bytes public/img/stage-banners/moray-towers.png | Bin 0 -> 426398 bytes .../img/stage-banners/musselforge-fitness.png | Bin 0 -> 555657 bytes .../img/stage-banners/new-albacore-hotel.png | Bin 0 -> 501750 bytes public/img/stage-banners/piranha-pit.png | Bin 0 -> 472069 bytes public/img/stage-banners/port-mackerel.png | Bin 0 -> 471910 bytes .../stage-banners/shellendorf-institute.png | Bin 0 -> 467735 bytes public/img/stage-banners/skipper-pavilion.png | Bin 0 -> 407000 bytes public/img/stage-banners/snapper-canal.png | Bin 0 -> 457402 bytes .../img/stage-banners/starfish-mainstage.png | Bin 0 -> 452162 bytes .../img/stage-banners/sturgeon-shipyard.png | Bin 0 -> 384378 bytes public/img/stage-banners/the-reef.png | Bin 0 -> 495993 bytes public/img/stage-banners/wahoo-world.png | Bin 0 -> 583521 bytes .../img/stage-banners/walleye-warehouse.png | Bin 0 -> 559179 bytes 27 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 public/img/stage-banners/ancho-v-games.png create mode 100644 public/img/stage-banners/arowana-mall.png create mode 100644 public/img/stage-banners/blackbelly-skatepark.png create mode 100644 public/img/stage-banners/camp-triggerfish.png create mode 100644 public/img/stage-banners/goby-arena.png create mode 100644 public/img/stage-banners/humpback-pump-track.png create mode 100644 public/img/stage-banners/inkblot-art-academy.png create mode 100644 public/img/stage-banners/kelp-dome.png create mode 100644 public/img/stage-banners/makomart.png create mode 100644 public/img/stage-banners/manta-maria.png create mode 100644 public/img/stage-banners/moray-towers.png create mode 100644 public/img/stage-banners/musselforge-fitness.png create mode 100644 public/img/stage-banners/new-albacore-hotel.png create mode 100644 public/img/stage-banners/piranha-pit.png create mode 100644 public/img/stage-banners/port-mackerel.png create mode 100644 public/img/stage-banners/shellendorf-institute.png create mode 100644 public/img/stage-banners/skipper-pavilion.png create mode 100644 public/img/stage-banners/snapper-canal.png create mode 100644 public/img/stage-banners/starfish-mainstage.png create mode 100644 public/img/stage-banners/sturgeon-shipyard.png create mode 100644 public/img/stage-banners/the-reef.png create mode 100644 public/img/stage-banners/wahoo-world.png create mode 100644 public/img/stage-banners/walleye-warehouse.png diff --git a/app/components/tournament/FancyStageBanner.tsx b/app/components/tournament/FancyStageBanner.tsx index 90004547a..0ac7a74ef 100644 --- a/app/components/tournament/FancyStageBanner.tsx +++ b/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 ( <>
xjP2gWdkF0+e=;z-4hDm`JP52ji_csM&N%n9po!~x4lUn9FK7=TDFBgm zNu!LFA+n^|#o|6g7CzTV=^ft6Mz0g@jl>$MRo2j5y?LP=A3jtbd+=oW_P4%QzVX7h z%RbV>W}5_X+qxABOkdt!0tV=&3b*2~YyMia+qGG;HR*)olCz{E-?nu}JT|IhdZgNfyNEmP$z>l+s$)L`OX;Bu-j51{3L77BR=P7d zW>z-Rk-LE-p0hPVb7aV_ry1F1=o!Qog$Z7Q!;L+!5absSO!X8EQki{7S K z(i-g` d#jpduWIs&sUb~|5lMx?GnOM)0;#) )Sfhq^&2)?Mi5K-rB!Z5VlIjg;XvkrcH 76M=*%$4fgxnc%L;6nUU8JzpwrI*O_-;F1s=8xXwzs!1`Rz_>F)5 zd*z7_e<(>LoZlZHRM@04&P&JPop;{J*|{w58e`p*iNkE^Ah>bw0H!MWi5!Do4?#o6 z$Mm}23Vg!%Hq9B|y9dYacMA;+#RG8%IEe3?pUZn(&7kr_T-37~_)@<5M|0G&ECXHv z%^yQCG@pa}%0 Q9R!${0Fk)l zIUePpy$q5 zvB=bocR>)XE?$pSfbWLFm{g*-*YFpRfbXtpnVScZutH4};^CwYx`I6RtwCgCr=6%y z0CVfh5M_>9iS4I{_oN}h-z-rk_^=&XOExyN-hy-VRWFW28+ng4E!1tSHpHcOW4R2P zq7`B@FvPn|%tcaHcY3g(gRkpYTQ=B;bufE3(N5Z^rN?t0!l)K@i5M7-r+|g!)U8#_ zb~$Lm-$U|R@r=RrH Vn@@dCk&ngI1MiI!s9*W=|ZBOP* z-n)DGBJVk;>Kd3^m#(J2_tw;PiH2U*>+f7B|BO%8bHG>}qm)lukL@SjGvSl*wjl&< zL#Ww3v4`=WDd#VpFGDcS@h$!3{PW)_w+IWld+v2;0_&Gt`vW*gmRWYPd2k0hahPTv zK7O$L@b*<;23-J{OJsywLP!`U{&7i#m~e(Sr&r7V-DBkgAAGo+eg2=8_QbAo^3hY^ zAc6rnC?16Y0Sg!I|M qSm1y=1f!WS`24EAI3 zXMQ;!B>a9{OW^vo_6|ZNfo+F*OkzTm?~2FLMe(#}&IB6ZKlEsI27EvnS{sojlRSYW zC#VF>Cxim5dcvunHkdGFMz3eqVbpbhdPGj2zh3_6E8mS^J&HGf7>{1hO7)nzZ<6bR zrf#tzBZ9IUu} JjXSK zD7{@t@z2