Support IDs as strings

package.json

@@ -38,7 +38,7 @@
     "dependencies": {
         "brackets-manager": "^1.5.7",
         "brackets-memory-db": "^1.0.4",
-        "brackets-model": "^1.4.0",
+        "brackets-model": "^1.5.0",
         "i18next": "^21.6.14",
         "i18next-browser-languagedetector": "^6.1.4",
         "path-browserify": "^1.0.1",
@@ -65,4 +65,4 @@
         "webpack": "^5.70.0",
         "webpack-cli": "^4.9.2"
     }
-}
+}

src/dom.ts

@@ -1,4 +1,4 @@
-import { Match, ParticipantResult, FinalType, GroupType } from 'brackets-model';
+import { Match, ParticipantResult, FinalType, GroupType, Id } from 'brackets-model';
 import { Connection, Placement, Ranking, RankingItem } from './types';
 import { rankingHeader } from './helpers';
 import { t } from './lang';
@@ -19,7 +19,7 @@ export function createTitle(title: string): HTMLElement {
  * 
  * @param stageId ID of the stage.
  */
-export function createRoundRobinContainer(stageId: number): HTMLElement {
+export function createRoundRobinContainer(stageId: Id): HTMLElement {
     const stage = document.createElement('div');
     stage.classList.add('round-robin');
     stage.setAttribute('data-stage-id', stageId.toString());
@@ -31,7 +31,7 @@ export function createRoundRobinContainer(stageId: number): HTMLElement {
  * 
  * @param stageId ID of the stage.
  */
-export function createEliminationContainer(stageId: number): HTMLElement {
+export function createEliminationContainer(stageId: Id): HTMLElement {
     const stage = document.createElement('div');
     stage.classList.add('elimination');
     stage.setAttribute('data-stage-id', stageId.toString());
@@ -44,7 +44,7 @@ export function createEliminationContainer(stageId: number): HTMLElement {
  * @param groupId ID of the group.
  * @param title Title of the group.
  */
-export function createBracketContainer(groupId: number, title?: string): HTMLElement {
+export function createBracketContainer(groupId: Id, title?: string): HTMLElement {
     const bracket = document.createElement('section');
     bracket.classList.add('bracket');
     bracket.setAttribute('data-group-id', groupId.toString());
@@ -64,7 +64,7 @@ export function createBracketContainer(groupId: number, title?: string): HTMLEle
  * @param groupId ID of the group.
  * @param title Title of the group.
  */
-export function createGroupContainer(groupId: number, title: string): HTMLElement {
+export function createGroupContainer(groupId: Id, title: string): HTMLElement {
     const h2 = document.createElement('h2');
     h2.innerText = title;
 
@@ -90,7 +90,7 @@ export function createRoundsContainer(): HTMLElement {
  * @param roundId ID of the round.
  * @param title Title of the round.
  */
-export function createRoundContainer(roundId: number, title: string): HTMLElement {
+export function createRoundContainer(roundId: Id, title: string): HTMLElement {
     const h3 = document.createElement('h3');
     h3.innerText = title;
 
@@ -107,7 +107,7 @@ export function createRoundContainer(roundId: number, title: string): HTMLElemen
  * @param matchId ID of the match.
  * @param status Status of the match.
  */
-export function createMatchContainer(matchId?: number, status?: number): HTMLElement {
+export function createMatchContainer(matchId?: Id, status?: number): HTMLElement {
     const match = document.createElement('div');
     match.classList.add('match');
     matchId !== undefined && match.setAttribute('data-match-id', matchId.toString());
@@ -156,7 +156,7 @@ export function createOpponentsContainer(onClick?: () => void): HTMLElement {
  *
  * @param participantId ID of the participant.
  */
-export function createParticipantContainer(participantId: number | null): HTMLElement {
+export function createParticipantContainer(participantId: Id | null): HTMLElement {
     const participant = document.createElement('div');
     participant.classList.add('participant');
 

src/main.ts

@@ -1,5 +1,5 @@
 import './style.scss';
-import { Participant, Match, ParticipantResult, Stage, Status, GroupType, FinalType } from 'brackets-model';
+import { Participant, Match, ParticipantResult, Stage, Status, GroupType, FinalType, Id } from 'brackets-model';
 import { splitBy, getRanking, getOriginAbbreviation, findRoot, completeWithBlankMatches, sortBy } from './helpers';
 import * as dom from './dom';
 import * as lang from './lang';
@@ -21,7 +21,7 @@ import {
 
 export class BracketsViewer {
 
-    readonly participantRefs: Record<number, HTMLElement[]> = {};
+    readonly participantRefs: Record<Id, HTMLElement[]> = {};
 
     private participants: Participant[] = [];
     private participantImages: ParticipantImage[] = [];
@@ -524,7 +524,7 @@ export class BracketsViewer {
      * @param nameContainer The name container.
      * @param participantId ID of the participant.
      */
-    private renderParticipantImage(nameContainer: HTMLElement, participantId: number): void {
+    private renderParticipantImage(nameContainer: HTMLElement, participantId: Id): void {
         const found = this.participantImages.find(item => item.participantId === participantId);
         if (found) dom.addParticipantImage(nameContainer, found.imageUrl);
     }
@@ -597,7 +597,7 @@ export class BracketsViewer {
      * @param participantId ID of the participant.
      * @param element The dom element to add events to.
      */
-    private setupMouseHover(participantId: number, element: HTMLElement): void {
+    private setupMouseHover(participantId: Id, element: HTMLElement): void {
         if (!this.config.highlightParticipantOnHover) return;
 
         const refs = this.participantRefs[participantId];

src/types.d.ts

@@ -1,4 +1,4 @@
-import { Stage, Match, MatchGame, Participant, GroupType, FinalType } from 'brackets-model';
+import { Stage, Match, MatchGame, Participant, GroupType, FinalType, Id } from 'brackets-model';
 import { CallbackFunction, FormConfiguration } from './form';
 import { InMemoryDatabase } from 'brackets-memory-db';
 import { BracketsViewer } from './main';
@@ -152,7 +152,7 @@ export interface Connection {
  */
 export interface RankingItem {
     rank: number,
-    id: number,
+    id: Id,
     played: number,
     wins: number,
     draws: number,
@@ -185,7 +185,7 @@ export type RankingHeaders = Record<keyof RankingItem, RankingHeader>;
 /**
  * An object mapping a participant id to its row in the ranking.
  */
-export type RankingMap = Record<number, RankingItem>;
+export type RankingMap = Record<Id, RankingItem>;
 
 /**
  * Definition of a ranking.