Last active
September 11, 2026 23:07
-
-
Save rgstephens/3b0fb440290d4d65dcaa120c81af7698 to your computer and use it in GitHub Desktop.
TourneyCard issue 255 follow-up admin mockups — team selection, round team games, tournament long games (SVG renders + HTML sources)
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>255 D — Team Selection</title> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --ink: #0f172a; | |
| --label: #334155; | |
| --muted: #475569; | |
| --faint: #64748b; | |
| --border: #e2e8f0; | |
| --border-strong: #cbd5e1; | |
| --green: #047857; | |
| --green-tint: #ecfdf5; | |
| --surface: #f7fbf8; | |
| } | |
| body { | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; | |
| background: var(--surface); | |
| color: var(--ink); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .page { width: 1080px; margin: 0 auto; padding: 36px 30px 48px; } | |
| .kicker { | |
| font-size: 11px; font-weight: 900; letter-spacing: 0.14em; | |
| text-transform: uppercase; color: var(--green); margin-bottom: 6px; | |
| } | |
| h1 { font-size: 22px; font-weight: 950; color: var(--ink); margin-bottom: 6px; } | |
| .page-sub { font-size: 13px; color: #55828b; font-weight: 600; margin-bottom: 26px; max-width: 760px; line-height: 1.5; } | |
| .card { | |
| background: white; border: 1px solid var(--border); border-radius: 8px; | |
| padding: 18px; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07); | |
| } | |
| .card + .card { margin-top: 16px; } | |
| .card-head { display: flex; align-items: start; justify: space-between; gap: 12px; margin-bottom: 14px; } | |
| .card-head .t { display: grid; gap: 4px; } | |
| .card-head .t > span { font-size: 14px; font-weight: 900; color: var(--ink); } | |
| .card-head .t > small { font-size: 12px; font-weight: 700; color: var(--faint); } | |
| .pill { font-size: 10px; font-weight: 900; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } | |
| .pill-open { background: var(--green-tint); color: var(--green); } | |
| .pill-warn { background: #fef3c7; color: #92400e; } | |
| .pill-live { background: #e0f2fe; color: #075985; } | |
| .pill-final { background: #dcfce7; color: #166534; } | |
| .pill-future { background: #ede9fe; color: #5b21b6; } | |
| .toolbar { display: flex; align-items: end; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; margin-bottom: 14px; } | |
| .toolbar .field { display: grid; gap: 6px; } | |
| .toolbar .field > span { font-size: 12px; font-weight: 900; color: var(--label); } | |
| .seg { display: flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: white; } | |
| .seg button { border: 0; background: white; font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--faint); padding: 9px 14px; } | |
| .seg button.on { background: var(--green-tint); color: var(--green); } | |
| select, input.txt { | |
| border: 1px solid var(--border-strong); border-radius: 8px; background: white; | |
| color: var(--ink); padding: 9px 12px; font-size: 13.5px; font-family: inherit; font-weight: 700; | |
| } | |
| .btn { border: 0; border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 900; padding: 10px 16px; cursor: pointer; } | |
| .btn-dark { background: #111827; color: #f7fbf1; } | |
| .btn-ghost { background: white; color: var(--green); border: 1px solid #a7f3d0; } | |
| .btn.off { opacity: 0.5; cursor: not-allowed; } | |
| .addsel { width: 100%; border: 1.5px dashed var(--border-strong); border-radius: 8px; background: #f8fbf9; color: var(--green); padding: 8px 10px; font-size: 12px; font-weight: 800; font-family: inherit; } | |
| .tray .tlabel { font-size: 11px; font-weight: 900; letter-spacing: 0.06em; color: var(--faint); } | |
| .tray .chips { justify-content: center; margin-top: 8px; } | |
| .checkline.warn { color: #92400e; } | |
| .toolbar .spacer { flex: 1; } | |
| .toolbar small { font-size: 11.5px; font-weight: 700; color: var(--faint); line-height: 1.4; max-width: 250px; } | |
| .teams { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } | |
| .team { border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: grid; gap: 10px; } | |
| .team-head { display: flex; align-items: center; gap: 8px; } | |
| .sw { width: 14px; height: 22px; border-radius: 4px; flex: none; } | |
| .sw-teal { background: #3b6064; } | |
| .sw-gold { background: #e8c15b; } | |
| .sw-blue { background: #6b8fd4; } | |
| .team-head input.txt { flex: 1; font-size: 14px; font-weight: 900; } | |
| .team-meta { font-size: 11.5px; font-weight: 800; color: var(--faint); letter-spacing: 0.02em; } | |
| .chips { display: flex; flex-wrap: wrap; gap: 6px; } | |
| .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--label); background: #f8fbf9; } | |
| .chip b { font-weight: 600; color: var(--faint); font-size: 11px; } | |
| .chip .x { color: #b91c1c; font-weight: 900; font-size: 11px; } | |
| .balance { display: grid; gap: 5px; } | |
| .balance > span { font-size: 11px; font-weight: 800; color: var(--faint); } | |
| .meter { position: relative; height: 6px; border-radius: 3px; background: #edf1f3; } | |
| .meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; } | |
| .meter u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #111827; border-radius: 1px; } | |
| .m-teal i { background: #87bba2; } .m-gold i { background: #e8c15b; } .m-blue i { background: #6b8fd4; } | |
| .tray { margin-top: 12px; border: 1.5px dashed var(--border-strong); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; font-weight: 800; color: var(--faint); text-align: center; } | |
| .checkline { margin-top: 12px; font-size: 12.5px; font-weight: 800; color: var(--green); } | |
| .checkline small { display: block; color: var(--faint); font-weight: 700; font-size: 11.5px; margin-top: 3px; } | |
| .lockbar { display: flex; gap: 10px; align-items: start; background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; } | |
| .lockbar .ic { font-size: 14px; line-height: 1.2; } | |
| .lockbar p { font-size: 12.5px; font-weight: 800; color: #92400e; line-height: 1.45; } | |
| .roster-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--border); } | |
| .roster-row:first-of-type { border-top: 0; } | |
| .roster-row .nm { font-size: 13px; font-weight: 900; color: var(--ink); width: 130px; } | |
| .roster-row .gl { font-size: 12px; font-weight: 600; color: var(--muted); flex: 1; } | |
| .roster-row .ct { font-size: 11.5px; font-weight: 800; color: var(--faint); } | |
| .note { margin-top: 12px; font-size: 11.5px; font-weight: 700; color: var(--faint); line-height: 1.5; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page"> | |
| <div class="kicker">Concept 255-D — Admin · Tournament setup</div> | |
| <h1>Team Selection</h1> | |
| <p class="page-sub">Teams are chosen once per tournament and lock when the first round starts — every round game and tournament long game draws its sides from here. Start from a handicap snake or shuffle, or place every golfer by hand: the board stays fully editable either way until the lock freezes the field.</p> | |
| <div class="card"> | |
| <div class="card-head"> | |
| <div class="t"> | |
| <span>Tournament teams</span> | |
| <small>Madrona Club Cup · 12 golfers · Sep 12–14</small> | |
| </div> | |
| <span class="pill pill-open">UNLOCKED · EDITS ALLOWED</span> | |
| </div> | |
| <div class="toolbar"> | |
| <div class="field"> | |
| <span>Draw method</span> | |
| <div class="seg"><button>Hcp snake</button><button>Shuffle</button><button class="on">Manual</button></div> | |
| </div> | |
| <div class="field"> | |
| <span>Teams</span> | |
| <select><option>3 teams</option></select> | |
| </div> | |
| <button class="btn btn-dark">Shuffle again</button> | |
| <button class="btn btn-ghost off">Lock teams now</button> | |
| <div class="spacer"></div> | |
| <small>Snake and shuffle fill the board in one click; Manual keeps it hand-editable — × removes, + Add golfer places, chips drag between teams. Locking waits until every golfer has a team.</small> | |
| </div> | |
| <div class="teams"> | |
| <div class="team"> | |
| <div class="team-head"><span class="sw sw-teal"></span><input class="txt" value="Madrona Teals"></div> | |
| <div class="team-meta">4 GOLFERS · AVG HCP 9.8</div> | |
| <div class="chips"> | |
| <span class="chip">D. Hanson <b>5.2</b> <span class="x">×</span></span> | |
| <span class="chip">K. Lee <b>8.4</b> <span class="x">×</span></span> | |
| <span class="chip">S. Wu <b>12.4</b> <span class="x">×</span></span> | |
| <span class="chip">P. Stone <b>13.1</b> <span class="x">×</span></span> | |
| </div> | |
| <select class="addsel"><option>+ Add golfer — R. Park 11.2 · T. Ross 14.2</option></select> | |
| <div class="balance"> | |
| <span>AVG HCP VS FIELD 10.3</span> | |
| <div class="meter m-teal"><i style="width: 61%;"></i><u style="left: 64%;"></u></div> | |
| </div> | |
| </div> | |
| <div class="team"> | |
| <div class="team-head"><span class="sw sw-gold"></span><input class="txt" value="Harbor Golds"></div> | |
| <div class="team-meta">4 GOLFERS · AVG HCP 10.9</div> | |
| <div class="chips"> | |
| <span class="chip">M. Ortiz <b>6.1</b> <span class="x">×</span></span> | |
| <span class="chip">J. Kim <b>9.9</b> <span class="x">×</span></span> | |
| <span class="chip">M. Fry <b>13.0</b> <span class="x">×</span></span> | |
| <span class="chip">R. Bell <b>14.6</b> <span class="x">×</span></span> | |
| </div> | |
| <select class="addsel"><option>+ Add golfer — R. Park 11.2 · T. Ross 14.2</option></select> | |
| <div class="balance"> | |
| <span>AVG HCP VS FIELD 10.3</span> | |
| <div class="meter m-gold"><i style="width: 68%;"></i><u style="left: 64%;"></u></div> | |
| </div> | |
| </div> | |
| <div class="team"> | |
| <div class="team-head"><span class="sw sw-blue"></span><input class="txt" value="Pine Blues"></div> | |
| <div class="team-meta">2 GOLFERS · AVG HCP 7.7</div> | |
| <div class="chips"> | |
| <span class="chip">A. Tran <b>7.8</b> <span class="x">×</span></span> | |
| <span class="chip">A. Chen <b>7.6</b> <span class="x">×</span></span> | |
| </div> | |
| <select class="addsel"><option>+ Add golfer — R. Park 11.2 · T. Ross 14.2</option></select> | |
| <div class="balance"> | |
| <span>AVG HCP VS FIELD 10.3</span> | |
| <div class="meter m-blue"><i style="width: 48%;"></i><u style="left: 64%;"></u></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tray"> | |
| <span class="tlabel">UNASSIGNED (2) — DRAG ONTO A TEAM, OR USE + ADD GOLFER</span> | |
| <div class="chips"> | |
| <span class="chip">R. Park <b>11.2</b></span> | |
| <span class="chip">T. Ross <b>14.2</b></span> | |
| </div> | |
| </div> | |
| <div class="checkline warn">10 of 12 assigned · sizes 4 / 4 / 2 · 2 in the tray — assign everyone before locking | |
| <small>Locking stays disabled until every golfer has a team; round games then flag side mismatches themselves — singles and Nine Point Nassau need equal team sizes on the two sides they pair.</small> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-head"> | |
| <div class="t"> | |
| <span>Once the first round starts — locked</span> | |
| <small>Same section, tournament in progress</small> | |
| </div> | |
| <span class="pill pill-warn">LOCKED · READ-ONLY</span> | |
| </div> | |
| <div class="lockbar"> | |
| <span class="ic">🔒</span> | |
| <p>Teams cannot change across a tournament. Roster edits are disabled until the event is over — a changed field needs a new tournament.</p> | |
| </div> | |
| <div class="roster-row"><span class="sw sw-teal"></span><span class="nm">Madrona Teals</span><span class="gl">D. Hanson 5.2 · K. Lee 8.4 · S. Wu 12.4 · P. Stone 13.1</span><span class="ct">4 GOLFERS</span></div> | |
| <div class="roster-row"><span class="sw sw-gold"></span><span class="nm">Harbor Golds</span><span class="gl">M. Ortiz 6.1 · J. Kim 9.9 · M. Fry 13.0 · R. Bell 14.6</span><span class="ct">4 GOLFERS</span></div> | |
| <div class="roster-row"><span class="sw sw-blue"></span><span class="nm">Pine Blues</span><span class="gl">A. Tran 7.8 · A. Chen 7.6 · R. Park 11.2 · T. Ross 14.2</span><span class="ct">4 GOLFERS</span></div> | |
| <p class="note">Round games and long games keep referencing these teams for the whole event. Posted results are never recomputed from roster changes, because roster changes are impossible after lock.</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>255 E — Round Team Games</title> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --ink: #0f172a; | |
| --label: #334155; | |
| --muted: #475569; | |
| --faint: #64748b; | |
| --border: #e2e8f0; | |
| --border-strong: #cbd5e1; | |
| --green: #047857; | |
| --green-tint: #ecfdf5; | |
| --surface: #f7fbf8; | |
| } | |
| body { | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; | |
| background: var(--surface); | |
| color: var(--ink); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .page { width: 980px; margin: 0 auto; padding: 36px 30px 48px; } | |
| .kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; } | |
| h1 { font-size: 22px; font-weight: 950; color: var(--ink); margin-bottom: 6px; } | |
| .page-sub { font-size: 13px; color: #55828b; font-weight: 600; margin-bottom: 26px; max-width: 720px; line-height: 1.5; } | |
| .card { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 18px; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07); } | |
| .card + .card { margin-top: 16px; } | |
| .round-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; } | |
| .round-head h3 { font-size: 15px; font-weight: 950; color: var(--ink); } | |
| .round-head .meta { font-size: 12px; font-weight: 700; color: var(--faint); flex: 1; } | |
| .round + .round { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; } | |
| .pill { font-size: 10px; font-weight: 900; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } | |
| .pill-live { background: #e0f2fe; color: #075985; } | |
| .pill-final { background: #dcfce7; color: #166534; } | |
| .pill-future { background: #ede9fe; color: #5b21b6; } | |
| .btn { border: 0; border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 900; padding: 9px 14px; cursor: pointer; } | |
| .btn-dark { background: #111827; color: #f7fbf1; } | |
| .btn-ghost { background: white; color: var(--muted); border: 1px solid var(--border-strong); } | |
| .game-row { display: flex; align-items: start; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #f8fbf9; } | |
| .game-row + .game-row { margin-top: 10px; } | |
| .game-row .body { flex: 1; display: grid; gap: 4px; } | |
| .game-row .line1 { display: flex; align-items: center; gap: 8px; } | |
| .game-row .line1 .nm { font-size: 13.5px; font-weight: 900; color: var(--ink); } | |
| .game-row .line2 { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.45; } | |
| .game-row .side { display: grid; gap: 6px; justify-items: end; } | |
| .game-row .acts { display: flex; gap: 10px; } | |
| .game-row .acts button { border: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 800; color: var(--green); cursor: pointer; } | |
| .game-row .acts button.rm { color: #b91c1c; } | |
| .badge { font-size: 10px; font-weight: 900; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 4px; background: #f1f5f4; color: #55828b; white-space: nowrap; } | |
| .badge-nine { background: var(--green-tint); color: var(--green); } | |
| .pts { font-size: 10.5px; font-weight: 900; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; } | |
| .pts-1 { background: #edf1f3; color: #475569; } | |
| .pts-3 { background: #e0f2fe; color: #075985; } | |
| .pts-9 { background: var(--green-tint); color: var(--green); } | |
| .empty { border: 1.5px dashed var(--border-strong); border-radius: 8px; padding: 16px; text-align: center; display: grid; gap: 4px; } | |
| .empty .e1 { font-size: 13px; font-weight: 800; color: var(--muted); } | |
| .empty .e2 { font-size: 11.5px; font-weight: 700; color: var(--faint); } | |
| .empty button { justify-self: center; margin-top: 6px; } | |
| .card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } | |
| .card-head .t { display: grid; gap: 4px; } | |
| .card-head .t > span { font-size: 14px; font-weight: 900; color: var(--ink); } | |
| .card-head .t > small { font-size: 12px; font-weight: 700; color: var(--faint); } | |
| .field { display: grid; gap: 6px; } | |
| .field > span { font-size: 13px; font-weight: 900; color: var(--label); } | |
| .field small { color: var(--faint); font-size: 12px; font-weight: 700; line-height: 1.4; } | |
| select, input.txt { width: 100%; border: 1px solid var(--border-strong); border-radius: 8px; background: white; color: var(--ink); padding: 10px 12px; font-size: 14px; font-family: inherit; font-weight: 700; } | |
| .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } | |
| .section { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; } | |
| .section h4 { font-size: 14px; font-weight: 900; color: var(--ink); margin-bottom: 12px; } | |
| .formats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } | |
| .fmt { border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px; display: grid; gap: 4px; background: white; } | |
| .fmt .n { font-size: 13px; font-weight: 900; color: var(--label); display: flex; align-items: center; gap: 8px; } | |
| .fmt .d { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.45; } | |
| .fmt.on { border: 1.5px solid var(--green); background: var(--green-tint); } | |
| .fmt.on .n { color: var(--green); } | |
| .dot { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: white; flex: none; } | |
| .fmt.on .dot { border: 4.5px solid var(--green); } | |
| .new-tag { display: inline-block; background: white; color: var(--green); border: 1px solid #a7f3d0; font-size: 10px; font-weight: 900; letter-spacing: 0.05em; padding: 1px 7px; border-radius: 999px; } | |
| .derived { background: var(--green-tint); border: 1px solid #a7f3d0; border-radius: 8px; padding: 12px 14px; display: grid; gap: 7px; margin-top: 12px; } | |
| .derived .r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--label); } | |
| .derived .r .g { font-size: 10px; font-weight: 900; color: var(--green); width: 52px; flex: none; letter-spacing: 0.04em; } | |
| .derived .r .p { margin-left: auto; font-size: 11px; font-weight: 900; color: var(--green); white-space: nowrap; } | |
| .derived .tot { border-top: 1px solid #a7f3d0; padding-top: 8px; font-size: 12.5px; font-weight: 900; color: var(--green); } | |
| .scheme { display: flex; gap: 10px; align-items: center; } | |
| .scheme .opt { border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 14px; font-size: 12.5px; font-weight: 800; color: var(--faint); background: white; } | |
| .scheme .opt.on { border: 1.5px solid #075985; background: #e0f2fe; color: #075985; } | |
| .scheme .opt.fixed { border: 1.5px solid var(--green); background: var(--green-tint); color: var(--green); } | |
| .scheme .opt.off { opacity: 0.55; text-decoration: line-through; } | |
| .foot { display: flex; gap: 10px; margin-top: 18px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page"> | |
| <div class="kicker">Concept 255-E — Admin · Tourney rounds</div> | |
| <h1>Round Team Games</h1> | |
| <p class="page-sub">Every tourney round carries its own team games — or none at all. Sides always come from the locked tournament teams; each game's points settle into its round and roll up to the tournament long games.</p> | |
| <div class="card"> | |
| <div class="round"> | |
| <div class="round-head"> | |
| <h3>Day 2 · Foursomes</h3> | |
| <span class="meta">Fri Sep 13 · Madrona Ridge GC</span> | |
| <span class="pill pill-live">IN PROGRESS</span> | |
| <button class="btn btn-dark">+ Team game</button> | |
| </div> | |
| <div class="game-row"> | |
| <div class="body"> | |
| <div class="line1"><span class="badge badge-nine">NINE POINT NASSAU</span><span class="nm">Madrona Teals vs Harbor Golds</span></div> | |
| <div class="line2">Best ball Hanson/Lee vs Ortiz/Kim · Singles Hanson–Ortiz · Singles Lee–Kim — one foursome, three games at once</div> | |
| </div> | |
| <div class="side"> | |
| <span class="pts pts-9">9 PTS · 3 × 3</span> | |
| <span class="pill pill-live">LIVE · THRU 14</span> | |
| <div class="acts"><button>Edit</button><button class="rm">Remove</button></div> | |
| </div> | |
| </div> | |
| <div class="game-row"> | |
| <div class="body"> | |
| <div class="line1"><span class="badge">BEST BALL</span><span class="nm">Pine Blues vs Harbor Golds</span></div> | |
| <div class="line2">Chen/Wu vs Ross/Bell · halved holes count ½</div> | |
| </div> | |
| <div class="side"> | |
| <span class="pts pts-1">1 PT · HALVES</span> | |
| <span class="pill pill-final">FINAL · BLUES 1 UP</span> | |
| <div class="acts"><button>Edit</button><button class="rm">Remove</button></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="round"> | |
| <div class="round-head"> | |
| <h3>Day 3 · Singles</h3> | |
| <span class="meta">Sun Sep 14 · Madrona Ridge GC</span> | |
| <span class="pill pill-future">SCHEDULED</span> | |
| <button class="btn btn-dark">+ Team game</button> | |
| </div> | |
| <div class="empty"> | |
| <span class="e1">No team games this round.</span> | |
| <span class="e2">Individual and foursome games still run — team games are optional per round, and long games simply skip rounds without them.</span> | |
| <button class="btn btn-ghost">+ Add team game</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-head"> | |
| <div class="t"> | |
| <span>Add team game — Day 2 · Foursomes</span> | |
| <small>Sides and lineups come from the locked tournament teams</small> | |
| </div> | |
| <span class="pill pill-future">DRAFT</span> | |
| </div> | |
| <div class="field"> | |
| <span>Format</span> | |
| <div class="formats"> | |
| <div class="fmt"><div class="n"><span class="dot"></span>Best ball</div><div class="d">Two per side, low ball counts on every hole.</div></div> | |
| <div class="fmt"><div class="n"><span class="dot"></span>Foursomes</div><div class="d">Two per side, alternate shot — one ball per team.</div></div> | |
| <div class="fmt"><div class="n"><span class="dot"></span>Singles</div><div class="d">One v one — stack as many matches as the round has golfers.</div></div> | |
| <div class="fmt on"><div class="n"><span class="dot"></span>Nine Point Nassau <span class="new-tag">NEW</span></div><div class="d">Best ball plus two singles at once · 3 pts each · 9 at stake for the four golfers.</div></div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h4>Sides</h4> | |
| <div class="grid2"> | |
| <div class="field"><span>Side A</span><select><option>Madrona Teals</option></select></div> | |
| <div class="field"><span>Side B</span><select><option>Harbor Golds</option></select></div> | |
| </div> | |
| <div class="field" style="margin-top: 10px;"> | |
| <small>Teams are locked for the tournament, so sides never drift mid-event. Unequal team sizes are allowed — the lineup grid below only offers golfers from the two chosen teams.</small> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h4>Lineups — Nine Point Nassau</h4> | |
| <div class="grid2"> | |
| <div class="field"><span>Slot A1</span><select><option>D. Hanson 5.2</option></select></div> | |
| <div class="field"><span>Slot B1</span><select><option>M. Ortiz 6.1</option></select></div> | |
| <div class="field"><span>Slot A2</span><select><option>K. Lee 8.4</option></select></div> | |
| <div class="field"><span>Slot B2</span><select><option>J. Kim 9.9</option></select></div> | |
| </div> | |
| <div class="field" style="margin-top: 10px;"><small>Singles pair by slot — A1 v B1 and A2 v B2. Swap slots to re-pair without touching the teams.</small></div> | |
| <div class="derived"> | |
| <div class="r"><span class="g">GAME 1</span>Best ball — Hanson/Lee vs Ortiz/Kim<span class="p">3 PTS · F/B/18</span></div> | |
| <div class="r"><span class="g">GAME 2</span>Singles — Hanson vs Ortiz<span class="p">3 PTS · F/B/18</span></div> | |
| <div class="r"><span class="g">GAME 3</span>Singles — Lee vs Kim<span class="p">3 PTS · F/B/18</span></div> | |
| <div class="tot">9 points at stake for the four golfers — three Nassau-style games running on one scorecard.</div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h4>Points scheme</h4> | |
| <div class="scheme"> | |
| <span class="opt fixed">3 pts per game · front / back / 18 — fixed by Nine Point Nassau</span> | |
| <span class="opt off">1 pt per game · halves ½</span> | |
| <span class="opt off">3 pts per game · front / back / 18</span> | |
| </div> | |
| <div class="field" style="margin-top: 10px;"><small>Best ball, foursomes and singles offer the two selectable schemes; Nine Point Nassau always plays 3 pts per game, 9 total.</small></div> | |
| </div> | |
| <div class="foot"> | |
| <button class="btn btn-dark">Add game</button> | |
| <button class="btn btn-ghost">Cancel</button> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>255 F — Tournament Long Games</title> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --ink: #0f172a; | |
| --label: #334155; | |
| --muted: #475569; | |
| --faint: #64748b; | |
| --border: #e2e8f0; | |
| --border-strong: #cbd5e1; | |
| --green: #047857; | |
| --green-tint: #ecfdf5; | |
| --surface: #f7fbf8; | |
| } | |
| body { | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; | |
| background: var(--surface); | |
| color: var(--ink); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .page { width: 880px; margin: 0 auto; padding: 36px 30px 48px; } | |
| .kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; } | |
| h1 { font-size: 22px; font-weight: 950; color: var(--ink); margin-bottom: 6px; } | |
| .page-sub { font-size: 13px; color: #55828b; font-weight: 600; margin-bottom: 26px; max-width: 680px; line-height: 1.5; } | |
| .card { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 18px; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07); } | |
| .card + .card { margin-top: 16px; } | |
| .card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } | |
| .card-head .t { display: grid; gap: 4px; } | |
| .card-head .t > span { font-size: 14px; font-weight: 900; color: var(--ink); } | |
| .card-head .t > small { font-size: 12px; font-weight: 700; color: var(--faint); } | |
| .pill { font-size: 10px; font-weight: 900; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } | |
| .pill-live { background: #e0f2fe; color: #075985; } | |
| .pill-final { background: #dcfce7; color: #166534; } | |
| .btn { border: 0; border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 900; padding: 9px 14px; cursor: pointer; } | |
| .btn-dark { background: #111827; color: #f7fbf1; } | |
| .btn-ghost { background: white; color: var(--muted); border: 1px solid var(--border-strong); } | |
| .badge { font-size: 10px; font-weight: 900; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 4px; background: #f1f5f4; color: #55828b; white-space: nowrap; } | |
| .long-row { border: 1px solid var(--border); border-radius: 8px; background: #f8fbf9; padding: 14px; display: grid; gap: 10px; } | |
| .long-row + .long-row { margin-top: 10px; } | |
| .long-row .top { display: flex; align-items: center; gap: 10px; } | |
| .long-row .top .nm { font-size: 13.5px; font-weight: 900; color: var(--ink); flex: 1; } | |
| .long-row .top .acts button { border: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 800; color: var(--green); cursor: pointer; } | |
| .long-row .desc { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.45; } | |
| .ladder { display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; } | |
| .lad-row { display: grid; grid-template-columns: 118px 1fr 44px; align-items: center; gap: 10px; } | |
| .lad-row .tm { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: var(--label); } | |
| .sw { width: 10px; height: 16px; border-radius: 3px; flex: none; } | |
| .sw-teal { background: #3b6064; } .sw-gold { background: #e8c15b; } .sw-blue { background: #6b8fd4; } | |
| .bar { display: flex; gap: 3px; height: 16px; } | |
| .bar i { border-radius: 3px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 9px; font-weight: 900; color: white; } | |
| .bar .d1 { background: #87bba2; } .bar .d2 { background: #55828b; } .bar .d3 { background: #3b6064; } | |
| .bar .pend { background: repeating-linear-gradient(45deg, #edf1f3, #edf1f3 3px, #f8fafc 3px, #f8fafc 6px); border: 1px dashed var(--border-strong); color: var(--faint); } | |
| .lad-row .tot { font-size: 14px; font-weight: 950; color: var(--ink); text-align: right; } | |
| .lad-legend { display: flex; gap: 12px; font-size: 10.5px; font-weight: 800; color: var(--faint); } | |
| .lad-legend span { display: inline-flex; align-items: center; gap: 5px; } | |
| .lad-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } | |
| .field { display: grid; gap: 6px; } | |
| .field > span { font-size: 13px; font-weight: 900; color: var(--label); } | |
| .field small { color: var(--faint); font-size: 12px; font-weight: 700; line-height: 1.4; } | |
| select { width: 100%; border: 1px solid var(--border-strong); border-radius: 8px; background: white; color: var(--ink); padding: 10px 12px; font-size: 14px; font-family: inherit; font-weight: 700; } | |
| .section { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; } | |
| .section h4 { font-size: 14px; font-weight: 900; color: var(--ink); margin-bottom: 12px; } | |
| .rounds { display: grid; gap: 8px; margin-top: 10px; } | |
| .rrow { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; background: white; } | |
| .rrow .cb { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--green); background: var(--green-tint); position: relative; flex: none; } | |
| .rrow .cb::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: var(--green); } | |
| .rrow .nm { font-size: 12.5px; font-weight: 800; color: var(--label); flex: 1; } | |
| .rrow .ct { font-size: 11px; font-weight: 800; color: var(--green); } | |
| .rrow.off { background: #f8fafc; border-style: dashed; } | |
| .rrow.off .cb { border-color: var(--border-strong); background: #f1f5f4; } | |
| .rrow.off .cb::after { content: ""; } | |
| .rrow.off .nm { color: var(--faint); } | |
| .rrow.off .ct { color: var(--faint); } | |
| .rollup { background: var(--green-tint); border: 1px solid #a7f3d0; border-radius: 8px; padding: 12px 14px; margin-top: 12px; display: grid; gap: 6px; } | |
| .rollup .r { font-size: 12.5px; font-weight: 700; color: var(--label); } | |
| .rollup .r b { color: var(--green); font-weight: 900; } | |
| .rollup .h { font-size: 10px; font-weight: 900; letter-spacing: 0.08em; color: var(--green); } | |
| .check { display: flex; gap: 10px; align-items: start; } | |
| .check .cb { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--green); background: var(--green-tint); position: relative; flex: none; margin-top: 1px; } | |
| .check .cb::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: var(--green); } | |
| .check p { font-size: 12.5px; font-weight: 800; color: var(--label); line-height: 1.45; } | |
| .check p small { display: block; font-size: 11.5px; font-weight: 700; color: var(--faint); margin-top: 2px; } | |
| .foot { display: flex; gap: 10px; margin-top: 18px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page"> | |
| <div class="kicker">Concept 255-F — Admin · Tournament scope</div> | |
| <h1>Tournament Long Games</h1> | |
| <p class="page-sub">Tournament-scope team games span the whole event, rolling up every round that carries team games. Rounds without team games contribute nothing — the ladder stays continuous instead of breaking.</p> | |
| <div class="card"> | |
| <div class="card-head"> | |
| <div class="t"> | |
| <span>Tournament long games</span> | |
| <small>Madrona Club Cup · 3 rounds · 2 of 3 carry team games</small> | |
| </div> | |
| <button class="btn btn-dark">+ Long game</button> | |
| </div> | |
| <div class="long-row"> | |
| <div class="top"> | |
| <span class="badge">LONG GAME · TEAM</span> | |
| <span class="nm">Team Cup — cumulative match points</span> | |
| <span class="pill pill-live">LIVE</span> | |
| <span class="acts"><button>Edit</button></span> | |
| </div> | |
| <div class="desc">Every round team game's points add to the team total — 1-pt games, 3-pt games and Nine Point Nassau's 9 all roll into one ladder. Halves count ½.</div> | |
| <div class="ladder"> | |
| <div class="lad-row"> | |
| <span class="tm"><span class="sw sw-teal"></span>Madrona Teals</span> | |
| <span class="bar"><i class="d1" style="flex: 4;">4</i><i class="d2" style="flex: 3;">3</i><i class="pend" style="flex: 2;">D3</i></span> | |
| <span class="tot">7</span> | |
| </div> | |
| <div class="lad-row"> | |
| <span class="tm"><span class="sw sw-gold"></span>Harbor Golds</span> | |
| <span class="bar"><i class="d1" style="flex: 2;">2</i><i class="d2" style="flex: 3;">3</i><i class="pend" style="flex: 2;">D3</i></span> | |
| <span class="tot">5</span> | |
| </div> | |
| <div class="lad-row"> | |
| <span class="tm"><span class="sw sw-blue"></span>Pine Blues</span> | |
| <span class="bar"><i class="d1" style="flex: 3;">3</i><i class="d2" style="flex: 0.5;">½</i><i class="pend" style="flex: 2;">D3</i></span> | |
| <span class="tot">3.5</span> | |
| </div> | |
| <div class="lad-legend"> | |
| <span><i style="background: #87bba2;"></i>Day 1 · Fourball</span> | |
| <span><i style="background: #55828b;"></i>Day 2 · Foursomes</span> | |
| <span><i style="background: repeating-linear-gradient(45deg, #edf1f3, #edf1f3 2px, #f8fafc 2px, #f8fafc 4px); border: 1px dashed #cbd5e1;"></i>Day 3 · no team games yet</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="long-row"> | |
| <div class="top"> | |
| <span class="badge">LONG GAME · TEAM</span> | |
| <span class="nm">Team Best Ball — net aggregate</span> | |
| <span class="pill pill-live">LIVE</span> | |
| <span class="acts"><button>Edit</button></span> | |
| </div> | |
| <div class="desc">Each team's best net ball per hole, totalled across every round the team fields a scorecard — the existing team best ball aggregate, promoted to the teams ladder.</div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-head"> | |
| <div class="t"> | |
| <span>Add tournament long game</span> | |
| <small>Scope: tournament — spans rounds, never a single foursome</small> | |
| </div> | |
| </div> | |
| <div class="field"> | |
| <span>Game</span> | |
| <select> | |
| <option>Team Cup — cumulative match points</option> | |
| <option>Team Best Ball — net aggregate</option> | |
| <option>Team Stableford — aggregate</option> | |
| </select> | |
| </div> | |
| <div class="section"> | |
| <h4>Rounds included</h4> | |
| <div class="field"> | |
| <select><option>All rounds with team games (auto)</option><option>Choose rounds…</option></select> | |
| <small>Auto follows the schedule: add a team game to a round later and the long game picks it up.</small> | |
| </div> | |
| <div class="rounds"> | |
| <div class="rrow"><span class="cb"></span><span class="nm">Day 1 · Fourball</span><span class="ct">2 TEAM GAMES · 10 PTS</span></div> | |
| <div class="rrow"><span class="cb"></span><span class="nm">Day 2 · Foursomes</span><span class="ct">3 TEAM GAMES · 11 PTS</span></div> | |
| <div class="rrow off"><span class="cb"></span><span class="nm">Day 3 · Singles</span><span class="ct">NO TEAM GAMES — CONTRIBUTES NOTHING</span></div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h4>Points rollup</h4> | |
| <div class="rollup"> | |
| <span class="h">HOW THE LADDER ADDS UP</span> | |
| <span class="r">Madrona Teals <b>7</b> = Day 1 <b>4</b> (best ball 1 + Nine Point Nassau 3) + Day 2 <b>3</b></span> | |
| <span class="r">A Nine Point Nassau splits its 9 points across its three games, so a swept match moves the ladder 9–0.</span> | |
| </div> | |
| <div class="field" style="margin-top: 12px;"> | |
| <span>Tiebreak</span> | |
| <select><option>Most match wins</option><option>Head-to-head</option><option>Most points on the back nine</option></select> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h4>Leaderboard display</h4> | |
| <div class="check"> | |
| <span class="cb"></span> | |
| <p>Show each match result under the team totals | |
| <small>Mirrors the Ryder Board match-result rows on the public tournament home.</small> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="foot"> | |
| <button class="btn btn-dark">Add long game</button> | |
| <button class="btn btn-ghost">Cancel</button> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment