diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx index a9232a8b0..c1d4aaef0 100644 --- a/app/components/Modal.tsx +++ b/app/components/Modal.tsx @@ -7,7 +7,7 @@ export default function Modal({ children, }: { closeUrl: string; - title: string; + title: React.ReactNode; children: React.ReactNode; }) { return ( diff --git a/app/db/tournament/queries/findMatchModalInfoByNumber.ts b/app/db/tournament/queries/findMatchModalInfoByNumber.ts index d7a6c18cb..eb5cfd5b6 100644 --- a/app/db/tournament/queries/findMatchModalInfoByNumber.ts +++ b/app/db/tournament/queries/findMatchModalInfoByNumber.ts @@ -13,6 +13,7 @@ import { v4 as uuidv4 } from "uuid"; export type FindMatchModalInfoByNumber = | { title: string; + scoreTitle: string; roundName: string; matchInfos: { idForFrontend: string; @@ -103,8 +104,20 @@ export async function findMatchModalInfoByNumber({ }; }); + const scoreTitle = match.results + .reduce( + (scores, result) => { + if (result.winner === "UPPER") scores[0]++; + else scores[1]++; + return scores; + }, + [0, 0] + ) + .join("-"); + return { title: `${teamsOrdered[0].team.name} vs. ${teamsOrdered[1].team.name}`, + scoreTitle, roundName: getRoundNameByPositions( tournamentRound.position, tournamentRounds.map((round) => round.position) diff --git a/app/routes/to/$organization.$tournament/bracket.$bid/match.$num.tsx b/app/routes/to/$organization.$tournament/bracket.$bid/match.$num.tsx index 16670c710..b2fb2025e 100644 --- a/app/routes/to/$organization.$tournament/bracket.$bid/match.$num.tsx +++ b/app/routes/to/$organization.$tournament/bracket.$bid/match.$num.tsx @@ -38,7 +38,17 @@ export default function MatchModal() { const location = useLocation(); return ( - + + {data.title}{" "} + + {data.scoreTitle} + + + } + closeUrl={location.pathname.split("/match")[0]} + >

{data.roundName}

{data.matchInfos diff --git a/app/styles/tournament-bracket.css b/app/styles/tournament-bracket.css index 539de6588..185b4f8d7 100644 --- a/app/styles/tournament-bracket.css +++ b/app/styles/tournament-bracket.css @@ -135,9 +135,9 @@ } .tournament-bracket__during-match-actions__winner-text { + color: var(--theme-secondary); font-size: var(--fonts-xs); font-weight: var(--bold); - color: var(--theme-secondary); } .tournament-bracket__during-match-actions__radio-container { diff --git a/app/styles/tournament-match.css b/app/styles/tournament-match.css index b65838b63..01ca88547 100644 --- a/app/styles/tournament-match.css +++ b/app/styles/tournament-match.css @@ -1,3 +1,11 @@ +.tournament-match-modal__vs-title { + margin-inline-end: var(--s-3); +} + +.tournament-match-modal__score-title { + color: var(--theme-secondary); +} + .tournament-match-modal__round-name { color: var(--theme); font-size: var(--fonts-sm);