Skip to content

Course Designer

A free, standalone sailing race course drawing tool is available at:

/course-designer

It lets a race officer draw a course in the style of RYA / World Sailing course cards directly in the browser: place marks and gates, add rounding arcs, and export the result.

What It Does

  • Place marks and gates on a canvas, choosing a shape, colour, and label for each
  • Add port/starboard rounding arcs at each mark by hand — this is deliberately a manual step rather than one inferred from the course order, so the diagram always shows exactly what the race officer intends
  • Define course variants (e.g. signal "AP 3", "AP 4") shown in a signal/lap table on the card
  • Fill in the course card: course code, name, and notes for the printed card
  • Export the finished course as SVG, PNG, or PDF for a race notice or sailing instructions, or as JSON to reopen and keep editing

Pre-Designed Courses

Six built-in presets cover the shapes most clubs sail:

  • Windward / Leeward (L) — beat to a windward mark, leeward gate, combined start/finish line
  • Windward / Leeward with spreader mark (LA)
  • Windward / Leeward with reaching finish (LR)
  • Windward / Leeward, spreader mark and reaching finish (LRA)
  • Inner trapezoid (I)
  • Outer trapezoid (O)

Every preset is a starting point — any mark can be dragged, gates added or removed, and roundings flipped between port and starboard to match the course actually being sailed.

Implementation Notes

The tool itself is a standalone TypeScript project (course-designer/) with no dependency on the rest of the codebase. It builds to a self-contained IIFE bundle, checked into web/src/main/resources/static/course-designer.js (see that file's header comment). After changing anything under course-designer/, rebuild it (npm run build in course-designer/) and copy dist/sailing-course-designer.iife.js over that file for the website to pick up the change.

The course a visitor draws is saved to their own browser (localStorage) only — nothing is uploaded or stored server-side.

See Also

  • course-designer/README.md — the tool's own embedding and options documentation