diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 6e9a7ba..9f4bb31 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -3937,6 +3937,23 @@ function teamsOf(match) { .filter(Boolean) } +function byeAdvanceNames(match) { + return [match?.team_a_name, match?.team_b_name] + .map(displayTeamName) + .filter(Boolean) +} + +function noOpponentTooltip(match, roundLabel) { + const names = byeAdvanceNames(match) + const teamText = names.length > 1 + ? `${names.slice(0, -1).join(', ')} and ${names[names.length - 1]}` + : names[0] || 'this team' + const opener = names.length > 1 + ? 'One or more teams did not confirm in time' + : 'A team did not confirm in time' + return `${opener}, so Gaijin automatically advanced ${teamText} to ${roundLabel}.` +} + // Drag-anywhere pan surface. A tap still clicks; only motion past a small // threshold pans (and suppresses the click). Move/up live on the window so a fast // drag keeps panning even when the cursor leaves the canvas. @@ -4061,7 +4078,13 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) { for (const match of side.columns[c].matches) { if (fed.has(match.match_id)) continue const box = boxOf(layoutKey(c, match)) - if (box) byes.push({ x: box.left, y: box.mid }) + if (box) { + byes.push({ + x: box.left, + y: box.mid, + title: noOpponentTooltip(match, side.columns[c].label), + }) + } } } setConnectors({ width: grid.scrollWidth, height: grid.scrollHeight, lines, byes }) @@ -4099,17 +4122,19 @@ function TournamentBracketSide({ side, navigate, highlight, onHover }) { ) })} {connectors.byes.map((bye, index) => ( - + + {bye.title} + - bye + no opponent ))} {side.columns.map((column, columnIndex) => (
-

+

{column.label}

diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 6c41542..859f23f 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -937,6 +937,16 @@ h3 { stroke-dasharray: 3 4; } +.bracket-bye-hover { + cursor: help; + pointer-events: all; +} + +.bracket-bye-hit { + stroke: transparent; + stroke-width: 18px; +} + .bracket-bye-tag { fill: var(--color-text-muted); font-size: 9px;