@amirhossein-shk/tournament-bracket-js 1.0.0

package/dist/tournament-bracket.js

@@ -0,0 +1,449 @@
+(function(global, factory) {
+	typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() : typeof define === "function" && define.amd ? define([], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, global.tournamentBracket = factory());
+})(this, function() {
+	//#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
+	return tournamentBracket;
+});

package/dist/tournament-bracket.min.css

@@ -0,0 +1 @@
+@import"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 .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:#111}.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.min.css.map */

package/dist/tournament-bracket.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/tournament-bracket.scss"],"names":[],"mappings":"AAAQ,uFAER,KACE,yBAGF,oBACE,cAGF,8BACE,kBAGF,+BACE,kBACA,QACA,UAGF,2BACE,kBACA,UAGF,iBACE,kBACA,UAGF,8BACE,2BAGF,8BACE,aACA,SAEA,yDACE,aACA,sBACA,mBACA,SACA,6BAEA,0EACE,kBACA,mBA8BA,qFACE,kBACA,qBACA,OACA,QACA,2BACA,cACA,WACA,YACA,aACA,mBACA,uBACA,kBACA,yBACA,yBACA,cACA,mBACA,eACA,kBACA,gBACA,mBACA,UAGF,qGACE,aACA,mBACA,8BACA,YACA,eACA,yBACA,cACA,mBACA,eACA,kBACA,gBACA,mBACA,sBAEA,gIACE,aACA,QACA,mBAGF,mHACE,sBAGF,6GACE,WACA,YACA,mBACA,gBAGF,2GACE,eACA,gBACA,uBACA,mBAGF,4GACE,mBACA,eACA,eACA,kBACA,gBACA,mBACA","file":"tournament-bracket.min.css"}

package/dist/tournament-bracket.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):(t="undefined"!=typeof globalThis?globalThis:t||self).tournamentBracket=e()}(this,function(){return function(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},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:y(s),height:w(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 y(t){const e=t[t.length-1].matches[0];return e.x+e.width}function w(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}}}});

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@amirhossein-shk/tournament-bracket-js",
+  "version": "1.0.0",
+  "description": "Lightweight vanilla JS tournament bracket library",
+  "main": "tournamentBracket.js",
+  "module": "dist/tournament-bracket.esm.js",
+  "style": "dist/tournament-bracket.css",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run browser && npm run browser:min && npm run esm && npm run esm:min && npm run css && npm run css:min && npm run clean:temp",
+    "clean": "shx rm -rf dist dist-temp",
+    "clean:temp": "shx rm -rf dist-temp",
+    "browser": "vite build --mode browser",
+    "browser:min": "vite build --mode browser-min --outDir dist-temp && shx cp dist-temp/tournament-bracket.js dist/tournament-bracket.min.js",
+    "esm": "vite build --mode esm",
+    "esm:min": "vite build --mode esm-min --outDir dist-temp && shx cp dist-temp/tournament-bracket.esm.js dist/tournament-bracket.esm.min.js",
+    "css": "sass src/tournament-bracket.scss dist/tournament-bracket.css --style expanded",
+    "css:min": "sass src/tournament-bracket.scss dist/tournament-bracket.min.css --style compressed"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amirhossein-shk/tournament-bracket.git"
+  },
+  "keywords": [
+    "tournament",
+    "bracket",
+    "javascript",
+    "vanilla-js",
+    "single-elimination"
+  ],
+  "author": "",
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/amirhossein-shk/tournament-bracket/issues"
+  },
+  "homepage": "https://github.com/amirhossein-shk/tournament-bracket#readme",
+  "devDependencies": {
+    "shx": "^0.4.0",
+    "terser": "^5.48.0",
+    "vite": "^8.0.16",
+    "sass": "^1.101.0"
+  },
+  "license": "MIT"
+}