Added match labels

Author: Drarig29

src/main.ts

@@ -162,7 +162,7 @@ class BracketsViewer {
                     };
                 }
 
-                roundDOM.append(this.renderMatch(match, connection));
+                roundDOM.append(this.renderMatch(match, connection, `M ${roundNumber}.${match.number}`));
             }
 
             bracket.append(roundDOM);
@@ -189,13 +189,14 @@ class BracketsViewer {
         }
     }
 
-    private renderMatch(results: MatchResults, connection?: Connection) {
+    private renderMatch(results: MatchResults, connection?: Connection, label?: string) {
         const team1 = this.renderTeam(results.opponent1);
         const team2 = this.renderTeam(results.opponent2);
 
         const teams = $('<div class="teams">').append(team1).append(team2);
-        const match = $('<div class="match">').append(teams);
+        if (label) teams.append($('<span>').text(label));
 
+        const match = $('<div class="match">').append(teams);
         if (!connection) return match;
 
         if (connection.connectPrevious)

src/style.scss

@@ -109,7 +109,7 @@ h3 {
 .bracket {
   flex: 1;
   display: flex;
-  margin-bottom: 50px;
+  margin-bottom: 30px;
 
   .round {
     flex: 1;
@@ -163,6 +163,16 @@ h3 {
   width: 100%;
   position: relative;
 
+  & > span {
+    position: absolute;
+    top: -10px;
+    left: 3px;
+    font-size: 0.8rem;
+    background: white;
+    padding: 0 5px;
+    color: #a7a7a7;
+  }
+
   &.connect-previous {
     &::before {
       content: "";
@@ -223,13 +233,15 @@ h3 {
     border-bottom: none;
     border-top-left-radius: $match-borders-radius;
     border-top-right-radius: $match-borders-radius;
+    padding-top: 8px;
   }
 
   &:nth-of-type(2) {
     border: $match-borders;
     border-top: none;
     border-bottom-left-radius: $match-borders-radius;
     border-bottom-right-radius: $match-borders-radius;
+    padding-bottom: 8px;
   }
 }
 
@@ -243,7 +255,7 @@ h3 {
   }
 
   & > span {
-    color: rgb(170, 170, 170);
+    color: #a7a7a7;
   }
 }