Points Race

Preview in your theme

ready · side-out scoring

Mara Ellis v Noa Kim · Club ladder · singles

11–8after rally 33 of 33 · race to 11, win by 2 · side-out scoringMara Ellis wins 11–8

4 lead changeslongest run 4

Mara EllisNoa Kimaxis tick = side-out, no pointtop tick = game point

One step per point over the rally index — only the serving side can climb, so a flat stretch dotted with axis ticks is the serve trading hands. The band between the staircases carries the current leader's colour.

Points race: Mara Ellis against Noa Kim, Club ladder · singles — a race to 11, win by 2, under side-out scoring — only the serving side scores, a lost serve is a side-out that scores nothing and hands the serve over. Two staircase lines climb one step per point over 33 rallies in order, the gap between them tinted with the leader's colour. Final score 11–8, Mara Ellis wins. 4 lead changes, longest scoring run 4 by Noa Kim, 14 side-outs. Every rally follows in the data table.

Every rally of the game in order, with the server, the rally winner, the outcome — a point or a side-out — and the running score after the rally (Mara Ellis first).
Rally	Server	Rally winner	Outcome	Score after
1	Mara Ellis	Mara Ellis	point, Mara Ellis	1–0
2	Mara Ellis	Mara Ellis	point, Mara Ellis	2–0
3	Mara Ellis	Noa Kim	side-out, no point	2–0
4	Noa Kim	Noa Kim	point, Noa Kim	2–1
5	Noa Kim	Noa Kim	point, Noa Kim	2–2
6	Noa Kim	Noa Kim	point, Noa Kim	2–3
7	Noa Kim	Mara Ellis	side-out, no point	2–3
8	Mara Ellis	Noa Kim	side-out, no point	2–3
9	Noa Kim	Mara Ellis	side-out, no point	2–3
10	Mara Ellis	Noa Kim	side-out, no point	2–3
11	Noa Kim	Noa Kim	point, Noa Kim	2–4
12	Noa Kim	Mara Ellis	side-out, no point	2–4
13	Mara Ellis	Mara Ellis	point, Mara Ellis	3–4
14	Mara Ellis	Mara Ellis	point, Mara Ellis	4–4
15	Mara Ellis	Mara Ellis	point, Mara Ellis	5–4
16	Mara Ellis	Mara Ellis	point, Mara Ellis	6–4
17	Mara Ellis	Noa Kim	side-out, no point	6–4
18	Noa Kim	Noa Kim	point, Noa Kim	6–5
19	Noa Kim	Noa Kim	point, Noa Kim	6–6
20	Noa Kim	Mara Ellis	side-out, no point	6–6
21	Mara Ellis	Noa Kim	side-out, no point	6–6
22	Noa Kim	Noa Kim	point, Noa Kim	6–7
23	Noa Kim	Mara Ellis	side-out, no point	6–7
24	Mara Ellis	Mara Ellis	point, Mara Ellis	7–7
25	Mara Ellis	Mara Ellis	point, Mara Ellis	8–7
26	Mara Ellis	Noa Kim	side-out, no point	8–7
27	Noa Kim	Noa Kim	point, Noa Kim	8–8
28	Noa Kim	Mara Ellis	side-out, no point	8–8
29	Mara Ellis	Mara Ellis	point, Mara Ellis	9–8
30	Mara Ellis	Mara Ellis	point, Mara Ellis	10–8
31	Mara Ellis	Noa Kim	side-out, no point (game point, Mara Ellis)	10–8
32	Noa Kim	Mara Ellis	side-out, no point	10–8
33	Mara Ellis	Mara Ellis	point, Mara Ellis (game point, Mara Ellis)	11–8

ready · rally scoring

Points race

Ines Duarte v Priya Nair · City league · rally scoring

9–11after rally 20 of 20 · race to 11, win by 2 · rally scoringPriya Nair wins 9–11

1 lead changelongest run 3

Ines DuartePriya Nairtop tick = game point

One step per point over the rally index — every rally scores, so one of the two lines climbs at every step. The band between the staircases carries the current leader's colour.

Points race: Ines Duarte against Priya Nair, City league · rally scoring — a race to 11, win by 2, under rally scoring — every rally scores a point for its winner. Two staircase lines climb one step per point over 20 rallies in order, the gap between them tinted with the leader's colour. Final score 9–11, Priya Nair wins. 1 lead change, longest scoring run 3 by Priya Nair. Every rally follows in the data table.

Every rally of the game in order, with the server, the rally winner, the outcome — a point or a side-out — and the running score after the rally (Ines Duarte first).
Rally	Server	Rally winner	Outcome	Score after
1	Ines Duarte	Ines Duarte	point, Ines Duarte	1–0
2	Ines Duarte	Ines Duarte	point, Ines Duarte	2–0
3	Ines Duarte	Priya Nair	point, Priya Nair	2–1
4	Priya Nair	Priya Nair	point, Priya Nair	2–2
5	Priya Nair	Priya Nair	point, Priya Nair	2–3
6	Priya Nair	Ines Duarte	point, Ines Duarte	3–3
7	Ines Duarte	Priya Nair	point, Priya Nair	3–4
8	Priya Nair	Ines Duarte	point, Ines Duarte	4–4
9	Ines Duarte	Priya Nair	point, Priya Nair	4–5
10	Priya Nair	Priya Nair	point, Priya Nair	4–6
11	Priya Nair	Ines Duarte	point, Ines Duarte	5–6
12	Ines Duarte	Ines Duarte	point, Ines Duarte	6–6
13	Ines Duarte	Priya Nair	point, Priya Nair	6–7
14	Priya Nair	Priya Nair	point, Priya Nair	6–8
15	Priya Nair	Ines Duarte	point, Ines Duarte	7–8
16	Ines Duarte	Priya Nair	point, Priya Nair	7–9
17	Priya Nair	Ines Duarte	point, Ines Duarte	8–9
18	Ines Duarte	Ines Duarte	point, Ines Duarte	9–9
19	Ines Duarte	Priya Nair	point, Priya Nair	9–10
20	Priya Nair	Priya Nair	point, Priya Nair (game point, Priya Nair)	9–11

empty

Points race

Mara Ellis v Noa Kim · Club ladder · singles

No rallies yet

Log rallies and the race appears — one staircase per side, Mara Ellis in one colour and Noa Kim in the other, first to 11 with the lead tinted between the lines.

Points race

Mara Ellis v Noa Kim · Club ladder · singles

error

Points race

Mara Ellis v Noa Kim · Club ladder · singles

Couldn't load this points race

The data source didn't respond.

Loading preview…

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import type {
  ChartPointsRaceConfig,
  ChartPointsRaceData,
  ChartPointsRaceRally,
  ChartPointsRaceTeam,
} from "./chart-points-race.contract"

export interface ChartPointsRaceProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,

Installation

npx shadcn@latest add https://ui.zyeon.ai/r/chart-points-race.json

Prompt

Build a React + TypeScript + Tailwind "ChartPointsRace" card in hand-rolled
SVG with zod — a two-line points race that replays a pickleball game to 11,
rally by rally, with the scoring rules derived rather than trusted.

Contract
- One zod schema is the single source of truth:
  { status: "loading" | "empty" | "error" | "ready";
    teams: { a: { name: string }; b: { name: string } };
    config?: { target?: int > 0 (default 11); winBy?: int > 0 (default 2);
               scoring?: "sideout" | "rally" (default "sideout");
               firstServer?: "a" | "b" (default "a") };
    rallies: { winner: "a" | "b" }[];
    context?: string }.
- ARRAY ORDER IS THE AXIS: the game's first rally first; nothing is sorted.
  The data carries only who won each rally — points, side-outs, game points
  and the game's end are all derived.
- `a` always takes var(--chart-1) and `b` var(--chart-2); never flipped.
- Props = z.infer of the schema plus title?, height (plot px, clamped
  140-320, default 200), onRetry?, emptyState? and className; forwardRef to
  the card div, cn() merges className, the root spreads remaining props and
  carries data-status.
- Export the derivation beside the component so a test can print the same
  numbers the picture is made of: derivePointsRace(rallies, config) walks the
  serve through the rallies and returns per-rally rows (server, point or
  side-out, running score, game-point flags, cumulative lead changes and
  longest run) plus game totals, the winner, and trailing/dropped counts.

Behavior — the derivation is the product
- Side-out scoring: only the serving side scores. The serve starts at
  firstServer; a rally won by the server is +1 and keeps the serve; a rally
  lost by the server scores NOTHING and hands the serve over — a side-out.
  Singles simplification on purpose: the doubles second-server rule is out of
  scope. Rally scoring: every rally is +1 for its winner, who takes the serve.
- Game point is judged before each rally: a side that would reach target with
  the winBy margin by taking this rally's point — under side-out scoring only
  the server can be that side. The game ends at target with winBy; rallies
  arriving after the end are never drawn and are reported in a visible line,
  as are rallies with an unreadable winner (dropping one silently would shift
  every score after it).
- Playback: ONE timeline index — rallies played. NO autoplay: ready parks at
  the end with the final staircases visible, so first paint is deterministic;
  Play rewinds to 0 and runs. The loop is requestAnimationFrame with real
  frame deltas (never setInterval), cancelled on pause, speed change and
  unmount; speeds 1× / 2× / 4× rescale the per-rally duration.
- Controls: a Play/Pause toggle (aria-pressed, aria-label switching between
  "Play", "Pause" and "Play from the first rally"), a labelled native range
  scrubber over the rally index whose aria-valuetext speaks "after rally k of
  N, score", and a 1×/2×/4× speed radiogroup. Scrubbing pauses playback.
- prefers-reduced-motion via matchMedia (listener removed on unmount):
  playback advances in whole-rally steps with no part-drawn tread — the race
  still replays, it steps instead of gliding; decorative CSS transitions
  carry motion-reduce:transition-none.
- aria-live, throttled: one polite status line announces a game point
  reached, three side-outs in a row, pause (with the score) and the finish —
  at most one message per ~1.4s window, never every rally.
- Hover a rally column for a tooltip (rally #, server, winner, point or
  side-out, score after, game-point note); Tab focuses the plot and arrow
  keys walk the rallies as a listbox via aria-activedescendant, Home/End
  included. Hit targets are full-height, full-width columns; hovered wins
  over the keyboard cursor, and both are clamped to the current rally count
  so a shorter payload can never leave either pointing past the end.

Rendering & styling
- The plot is a fixed 1000 × 260 viewBox stretched with
  preserveAspectRatio="none": x-units follow the card's width, y-units the
  height prop. Every mark is an axis-aligned line or rect (shapes non-uniform
  scaling cannot distort) with vectorEffect="non-scaling-stroke", so the 2px
  race lines stay 2px at any card size. Nothing inside the svg is text — the
  score, axis labels and tooltip are HTML at real px sizes.
- Two step-after staircases over the rally index (y = points, 0 to
  max(target, overtime score)); the band between them is one axis-aligned
  rect per rally interval, tinted with the CURRENT leader's token at low
  fill-opacity, so a lead change reads as the band switching colour and a tie
  leaves the gap unpainted. A dashed muted line marks the target.
- Side-out rallies get muted hairline ticks under the baseline (side-out
  scoring only); game-point rallies get short team-coloured ticks in a strip
  above the plot. Legend: a 2px line swatch per team, the side-out tick, the
  game-point tick.
- Readouts follow the playhead: current score big (tabular-nums), rally
  counter, lead changes, longest scoring run; a winner badge with the final
  score appears when the playhead rests at the end.
- Colour from tokens only: var(--chart-1/2) lines and tints, stroke-ring for
  the active column, border/muted inks for frame and axis, all text in text
  tokens. Skeleton mirrors the ready layout; an sr-only table repeats every
  rally with server, outcome and running score.

Customization levers
- Pace: BASE_RALLY_MS (per-rally duration at 1×) and the SPEEDS tuple set the
  replay's feel; LIVE_GAP_MS throttles the spoken updates.
- Encoding: LEAD_FILL_OPACITY dials the leader tint from whisper to banner;
  TEAM_TOKEN swaps sides onto other chart tokens; the game-point strip and
  the side-out ticks are independent blocks — drop either for a quieter race.
- Scale: height 140-320 fits dashboards or hero cards; the target line, axis
  labels and caption are one block each — remove them for a sparkline-sized
  race.
- Readouts: the stat row is two spans — add cumulative side-outs, or keep
  only the big score; the winner badge is one conditional.
- Domain: any race-to-N two-sided sport fits — volleyball or squash by
  relabelling; scoring: "rally" already covers rally-point formats, and
  target/winBy cover overtime rules.

Concepts

The derivation is the product — the data carries only who won each rally; the component walks the serve itself, so side-out scoring's whole rule (only the serving side scores, a lost serve scores nothing and passes the serve) is enforced by construction, and the staircases, tooltip, readouts and table all read one pass that can never disagree.
A race, not a strip — two step-lines climb the same axis one point at a time, so "who is ahead, since when, by how much" is read from geometry: the band between the lines wears the current leader's colour, and a lead change is the band switching sides mid-chart.
Parked at the end, replayed on demand — ready renders the finished race first (deterministic first paint, no autoplay, no timers); Play rewinds to 0 and re-runs it on a requestAnimationFrame loop driven by real frame deltas, cancelled on pause and unmount, with 1×/2×/4× rescaling the per-rally duration.
A side-out is still an event — a scoreless change of serve leaves both staircases flat, so each one drops a muted tick on the axis: a flat stretch dotted with ticks is a serve battle, visibly different from a flat stretch where nothing was recorded.
Game point is judged, not annotated — before every rally the derivation asks who would close the game by taking its point (under side-out scoring, only the server can); those rallies get team-coloured ticks in the top strip, so a blown game point followed by the converted one is legible at a glance.
Motion respects the reader — under prefers-reduced-motion playback lands whole rallies instead of gliding through them, and the polite live region speaks only the moments worth speaking — game points, three-in-a-row side-outs, pause and finish — throttled to at most one message per window, never every rally.

Points Race

Points race

Points race

Points race

Points race

Points race

Installation

Prompt

Concepts

On This Page

Points race

Points race

Points race

Points race

Points race