From 203261452fdb683a807f6ab0e7d54cb946055eff Mon Sep 17 00:00:00 2001 From: corentin Date: Sun, 9 Apr 2023 12:53:25 +0200 Subject: [PATCH] Upgrade `brackets-model` --- package.json | 2 +- src/dom.ts | 12 ++++++------ src/helpers.ts | 18 +++++++++--------- src/lang.ts | 34 +++++++++++++++++++--------------- src/main.ts | 30 ++++++++++++++---------------- src/types.d.ts | 10 ---------- 6 files changed, 49 insertions(+), 57 deletions(-) diff --git a/package.json b/package.json index bc2bff2..cfeb768 100644 --- a/package.json +++ b/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", diff --git a/src/dom.ts b/src/dom.ts index 49d7eb6..46eb533 100644 --- a/src/dom.ts +++ b/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; diff --git a/src/helpers.ts b/src/helpers.ts index 161f77a..289e1b2 100644 --- a/src/helpers.ts +++ b/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; diff --git a/src/lang.ts b/src/lang.ts index eb23596..99614e6 100644 --- a/src/lang.ts +++ b/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 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,6 +192,9 @@ export function getGroupName(groupNumber: number): string { return t('common.group-name', { groupNumber }); } +type Replace = S extends `${infer A}${Search}${infer B}` + ? `${A}${Replace}${B}` + : never; /** * Returns the name of the bracket. @@ -199,11 +202,12 @@ export function getGroupName(groupNumber: number): string { * @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; + return t(`common.group-name-${key}`, { stage }); default: return undefined; } diff --git a/src/main.ts b/src/main.ts index bf438fd..12a0ac7 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,5 @@ 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'; @@ -7,8 +7,6 @@ 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; diff --git a/src/types.d.ts b/src/types.d.ts index 4d62546..c800efd 100644 --- a/src/types.d.ts +++ b/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. */