@amirhossein-shk/tournament-bracket-js 1.0.0

package/dist/tournament-bracket.css

@@ -0,0 +1,117 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+body {
+  background-color: #1E1E1E;
+}
+
+#tournament-bracket {
+  overflow: auto;
+}
+
+.tournament-bracket-container {
+  position: relative;
+}
+
+.tournament-bracket-connectors {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.tournament-bracket-column {
+  position: absolute;
+  z-index: 1;
+}
+
+.match-container {
+  position: absolute;
+  z-index: 1;
+}
+
+.tournament-bracket-connector {
+  transition: stroke 0.2s ease;
+}
+
+.tournament-bracket-container {
+  display: flex;
+  gap: 24px;
+}
+.tournament-bracket-container .tournament-bracket-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+  justify-content: space-around;
+}
+.tournament-bracket-container .tournament-bracket-column .match-container {
+  position: relative;
+  border-radius: 10px;
+}
+.tournament-bracket-container .tournament-bracket-column .match-container .player-vs {
+  position: absolute;
+  top: calc(50% + 10px);
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  margin: 0 auto;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid #FF6E27;
+  background-color: #464646;
+  color: #F8F9FA;
+  font-family: Roboto;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  z-index: 1;
+}
+.tournament-bracket-container .tournament-bracket-column .match-container .tournament-bracket-player {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 47px;
+  padding: 0 16px;
+  background-color: #464646;
+  color: #949494;
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  box-sizing: border-box;
+}
+.tournament-bracket-container .tournament-bracket-column .match-container .tournament-bracket-player .avatar-and-name-container {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.tournament-bracket-container .tournament-bracket-column .match-container .tournament-bracket-player.player-winner {
+  background-color: #111111;
+}
+.tournament-bracket-container .tournament-bracket-column .match-container .tournament-bracket-player .avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 100%;
+  overflow: hidden;
+}
+.tournament-bracket-container .tournament-bracket-column .match-container .tournament-bracket-player .name {
+  max-width: 92px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tournament-bracket-container .tournament-bracket-column .match-container .tournament-bracket-player .score {
+  font-family: Roboto;
+  padding: 0 12px;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  color: #F8F9FA;
+}
+
+/*# sourceMappingURL=tournament-bracket.css.map */

package/dist/tournament-bracket.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/tournament-bracket.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AA8BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"tournament-bracket.css"}

package/dist/tournament-bracket.esm.js

@@ -0,0 +1,445 @@
+//#region src/tournament-bracket.js
+function tournamentBracket(userConfig = {}) {
+	const DEFAULT_PLAYER = {
+		name: "-",
+		avatarUrl: "",
+		score: "-"
+	};
+	const DEFAULT_CONFIG = {
+		targetId: "tournament-bracket",
+		rounds: null,
+		distance: 42,
+		width: 196,
+		matchHeight: 94,
+		roundGap: 96,
+		avatarFallbackUrl: "data:image/svg+xml;utf8," + encodeURIComponent(`
+            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
+              <rect width="100%" height="100%" fill="#e5e7eb"/>
+              <text x="50%" y="54%" text-anchor="middle" font-size="28" fill="#6b7280">?</text>
+            </svg>
+          `),
+		connectorColor: "white",
+		onMatchClick: null,
+		onMatchUpdate: null,
+		onMatchFinish: null
+	};
+	function normalizeConfig(userConfig) {
+		return {
+			...DEFAULT_CONFIG,
+			...userConfig,
+			rounds: userConfig.rounds ?? []
+		};
+	}
+	const config = normalizeConfig(userConfig);
+	let bracketState = null;
+	function validateRoundsShape(rounds) {
+		if (!Array.isArray(rounds) || rounds.length === 0) throw new Error("rounds must be a non-empty array.");
+		rounds.forEach((round, roundIndex) => {
+			if (!round || typeof round !== "object") throw new Error(`Round at index ${roundIndex} must be an object.`);
+			if (!Array.isArray(round.matches)) throw new Error(`rounds[${roundIndex}].matches must be an array.`);
+			if (round.matches.length === 0) throw new Error(`rounds[${roundIndex}].matches must not be empty.`);
+			round.matches.forEach((match, matchIndex) => {
+				if (!match || typeof match !== "object") throw new Error(`rounds[${roundIndex}].matches[${matchIndex}] must be an object.`);
+				if (!Array.isArray(match.players)) throw new Error(`rounds[${roundIndex}].matches[${matchIndex}].players must be an array.`);
+				if (match.players.length !== 2) throw new Error(`rounds[${roundIndex}].matches[${matchIndex}] must have exactly 2 players.`);
+			});
+		});
+		const firstRoundMatchesCount = rounds[0].matches.length;
+		if (!isPowerOfTwo(firstRoundMatchesCount)) throw new Error("First round matches count must be a power of two.");
+		for (let i = 1; i < rounds.length; i++) {
+			const expectedMatchesCount = rounds[i - 1].matches.length / 2;
+			const actualMatchesCount = rounds[i].matches.length;
+			if (actualMatchesCount !== expectedMatchesCount) throw new Error(`Invalid bracket shape: rounds[${i}] must have ${expectedMatchesCount} matches, but got ${actualMatchesCount}.`);
+		}
+		if (rounds[rounds.length - 1].matches.length !== 1) throw new Error("Last round must have exactly 1 match.");
+	}
+	function validateConfig() {
+		const container = document.getElementById(config.targetId);
+		if (!container) throw new Error(`Element with id "${config.targetId}" not found`);
+		validateRoundsShape(config.rounds);
+		return container;
+	}
+	function isPowerOfTwo(number) {
+		return number > 0 && (number & number - 1) === 0;
+	}
+	function createId(prefix) {
+		if (window.crypto?.randomUUID) return `${prefix}-${window.crypto.randomUUID()}`;
+		return `${prefix}-${Math.random().toString(36).slice(2, 9)}`;
+	}
+	function createEmptyPlayer() {
+		return { ...DEFAULT_PLAYER };
+	}
+	function normalizeMatch(match) {
+		const isFinished = typeof match.isFinished === "boolean" ? match.isFinished : match.status === "completed";
+		return {
+			matchId: match.matchId || createId("match"),
+			status: match.status || (isFinished ? "completed" : "pending"),
+			isFinished,
+			players: [{
+				...DEFAULT_PLAYER,
+				...match.players?.[0]
+			}, {
+				...DEFAULT_PLAYER,
+				...match.players?.[1]
+			}]
+		};
+	}
+	function mergeMatchData(currentMatch, nextMatchData) {
+		const nextPlayers = nextMatchData.players || [];
+		return normalizeMatch({
+			...currentMatch,
+			...nextMatchData,
+			players: [{
+				...currentMatch.players?.[0],
+				...nextPlayers[0]
+			}, {
+				...currentMatch.players?.[1],
+				...nextPlayers[1]
+			}]
+		});
+	}
+	function buildBracketModel(rounds) {
+		return { rounds: rounds.map((round, roundIndex) => {
+			const matches = round.matches.map((match, matchIndex) => {
+				const normalized = normalizeMatch(match);
+				normalized.roundIndex = roundIndex;
+				normalized.matchIndex = matchIndex;
+				return normalized;
+			});
+			return {
+				roundId: round.roundId || createId("round"),
+				name: round.name || `Round ${roundIndex + 1}`,
+				roundIndex,
+				matches
+			};
+		}) };
+	}
+	function isPendingScore(score) {
+		return score === "-" || score === "" || score === null || score === void 0;
+	}
+	function getMatchState(match) {
+		const [firstPlayer, secondPlayer] = match.players;
+		const firstScorePending = isPendingScore(firstPlayer.score);
+		const secondScorePending = isPendingScore(secondPlayer.score);
+		if (firstScorePending && secondScorePending) return {
+			status: "pending",
+			winnerIndexes: []
+		};
+		const firstScore = Number(firstPlayer.score);
+		const secondScore = Number(secondPlayer.score);
+		if (Number.isNaN(firstScore) || Number.isNaN(secondScore)) return {
+			status: "invalid-score",
+			winnerIndexes: []
+		};
+		if (firstScore === secondScore) return {
+			status: "draw",
+			winnerIndexes: []
+		};
+		if (!match.isFinished) return {
+			status: "in-progress",
+			winnerIndexes: []
+		};
+		return {
+			status: "completed",
+			winnerIndexes: [firstScore > secondScore ? 0 : 1]
+		};
+	}
+	function getPlayerIdentity(player = {}) {
+		return player.id || player.name || "";
+	}
+	function createAdvancedPlayer(winner, currentTargetPlayer = {}, previousMatchId) {
+		const winnerIdentity = getPlayerIdentity(winner);
+		const currentIdentity = getPlayerIdentity(currentTargetPlayer);
+		const isSamePlayer = winnerIdentity && currentIdentity && winnerIdentity === currentIdentity;
+		return {
+			name: winner.name ?? "",
+			avatarUrl: winner.avatarUrl ?? "",
+			seed: winner.seed,
+			id: winner.id,
+			score: isSamePlayer ? currentTargetPlayer.score ?? "-" : "-",
+			previousMatchId
+		};
+	}
+	function propagateWinner(roundIndex, matchIndex) {
+		const match = bracketState.rounds[roundIndex]?.matches?.[matchIndex];
+		if (!match) return;
+		const matchState = getMatchState(match);
+		const nextRound = bracketState.rounds[roundIndex + 1];
+		if (!nextRound) return;
+		const nextMatchIndex = Math.floor(matchIndex / 2);
+		const nextMatch = nextRound.matches[nextMatchIndex];
+		if (!nextMatch) return;
+		const playerIndex = matchIndex % 2;
+		const winner = matchState.status === "completed" ? match.players[matchState.winnerIndexes[0]] : null;
+		if (!winner) nextMatch.players[playerIndex] = createEmptyPlayer();
+		else nextMatch.players[playerIndex] = createAdvancedPlayer(winner, nextMatch.players[playerIndex], match.matchId);
+	}
+	function resolveBracket() {
+		for (let roundIndex = 0; roundIndex < bracketState.rounds.length - 1; roundIndex++) bracketState.rounds[roundIndex].matches.forEach((match, matchIndex) => {
+			propagateWinner(roundIndex, matchIndex);
+		});
+	}
+	function createBracketLayout(bracket) {
+		const roundWidth = config.width;
+		const roundGap = config.roundGap;
+		const matchHeight = config.matchHeight;
+		const matchGap = config.distance;
+		const rounds = bracket.rounds.map((round, roundIndex) => {
+			const x = roundIndex * (roundWidth + roundGap);
+			return {
+				...round,
+				x,
+				matches: round.matches.map((match, matchIndex) => ({
+					...match,
+					x,
+					y: matchIndex * (matchHeight + matchGap),
+					width: roundWidth,
+					height: matchHeight
+				}))
+			};
+		});
+		for (let roundIndex = 1; roundIndex < rounds.length; roundIndex++) {
+			const previousRound = rounds[roundIndex - 1];
+			const currentRound = rounds[roundIndex];
+			currentRound.matches = currentRound.matches.map((match, matchIndex) => {
+				const firstSourceMatch = previousRound.matches[matchIndex * 2];
+				const secondSourceMatch = previousRound.matches[matchIndex * 2 + 1];
+				const y = (getMatchCenterY(firstSourceMatch) + getMatchCenterY(secondSourceMatch)) / 2 - matchHeight / 2;
+				return {
+					...match,
+					y
+				};
+			});
+		}
+		return {
+			rounds,
+			connectors: createConnectors(rounds),
+			width: calculateLayoutWidth(rounds),
+			height: calculateLayoutHeight(rounds)
+		};
+	}
+	function getMatchCenterY(match) {
+		return match.y + match.height / 2;
+	}
+	function createConnectors(rounds) {
+		const connectors = [];
+		for (let roundIndex = 0; roundIndex < rounds.length - 1; roundIndex++) {
+			const currentRound = rounds[roundIndex];
+			const nextRound = rounds[roundIndex + 1];
+			currentRound.matches.forEach((match, matchIndex) => {
+				const targetMatch = nextRound.matches[Math.floor(matchIndex / 2)];
+				if (!targetMatch) return;
+				connectors.push({
+					id: createId("connector"),
+					from: {
+						x: match.x + match.width,
+						y: getMatchCenterY(match)
+					},
+					to: {
+						x: targetMatch.x,
+						y: getMatchCenterY(targetMatch)
+					}
+				});
+			});
+		}
+		return connectors;
+	}
+	function calculateLayoutWidth(rounds) {
+		const lastMatch = rounds[rounds.length - 1].matches[0];
+		return lastMatch.x + lastMatch.width;
+	}
+	function calculateLayoutHeight(rounds) {
+		return Math.max(...rounds.flatMap((round) => round.matches.map((match) => match.y + match.height)));
+	}
+	function clearContainer(container) {
+		container.textContent = "";
+	}
+	function renderBracket(container, layout) {
+		clearContainer(container);
+		const root = document.createElement("div");
+		root.className = "tournament-bracket-container";
+		root.style.position = "relative";
+		root.style.width = `${layout.width}px`;
+		root.style.height = `${layout.height}px`;
+		const svg = createSvgLayer(layout);
+		root.appendChild(svg);
+		layout.rounds.forEach((round) => {
+			root.appendChild(createRoundElement(round));
+		});
+		container.appendChild(root);
+	}
+	function createSvgLayer(layout) {
+		const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+		svg.classList.add("tournament-bracket-connectors");
+		svg.setAttribute("width", String(layout.width));
+		svg.setAttribute("height", String(layout.height));
+		svg.setAttribute("viewBox", `0 0 ${layout.width} ${layout.height}`);
+		svg.style.position = "absolute";
+		svg.style.inset = "0";
+		svg.style.overflow = "visible";
+		svg.style.pointerEvents = "none";
+		svg.style.zIndex = "0";
+		layout.connectors.forEach((connector) => {
+			svg.appendChild(createConnectorPath(connector));
+		});
+		return svg;
+	}
+	function createConnectorPath(connector) {
+		const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+		const middleX = connector.from.x + (connector.to.x - connector.from.x) / 2;
+		const d = [
+			`M ${connector.from.x} ${connector.from.y}`,
+			`H ${middleX}`,
+			`V ${connector.to.y}`,
+			`H ${connector.to.x}`
+		].join(" ");
+		path.setAttribute("d", d);
+		path.setAttribute("fill", "none");
+		path.setAttribute("stroke", config.connectorColor);
+		path.setAttribute("stroke-width", "1");
+		path.setAttribute("stroke-linejoin", "round");
+		path.setAttribute("stroke-linecap", "round");
+		path.classList.add("tournament-bracket-connector");
+		return path;
+	}
+	function createRoundElement(round) {
+		const element = document.createElement("div");
+		element.className = "tournament-bracket-column";
+		element.dataset.roundId = round.roundId;
+		element.dataset.roundName = round.name;
+		element.dataset.roundIndex = String(round.roundIndex);
+		element.style.position = "absolute";
+		element.style.left = `${round.x}px`;
+		element.style.top = "0";
+		element.style.width = `${config.width}px`;
+		element.style.zIndex = "1";
+		round.matches.forEach((match) => {
+			element.appendChild(createMatchElement(match));
+		});
+		return element;
+	}
+	function createMatchElement(match) {
+		const element = document.createElement("div");
+		const matchState = getMatchState(match);
+		element.id = match.matchId;
+		element.className = "match-container";
+		element.dataset.matchStatus = matchState.status;
+		element.style.position = "absolute";
+		element.style.top = `${match.y}px`;
+		element.style.left = "0";
+		element.style.width = `${match.width}px`;
+		element.style.height = `${match.height}px`;
+		const vsElement = document.createElement("div");
+		vsElement.className = "player-vs";
+		vsElement.textContent = "VS";
+		element.appendChild(vsElement);
+		element.appendChild(createPlayerElement(match.players[0], "tournament-bracket-first-player", matchState.winnerIndexes.includes(0)));
+		element.appendChild(createPlayerElement(match.players[1], "tournament-bracket-second-player", matchState.winnerIndexes.includes(1)));
+		element.addEventListener("click", () => {
+			if (typeof config.onMatchClick === "function") config.onMatchClick(match);
+		});
+		return element;
+	}
+	function createPlayerElement(player, className, isWinner) {
+		const element = document.createElement("div");
+		element.classList.add("tournament-bracket-player", className);
+		if (isWinner) element.classList.add("player-winner");
+		element.style.minWidth = `${config.width}px`;
+		const avatarAndNameContainerElement = document.createElement("div");
+		avatarAndNameContainerElement.className = "avatar-and-name-container";
+		const avatarElement = document.createElement("img");
+		avatarElement.className = "avatar";
+		avatarElement.src = player.avatarUrl || config.avatarFallbackUrl;
+		avatarElement.alt = player.name || "Player avatar";
+		const nameElement = document.createElement("div");
+		nameElement.className = "name";
+		nameElement.textContent = player.name;
+		const scoreElement = document.createElement("div");
+		scoreElement.className = "score";
+		scoreElement.textContent = player.score;
+		avatarAndNameContainerElement.appendChild(avatarElement);
+		avatarAndNameContainerElement.appendChild(nameElement);
+		element.appendChild(avatarAndNameContainerElement);
+		element.appendChild(scoreElement);
+		return element;
+	}
+	function findMatchById(matchId) {
+		if (!bracketState) return null;
+		for (const round of bracketState.rounds) {
+			const foundMatch = round.matches.find((match) => match.matchId === matchId);
+			if (foundMatch) return foundMatch;
+		}
+		return null;
+	}
+	function init() {
+		const container = validateConfig();
+		bracketState = buildBracketModel(config.rounds);
+		resolveBracket();
+		renderBracket(container, createBracketLayout(bracketState));
+	}
+	function updateMatch(matchId, nextMatchData) {
+		if (!bracketState) throw new Error("Tournament bracket is not initialized");
+		let updatedRoundIndex = -1;
+		let updatedMatchIndex = -1;
+		bracketState.rounds = bracketState.rounds.map((round, roundIndex) => ({
+			...round,
+			matches: round.matches.map((match, matchIndex) => {
+				if (match.matchId !== matchId) return match;
+				updatedRoundIndex = roundIndex;
+				updatedMatchIndex = matchIndex;
+				return mergeMatchData(match, {
+					...nextMatchData,
+					matchId
+				});
+			})
+		}));
+		if (updatedRoundIndex === -1 || updatedMatchIndex === -1) throw new Error(`Match with id "${matchId}" not found`);
+		resolveBracket();
+		renderBracket(validateConfig(), createBracketLayout(bracketState));
+		const updatedMatch = findMatchById(matchId);
+		if (typeof config.onMatchUpdate === "function" && updatedMatch) config.onMatchUpdate(updatedMatch);
+		return updatedMatch;
+	}
+	function setMatchScore(matchId, score1, score2) {
+		return updateMatch(matchId, { players: [{ score: score1 }, { score: score2 }] });
+	}
+	function finishMatch(matchId, score1, score2) {
+		const updatedMatch = updateMatch(matchId, {
+			isFinished: true,
+			status: "completed",
+			players: [{ score: score1 }, { score: score2 }]
+		});
+		const matchState = getMatchState(updatedMatch);
+		if (matchState.status !== "completed") throw new Error(`Match "${matchId}" cannot be finished because its state is "${matchState.status}".`);
+		if (typeof config.onMatchFinish === "function") config.onMatchFinish(updatedMatch);
+		return updatedMatch;
+	}
+	function destroy() {
+		const container = document.getElementById(config.targetId);
+		if (container) clearContainer(container);
+		bracketState = null;
+	}
+	function getState() {
+		if (typeof structuredClone === "function") return structuredClone(bracketState);
+		return JSON.parse(JSON.stringify(bracketState));
+	}
+	return {
+		init,
+		updateMatch,
+		setMatchScore,
+		finishMatch,
+		destroy,
+		getState,
+		onMatchClick(fn) {
+			config.onMatchClick = fn;
+		},
+		onMatchUpdate(fn) {
+			config.onMatchUpdate = fn;
+		},
+		onMatchFinish(fn) {
+			config.onMatchFinish = fn;
+		}
+	};
+}
+//#endregion
+export { tournamentBracket as default, tournamentBracket };

package/dist/tournament-bracket.esm.min.js

@@ -0,0 +1 @@
+function t(t={}){const e={name:"-",avatarUrl:"",score:"-"},n={targetId:"tournament-bracket",rounds:null,distance:42,width:196,matchHeight:94,roundGap:96,avatarFallbackUrl:"data:image/svg+xml;utf8,"+encodeURIComponent('\n            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">\n              <rect width="100%" height="100%" fill="#e5e7eb"/>\n              <text x="50%" y="54%" text-anchor="middle" font-size="28" fill="#6b7280">?</text>\n            </svg>\n          '),connectorColor:"white",onMatchClick:null,onMatchUpdate:null,onMatchFinish:null};const r=function(t){return{...n,...t,rounds:t.rounds??[]}}(t);let o=null;function a(){const t=document.getElementById(r.targetId);if(!t)throw new Error(`Element with id "${r.targetId}" not found`);return function(t){if(!Array.isArray(t)||0===t.length)throw new Error("rounds must be a non-empty array.");t.forEach((t,e)=>{if(!t||"object"!=typeof t)throw new Error(`Round at index ${e} must be an object.`);if(!Array.isArray(t.matches))throw new Error(`rounds[${e}].matches must be an array.`);if(0===t.matches.length)throw new Error(`rounds[${e}].matches must not be empty.`);t.matches.forEach((t,n)=>{if(!t||"object"!=typeof t)throw new Error(`rounds[${e}].matches[${n}] must be an object.`);if(!Array.isArray(t.players))throw new Error(`rounds[${e}].matches[${n}].players must be an array.`);if(2!==t.players.length)throw new Error(`rounds[${e}].matches[${n}] must have exactly 2 players.`)})});const e=t[0].matches.length;if(!((n=e)>0)||n&n-1)throw new Error("First round matches count must be a power of two.");var n;for(let r=1;r<t.length;r++){const e=t[r-1].matches.length/2,n=t[r].matches.length;if(n!==e)throw new Error(`Invalid bracket shape: rounds[${r}] must have ${e} matches, but got ${n}.`)}if(1!==t[t.length-1].matches.length)throw new Error("Last round must have exactly 1 match.")}(r.rounds),t}function s(t){return window.crypto?.randomUUID?`${t}-${window.crypto.randomUUID()}`:`${t}-${Math.random().toString(36).slice(2,9)}`}function c(t){const n="boolean"==typeof t.isFinished?t.isFinished:"completed"===t.status;return{matchId:t.matchId||s("match"),status:t.status||(n?"completed":"pending"),isFinished:n,players:[{...e,...t.players?.[0]},{...e,...t.players?.[1]}]}}function i(t){return"-"===t||""===t||null==t}function d(t){const[e,n]=t.players,r=i(e.score),o=i(n.score);if(r&&o)return{status:"pending",winnerIndexes:[]};const a=Number(e.score),s=Number(n.score);return Number.isNaN(a)||Number.isNaN(s)?{status:"invalid-score",winnerIndexes:[]}:a===s?{status:"draw",winnerIndexes:[]}:t.isFinished?{status:"completed",winnerIndexes:[a>s?0:1]}:{status:"in-progress",winnerIndexes:[]}}function u(t={}){return t.id||t.name||""}function h(t,n){const r=o.rounds[t]?.matches?.[n];if(!r)return;const a=d(r),s=o.rounds[t+1];if(!s)return;const c=Math.floor(n/2),i=s.matches[c];if(!i)return;const h=n%2,l="completed"===a.status?r.players[a.winnerIndexes[0]]:null;i.players[h]=l?function(t,e={},n){const r=u(t),o=u(e),a=r&&o&&r===o;return{name:t.name??"",avatarUrl:t.avatarUrl??"",seed:t.seed,id:t.id,score:a?e.score??"-":"-",previousMatchId:n}}(l,i.players[h],r.matchId):{...e}}function l(){for(let t=0;t<o.rounds.length-1;t++)o.rounds[t].matches.forEach((e,n)=>{h(t,n)})}function m(t){const e=r.width,n=r.roundGap,o=r.matchHeight,a=r.distance,s=t.rounds.map((t,r)=>{const s=r*(e+n);return{...t,x:s,matches:t.matches.map((t,n)=>({...t,x:s,y:n*(o+a),width:e,height:o}))}});for(let r=1;r<s.length;r++){const t=s[r-1],e=s[r];e.matches=e.matches.map((e,n)=>{const r=t.matches[2*n],a=t.matches[2*n+1];return{...e,y:(p(r)+p(a))/2-o/2}})}return{rounds:s,connectors:f(s),width:w(s),height:y(s)}}function p(t){return t.y+t.height/2}function f(t){const e=[];for(let n=0;n<t.length-1;n++){const r=t[n],o=t[n+1];r.matches.forEach((t,n)=>{const r=o.matches[Math.floor(n/2)];r&&e.push({id:s("connector"),from:{x:t.x+t.width,y:p(t)},to:{x:r.x,y:p(r)}})})}return e}function w(t){const e=t[t.length-1].matches[0];return e.x+e.width}function y(t){return Math.max(...t.flatMap(t=>t.matches.map(t=>t.y+t.height)))}function g(t){t.textContent=""}function x(t,e){g(t);const n=document.createElement("div");n.className="tournament-bracket-container",n.style.position="relative",n.style.width=`${e.width}px`,n.style.height=`${e.height}px`;const o=function(t){const e=document.createElementNS("http://www.w3.org/2000/svg","svg");return e.classList.add("tournament-bracket-connectors"),e.setAttribute("width",String(t.width)),e.setAttribute("height",String(t.height)),e.setAttribute("viewBox",`0 0 ${t.width} ${t.height}`),e.style.position="absolute",e.style.inset="0",e.style.overflow="visible",e.style.pointerEvents="none",e.style.zIndex="0",t.connectors.forEach(t=>{e.appendChild(function(t){const e=document.createElementNS("http://www.w3.org/2000/svg","path"),n=t.from.x+(t.to.x-t.from.x)/2,o=[`M ${t.from.x} ${t.from.y}`,`H ${n}`,`V ${t.to.y}`,`H ${t.to.x}`].join(" ");return e.setAttribute("d",o),e.setAttribute("fill","none"),e.setAttribute("stroke",r.connectorColor),e.setAttribute("stroke-width","1"),e.setAttribute("stroke-linejoin","round"),e.setAttribute("stroke-linecap","round"),e.classList.add("tournament-bracket-connector"),e}(t))}),e}(e);n.appendChild(o),e.rounds.forEach(t=>{n.appendChild(function(t){const e=document.createElement("div");return e.className="tournament-bracket-column",e.dataset.roundId=t.roundId,e.dataset.roundName=t.name,e.dataset.roundIndex=String(t.roundIndex),e.style.position="absolute",e.style.left=`${t.x}px`,e.style.top="0",e.style.width=`${r.width}px`,e.style.zIndex="1",t.matches.forEach(t=>{e.appendChild(function(t){const e=document.createElement("div"),n=d(t);e.id=t.matchId,e.className="match-container",e.dataset.matchStatus=n.status,e.style.position="absolute",e.style.top=`${t.y}px`,e.style.left="0",e.style.width=`${t.width}px`,e.style.height=`${t.height}px`;const o=document.createElement("div");return o.className="player-vs",o.textContent="VS",e.appendChild(o),e.appendChild(b(t.players[0],"tournament-bracket-first-player",n.winnerIndexes.includes(0))),e.appendChild(b(t.players[1],"tournament-bracket-second-player",n.winnerIndexes.includes(1))),e.addEventListener("click",()=>{"function"==typeof r.onMatchClick&&r.onMatchClick(t)}),e}(t))}),e}(t))}),t.appendChild(n)}function b(t,e,n){const o=document.createElement("div");o.classList.add("tournament-bracket-player",e),n&&o.classList.add("player-winner"),o.style.minWidth=`${r.width}px`;const a=document.createElement("div");a.className="avatar-and-name-container";const s=document.createElement("img");s.className="avatar",s.src=t.avatarUrl||r.avatarFallbackUrl,s.alt=t.name||"Player avatar";const c=document.createElement("div");c.className="name",c.textContent=t.name;const i=document.createElement("div");return i.className="score",i.textContent=t.score,a.appendChild(s),a.appendChild(c),o.appendChild(a),o.appendChild(i),o}function v(t,e){if(!o)throw new Error("Tournament bracket is not initialized");let n=-1,s=-1;if(o.rounds=o.rounds.map((r,o)=>({...r,matches:r.matches.map((r,a)=>r.matchId!==t?r:(n=o,s=a,function(t,e){const n=e.players||[];return c({...t,...e,players:[{...t.players?.[0],...n[0]},{...t.players?.[1],...n[1]}]})}(r,{...e,matchId:t})))})),-1===n||-1===s)throw new Error(`Match with id "${t}" not found`);l(),x(a(),m(o));const i=function(t){if(!o)return null;for(const e of o.rounds){const n=e.matches.find(e=>e.matchId===t);if(n)return n}return null}(t);return"function"==typeof r.onMatchUpdate&&i&&r.onMatchUpdate(i),i}return{init:function(){const t=a();var e;e=r.rounds,o={rounds:e.map((t,e)=>{const n=t.matches.map((t,n)=>{const r=c(t);return r.roundIndex=e,r.matchIndex=n,r});return{roundId:t.roundId||s("round"),name:t.name||`Round ${e+1}`,roundIndex:e,matches:n}})},l(),x(t,m(o))},updateMatch:v,setMatchScore:function(t,e,n){return v(t,{players:[{score:e},{score:n}]})},finishMatch:function(t,e,n){const o=v(t,{isFinished:!0,status:"completed",players:[{score:e},{score:n}]}),a=d(o);if("completed"!==a.status)throw new Error(`Match "${t}" cannot be finished because its state is "${a.status}".`);return"function"==typeof r.onMatchFinish&&r.onMatchFinish(o),o},destroy:function(){const t=document.getElementById(r.targetId);t&&g(t),o=null},getState:function(){return"function"==typeof structuredClone?structuredClone(o):JSON.parse(JSON.stringify(o))},onMatchClick(t){r.onMatchClick=t},onMatchUpdate(t){r.onMatchUpdate=t},onMatchFinish(t){r.onMatchFinish=t}}}export{t as default,t as tournamentBracket};