From eda4f281f697e477381e2b319ce856701e1bf44c Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Mon, 6 Apr 2026 16:19:54 +0300 Subject: [PATCH] Multi --- .../match-page/MatchBanner.module.css | 42 ++++ app/components/match-page/MatchBanner.tsx | 20 +- .../match-page/MatchBannerTopRow.tsx | 8 +- .../sendouq-match/routes/q.match.$id.tsx | 184 +++++++----------- app/features/sendouq/core/SendouQ.server.ts | 6 + 5 files changed, 139 insertions(+), 121 deletions(-) diff --git a/app/components/match-page/MatchBanner.module.css b/app/components/match-page/MatchBanner.module.css index f1a9f2ef2..0a41ee7c3 100644 --- a/app/components/match-page/MatchBanner.module.css +++ b/app/components/match-page/MatchBanner.module.css @@ -65,3 +65,45 @@ .illegalIcon { color: var(--color-error); } + +.multiBanner { + display: flex; + padding: 0; + overflow: hidden; + background-image: none; +} + +.segment { + --slant: 13px; + + flex: 1 1 0; + min-width: 0; + height: 100%; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-image: + linear-gradient( + to top, + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0), + rgba(0, 0, 0, 0.6) + ), + var(--stage-img); + clip-path: polygon( + var(--slant) 0, + 100% 0, + calc(100% - var(--slant)) 100%, + 0 100% + ); + margin-inline-start: calc(var(--slant) * -1); + + &:first-child { + clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); + margin-inline-start: 0; + } + + &:last-child { + clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); + } +} diff --git a/app/components/match-page/MatchBanner.tsx b/app/components/match-page/MatchBanner.tsx index 2d8ebd23b..01f2dc68e 100644 --- a/app/components/match-page/MatchBanner.tsx +++ b/app/components/match-page/MatchBanner.tsx @@ -49,7 +49,25 @@ export function MatchBanner({ ); } -function ScreenNotice({ screenLegal }: Pick) { +export function MultiMatchBanner({ stageIds }: { stageIds: StageId[] }) { + return ( +
+ {stageIds.map((stageId, i) => ( +
+ ))} +
+ ); +} + +function ScreenNotice({ screenLegal }: { screenLegal: boolean }) { const { t } = useTranslation(["weapons", "q"]); const imgSize = 18; diff --git a/app/components/match-page/MatchBannerTopRow.tsx b/app/components/match-page/MatchBannerTopRow.tsx index 09025b18c..f2df1be76 100644 --- a/app/components/match-page/MatchBannerTopRow.tsx +++ b/app/components/match-page/MatchBannerTopRow.tsx @@ -31,7 +31,13 @@ function Score({ score }: { score: MatchBannerTopRowProps["score"] }) {
{score.alpha}-{score.bravo}
-
Final
+
+ {score.isFinal + ? "Final" + : score.bestOf + ? `Best of ${score.count}` + : `Play all ${score.count}`} +
); } diff --git a/app/features/sendouq-match/routes/q.match.$id.tsx b/app/features/sendouq-match/routes/q.match.$id.tsx index c8b3e0cbf..22e3154cf 100644 --- a/app/features/sendouq-match/routes/q.match.$id.tsx +++ b/app/features/sendouq-match/routes/q.match.$id.tsx @@ -7,6 +7,7 @@ import { MatchActionTab } from "~/components/match-page/MatchActionTab"; import { MatchBanner, MatchBannerContainer, + MultiMatchBanner, } from "~/components/match-page/MatchBanner"; import { MatchBannerBottomRow } from "~/components/match-page/MatchBannerBottomRow"; import { MatchBannerTopRow } from "~/components/match-page/MatchBannerTopRow"; @@ -19,7 +20,6 @@ import * as Seasons from "~/features/mmr/core/Seasons"; import { SENDOUQ_BEST_OF } from "~/features/sendouq/q-constants"; import { databaseTimestampToDate } from "~/utils/dates"; import invariant from "~/utils/invariant"; -import { logger } from "~/utils/logger"; import type { SendouRouteHandle } from "~/utils/remix.server"; import { SENDOUQ_RULES_PAGE } from "~/utils/urls"; import { action } from "../actions/q.match.$id.server"; @@ -81,28 +81,60 @@ function SendouQMatchBanner() { 0, ); - const reportedCount = data.match.mapList.filter( - (map) => map.winnerGroupId, - ).length; + const topRow = ( + + ); - const currentMap = data.match.mapList.at(reportedCount); + const bottomRow = ( + ({ + mode: map.mode, + winner: + map.winnerGroupId === data.match.groupAlpha.id + ? "ALPHA" + : map.winnerGroupId === data.match.groupBravo.id + ? "BRAVO" + : undefined, + }))} + activeRosters={{ + alpha: data.match.groupAlpha.members, + bravo: data.match.groupBravo.members, + }} + /> + ); + + if (data.match.isLocked) { + const playedStageIds = data.match.mapList + .filter((m) => m.winnerGroupId !== null) + .map((m) => m.stageId); + + return ( + + {topRow} + + {bottomRow} + + ); + } + + const currentMap = data.match.currentMap; invariant(currentMap); return ( - + {topRow} - ({ - mode: map.mode, - winner: - map.winnerGroupId === data.match.groupAlpha.id - ? "ALPHA" - : map.winnerGroupId === data.match.groupBravo.id - ? "BRAVO" - : undefined, - }))} - activeRosters={{ - alpha: data.match.groupAlpha.members, - bravo: data.match.groupBravo.members, - }} - /> + {bottomRow} ); } function SendouQMatchTabs() { + const data = useLoaderData(); + + const currentMap = data.match.currentMap; + invariant(currentMap); + return ( { - logger.info("onSubbedOutChange", { teamId, subbedOut }); - }} + canEditSubbedOut={[false, false]} teams={[ { - team: { - id: 1, - name: "me in japan", - url: "/t/me-in-japan", - }, - members: [ - { - id: 1, - username: "Sendou", - discordId: "123", - discordAvatar: null, - customUrl: "sendou", - }, - { - id: 2, - username: "Lean", - discordId: "456", - discordAvatar: null, - customUrl: null, - }, - { - id: 3, - username: "Kiver", - discordId: "789", - discordAvatar: null, - customUrl: null, - }, - { - id: 4, - username: "Brian", - discordId: "012", - discordAvatar: null, - customUrl: null, - }, - { - id: 9, - username: "Poppy", - discordId: "567", - discordAvatar: null, - customUrl: null, - }, - ], - subbedOut: [9], + team: data.match.groupAlpha.team, + members: data.match.groupAlpha.members, }, { - team: { - id: 2, - name: "Question Mark", - url: "/t/question-mark", - }, - members: [ - { - id: 5, - username: "Naga", - discordId: "345", - discordAvatar: null, - customUrl: null, - }, - { - id: 6, - username: "Grey", - discordId: "678", - discordAvatar: null, - customUrl: null, - }, - { - id: 7, - username: "Zack", - discordId: "901", - discordAvatar: null, - customUrl: null, - }, - { - id: 8, - username: "Lime", - discordId: "234", - discordAvatar: null, - customUrl: null, - }, - ], + team: data.match.groupBravo.team, + members: data.match.groupBravo.members, }, ]} /> diff --git a/app/features/sendouq/core/SendouQ.server.ts b/app/features/sendouq/core/SendouQ.server.ts index 905110aa1..4a0b61349 100644 --- a/app/features/sendouq/core/SendouQ.server.ts +++ b/app/features/sendouq/core/SendouQ.server.ts @@ -216,9 +216,15 @@ class SendouQClass { }; }; + const reportedMapsCount = match.mapList.filter( + (map) => map.winnerGroupId, + ).length; + const currentMap = match.mapList.at(reportedMapsCount); + return { ...match, chatCode: isMatchInsider ? match.chatCode : undefined, + currentMap, groupAlpha: this.#getAddMemberPrivateNoteMapper(notes)( matchGroupCensorer(match.groupAlpha, isTeamAlphaMember), ),