Add 'data-*' attributes to DOM

Author: Drarig29

package.json

@@ -48,6 +48,6 @@
         "webpack-cli": "^3.3.11"
     },
     "dependencies": {
-        "brackets-model": "^1.3.1"
+        "brackets-model": "^1.3.4"
     }
 }

pnpm-lock.yaml

@@ -25,49 +25,59 @@ export function createRoundRobinContainer(): HTMLElement {
 
 /**
  * Creates a container which contains a single bracket of a single or double elimination.
+ *
+ * @param id ID of the group.
  */
-export function createBracketContainer(): HTMLElement {
+export function createBracketContainer(id: number): HTMLElement {
     const bracket = document.createElement('section');
     bracket.classList.add('bracket');
+    bracket.setAttribute('data-group-id', id.toString());
     return bracket;
 }
 
 /**
  * Creates a container which contains a group.
  *
+ * @param id ID of the group.
  * @param title Title of the group.
  */
-export function createGroupContainer(title: string): HTMLElement {
+export function createGroupContainer(id: number, title: string): HTMLElement {
     const h2 = document.createElement('h2');
     h2.innerText = title;
 
-    const groupDOM = document.createElement('section');
-    groupDOM.classList.add('group');
-    groupDOM.append(h2);
-    return groupDOM;
+    const group = document.createElement('section');
+    group.classList.add('group');
+    group.setAttribute('data-group-id', id.toString());
+    group.append(h2);
+    return group;
 }
 
 /**
  * Creates a container which contains a round.
  *
+ * @param id ID of the round.
  * @param title Title of the round.
  */
-export function createRoundContainer(title: string): HTMLElement {
+export function createRoundContainer(id: number, title: string): HTMLElement {
     const h3 = document.createElement('h3');
     h3.innerText = title;
 
-    const roundDOM = document.createElement('article');
-    roundDOM.classList.add('round');
-    roundDOM.append(h3);
-    return roundDOM;
+    const round = document.createElement('article');
+    round.classList.add('round');
+    round.setAttribute('data-round-id', id.toString());
+    round.append(h3);
+    return round;
 }
 
 /**
  * Creates a container which contains a match.
+ *
+ * @param id ID of the match.
  */
-export function createMatchContainer(): HTMLElement {
+export function createMatchContainer(id: number): HTMLElement {
     const match = document.createElement('div');
     match.classList.add('match');
+    match.setAttribute('data-match-id', id.toString());
     return match;
 }
 
@@ -95,29 +105,35 @@ export function createOpponentsContainer(): HTMLElement {
 
 /**
  * Creates a container which contains a participant.
+ *
+ * @param id ID of the participant.
  */
-export function createParticipantContainer(): HTMLElement {
-    const teamDOM = document.createElement('div');
-    teamDOM.classList.add('participant');
-    return teamDOM;
+export function createParticipantContainer(id: number | null): HTMLElement {
+    const team = document.createElement('div');
+    team.classList.add('participant');
+
+    if (id !== null)
+        team.setAttribute('data-participant-id', id.toString());
+
+    return team;
 }
 
 /**
  * Creates a container which contains the name of a participant.
  */
 export function createNameContainer(): HTMLElement {
-    const nameDOM = document.createElement('div');
-    nameDOM.classList.add('name');
-    return nameDOM;
+    const name = document.createElement('div');
+    name.classList.add('name');
+    return name;
 }
 
 /**
  * Creates a container which contains the result of a match for a participant.
  */
 export function createResultContainer(): HTMLElement {
-    const resultDOM = document.createElement('div');
-    resultDOM.classList.add('result');
-    return resultDOM;
+    const result = document.createElement('div');
+    result.classList.add('result');
+    return result;
 }
 
 /**

src/dom.ts

@@ -72,13 +72,15 @@ export class BracketsViewer {
         let groupNumber = 1;
 
         for (const groupMatches of matchesByGroup) {
-            const groupContainer = dom.createGroupContainer(lang.getGroupName(groupNumber++));
+            const groupId = groupMatches[0].group_id;
+            const groupContainer = dom.createGroupContainer(groupId, lang.getGroupName(groupNumber++));
             const matchesByRound = splitBy(groupMatches, 'round_id');
 
             let roundNumber = 1;
 
             for (const roundMatches of matchesByRound) {
-                const roundContainer = dom.createRoundContainer(lang.getRoundName(roundNumber++, 0));
+                const roundId = roundMatches[0].round_id;
+                const roundContainer = dom.createRoundContainer(roundId, lang.getRoundName(roundNumber++, 0));
 
                 for (const match of roundMatches)
                     roundContainer.append(this.createMatch(match));
@@ -153,13 +155,15 @@ export class BracketsViewer {
      * @param connectFinal Whether to connect the last match of the bracket to the final.
      */
     private renderBracket(root: HTMLElement, matchesByRound: Match[][], roundName: RoundName, bracketType: BracketType, connectFinal?: boolean): void {
-        const bracketContainer = dom.createBracketContainer();
+        const groupId = matchesByRound[0][0].group_id;
         const roundCount = matchesByRound.length;
+        const bracketContainer = dom.createBracketContainer(groupId);
 
         let roundNumber = 1;
 
         for (const matches of matchesByRound) {
-            const roundContainer = dom.createRoundContainer(roundName(roundNumber, roundCount));
+            const roundId = matches[0].round_id;
+            const roundContainer = dom.createRoundContainer(roundId, roundName(roundNumber, roundCount));
 
             for (const match of matches)
                 roundContainer.append(this.createBracketMatch(roundNumber, roundCount, match, bracketType, connectFinal));
@@ -187,8 +191,9 @@ export class BracketsViewer {
 
         const roundCount = matches.length;
 
-        for (let roundNumber = 1; roundNumber <= finalMatches.length; roundNumber++) {
-            const roundContainer = dom.createRoundContainer(lang.getFinalMatchLabel(finalType, roundNumber, roundCount));
+        for (let roundIndex = 0; roundIndex < finalMatches.length; roundIndex++) {
+            const roundNumber = roundIndex + 1;
+            const roundContainer = dom.createRoundContainer(finalMatches[roundIndex].round_id, lang.getFinalMatchLabel(finalType, roundNumber, roundCount));
             roundContainer.append(this.createFinalMatch(finalType, finalMatches, roundNumber, roundCount));
             upperBracket.append(roundContainer);
         }
@@ -274,32 +279,32 @@ export class BracketsViewer {
     /**
      * Creates a match based on its results.
      *
-     * @param results Results of the match.
+     * @param match Results of the match.
      * @param matchLocation Location of the match.
      * @param connection Connection of this match with the others.
      * @param label Label of the match.
      * @param originHint Origin hint for the match.
      * @param roundNumber Number of the round.
      */
-    private createMatch(results: MatchResults, matchLocation?: BracketType, connection?: Connection, label?: string, originHint?: OriginHint, roundNumber?: number): HTMLElement {
-        const match = dom.createMatchContainer();
+    private createMatch(match: MatchResults, matchLocation?: BracketType, connection?: Connection, label?: string, originHint?: OriginHint, roundNumber?: number): HTMLElement {
+        const matchContainer = dom.createMatchContainer(match.id);
         const opponents = dom.createOpponentsContainer();
 
-        const team1 = this.createTeam(results.opponent1, originHint, matchLocation, roundNumber);
-        const team2 = this.createTeam(results.opponent2, originHint, matchLocation, roundNumber);
+        const team1 = this.createTeam(match.opponent1, originHint, matchLocation, roundNumber);
+        const team2 = this.createTeam(match.opponent2, originHint, matchLocation, roundNumber);
 
         if (label)
-            opponents.append(dom.createMatchLabel(label, lang.getMatchStatus(results.status)));
+            opponents.append(dom.createMatchLabel(label, lang.getMatchStatus(match.status)));
 
         opponents.append(team1, team2);
-        match.append(opponents);
+        matchContainer.append(opponents);
 
         if (!connection)
-            return match;
+            return matchContainer;
 
-        dom.setupConnection(opponents, match, connection);
+        dom.setupConnection(opponents, matchContainer, connection);
 
-        return match;
+        return matchContainer;
     }
 
     /**
@@ -312,7 +317,7 @@ export class BracketsViewer {
      */
     private createTeam(participant: ParticipantResult | null, originHint: OriginHint, matchLocation?: BracketType, roundNumber?: number): HTMLElement {
         const containers: ParticipantContainers = {
-            participant: dom.createParticipantContainer(),
+            participant: dom.createParticipantContainer(participant && participant.id),
             name: dom.createNameContainer(),
             result: dom.createResultContainer(),
         };