diff --git a/.vscode/shared.code-snippets b/.vscode/shared.code-snippets index e6a480f22..454c66148 100644 --- a/.vscode/shared.code-snippets +++ b/.vscode/shared.code-snippets @@ -1,7 +1,7 @@ { "Styled component (Stitches)": { "prefix": "st", - "body": ["const S_$1 = stitchesStyled(\"$2\", {", " $0", "});"], + "body": ["const S_$1 = styled(\"$2\", {", " $0", "});"], "scope": "typescriptreact" } } diff --git a/frontend/components/tournament/MapPoolTab.tsx b/frontend/components/tournament/MapPoolTab.tsx new file mode 100644 index 000000000..1bd0ca322 --- /dev/null +++ b/frontend/components/tournament/MapPoolTab.tsx @@ -0,0 +1,134 @@ +import { styled } from "@stitches/react"; +import { useTournamentData } from "hooks/data/useTournamentData"; + +// TODO: shared package +const stageList = [ + "The Reef", + "Musselforge Fitness", + "Starfish Mainstage", + "Humpback Pump Track", + "Inkblot Art Academy", + "Sturgeon Shipyard", + "Moray Towers", + "Port Mackerel", + "Manta Maria", + "Kelp Dome", + "Snapper Canal", + "Blackbelly Skatepark", + "MakoMart", + "Walleye Warehouse", + "Shellendorf Institute", + "Arowana Mall", + "Goby Arena", + "Piranha Pit", + "Camp Triggerfish", + "Wahoo World", + "New Albacore Hotel", + "Ancho-V Games", + "Skipper Pavilion", +] as const; + +const modes = ["TW", "SZ", "TC", "RM", "CB"]; + +export function MapPoolTab() { + const { data } = useTournamentData(); + + // TODO: handle loading + // TODO: handle error in parent + if (!data) return null; + + // TODO: modes from type + const modesPerStage = data.mapPool.reduce( + (acc: Record, { name, mode }) => { + if (!acc[name]) { + acc[name] = []; + } + + acc[name].push(mode); + return acc; + }, + {} + ); + + return ( + + + {data.mapPool.length} maps + + {stageList.map((stage) => ( + + + {modesPerStage[stage] && ( + + {modes.map((mode) => { + if (!modesPerStage[stage]?.includes(mode)) return null; + return ( + + ); + })} + + )} + + ))} + + ); +} + +const S_InfoSquare = styled("div", { + display: "grid", + placeItems: "center", + fontWeight: "$semiBold", + fontSize: "$xl", + backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%236741d9' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E")`, + backgroundColor: "$bgLighter", + borderRadius: "$rounded", +}); + +const S_Container = styled("div", { + display: "grid", + gridTemplateColumns: "repeat(4, 1fr)", + gap: "1rem", +}); + +const S_EmphasizedText = styled("span", { + fontWeight: "$bold", +}); + +const S_StageImageContainer = styled("div", { + position: "relative", +}); + +const S_StageImage = styled("img", { + width: "14rem", + borderRadius: "$rounded", + + variants: { + filter: { + bw: { + filter: "grayscale(100%)", + }, + }, + }, +}); + +const S_ModeImagesContainer = styled("div", { + display: "flex", + position: "absolute", + backdropFilter: "blur(5px) grayscale(25%)", + top: 0, + left: 0, + borderRadius: "$rounded 0 $rounded 0", +}); + +const S_ModeImage = styled("img", { + width: "2.5rem", + padding: "$1", +}); diff --git a/frontend/pages/o/[organization]/[tournament].tsx b/frontend/pages/o/[organization]/[tournament].tsx index c028cfee3..786318009 100644 --- a/frontend/pages/o/[organization]/[tournament].tsx +++ b/frontend/pages/o/[organization]/[tournament].tsx @@ -1,6 +1,7 @@ import { InfoBanner } from "components/tournament/InfoBanner"; import { Tab } from "components/common/Tab"; import { styled } from "stitches.config"; +import { MapPoolTab } from "components/tournament/MapPoolTab"; const tabs = [ { name: "Overview", id: "info" }, @@ -22,7 +23,9 @@ export default function TournamentPage() { Content 1 - Content 2 + + + Content 3 Content 4 Content 5 diff --git a/frontend/public/img/modes/CB.png b/frontend/public/img/modes/CB.png new file mode 100644 index 000000000..c51f3d65a Binary files /dev/null and b/frontend/public/img/modes/CB.png differ diff --git a/frontend/public/img/modes/RM.png b/frontend/public/img/modes/RM.png new file mode 100644 index 000000000..8035a41f4 Binary files /dev/null and b/frontend/public/img/modes/RM.png differ diff --git a/frontend/public/img/modes/SZ.png b/frontend/public/img/modes/SZ.png new file mode 100644 index 000000000..76a9bb741 Binary files /dev/null and b/frontend/public/img/modes/SZ.png differ diff --git a/frontend/public/img/modes/TC.png b/frontend/public/img/modes/TC.png new file mode 100644 index 000000000..fb412ac28 Binary files /dev/null and b/frontend/public/img/modes/TC.png differ diff --git a/frontend/public/img/modes/TW.png b/frontend/public/img/modes/TW.png new file mode 100644 index 000000000..a25b89915 Binary files /dev/null and b/frontend/public/img/modes/TW.png differ diff --git a/frontend/public/img/stages/ancho-v-games.png b/frontend/public/img/stages/ancho-v-games.png new file mode 100644 index 000000000..87ff54963 Binary files /dev/null and b/frontend/public/img/stages/ancho-v-games.png differ diff --git a/frontend/public/img/stages/arowana-mall.png b/frontend/public/img/stages/arowana-mall.png new file mode 100644 index 000000000..492bea38a Binary files /dev/null and b/frontend/public/img/stages/arowana-mall.png differ diff --git a/frontend/public/img/stages/blackbelly-skatepark.png b/frontend/public/img/stages/blackbelly-skatepark.png new file mode 100644 index 000000000..fe3efc37d Binary files /dev/null and b/frontend/public/img/stages/blackbelly-skatepark.png differ diff --git a/frontend/public/img/stages/camp-triggerfish.png b/frontend/public/img/stages/camp-triggerfish.png new file mode 100644 index 000000000..463a7d3e2 Binary files /dev/null and b/frontend/public/img/stages/camp-triggerfish.png differ diff --git a/frontend/public/img/stages/goby-arena.png b/frontend/public/img/stages/goby-arena.png new file mode 100644 index 000000000..25b2d1689 Binary files /dev/null and b/frontend/public/img/stages/goby-arena.png differ diff --git a/frontend/public/img/stages/humpback-pump-track.png b/frontend/public/img/stages/humpback-pump-track.png new file mode 100644 index 000000000..6b5b014b4 Binary files /dev/null and b/frontend/public/img/stages/humpback-pump-track.png differ diff --git a/frontend/public/img/stages/inkblot-art-academy.png b/frontend/public/img/stages/inkblot-art-academy.png new file mode 100644 index 000000000..04ae1878d Binary files /dev/null and b/frontend/public/img/stages/inkblot-art-academy.png differ diff --git a/frontend/public/img/stages/kelp-dome.png b/frontend/public/img/stages/kelp-dome.png new file mode 100644 index 000000000..a49b9e1f3 Binary files /dev/null and b/frontend/public/img/stages/kelp-dome.png differ diff --git a/frontend/public/img/stages/makomart.png b/frontend/public/img/stages/makomart.png new file mode 100644 index 000000000..20fed269e Binary files /dev/null and b/frontend/public/img/stages/makomart.png differ diff --git a/frontend/public/img/stages/manta-maria.png b/frontend/public/img/stages/manta-maria.png new file mode 100644 index 000000000..24ec66410 Binary files /dev/null and b/frontend/public/img/stages/manta-maria.png differ diff --git a/frontend/public/img/stages/moray-towers.png b/frontend/public/img/stages/moray-towers.png new file mode 100644 index 000000000..bcf114965 Binary files /dev/null and b/frontend/public/img/stages/moray-towers.png differ diff --git a/frontend/public/img/stages/musselforge-fitness.png b/frontend/public/img/stages/musselforge-fitness.png new file mode 100644 index 000000000..b9b7ec5ae Binary files /dev/null and b/frontend/public/img/stages/musselforge-fitness.png differ diff --git a/frontend/public/img/stages/new-albacore-hotel.png b/frontend/public/img/stages/new-albacore-hotel.png new file mode 100644 index 000000000..4ffc67cea Binary files /dev/null and b/frontend/public/img/stages/new-albacore-hotel.png differ diff --git a/frontend/public/img/stages/piranha-pit.png b/frontend/public/img/stages/piranha-pit.png new file mode 100644 index 000000000..196eb5af7 Binary files /dev/null and b/frontend/public/img/stages/piranha-pit.png differ diff --git a/frontend/public/img/stages/port-mackerel.png b/frontend/public/img/stages/port-mackerel.png new file mode 100644 index 000000000..6a9188f18 Binary files /dev/null and b/frontend/public/img/stages/port-mackerel.png differ diff --git a/frontend/public/img/stages/shellendorf-institute.png b/frontend/public/img/stages/shellendorf-institute.png new file mode 100644 index 000000000..5f599a122 Binary files /dev/null and b/frontend/public/img/stages/shellendorf-institute.png differ diff --git a/frontend/public/img/stages/skipper-pavilion.png b/frontend/public/img/stages/skipper-pavilion.png new file mode 100644 index 000000000..386a4006f Binary files /dev/null and b/frontend/public/img/stages/skipper-pavilion.png differ diff --git a/frontend/public/img/stages/snapper-canal.png b/frontend/public/img/stages/snapper-canal.png new file mode 100644 index 000000000..fa9163475 Binary files /dev/null and b/frontend/public/img/stages/snapper-canal.png differ diff --git a/frontend/public/img/stages/starfish-mainstage.png b/frontend/public/img/stages/starfish-mainstage.png new file mode 100644 index 000000000..c9a72d9f7 Binary files /dev/null and b/frontend/public/img/stages/starfish-mainstage.png differ diff --git a/frontend/public/img/stages/sturgeon-shipyard.png b/frontend/public/img/stages/sturgeon-shipyard.png new file mode 100644 index 000000000..8a18399ec Binary files /dev/null and b/frontend/public/img/stages/sturgeon-shipyard.png differ diff --git a/frontend/public/img/stages/the-reef.png b/frontend/public/img/stages/the-reef.png new file mode 100644 index 000000000..e098e25f9 Binary files /dev/null and b/frontend/public/img/stages/the-reef.png differ diff --git a/frontend/public/img/stages/wahoo-world.png b/frontend/public/img/stages/wahoo-world.png new file mode 100644 index 000000000..f037a6f4f Binary files /dev/null and b/frontend/public/img/stages/wahoo-world.png differ diff --git a/frontend/public/img/stages/walleye-warehouse.png b/frontend/public/img/stages/walleye-warehouse.png new file mode 100644 index 000000000..494810dd9 Binary files /dev/null and b/frontend/public/img/stages/walleye-warehouse.png differ diff --git a/server/prisma/seed.ts b/server/prisma/seed.ts index 2a1e24fe6..92eec70e5 100644 --- a/server/prisma/seed.ts +++ b/server/prisma/seed.ts @@ -51,7 +51,7 @@ const stageList = [ "Kelp Dome", "Snapper Canal", "Blackbelly Skatepark", - "MakoMar", + "MakoMart", "Walleye Warehouse", "Shellendorf Institute", "Arowana Mall",