Upgrade brackets-model

package.json

@@ -37,7 +37,7 @@
     "dependencies": {
         "brackets-manager": "^1.4.2",
         "brackets-memory-db": "^1.0.4",
-        "brackets-model": "^1.3.9",
+        "brackets-model": "^1.4.0",
         "i18next": "^21.6.14",
         "i18next-browser-languagedetector": "^6.1.4",
         "path-browserify": "^1.0.1",

src/dom.ts

@@ -1,5 +1,5 @@
-import { Match, ParticipantResult } from 'brackets-model';
-import { Connection, FinalType, BracketType, Placement, Ranking, RankingItem } from './types';
+import { Match, ParticipantResult, FinalType, GroupType } from 'brackets-model';
+import { Connection, Placement, Ranking, RankingItem } from './types';
 import { rankingHeader } from './helpers';
 import { t } from './lang';
 
@@ -327,13 +327,13 @@ export function addParticipantImage(nameContainer: HTMLElement, src: string): vo
  * @param matchLocation Location of the match.
  * @param connectFinal Whether to connect to the final.
  */
-export function getBracketConnection(alwaysConnectFirstRound: boolean, roundNumber: number, roundCount: number, match: Match, matchLocation?: BracketType, connectFinal?: boolean): Connection {
+export function getBracketConnection(alwaysConnectFirstRound: boolean, roundNumber: number, roundCount: number, match: Match, matchLocation?: GroupType, connectFinal?: boolean): Connection {
     const connection: Connection = {
         connectPrevious: false,
         connectNext: false,
     };
 
-    if (matchLocation === 'loser-bracket') {
+    if (matchLocation === 'loser_bracket') {
         connection.connectPrevious = roundNumber > 1 && (roundNumber % 2 === 1 ? 'square' : 'straight');
         connection.connectNext = roundNumber < roundCount && (roundNumber % 2 === 0 ? 'square' : 'straight');
     } else {
@@ -344,12 +344,12 @@ export function getBracketConnection(alwaysConnectFirstRound: boolean, roundNumb
     if (alwaysConnectFirstRound || roundNumber !== 2)
         return connection;
 
-    const upperBracket = matchLocation === 'single-bracket' || matchLocation === 'winner-bracket';
+    const upperBracket = matchLocation === 'single_bracket' || matchLocation === 'winner_bracket';
 
     if (upperBracket && match.opponent1?.position === undefined && match.opponent2?.position === undefined)
         connection.connectPrevious = false;
 
-    if (matchLocation === 'loser-bracket' && match.opponent2?.position === undefined)
+    if (matchLocation === 'loser_bracket' && match.opponent2?.position === undefined)
         connection.connectPrevious = false;
 
     return connection;

src/helpers.ts

@@ -1,5 +1,5 @@
-import { Match, ParticipantResult } from 'brackets-model';
-import { RankingHeader, Ranking, RankingFormula, RankingItem, RankingMap, BracketType, Side } from './types';
+import { Match, ParticipantResult, GroupType } from 'brackets-model';
+import { RankingHeader, Ranking, RankingFormula, RankingItem, RankingMap, Side } from './types';
 import { t } from './lang';
 
 /**
@@ -73,7 +73,7 @@ export function findRoot(selector?: string): HTMLElement {
  * @param matches The list of first round matches.
  * @param nextMatches The list of second round matches.
  */
-export function completeWithBlankMatches(bracketType: BracketType, matches: Match[], nextMatches?: Match[]): {
+export function completeWithBlankMatches(bracketType: GroupType, matches: Match[], nextMatches?: Match[]): {
     matches: (Match | null)[],
     fromToornament: boolean,
 } {
@@ -82,10 +82,10 @@ export function completeWithBlankMatches(bracketType: BracketType, matches: Matc
 
     let sources: (number | null)[] = [];
 
-    if (bracketType === 'single-bracket' || bracketType === 'winner-bracket')
+    if (bracketType === 'single_bracket' || bracketType === 'winner_bracket')
         sources = nextMatches.map(match => [match.opponent1?.position || null, match.opponent2?.position || null]).flat();
 
-    if (bracketType === 'loser-bracket')
+    if (bracketType === 'loser_bracket')
         sources = nextMatches.map(match => match.opponent2?.position || null);
 
     // The manager does not set positions where the Toornament layer does.
@@ -106,16 +106,16 @@ export function completeWithBlankMatches(bracketType: BracketType, matches: Matc
  * @param roundNumber Number of the round.
  * @param side Side of the participant.
  */
-export function getOriginAbbreviation(matchLocation: BracketType, skipFirstRound: boolean, roundNumber?: number, side?: Side): string | null {
+export function getOriginAbbreviation(matchLocation: GroupType, skipFirstRound: boolean, roundNumber?: number, side?: Side): string | null {
     roundNumber = roundNumber || -1;
 
-    if (skipFirstRound && matchLocation === 'loser-bracket' && roundNumber === 1)
+    if (skipFirstRound && matchLocation === 'loser_bracket' && roundNumber === 1)
         return t('abbreviations.seed');
 
-    if (matchLocation === 'single-bracket' || matchLocation === 'winner-bracket' && roundNumber === 1)
+    if (matchLocation === 'single_bracket' || matchLocation === 'winner_bracket' && roundNumber === 1)
         return t('abbreviations.seed');
 
-    if (matchLocation === 'loser-bracket' && roundNumber % 2 === 0 && side === 'opponent1')
+    if (matchLocation === 'loser_bracket' && roundNumber % 2 === 0 && side === 'opponent1')
         return t('abbreviations.position');
 
     return null;

src/lang.ts

@@ -1,9 +1,9 @@
 import i18next, { StringMap, TOptions } from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
-import { Stage, Status } from 'brackets-model';
+import { Stage, Status, FinalType, GroupType } from 'brackets-model';
 import { isMajorRound } from './helpers';
-import { FinalType, BracketType, OriginHint } from './types';
+import { OriginHint } from './types';
 
 import en from './i18n/en/translation.json';
 import fr from './i18n/fr/translation.json';
@@ -59,19 +59,19 @@ export function t<Scope extends keyof Locale, SubKey extends string & keyof Loca
  * @param skipFirstRound Whether to skip the first round.
  * @param matchLocation Location of the match.
  */
-export function getOriginHint(roundNumber: number, roundCount: number, skipFirstRound: boolean, matchLocation: BracketType): OriginHint | undefined {
+export function getOriginHint(roundNumber: number, roundCount: number, skipFirstRound: boolean, matchLocation: GroupType): OriginHint | undefined {
     if (roundNumber === 1) {
-        if (matchLocation === 'single-bracket')
+        if (matchLocation === 'single_bracket')
             return (position: number): string => t('origin-hint.seed', { position });
 
-        if (matchLocation === 'winner-bracket')
+        if (matchLocation === 'winner_bracket')
             return (position: number): string => t('origin-hint.seed', { position });
 
-        if (matchLocation === 'loser-bracket' && skipFirstRound)
+        if (matchLocation === 'loser_bracket' && skipFirstRound)
             return (position: number): string => t('origin-hint.seed', { position });
     }
 
-    if (isMajorRound(roundNumber) && matchLocation === 'loser-bracket') {
+    if (isMajorRound(roundNumber) && matchLocation === 'loser_bracket') {
         if (roundNumber === roundCount - 2)
             return (position: number): string => t('origin-hint.winner-bracket-semi-final', { position });
 
@@ -116,14 +116,14 @@ export function getFinalOriginHint(finalType: FinalType, roundNumber: number): O
  * @param roundCount Count of rounds.
  * @param matchLocation Location of the match.
  */
-export function getMatchLabel(matchNumber: number, roundNumber: number, roundCount: number, matchLocation: BracketType): string {
-    const matchPrefix = matchLocation === 'winner-bracket' ? t('match-label.winner-bracket') :
-        matchLocation === 'loser-bracket' ? t('match-label.loser-bracket') : t('match-label.standard-bracket');
+export function getMatchLabel(matchNumber: number, roundNumber: number, roundCount: number, matchLocation: GroupType): string {
+    const matchPrefix = matchLocation === 'winner_bracket' ? t('match-label.winner-bracket') :
+        matchLocation === 'loser_bracket' ? t('match-label.loser-bracket') : t('match-label.standard-bracket');
 
     const inSemiFinalRound = roundNumber === roundCount - 1;
     const inFinalRound = roundNumber === roundCount;
 
-    if (matchLocation === 'single-bracket') {
+    if (matchLocation === 'single_bracket') {
         if (inSemiFinalRound)
             return t('match-label.standard-bracket-semi-final', { matchNumber });
 
@@ -192,18 +192,22 @@ export function getGroupName(groupNumber: number): string {
     return t('common.group-name', { groupNumber });
 }
 
+type Replace<S extends string, Search extends string, Replace extends string> = S extends `${infer A}${Search}${infer B}`
+    ? `${A}${Replace}${B}`
+    : never;
 
 /**
  * Returns the name of the bracket.
  * 
  * @param stage The current stage.
  * @param type Type of the bracket.
  */
-export function getBracketName(stage: Stage, type: BracketType): string | undefined {
+export function getBracketName(stage: Stage, type: GroupType): string | undefined {
     switch (type) {
-        case 'winner-bracket':
-        case 'loser-bracket':
-            return t(`common.group-name-${type}`, { stage });
+        case 'winner_bracket':
+        case 'loser_bracket':
+            const key = type.replace('_', '-') as Replace<typeof type, '_', '-'>;
+            return t(`common.group-name-${key}`, { stage });
         default:
             return undefined;
     }

src/main.ts

@@ -1,14 +1,12 @@
 import './style.scss';
-import { Participant, Match, ParticipantResult, Stage, Status } from 'brackets-model';
+import { Participant, Match, ParticipantResult, Stage, Status, GroupType, FinalType } from 'brackets-model';
 import { splitBy, getRanking, getOriginAbbreviation, findRoot, completeWithBlankMatches, sortBy } from './helpers';
 import * as dom from './dom';
 import * as lang from './lang';
 import { Locale } from './lang';
 import {
     Config,
     Connection,
-    FinalType,
-    BracketType,
     OriginHint,
     ParticipantContainers,
     RankingItem,
@@ -212,7 +210,7 @@ export class BracketsViewer {
         const hasFinal = matchesByGroup[1] !== undefined;
         const bracketMatches = splitBy(matchesByGroup[0], 'round_id').map(matches => sortBy(matches, 'number'));
 
-        this.renderBracket(container, bracketMatches, lang.getRoundName, 'single-bracket');
+        this.renderBracket(container, bracketMatches, lang.getRoundName, 'single_bracket');
 
         if (hasFinal) {
             const finalMatches = sortBy(matchesByGroup[1], 'number');
@@ -231,11 +229,11 @@ export class BracketsViewer {
         const hasFinal = matchesByGroup[2] !== undefined;
         const winnerBracketMatches = splitBy(matchesByGroup[0], 'round_id').map(matches => sortBy(matches, 'number'));
 
-        this.renderBracket(container, winnerBracketMatches, lang.getWinnerBracketRoundName, 'winner-bracket', hasFinal);
+        this.renderBracket(container, winnerBracketMatches, lang.getWinnerBracketRoundName, 'winner_bracket', hasFinal);
 
         if (hasLoserBracket) {
             const loserBracketMatches = splitBy(matchesByGroup[1], 'round_id').map(matches => sortBy(matches, 'number'));
-            this.renderBracket(container, loserBracketMatches, lang.getLoserBracketRoundName, 'loser-bracket');
+            this.renderBracket(container, loserBracketMatches, lang.getLoserBracketRoundName, 'loser_bracket');
         }
 
         if (hasFinal) {
@@ -253,7 +251,7 @@ export class BracketsViewer {
      * @param bracketType Type of the bracket.
      * @param connectFinal Whether to connect the last match of the bracket to the final.
      */
-    private renderBracket(container: HTMLElement, matchesByRound: Match[][], roundName: RoundName, bracketType: BracketType, connectFinal?: boolean): void {
+    private renderBracket(container: HTMLElement, matchesByRound: Match[][], roundName: RoundName, bracketType: GroupType, connectFinal?: boolean): void {
         const groupId = matchesByRound[0][0].group_id;
         const roundCount = matchesByRound.length;
         const bracketContainer = dom.createBracketContainer(groupId, lang.getBracketName(this.stage, bracketType));
@@ -366,7 +364,7 @@ export class BracketsViewer {
      * @param matchLocation Location of the match.
      * @param connectFinal Whether to connect this match to the final if it happens to be the last one of the bracket.
      */
-    private createBracketMatch(roundNumber: number, roundCount: number, match: Match, matchLocation: BracketType, connectFinal?: boolean): HTMLElement {
+    private createBracketMatch(roundNumber: number, roundCount: number, match: Match, matchLocation: GroupType, connectFinal?: boolean): HTMLElement {
         const connection = dom.getBracketConnection(this.alwaysConnectFirstRound, roundNumber, roundCount, match, matchLocation, connectFinal);
         const matchLabel = lang.getMatchLabel(match.number, roundNumber, roundCount, matchLocation);
         const originHint = lang.getOriginHint(roundNumber, roundCount, this.skipFirstRound, matchLocation);
@@ -386,7 +384,7 @@ export class BracketsViewer {
         const connection = dom.getFinalConnection(type, roundNumber, matches.length);
         const matchLabel = lang.getFinalMatchLabel(type, roundNumber, roundCount);
         const originHint = lang.getFinalOriginHint(type, roundNumber);
-        return this.createMatch(matches[roundIndex], 'final-group', connection, matchLabel, originHint);
+        return this.createMatch(matches[roundIndex], 'final_group', connection, matchLabel, originHint);
     }
 
     /**
@@ -416,7 +414,7 @@ export class BracketsViewer {
      * @param originHint Origin hint for the match.
      * @param roundNumber Number of the round.
      */
-    private createMatch(match: Match, matchLocation?: BracketType, connection?: Connection, label?: string, originHint?: OriginHint, roundNumber?: number): HTMLElement {
+    private createMatch(match: Match, matchLocation?: GroupType, connection?: Connection, label?: string, originHint?: OriginHint, roundNumber?: number): HTMLElement {
         const matchContainer = dom.createMatchContainer(match.id, match.status);
         const opponents = dom.createOpponentsContainer(() => this._onMatchClick(match));
 
@@ -447,7 +445,7 @@ export class BracketsViewer {
      * @param matchLocation Location of the match.
      * @param roundNumber Number of the round.
      */
-    private createParticipant(participant: ParticipantResult | null, side?: Side, originHint?: OriginHint, matchLocation?: BracketType, roundNumber?: number): HTMLElement {
+    private createParticipant(participant: ParticipantResult | null, side?: Side, originHint?: OriginHint, matchLocation?: GroupType, roundNumber?: number): HTMLElement {
         const containers: ParticipantContainers = {
             participant: dom.createParticipantContainer(participant && participant.id),
             name: dom.createNameContainer(),
@@ -477,7 +475,7 @@ export class BracketsViewer {
      * @param matchLocation Location of the match.
      * @param roundNumber Number of the round.
      */
-    private renderParticipant(containers: ParticipantContainers, participant: ParticipantResult, side?: Side, originHint?: OriginHint, matchLocation?: BracketType, roundNumber?: number): void {
+    private renderParticipant(containers: ParticipantContainers, participant: ParticipantResult, side?: Side, originHint?: OriginHint, matchLocation?: GroupType, roundNumber?: number): void {
         const found = this.participants.find(item => item.id === participant.id);
 
         if (found) {
@@ -537,10 +535,10 @@ export class BracketsViewer {
      * @param originHint Origin hint for the participant.
      * @param matchLocation Location of the match.
      */
-    private renderHint(nameContainer: HTMLElement, participant: ParticipantResult, originHint?: OriginHint, matchLocation?: BracketType): void {
+    private renderHint(nameContainer: HTMLElement, participant: ParticipantResult, originHint?: OriginHint, matchLocation?: GroupType): void {
         if (originHint === undefined || participant.position === undefined) return;
         if (!this.config.showSlotsOrigin) return;
-        if (!this.config.showLowerBracketSlotsOrigin && matchLocation === 'loser-bracket') return;
+        if (!this.config.showLowerBracketSlotsOrigin && matchLocation === 'loser_bracket') return;
 
         dom.setupHint(nameContainer, originHint(participant.position));
     }
@@ -554,11 +552,11 @@ export class BracketsViewer {
      * @param matchLocation Location of the match.
      * @param roundNumber Number of the round.
      */
-    private renderParticipantOrigin(nameContainer: HTMLElement, participant: ParticipantResult, side?: Side, matchLocation?: BracketType, roundNumber?: number): void {
+    private renderParticipantOrigin(nameContainer: HTMLElement, participant: ParticipantResult, side?: Side, matchLocation?: GroupType, roundNumber?: number): void {
         if (participant.position === undefined || matchLocation === undefined) return;
         if (!this.config.participantOriginPlacement || this.config.participantOriginPlacement === 'none') return;
         if (!this.config.showSlotsOrigin) return;
-        if (!this.config.showLowerBracketSlotsOrigin && matchLocation === 'loser-bracket') return;
+        if (!this.config.showLowerBracketSlotsOrigin && matchLocation === 'loser_bracket') return;
 
         const abbreviation = getOriginAbbreviation(matchLocation, this.skipFirstRound, roundNumber, side);
         if (!abbreviation) return;

src/types.d.ts

@@ -95,16 +95,6 @@ export interface Config {
  */
 export type ConnectionType = 'square' | 'straight' | false;
 
-/**
- * The possible types of final.
- */
-export type FinalType = 'consolation_final' | 'grand_final';
-
-/**
- * The possible types of bracket.
- */
-export type BracketType = 'single-bracket' | 'winner-bracket' | 'loser-bracket' | 'final-group';
-
 /**
  * A function returning an origin hint based on a participant's position.
  */