NetDraw

Description

NetDraw is a lightweight, spreadsheet-style WordPress plugin designed specifically for managing and displaying knockout tennis tournaments. Think of it as “TablePress, but built for brackets instead of standard tables.”

It eliminates the need to use clunky third-party bracket websites or messy image uploads, keeping the entire tennis tournament experience native to your WordPress site.

For Tournament Admins (Backend)

• Simple Setup: Create a new tournament draw just like writing a standard post or page in WordPress.
• Flexible Sizing: Choose your tournament size (8, 16, 32, or 64 players) via a simple dropdown selection.
• Draw Types: Choose between a Standard single-elimination draw and a Qualifying draw that stops once the configured number of players secure advancement spots into a main draw.
• Easy Data Entry: Dynamically generates a clean grid of input fields where you can type in player names for the first round and log scores as matches finish.
• Automatic Progression: Mark a player as the winner of a match and the plugin automatically pushes their name forward into the next round’s slot — saving you from manual re-typing.

For Website Visitors (Frontend)

• Visual Brackets: Generates a clean, classic, tree-style tournament bracket on any page or post using a simple shortcode (e.g., [netdraw id="123"]).
• Qualified (Q) Badges: In qualifying draws, players who win their final qualifying match get a clear Q badge indicating they have advanced to the main draw.
• Path Highlighting: Hovering over any player highlights their entire journey (matches won, played, and progressed) across all rounds in real-time.
• Responsive Design: Uses a custom CSS tree-structure layout that enables smooth horizontal scrolling on mobile, tablet, and desktop screens without breaking the visual integrity.
• No Bloat: Built purely using Vanilla JS and native CSS — no jQuery or external visual dependencies.

Usage

Creating a Tournament

1. Navigate to the NetDraw section in your WordPress Admin sidebar.
2. Click Add New Tournament.
3. Enter a title for your tournament (e.g., Summer Club Open 2026).
4. Under the Tournament Bracket Editor meta box, choose the tournament size (8, 16, 32, or 64 players).
5. Choose the Draw Type:
   • Standard — the bracket plays out to a single champion and finalist.
   • Qualifying — set the Main Draw Qualifying Spots (2, 4, 8, …). The bracket stops at the round where the remaining winners equal that number; those players advance to the main draw.
6. Fill in the player names for Round 1.
7. As matches finish, fill in the score (e.g., 6-4 6-2) and click the checkmark next to the winning player’s name to automatically progress them to the next round.
8. Click Publish or Update to save.

Displaying the Bracket

Copy the shortcode shown in the Tournament Bracket Editor, or construct it manually using the Post ID:

[netdraw id="YOUR_POST_ID"]

Paste it into any WordPress Post, Page, or Widget area to display the visual bracket.

Data and Privacy

NetDraw does not collect, store, or transmit any personal data to external services. All tournament data (player names, scores, results) is stored exclusively in your own WordPress database as post meta. No cookies are set by this plugin on the frontend.

Developer Notes

Data Schema

The plugin stores tournament configuration and match data in a flat, index-based JSON object inside the _netdraw_bracket_data post meta field:

{
  "size": 16,
  "drawType": "qualifying",
  "qualifyingSpots": 4,
  "matches": {
    "r1_m1": { "p1": "Federer", "p2": "Nadal", "score": "6-4 6-2", "winner": "p1" },
    "r1_m2": { "p1": "Djokovic", "p2": "Murray", "score": "7-5 6-3", "winner": "p1" },
    "r2_m1": { "p1": "Federer", "p2": "Sinner", "score": "", "winner": "" }
  }
}

• drawType is "standard" or "qualifying".
• qualifyingSpots is only meaningful for qualifying draws; it is always a power of two and smaller than the bracket size.
• For qualifying draws, the bracket renders only up to effectiveRounds = log2(size / qualifyingSpots) rounds. Match data beyond that (if any) is preserved but hidden, so switching back to Standard is non-destructive.

Dynamic Progression Logic

To map match results forward, NetDraw uses simple binary propagation:

• The next match index = ceiling( m / 2 ), where m is the current match number within the round.
• If m is odd, the winner becomes Player 1 (p1) of the next match.
• If m is even, the winner becomes Player 2 (p2) of the next match.
• Subsequent rounds are set to read-only in the admin panel to prevent data out-of-sync issues.
• In a qualifying draw, propagation stops at the qualifying round: winners there receive a Qualified (Q) badge instead of being pushed into another round.