diff --git a/app/components/tournament/DuringMatchActions.tsx b/app/components/tournament/DuringMatchActions.tsx index a3271fd54..fcea940ad 100644 --- a/app/components/tournament/DuringMatchActions.tsx +++ b/app/components/tournament/DuringMatchActions.tsx @@ -26,7 +26,9 @@ export function DuringMatchActions({ const [, parentRoute] = useMatches(); const { teams, seeds } = parentRoute.data as FindTournamentByNameForUrlI; const [joinedRoom, setJoinedRoom] = useState( - (currentMatch.score?.[0] ?? 0) > 0 || (currentMatch.score?.[1] ?? 0) > 0 + true || + (currentMatch.score?.[0] ?? 0) > 0 || + (currentMatch.score?.[1] ?? 0) > 0 ); const opponentTeam = teams.find( @@ -52,26 +54,10 @@ export function DuringMatchActions({ invariant(currentStage, "currentStage is undefined"); const { stage } = currentStage; - const roundInfo: [string, React.ReactElement | string | number][] = [ - ["Opponent", opponentTeam.name], - ["Room pass", `${roomPass} (${weHost ? "We" : "They"} host)`], - ["Friend code to add", friendCodeToAdd], - [ - "Score", - <> - {currentMatch.score?.join("-")} - {currentPosition > 1 && ( - - Undo last score - - )} - , - ], - ["Best of", currentRound.stages.length], + const roundInfos: string[] = [ + `Pass ${roomPass} (${weHost ? "We" : "They"} host)`, + `Add ${friendCodeToAdd}`, + `${currentMatch.score?.join("-")} (Bo${currentRound.stages.length})`, ]; return ( @@ -88,7 +74,12 @@ export function DuringMatchActions({

Stage {currentPosition}

- +
+ {roundInfos.map((info) => ( +
{info}
+ ))} +
+ {/*
@@ -112,7 +103,7 @@ export function DuringMatchActions({
-
+
*/} button { font-size: var(--fonts-xxs); } @@ -89,7 +86,6 @@ .tournament-bracket__during-match-actions { display: grid; margin-top: var(--s-4); - gap: var(--s-4); grid-template-areas: "img" "infos" @@ -290,10 +286,7 @@ } @media screen and (min-width: 480px) { - .tournament-bracket__during-match-actions { - grid-template-areas: - "img img" - "infos rosters"; - grid-template-columns: 1fr 1fr; + .tournament-bracket__infos { + flex-direction: row; } }