Repository navigation
Visual drag-and-drop bracket builder for knockout entrants - #54
Merged
Merged
Conversation
The entrant slot list is the whole bracket tree: consecutive round-1 matches feed each next-round game, so the order the matches sit in decides who can meet in the Round of 16 and beyond. The builder showed a flat match list with no view of that, making it easy to arrange a bracket whose later-round pairings are wrong. - Each round-1 match gets up/down controls to reorder it - A live "Projected bracket paths" panel folds the current order into the Round of 16 (with the feeding matchups' teams inlined) and the deeper rounds, updating as slots and order change - BracketAdjacencyTest locks the underlying contract end-to-end: adjacent round-1 match winners are routed into the same next-round game, and changing the match order changes who meets Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replaces the flat list of qualifier dropdowns (with up/down reorder and a separate projected-paths panel) with a visual bracket builder, after the list proved hard to use: - A qualifier palette (group winners / runners-up / best-placed, colour- dotted) whose chips drag onto bracket slots; placed chips dim - The real bracket tree as the editing surface: round-1 matches you fill, then the derived later rounds (winner M1 vs winner M2 …) so the paths are visible while you build - Drag a matchup by its handle to reorder it; drag a placed chip between slots to move or swap; × to unassign - Native HTML5 drag-and-drop — no new dependency - Templates (classic/seeded) and all validation unchanged; slots only save once every one is filled Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
ylynfatt
changed the title
Addresses two gaps in the visual builder: Screen real estate — the edit form was capped at max-w-2xl, cramping the bracket into a narrow scroll. Bracket stages now use the full width (max-w-6xl) with the plain text fields kept readable at max-w-2xl, and the palette moves beside the bracket (sticky) on large screens, stacking above it on small ones. Touch support — native HTML5 drag never fires on touch screens, so the builder was unusable on phones/tablets. Added tap-to-place as a first-class alternative (also better for keyboard/pointer): tap a qualifier then a slot to place it, tap a placed chip to pick it up/move, tap a matchup handle then another to reorder. Drag still works on desktop. Chips and handles are now real buttons for accessibility. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Reworks the knockout entrants builder into a visual, drag-and-drop bracket — replacing the earlier flat list of qualifier dropdowns (with up/down reorder + a separate projected-paths panel), which was hard to use. Design was approved from an interactive mockup first.
winner M1 vs winner M2, so the paths are visible while building (no separate panel).⠿handle to reorder it (which reshapes the downstream rounds); drag a placed chip between slots to move or swap;×to unassign.Supersedes this branch's earlier flat-list iteration; keeps the
BracketAdjacencyTestcontract test.Testing
BracketAdjacencyTest(unchanged) locks the entrant-order → next-round-pairing contract the builder produces, end-to-end through the real generator +AdvanceBracketWinner.config.entrantspayload.🤖 Generated with Claude Code