@jjlmoya/utils-sports 1.1.0

package/src/tool/tournamentBracket/ui/bracket-desktop.ts

@@ -0,0 +1,143 @@
+import type { TournamentData, Match } from '../models';
+import type { TournamentBracketUI } from '../ui';
+
+const COL_W = 260;
+const COL_GAP = 80;
+const CARD_H = 100;
+const UNIT_H = 110;
+
+const TROPHY = `<svg xmlns="http://www.w3.org/2000/svg" class="tb-trophy-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M20.2,2H19.5H18C17.1,2 16,3 16,4H8C8,3 6.9,2 6,2H4.5H3.8C2.8,2 2,2.8 2,3.8V4.5C2,8.9 5.6,12.5 10,12.5V15H7V17H17V15H14V12.5C18.4,12.5 22,8.9 22,4.5V3.8C22,2.8 21.2,2 20.2,2M4,4.5V3.8C4,3.6 4.2,3.5 4.5,3.5H6C6.5,3.5 7,4 7,4.5V9.5C4.2,9.5 4,4.5 4,4.5M20,4.5C20,4.5 19.8,9.5 17,9.5V4.5C17,4 17.5,3.5 18,3.5H19.5C19.8,3.5 20,3.6 20,3.8V4.5Z"/></svg>`;
+
+export class DesktopBracketRenderer {
+  container: HTMLElement | null;
+  private ui: TournamentBracketUI;
+
+  constructor(ui: TournamentBracketUI) {
+    this.ui = ui;
+    this.container = document.querySelector('.desktop-bracket-container');
+  }
+
+  public render(data: TournamentData) {
+    if (!this.container) return;
+    this.container.innerHTML = '';
+    const totalW = data.rounds.length * (COL_W + COL_GAP) + 120;
+    const totalH = (data.rounds[0]?.matches.length ?? 0) * UNIT_H + 200;
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tb-bracket-wrapper';
+    wrapper.style.cssText = `position:relative;width:${totalW}px;height:${totalH}px;min-width:100%;min-height:100%`;
+    data.rounds.forEach((round, rIndex) => wrapper.appendChild(this.buildColumn(round, rIndex, data.scoreEnabled)));
+    wrapper.appendChild(this.buildConnectors(data, totalW, totalH));
+    this.container.appendChild(wrapper);
+    this.enableDragScroll(this.container);
+  }
+
+  private buildColumn(round: { name: string; matches: Match[] }, rIndex: number, scoreEnabled?: boolean): HTMLElement {
+    const col = document.createElement('div');
+    col.style.cssText = `position:absolute;left:${rIndex * (COL_W + COL_GAP) + 60}px;top:40px;width:${COL_W}px`;
+    const header = document.createElement('div');
+    header.className = 'tb-round-header';
+    header.textContent = round.name;
+    col.appendChild(header);
+    round.matches.forEach((match, mIndex) => col.appendChild(this.buildMatchEl(match, rIndex, mIndex, scoreEnabled)));
+    return col;
+  }
+
+  private buildMatchEl(match: Match, rIndex: number, mIndex: number, scoreEnabled?: boolean): HTMLElement {
+    const spacing = UNIT_H * Math.pow(2, rIndex);
+    const topPos = mIndex * spacing + (spacing / 2 - CARD_H / 2) + 40;
+    const el = document.createElement('div');
+    el.style.cssText = `position:absolute;top:${topPos}px;width:100%`;
+    el.innerHTML = this.getMatchCardHTML(match, scoreEnabled);
+    return el;
+  }
+
+  private buildConnectors(data: TournamentData, totalW: number, totalH: number): SVGSVGElement {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('class', 'tb-connectors');
+    svg.style.cssText = `position:absolute;inset:0;width:${totalW}px;height:${totalH}px;z-index:0;pointer-events:none`;
+    data.rounds.forEach((round, rIndex) => {
+      if (rIndex === data.rounds.length - 1) return;
+      round.matches.forEach((_, mIndex) => svg.appendChild(this.buildPath(rIndex, mIndex)));
+    });
+    return svg;
+  }
+
+  private buildPath(rIndex: number, mIndex: number): SVGPathElement {
+    const spacing = UNIT_H * Math.pow(2, rIndex);
+    const nextSpacing = UNIT_H * Math.pow(2, rIndex + 1);
+    const myY = mIndex * spacing + (spacing / 2 - CARD_H / 2) + 40 + CARD_H / 2;
+    const nextY = Math.floor(mIndex / 2) * nextSpacing + (nextSpacing / 2 - CARD_H / 2) + 40 + CARD_H / 2;
+    const myX = rIndex * (COL_W + COL_GAP) + COL_W + 66;
+    const nextX = (rIndex + 1) * (COL_W + COL_GAP) + 54;
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    const midX = myX + COL_GAP / 2 - 6;
+    path.setAttribute('d', `M ${myX} ${myY} L ${midX} ${myY} L ${midX} ${nextY} L ${nextX} ${nextY}`);
+    path.setAttribute('stroke', '#cbd5e1');
+    path.setAttribute('stroke-width', '2');
+    path.setAttribute('fill', 'none');
+    return path;
+  }
+
+  private isDefinitiveBye(match: Match): boolean {
+    return !!(match.isBye || (match.winner && !match.player1) || (match.winner && !match.player2));
+  }
+
+  private getMatchCardHTML(match: Match, scoreEnabled?: boolean): string {
+    if (this.isDefinitiveBye(match)) return this.getByeCardHTML(match);
+    return this.getRegularDesktopCard(match, scoreEnabled);
+  }
+
+  private getByeCardHTML(match: Match): string {
+    const player = match.player1 ?? match.player2;
+    return `<div class="tb-desktop-card tb-desktop-card-bye"><div class="tb-connector-dot-right"></div><div class="tb-bye-label">${this.ui.byeLabel}</div><div class="tb-bye-name">${player?.name ?? this.ui.waiting}</div></div>`;
+  }
+
+  private isWinner(match: Match, p: { id: string } | null): boolean {
+    return !!(match.winner?.id && match.winner.id === p?.id);
+  }
+
+  private buildScoreInput(matchId: string, side: number, val: string | number): string {
+    return `<input type="number" class="tb-score-input" data-match-id="${matchId}" data-player="${side}" value="${val}" onclick="event.stopPropagation()">`;
+  }
+
+  private getScoreInput(match: Match, side: 1 | 2, scoreEnabled?: boolean): string {
+    if (!scoreEnabled || !match.player1 || !match.player2) return '';
+    const raw = side === 1 ? match.score1 : match.score2;
+    return this.buildScoreInput(match.id, side, raw != null ? raw : '');
+  }
+
+  private renderBtn(matchId: string, p: { id: string; name: string } | null, isWinner: boolean): string {
+    const cls = isWinner ? 'tb-match-btn tb-match-btn-winner' : 'tb-match-btn';
+    const label = p ? 'tb-player-label' : 'tb-player-empty-label';
+    const name = p ? p.name : '...';
+    const wid = p ? p.id : '';
+    const dis = p ? '' : 'disabled';
+    return `<button class="${cls}" data-match-id="${matchId}" data-winner-id="${wid}" ${dis}><span class="${label}">${name}</span>${isWinner ? TROPHY : ''}</button>`;
+  }
+
+  private buildDesktopPlayerRow(match: Match, side: 1 | 2, scoreEnabled?: boolean): string {
+    const p = side === 1 ? match.player1 : match.player2;
+    const btn = this.renderBtn(match.id, p, this.isWinner(match, p));
+    const input = this.getScoreInput(match, side, scoreEnabled);
+    return `<div class="tb-match-row">${btn}${input}</div>`;
+  }
+
+  private getRegularDesktopCard(match: Match, scoreEnabled?: boolean): string {
+    const row1 = this.buildDesktopPlayerRow(match, 1, scoreEnabled);
+    const row2 = this.buildDesktopPlayerRow(match, 2, scoreEnabled);
+    return `<div class="tb-desktop-card"><div class="tb-connector-dot-left"></div><div class="tb-connector-dot-right"></div>${row1}<div class="tb-match-divider"></div>${row2}</div>`;
+  }
+
+  private enableDragScroll(el: HTMLElement) {
+    let pos = { top: 0, left: 0, x: 0, y: 0 };
+    const onMove = (e: MouseEvent) => { el.scrollLeft = pos.left - (e.clientX - pos.x); el.scrollTop = pos.top - (e.clientY - pos.y); };
+    const onUp = () => { el.classList.remove('tb-cursor-grabbing'); el.classList.add('tb-cursor-grab'); document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+    el.onmousedown = (e: MouseEvent) => {
+      el.classList.add('tb-cursor-grabbing');
+      el.classList.remove('tb-cursor-grab');
+      pos = { left: el.scrollLeft, top: el.scrollTop, x: e.clientX, y: e.clientY };
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    };
+  }
+}

package/src/tool/tournamentBracket/ui/bracket-mobile.ts

@@ -0,0 +1,82 @@
+import type { TournamentData, Match } from '../models';
+import type { TournamentBracketUI } from '../ui';
+
+export class MobileBracketRenderer {
+  container: HTMLElement | null;
+  private ui: TournamentBracketUI;
+
+  constructor(ui: TournamentBracketUI) {
+    this.ui = ui;
+    this.container = document.querySelector('.bracket-mobile');
+  }
+
+  public render(data: TournamentData, activeRound: number, onTabClick: (i: number) => void) {
+    if (!this.container) return;
+    this.container.innerHTML = this.buildTabs(data, activeRound) + this.buildRounds(data, activeRound);
+    this.container.querySelectorAll('.tb-round-tab').forEach((tab) => {
+      tab.addEventListener('click', () => onTabClick(parseInt((tab as HTMLElement).dataset.roundIndex ?? '0')));
+    });
+  }
+
+  private buildTabs(data: TournamentData, activeRound: number): string {
+    const tabs = data.rounds.map((round, i) => `<button class="tb-round-tab${i === activeRound ? ' tb-round-tab-active' : ''}" data-round-index="${i}">${round.name}</button>`).join('');
+    return `<div class="tb-tabs">${tabs}</div>`;
+  }
+
+  private buildRounds(data: TournamentData, activeRound: number): string {
+    const rounds = data.rounds.map((round, i) => {
+      const active = i === activeRound;
+      const cards = round.matches.length === 0
+        ? `<div class="tb-round-empty">${this.ui.emptyRound}</div>`
+        : round.matches.map((m) => this.getMatchCardHTML(m)).join('');
+      return `<div class="tb-round-content${active ? ' tb-round-active' : ''}">${cards}</div>`;
+    }).join('');
+    return `<div class="tb-rounds">${rounds}</div>`;
+  }
+
+  private isDefinitiveBye(match: Match): boolean {
+    return !!(match.isBye || (match.winner && !match.player1) || (match.winner && !match.player2));
+  }
+
+  private getMatchCardHTML(match: Match): string {
+    if (this.isDefinitiveBye(match)) {
+      const player = match.player1 ?? match.player2;
+      return `<div class="tb-match-card tb-match-card-bye"><span class="tb-bye-label">${this.ui.byeLabel}</span><div class="tb-bye-name">${player?.name ?? this.ui.waiting}</div></div>`;
+    }
+    return this.getRegularCardHTML(match);
+  }
+
+  private buildScoreInput(matchId: string, player: number, value: string | number, disabled: boolean): string {
+    return `<input type="number" class="tb-score-input" data-match-id="${matchId}" data-player="${player}" value="${value}" min="0" placeholder="-" ${disabled ? 'disabled' : ''}>`;
+  }
+
+  private isWinner(match: Match, p: { id: string } | null): boolean {
+    return !!(match.winner?.id && match.winner.id === p?.id);
+  }
+
+  private renderPlayerBtn(matchId: string, p: { id: string; name: string } | null, isWinner: boolean): string {
+    const cls = isWinner ? 'tb-match-btn tb-match-btn-winner' : 'tb-match-btn';
+    const label = p ? 'tb-player-label' : 'tb-player-empty-label';
+    const trophy = isWinner ? '<span class="tb-winner-icon"></span>' : '';
+    const name = p ? p.name : '...';
+    const wid = p ? p.id : '';
+    const dis = p ? '' : 'disabled';
+    return `<button class="${cls}" data-match-id="${matchId}" data-winner-id="${wid}" ${dis}><span class="${label}">${name}</span>${trophy}</button>`;
+  }
+
+  private buildPlayerBtn(match: Match, side: 1 | 2): string {
+    const p = side === 1 ? match.player1 : match.player2;
+    return this.renderPlayerBtn(match.id, p, this.isWinner(match, p));
+  }
+
+  private getRegularCardHTML(match: Match): string {
+    const hasWinner = !!match.winner?.id;
+    const s1 = match.score1 != null ? match.score1 : '';
+    const s2 = match.score2 != null ? match.score2 : '';
+    const input1 = this.buildScoreInput(match.id, 1, s1, !match.player1 || hasWinner);
+    const input2 = this.buildScoreInput(match.id, 2, s2, !match.player2 || hasWinner);
+    const btn1 = this.buildPlayerBtn(match, 1);
+    const btn2 = this.buildPlayerBtn(match, 2);
+    return `<div class="tb-match-card"><div class="tb-match-row">${btn1}${input1}</div><div class="tb-match-divider"></div><div class="tb-match-row">${btn2}${input2}</div></div>`;
+  }
+}

package/src/tool/tournamentBracket/ui/mediator.ts

@@ -0,0 +1,96 @@
+import type { TournamentBracketUI } from '../ui';
+
+const g = (id: string) => document.getElementById(id);
+
+export class TournamentUIMediator {
+  setupView: HTMLElement | null;
+  bracketView: HTMLElement | null;
+  activeControls: HTMLElement | null;
+  inputName: HTMLInputElement | null;
+  inputPlayer: HTMLInputElement | null;
+  btnAdd: HTMLButtonElement | null;
+  btnGenerate: HTMLButtonElement | null;
+  btnReset: HTMLButtonElement | null;
+  btnClearPlayers: HTMLButtonElement | null;
+  btnNextMatch: HTMLButtonElement | null;
+  titleDisplay: HTMLElement | null;
+  dateDisplay: HTMLElement | null;
+  private ui: TournamentBracketUI;
+
+  constructor(ui: TournamentBracketUI) {
+    this.ui = ui;
+    this.setupView = g('setup-view');
+    this.bracketView = g('bracket-view');
+    this.activeControls = g('active-controls');
+    this.inputName = g('tournament-name-input') as HTMLInputElement;
+    this.inputPlayer = g('new-player-input') as HTMLInputElement;
+    this.btnAdd = g('add-player-btn') as HTMLButtonElement;
+    this.btnGenerate = g('generate-btn') as HTMLButtonElement;
+    this.btnReset = g('reset-btn') as HTMLButtonElement;
+    this.btnClearPlayers = g('clear-players-btn') as HTMLButtonElement;
+    this.btnNextMatch = g('next-match-btn') as HTMLButtonElement;
+    this.titleDisplay = g('tournament-title-display');
+    this.dateDisplay = g('tournament-date-display');
+  }
+
+  setVisibility(state: 'SETUP' | 'ACTIVE') {
+    const isActive = state === 'ACTIVE';
+    this.setupView?.classList.toggle('tb-hidden', isActive);
+    this.bracketView?.classList.toggle('tb-hidden', !isActive);
+    this.activeControls?.classList.toggle('tb-hidden', !isActive);
+  }
+
+  updateHeader(name: string, date: string) {
+    if (this.titleDisplay && !this.titleDisplay.querySelector('input')) {
+      this.titleDisplay.innerHTML = `${name} <span class="tb-edit-icon" title="Editar"></span>`;
+    }
+    if (this.dateDisplay) this.dateDisplay.textContent = date;
+  }
+
+  enableTitleEditing(onSave: (n: string) => void) {
+    if (!this.titleDisplay) return;
+    this.titleDisplay.addEventListener('click', () => this.openTitleInput(onSave));
+  }
+
+  private openTitleInput(onSave: (n: string) => void) {
+    if (!this.titleDisplay || this.titleDisplay.querySelector('input')) return;
+    const raw = this.titleDisplay.textContent?.trim() ?? '';
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.value = raw;
+    input.className = 'tb-title-input';
+    this.titleDisplay.innerHTML = '';
+    this.titleDisplay.appendChild(input);
+    input.focus();
+    const finish = () => onSave(input.value.trim() || raw);
+    input.onblur = finish;
+    input.onkeydown = (e) => { if (e.key === 'Enter') input.blur(); };
+    input.onclick = (e) => e.stopPropagation();
+  }
+
+  getPlayerInput(): string { return this.inputPlayer?.value ?? ''; }
+  clearPlayerInput() { if (this.inputPlayer) { this.inputPlayer.value = ''; this.inputPlayer.focus(); } }
+  getTournamentName(): string {
+    return this.inputName?.value.trim() || `${this.ui.defaultName} ${new Date().toLocaleDateString()}`;
+  }
+
+  showVictoryToast() {
+    const toast = document.createElement('div');
+    toast.className = 'tb-toast tb-toast-victory';
+    toast.textContent = this.ui.toastFinished;
+    document.body.appendChild(toast);
+    setTimeout(() => toast.remove(), 3000);
+  }
+
+  showToast(message: string, type: 'success' | 'error' | 'info' = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `tb-toast tb-toast-${type}`;
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    setTimeout(() => {
+      toast.style.opacity = '0';
+      toast.style.transition = 'opacity 300ms';
+      setTimeout(() => toast.remove(), 300);
+    }, 3000);
+  }
+}

package/src/tool/tournamentBracket/ui/navigator.ts

@@ -0,0 +1,84 @@
+import type { TournamentManager } from '../logic/manager';
+
+export class TournamentNavigator {
+  static findNextPlayableMatch(manager: TournamentManager) {
+    for (const round of manager.rounds) {
+      const m = round.matches.find((x) => !x.winner && x.player1 && x.player2);
+      if (m) return m;
+    }
+    return null;
+  }
+
+  static isTournamentUnfinished(manager: TournamentManager): boolean {
+    return manager.rounds.some((r) => r.matches.some((m) => !m.winner));
+  }
+
+  static scrollToMatch(
+    matchId: string,
+    manager: TournamentManager,
+    activeRound: number,
+    callbacks: { onMobileRoundChange: (i: number) => void; onShowToast: () => void }
+  ) {
+    const desktop = document.querySelector('.desktop-bracket-container') as HTMLElement;
+    if (desktop?.offsetParent !== null) {
+      this.handleDesktopScroll(desktop, matchId);
+    } else {
+      this.handleMobileScroll(matchId, manager, activeRound, callbacks.onMobileRoundChange);
+    }
+  }
+
+  private static handleDesktopScroll(container: HTMLElement, matchId: string) {
+    const btn = container.querySelector(`button[data-match-id="${matchId}"]`) as HTMLElement;
+    if (!btn) return;
+    const card = (btn.closest('div[style*="position: absolute"]') as HTMLElement) ?? btn;
+    this.scrollDesktopToCard(container, card);
+    this.highlightElement(card);
+  }
+
+  private static scrollDesktopToCard(container: HTMLElement, card: HTMLElement) {
+    if (card.style.position === 'absolute') {
+      const top = parseInt(card.style.top ?? '0');
+      const left = parseInt(card.parentElement?.style.left ?? '0');
+      container.scrollTo({
+        left: Math.max(0, left - container.clientWidth / 2 + card.offsetWidth / 2),
+        top: Math.max(0, top - container.clientHeight / 2 + card.offsetHeight / 2),
+        behavior: 'smooth',
+      });
+    } else {
+      const cr = card.getBoundingClientRect();
+      const co = container.getBoundingClientRect();
+      container.scrollTo({
+        left: container.scrollLeft + (cr.left + cr.width / 2) - (co.left + co.width / 2),
+        top: container.scrollTop + (cr.top + cr.height / 2) - (co.top + co.height / 2),
+        behavior: 'smooth',
+      });
+    }
+  }
+
+  private static handleMobileScroll(
+    matchId: string, manager: TournamentManager, activeRound: number, onChange: (i: number) => void
+  ) {
+    const rIdx = manager.rounds.findIndex((r) => r.matches.some((m) => m.id === matchId));
+    if (rIdx !== -1 && rIdx !== activeRound) {
+      onChange(rIdx);
+      setTimeout(() => {
+        const btn = document.querySelector(`.bracket-mobile button[data-match-id="${matchId}"]`) as HTMLElement;
+        if (btn) this.scrollMobileIntoView(btn);
+      }, 100);
+      return;
+    }
+    const btn = document.querySelector(`.bracket-mobile button[data-match-id="${matchId}"]`) as HTMLElement;
+    if (btn) this.scrollMobileIntoView(btn);
+  }
+
+  private static scrollMobileIntoView(btn: HTMLElement) {
+    const card = (btn.closest('.tb-match-card') as HTMLElement) ?? btn;
+    card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    this.highlightElement(card);
+  }
+
+  private static highlightElement(el: HTMLElement) {
+    el.classList.add('tb-highlight');
+    setTimeout(() => el.classList.remove('tb-highlight'), 2000);
+  }
+}

package/src/tool/tournamentBracket/ui/setup.ts

@@ -0,0 +1,120 @@
+import type { TournamentBracketUI } from '../ui';
+
+const CROWN_ICON = `<svg xmlns="http://www.w3.org/2000/svg" class="tb-icon-xs" viewBox="0 0 24 24" fill="currentColor"><path d="M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z"/></svg>`;
+const TRASH_ICON = `<svg xmlns="http://www.w3.org/2000/svg" class="tb-icon-sm" viewBox="0 0 24 24" fill="currentColor"><path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"/></svg>`;
+const CLOCK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" class="tb-icon-xs" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20C7.6 20 4 16.4 4 12S7.6 4 12 4S20 7.6 20 12S16.4 20 12 20M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22S22 17.5 22 12S17.5 2 12 2M16.2 16.2L11 11V7H12.5V10.2L17 14.9L16.2 16.2Z"/></svg>`;
+
+export class SetupRenderer {
+  listPlayers: HTMLElement | null;
+  countPlayers: HTMLElement | null;
+  btnGenerate: HTMLButtonElement | null;
+  shuffleWrapper: HTMLElement | null;
+  historyContainer: HTMLElement | null;
+  private ui: TournamentBracketUI;
+
+  constructor(ui: TournamentBracketUI) {
+    this.ui = ui;
+    this.listPlayers = document.getElementById('player-list');
+    this.countPlayers = document.getElementById('player-count');
+    this.btnGenerate = document.getElementById('generate-btn') as HTMLButtonElement;
+    this.shuffleWrapper = document.getElementById('shuffle-wrapper');
+    this.historyContainer = document.getElementById('history-container');
+  }
+
+  public updatePlayerList(players: string[], onRemove: (i: number) => void) {
+    if (!this.listPlayers || !this.countPlayers || !this.btnGenerate) return;
+    this.countPlayers.textContent = String(players.length);
+    const clearBtn = document.getElementById('clear-players-btn');
+    if (players.length === 0) {
+      this.listPlayers.innerHTML = `<li class="tb-player-empty">${this.ui.emptyList}</li>`;
+      this.setGenerateBtn(false, 0);
+      clearBtn?.classList.add('tb-hidden');
+      return;
+    }
+    clearBtn?.classList.remove('tb-hidden');
+    this.listPlayers.innerHTML = '';
+    const frag = document.createDocumentFragment();
+    players.forEach((player, i) => frag.appendChild(this.buildPlayerItem(player, i, onRemove)));
+    this.listPlayers.appendChild(frag);
+    this.setGenerateBtn(players.length >= 2, players.length);
+  }
+
+  private buildPlayerItem(player: string, i: number, onRemove: (i: number) => void): HTMLElement {
+    const li = document.createElement('li');
+    li.className = 'tb-player-item';
+    const span = document.createElement('span');
+    span.textContent = player;
+    span.className = 'tb-player-name';
+    const btn = document.createElement('button');
+    btn.innerHTML = TRASH_ICON;
+    btn.className = 'tb-player-remove';
+    btn.onclick = () => onRemove(i);
+    li.appendChild(span);
+    li.appendChild(btn);
+    return li;
+  }
+
+  private setGenerateBtn(enabled: boolean, count: number) {
+    if (!this.btnGenerate) return;
+    this.btnGenerate.disabled = !enabled;
+    this.btnGenerate.classList.toggle('tb-btn-disabled', !enabled);
+    this.btnGenerate.textContent = enabled ? `${this.ui.generateBtn} (${count})` : this.ui.generateBtn;
+  }
+
+  public renderShuffleControl(isEnabled: boolean, onToggle: (v: boolean) => void) {
+    if (!this.shuffleWrapper) return;
+    if (!this.shuffleWrapper.querySelector('#shuffle-check')) {
+      this.shuffleWrapper.appendChild(this.buildToggleGroup());
+      this.shuffleWrapper.querySelector('#shuffle-check')?.addEventListener('change', (e) => {
+        onToggle((e.target as HTMLInputElement).checked);
+      });
+    }
+    const check = this.shuffleWrapper.querySelector('#shuffle-check') as HTMLInputElement;
+    if (check) check.checked = isEnabled;
+  }
+
+  private buildToggleGroup(): HTMLElement {
+    const div = document.createElement('div');
+    div.className = 'tb-toggle-group';
+    div.innerHTML = `
+      <label class="tb-toggle-label"><div class="tb-toggle"><input type="checkbox" id="shuffle-check" class="tb-toggle-input"><div class="tb-toggle-track"></div><div class="tb-toggle-thumb"></div></div><span class="tb-toggle-text">${this.ui.shuffleLabel}</span></label>
+      <label class="tb-toggle-label"><div class="tb-toggle"><input type="checkbox" id="score-check" class="tb-toggle-input"><div class="tb-toggle-track"></div><div class="tb-toggle-thumb"></div></div><span class="tb-toggle-text">${this.ui.scoreLabel}</span></label>
+    `;
+    return div;
+  }
+
+  public renderScoreControl(isEnabled: boolean, onToggle: (v: boolean) => void) {
+    const check = this.shuffleWrapper?.querySelector('#score-check') as HTMLInputElement;
+    if (check) { check.checked = isEnabled; check.onchange = (e) => onToggle((e.target as HTMLInputElement).checked); }
+  }
+
+  public renderHistoryList(history: TournamentData[], onLoad: (id: string) => void, onDelete: (id: string) => void) {
+    if (!this.historyContainer) return;
+    if (history.length === 0) {
+      this.historyContainer.innerHTML = `<div class="tb-history-empty">${this.ui.noOldTournaments}</div>`;
+      return;
+    }
+    this.historyContainer.innerHTML = '';
+    const frag = document.createDocumentFragment();
+    [...history].sort((a, b) => b.createdAt - a.createdAt).forEach((item) => {
+      frag.appendChild(this.buildHistoryItem(item, onLoad, onDelete));
+    });
+    this.historyContainer.appendChild(frag);
+  }
+
+  private buildHistoryItem(item: TournamentData, onLoad: (id: string) => void, onDelete: (id: string) => void): HTMLElement {
+    const el = document.createElement('div');
+    el.className = 'tb-history-item';
+    const date = new Date(item.createdAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+    const finished = item.status === 'FINISHED';
+    let statusHtml = '';
+    if (finished && item.winner) statusHtml = `<span class="tb-history-badge-winner">${CROWN_ICON} ${(item.winner as { name: string }).name}</span>`;
+    else if (!finished) statusHtml = `<span class="tb-history-badge-active">${CLOCK_ICON}</span>`;
+    el.innerHTML = `<button class="tb-history-load" data-id="${item.id}"><span class="tb-history-name">${item.name}</span><span class="tb-history-date">${date} ${statusHtml}</span></button><button class="tb-history-delete" data-id="${item.id}" title="Borrar">${TRASH_ICON}</button>`;
+    el.querySelector('.tb-history-load')?.addEventListener('click', () => onLoad(item.id));
+    el.querySelector('.tb-history-delete')?.addEventListener('click', (e) => { e.stopPropagation(); onDelete(item.id); });
+    return el;
+  }
+}
+
+interface TournamentData { id: string; name: string; createdAt: number; status: string; winner?: unknown; }

package/src/tool/tournamentBracket/ui.ts

@@ -0,0 +1,42 @@
+export interface TournamentBracketUI extends Record<string, string> {
+  tournamentInProgress: string;
+  nextMatch: string;
+  share: string;
+  backNew: string;
+  back: string;
+  newTournament: string;
+  setupSubtitle: string;
+  tournamentNameLabel: string;
+  tournamentNamePlaceholder: string;
+  addPlayersLabel: string;
+  addPlayerPlaceholder: string;
+  playersLabel: string;
+  clearAll: string;
+  emptyList: string;
+  howItWorks: string;
+  howItWorksText: string;
+  historyLabel: string;
+  noHistory: string;
+  noOldTournaments: string;
+  generateBtn: string;
+  shuffleLabel: string;
+  scoreLabel: string;
+  dragHint: string;
+  roundFinal: string;
+  roundSemifinal: string;
+  roundQuarter: string;
+  roundPrefix: string;
+  byeLabel: string;
+  waiting: string;
+  emptyRound: string;
+  confirmClearPlayers: string;
+  alertMinPlayers: string;
+  alertLoadFailed: string;
+  confirmDeleteTournament: string;
+  toastShareLimit: string;
+  toastShareError: string;
+  toastShareCopied: string;
+  toastShareFailed: string;
+  toastFinished: string;
+  defaultName: string;
+}

package/src/tools.ts

@@ -0,0 +1,13 @@
+import type { ToolDefinition } from './types';
+import { SCORE_KEEPER_TOOL } from './tool/scoreKeeper/index';
+import { TOURNAMENT_BRACKET_TOOL } from './tool/tournamentBracket/index';
+import { GYM_TRACKER_TOOL } from './tool/gymTracker/index';
+import { REACTION_TESTER_TOOL } from './tool/reactionTester/index';
+
+export const ALL_TOOLS: ToolDefinition[] = [
+  SCORE_KEEPER_TOOL,
+  TOURNAMENT_BRACKET_TOOL,
+  GYM_TRACKER_TOOL,
+  REACTION_TESTER_TOOL,
+];
+

package/src/types.ts

@@ -0,0 +1,72 @@
+import type { SEOSection } from '@jjlmoya/utils-shared';
+import type { WithContext, Thing } from 'schema-dts';
+
+export type { SEOSection };
+
+export type KnownLocale =
+  | 'ar' | 'da' | 'de' | 'en' | 'es' | 'fi'
+  | 'fr' | 'it' | 'ja' | 'ko' | 'nb' | 'nl'
+  | 'pl' | 'pt' | 'ru' | 'sv' | 'tr' | 'zh';
+
+export interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+export interface BibliographyEntry {
+  name: string;
+  url: string;
+}
+
+export interface HowToStep {
+  name: string;
+  text: string;
+}
+
+export interface ToolLocaleContent<TUI extends Record<string, string> = Record<string, string>> {
+  slug: string;
+  title: string;
+  description: string;
+  ui: TUI;
+  seo: SEOSection[];
+  faqTitle?: string;
+  faq: FAQItem[];
+  bibliographyTitle?: string;
+  bibliography: BibliographyEntry[];
+  howTo: HowToStep[];
+  schemas: WithContext<Thing>[];
+}
+
+export interface CategoryLocaleContent {
+  slug: string;
+  title: string;
+  description: string;
+  seo: SEOSection[];
+}
+
+export type LocaleLoader<T> = () => Promise<T>;
+
+export type LocaleMap<T> = Partial<Record<KnownLocale, LocaleLoader<T>>>;
+
+export interface SportsToolEntry<TUI extends Record<string, string> = Record<string, string>> {
+  id: string;
+  icons: {
+    bg: string;
+    fg: string;
+  };
+  i18n: LocaleMap<ToolLocaleContent<TUI>>;
+}
+
+export interface SportsCategoryEntry {
+  icon: string;
+  tools: SportsToolEntry<Record<string, string>>[];
+  i18n: LocaleMap<CategoryLocaleContent>;
+}
+
+export interface ToolDefinition {
+  entry: SportsToolEntry<Record<string, string>>;
+  Component: unknown;
+  SEOComponent: unknown;
+  BibliographyComponent: unknown;
+}
+