import { Match , ParticipantResult } from 'brackets-model' ; import { Connection , FinalType , BracketType , Placement , Ranking , RankingItem } from './types' ; import { rankingHeader } from './helpers' ; import { t } from './lang' ; param title export function createTitle ( title ) { const h1 = document . createElement ( 'h1' ) ; h1 . innerText = title ; return h1 ; } param stageId export function createRoundRobinContainer ( stageId ) { const stage = document . createElement ( 'div' ) ; stage . classList . add ( 'round-robin' ) ; stage . setAttribute ( 'data-stage-id' , stageId . toString ( ) ) ; return stage ; } param stageId export function createEliminationContainer ( stageId ) { const stage = document . createElement ( 'div' ) ; stage . classList . add ( 'elimination' ) ; stage . setAttribute ( 'data-stage-id' , stageId . toString ( ) ) ; return stage ; } param groupId param title export function createBracketContainer ( groupId , title ? ) { const bracket = document . createElement ( 'section' ) ; bracket . classList . add ( 'bracket' ) ; bracket . setAttribute ( 'data-group-id' , groupId . toString ( ) ) ; if ( title ) { const h2 = document . createElement ( 'h2' ) ; h2 . innerText = title ; bracket . append ( h2 ) ; } return bracket ; } param groupId param title export function createGroupContainer ( groupId , title ) { const h2 = document . createElement ( 'h2' ) ; h2 . innerText = title ; const group = document . createElement ( 'section' ) ; group . classList . add ( 'group' ) ; group . setAttribute ( 'data-group-id' , groupId . toString ( ) ) ; group . append ( h2 ) ; return group ; } /**
 * Creates a container which contains a list of rounds.
 */ export function createRoundsContainer ( ) { const round = document . createElement ( 'div' ) ; round . classList . add ( 'rounds' ) ; return round ; } param roundId param title export function createRoundContainer ( roundId , title ) { const h3 = document . createElement ( 'h3' ) ; h3 . innerText = title ; const round = document . createElement ( 'article' ) ; round . classList . add ( 'round' ) ; round . setAttribute ( 'data-round-id' , roundId . toString ( ) ) ; round . append ( h3 ) ; return round ; } param matchId param status export function createMatchContainer ( matchId ? , status ? ) { const match = document . createElement ( 'div' ) ; match . classList . add ( 'match' ) ; matchId !== undefined && match . setAttribute ( 'data-match-id' , matchId . toString ( ) ) ; status !== undefined && match . setAttribute ( 'data-match-status' , status . toString ( ) ) ; return match ; } param label param status export function createMatchLabel ( label , status ) { const span = document . createElement ( 'span' ) ; span . innerText = label ; span . title = status ; return span ; } param label export function createChildCountLabel ( label ) { const span = document . createElement ( 'span' ) ; span . innerText = label ; return span ; } param onClick export function createOpponentsContainer ( onClick ? ) { const opponents = document . createElement ( 'div' ) ; opponents . classList . add ( 'opponents' ) ; onClick && opponents . addEventListener ( 'click' , onClick ) ; return opponents ; } param participantId export function createParticipantContainer ( participantId ) { const participant = document . createElement ( 'div' ) ; participant . classList . add ( 'participant' ) ; if ( participantId !== null && participantId !== undefined ) participant . setAttribute ( 'data-participant-id' , participantId . toString ( ) ) ; return participant ; } /**
 * Creates a container which contains the name of a participant.
 */ export function createNameContainer ( ) { 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 ( ) { const result = document . createElement ( 'div' ) ; result . classList . add ( 'result' ) ; return result ; } /**
 * Creates a table.
 */ export function createTable ( ) { return document . createElement ( 'table' ) ; } /**
 * Creates a table row.
 */ export function createRow ( ) { return document . createElement ( 'tr' ) ; } param data export function createCell ( data ) { const td = document . createElement ( 'td' ) ; td . innerText = String ( data ) ; return td ; } param ranking export function createRankingHeaders ( ranking ) { const headers = document . createElement ( 'tr' ) ; const firstItem = ranking [ 0 ] ; for ( const key in firstItem ) { const prop = key as keyof RankingItem ; const header = rankingHeader ( prop ) ; const th = document . createElement ( 'th' ) ; th . innerText = header . text ; th . setAttribute ( 'title' , header . tooltip ) ; headers . append ( th ) ; } return headers ; } param nameContainer param hint export function setupHint ( nameContainer , hint ) { nameContainer . classList . add ( 'hint' ) ; nameContainer . innerText = hint ; } param nameContainer export function setupBye ( nameContainer ) { nameContainer . innerText = t ( 'common.bye' ) ; nameContainer . classList . add ( 'bye' ) ; } param participantContainer param resultContainer param participant export function setupWin ( participantContainer , resultContainer , participant ) { if ( participant . result && participant . result === 'win' ) { participantContainer . classList . add ( 'win' ) ; if ( participant . score === undefined ) resultContainer . innerText = t ( 'abbreviations.win' ) ; } } param participantContainer param resultContainer param participant export function setupLoss ( participantContainer , resultContainer , participant ) { if ( participant . result && participant . result === 'loss' || participant . forfeit ) { participantContainer . classList . add ( 'loss' ) ; if ( participant . forfeit ) resultContainer . innerText = t ( 'abbreviations.forfeit' ) ; else if ( participant . score === undefined ) resultContainer . innerText = t ( 'abbreviations.loss' ) ; } } param nameContainer param text param placement export function addParticipantOrigin ( nameContainer , text , placement ) { const span = document . createElement ( 'span' ) ; if ( placement === 'before' ) { span . innerText = `${ text } ` ; nameContainer . prepend ( span ) ; } else if ( placement === 'after' ) { span . innerText = ` (${ text })` ; nameContainer . append ( span ) ; } } param nameContainer param src export function addParticipantImage ( nameContainer , src ) { const img = document . createElement ( 'img' ) ; img . src = src ; nameContainer . prepend ( img ) ; } param alwaysConnectFirstRound param roundNumber param roundCount param match param matchLocation param connectFinal export function getBracketConnection ( alwaysConnectFirstRound , roundNumber , roundCount , match , matchLocation ? , connectFinal ? ) { const connection = { connectPrevious : false , connectNext : false , } ; if ( matchLocation === 'loser-bracket' ) { connection . connectPrevious = roundNumber > 1 && ( roundNumber % 2 === 1 ? 'square' : 'straight' ) ; connection . connectNext = roundNumber < roundCount && ( roundNumber % 2 === 0 ? 'square' : 'straight' ) ; } else { connection . connectPrevious = roundNumber > 1 && 'square' ; connection . connectNext = roundNumber < roundCount ? 'square' : ( connectFinal ? 'straight' : false ) ; } if ( alwaysConnectFirstRound || roundNumber !== 2 ) return connection ; 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 ) connection . connectPrevious = false ; return connection ; } param finalType param roundNumber param matchCount export function getFinalConnection ( finalType , roundNumber , matchCount ) { return { connectPrevious : finalType === 'grand_final' && ( roundNumber === 1 && 'straight' ) , connectNext : matchCount === 2 && roundNumber === 1 && 'straight' , } ; } param opponentsContainer param matchContainer param connection export function setupConnection ( opponentsContainer , matchContainer , connection ) { if ( connection . connectPrevious ) opponentsContainer . classList . add ( 'connect-previous' ) ; if ( connection . connectNext ) matchContainer . classList . add ( 'connect-next' ) ; if ( connection . connectPrevious === 'straight' ) opponentsContainer . classList . add ( 'straight' ) ; if ( connection . connectNext === 'straight' ) matchContainer . classList . add ( 'straight' ) ; }