Score title in match modal

app/components/Modal.tsx

@@ -7,7 +7,7 @@ export default function Modal({
   children,
 }: {
   closeUrl: string;
-  title: string;
+  title: React.ReactNode;
   children: React.ReactNode;
 }) {
   return (

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)

app/routes/to/$organization.$tournament/bracket.$bid/match.$num.tsx

@@ -38,7 +38,17 @@ export default function MatchModal() {
   const location = useLocation();
 
   return (
-    <Modal title={data.title} closeUrl={location.pathname.split("/match")[0]}>
+    <Modal
+      title={
+        <div>
+          <span className="tournament-match-modal__vs-title">{data.title}</span>{" "}
+          <span className="tournament-match-modal__score-title">
+            {data.scoreTitle}
+          </span>
+        </div>
+      }
+      closeUrl={location.pathname.split("/match")[0]}
+    >
       <h4 className="tournament-match-modal__round-name">{data.roundName}</h4>
       <div className="tournament-match-modal__rounds">
         {data.matchInfos

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 {

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);