@opndev/tennis-match-center 0.0.1

package/lib/components/schedule-board.mjs

@@ -0,0 +1,1193 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { HTMLElementSugar } from '@skirbi/sugar'
+import {
+  groupFixtures, isBye, placeGroupsIntoCells, placeKnockoutIntoCells,
+} from '../plan-placement.mjs'
+import { competitionHue, divisionHues } from '../division-hues.mjs'
+import { setNameText } from '../flags.mjs'
+import { rowsForDate } from '../day-rows.mjs'
+import { withBusyButton } from '../busy-button.mjs'
+
+const KNOCKOUT_ROUND_ORDER = ['R256', 'R128', 'R64', 'R32', 'R16', 'QF', 'SF', 'F']
+
+const SAVING = { busy: 'Saving…', done: 'Saved', failed: 'Save failed' }
+const CLEARING = { busy: 'Clearing…', done: 'Cleared', failed: 'Clear failed' }
+const GENERATING = {
+  busy: 'Generating…', done: 'Generated', failed: 'Nothing to generate',
+}
+
+/**
+ * <tennis-schedule-board shell-api="..." day-api="..."
+ *   competition-api="..." save-api="..." clear-api="...">
+ *
+ * The actual Gate 3 "Court Scheduler" from spec.md: every division's
+ * group matches, generated from spec.md's fixed templates
+ * (group-schedule.mjs), assigned to real court+hour cells. Unlike
+ * Planning (which only allocates capacity - which competition gets
+ * which cells), this board fills those cells with real matches.
+ *
+ * One day-tabbed grid, like Planning, but read-only cells (no
+ * drag/select) - the "Generate schedule" button per competition is
+ * the only way to fill or refill its matches, since the whole point
+ * is automating this rather than placing matches by hand. Generating
+ * again for a competition replaces only that competition's matches;
+ * every other competition's matches are untouched.
+ *
+ * Day tabs are built as a <semtic-tabbed> subtree entirely in memory
+ * and inserted in one shot - see planning-board.mjs's doc comment for
+ * why (same underlying component, same constraint).
+ *
+ * The board is fetched in three pieces, as Planning is: the shell
+ * (courts, days, each competition's running order) draws the grid,
+ * day-api fills the day a director is actually looking at, and
+ * competition-api is fetched only when that competition generates.
+ * A whole schedule is three quarters of a megabyte, which a slow line
+ * feels whatever the server does.
+ *
+ * "Clear schedule (all)"/"(day)" are deletes, not saves: which rows to
+ * drop follows from the event and the date, so a board holding one day
+ * cannot wipe the days it never held.
+ */
+export class TennisScheduleBoardElement extends HTMLElementSugar {
+  static tag = 'tennis-schedule-board'
+  static renderGuardSelector = '[data-schedule]'
+
+  static attributeDefs = {
+    'shell-api': {},
+    'day-api': {},
+    'competition-api': {},
+    'save-api': {},
+    'clear-api': {},
+    'csrf-token': {},
+    'flag-svg': { default: 'windows' },
+  }
+
+  static HtmlTemplate = ['tennis-schedule-board-template', function () {
+    return this.tpl(`
+      <div>
+        <p data-status>Loading…</p>
+        <button data-clear-all type="button" hidden>Clear schedule (all)</button>
+        <button data-clear-day type="button" hidden>Clear schedule (day)</button>
+        <ul data-legend hidden></ul>
+        <label data-view-toggle hidden>
+          <input data-show-data type="checkbox">
+          Show data
+        </label>
+        <pre data-schedule-data hidden></pre>
+        <div data-schedule hidden></div>
+        <button data-save type="button" hidden>Save schedule</button>
+      </div>
+    `)
+  }]
+
+  async connectedCallback() {
+    super.connectedCallback()
+
+    // See planning-board.mjs's connectedCallback for why the DOM-setup
+    // guard and the fetch+render are split, and why a generation token
+    // guards the fetch - same double-connect/race concerns apply here.
+    if (!this.hasRenderedShape()) {
+      this.appendChild(this.renderFromTemplate())
+    }
+
+    if (!this._listenersBound) {
+      this._listenersBound = true
+      this.$('[data-save]').addEventListener('click', () => this.save())
+      this.$('[data-clear-all]').addEventListener('click', event => {
+        withBusyButton(event.currentTarget, () => this.clearAll(), CLEARING)
+      })
+      this.$('[data-clear-day]').addEventListener('click', event => {
+        const activeDate = this.$('[data-schedule] semtic-tabbed')?.getAttribute('current')
+        withBusyButton(
+          event.currentTarget, () => this.clearDay(activeDate), CLEARING
+        )
+      })
+      this.$('[data-show-data]').addEventListener('change', () => this.render())
+    }
+
+    const shellApplied = await this.fetchShell()
+
+    if (!shellApplied) {
+      return
+    }
+
+    this.render()
+  }
+
+  /**
+   * The grid and nothing in it: courts, days, and each competition's
+   * running order. Everything a cell holds arrives per day, and what a
+   * competition needs to work out its matches arrives when it
+   * generates - a whole schedule is three quarters of a megabyte, and
+   * a director waiting on all of it to see any of it is the slow part
+   * on a slow line.
+   *
+   * @returns {Promise<boolean>}
+   */
+  async fetchShell() {
+    const data = await this.fetchJSON(this.getConfig()['shell-api'])
+
+    if (!data) {
+      return false
+    }
+
+    this.state = {
+      ...data,
+      competitions: data.competitions.map(competition => ({
+        cells: [],
+        knockout_cells: [],
+        groups: [],
+        brackets: [],
+        teams: {},
+        loaded: false,
+        ...competition,
+      })),
+    }
+
+    this.matches = []
+    this.loadedDates = new Set()
+    this._divisionHues = null
+    this.teamNames = {}
+    this.groupsById = {}
+    this.divisionNamesById = {}
+    this.unscheduledByCompetition = new Map()
+
+    return true
+  }
+
+  /**
+   * One day's cells and matches, folded into the competitions the
+   * shell already drew. A competition that has since been fetched
+   * whole is skipped: it holds every day of its own already, and
+   * adding this day's cells to it again would double them.
+   *
+   * @param {string} date
+   * @returns {Promise<boolean>}
+   */
+  async fetchDay(date) {
+    if (this.loadedDates.has(date)) {
+      return true
+    }
+
+    const data = await this.fetchJSON(`${this.getConfig()['day-api']}/${date}`)
+
+    if (!data) {
+      return false
+    }
+
+    for (const competition of this.state.competitions) {
+      if (competition.loaded) {
+        continue
+      }
+
+      const cells = data.cells.filter(
+        cell => cell.competition_id === competition.id
+      )
+
+      competition.cells = competition.cells
+        .filter(cell => cell.date !== date)
+        .concat(cells.filter(cell => cell.phase !== 'knockout'))
+      competition.knockout_cells = competition.knockout_cells
+        .filter(cell => cell.date !== date)
+        .concat(cells.filter(cell => cell.phase === 'knockout'))
+    }
+
+    const generated = this.generatedDivisionIds()
+
+    this.matches = this.matches
+      .filter(match => match.date !== date || generated.has(match.division_id))
+      .concat(data.matches.filter(match => !generated.has(match.division_id)))
+
+    this.learnNames(data)
+
+    this.loadedDates.add(date)
+
+    return true
+  }
+
+  /**
+   * Remembers who and what a payload's matches are.
+   *
+   * Merged rather than replaced: a day knows the names of what is on
+   * it and a competition knows its own, and a board that draws one day
+   * while holding another needs both.
+   *
+   * @param {{teams: ?Object, groups: ?Object, divisions: ?Object}} data
+   */
+  learnNames(data) {
+    Object.assign(this.teamNames, data.teams ?? {})
+    Object.assign(this.groupsById, data.groups ?? {})
+    Object.assign(this.divisionNamesById, data.divisions ?? {})
+  }
+
+  /**
+   * The divisions whose matches the board itself is now the source of.
+   *
+   * A competition that has been generated holds its whole week here,
+   * saved or not. Opening a day after that must not put the stored
+   * version of those matches back over the generated one.
+   *
+   * @returns {Set<number>}
+   */
+  generatedDivisionIds() {
+    const divisionIds = new Set()
+
+    for (const competition of this.state.competitions) {
+      if (!competition.loaded) {
+        continue
+      }
+
+      for (const divisionId of this.divisionIdsFor(competition)) {
+        divisionIds.add(divisionId)
+      }
+    }
+
+    return divisionIds
+  }
+
+  /**
+   * Everything one competition needs to generate: its groups, its
+   * brackets, its names, and its cells on every day - not only the
+   * days a director happens to have opened.
+   *
+   * @param {number} competitionId
+   * @returns {Promise<boolean>}
+   */
+  async fetchCompetition(competitionId) {
+    const index = this.state.competitions.findIndex(
+      competition => competition.id === competitionId
+    )
+
+    if (index < 0) {
+      return false
+    }
+
+    if (this.state.competitions[index].loaded) {
+      return true
+    }
+
+    const data = await this.fetchJSON(
+      `${this.getConfig()['competition-api']}/${competitionId}`
+    )
+
+    if (!data) {
+      return false
+    }
+
+    this.state.competitions[index] = {
+      ...this.state.competitions[index], ...data, loaded: true,
+    }
+
+    this.learnNames({
+      teams: this.state.competitions[index].teams,
+      groups: this.groupNamesOf(this.state.competitions[index]),
+      divisions: this.divisionNamesOf(this.state.competitions[index]),
+    })
+
+    return true
+  }
+
+  /**
+   * Stale-request guard, per URL: a day fetched while a competition is
+   * still coming must not discard the competition, and the other way
+   * round, so each endpoint counts its own requests.
+   *
+   * @param {string} url
+   * @returns {Promise<?Object>} null if a newer request for the same
+   *   URL has since started.
+   */
+  async fetchJSON(url) {
+    this._fetchGenerations ??= new Map()
+
+    const requestId = (this._fetchGenerations.get(url) ?? 0) + 1
+    this._fetchGenerations.set(url, requestId)
+
+    const response = await fetch(url, {
+      headers: { Accept: 'application/json' },
+    })
+
+    const data = await response.json()
+
+    if (requestId !== this._fetchGenerations.get(url)) {
+      return null
+    }
+
+    return data
+  }
+
+  /**
+   * group_id -> {division_name, name}, so a cell can show which
+   * division/group a match belongs to without knowing which
+   * competition it came from.
+   */
+  groupNamesOf(competition) {
+    const groups = {}
+
+    for (const group of competition.groups) {
+      groups[group.id] = {
+        division_name: group.division_name, name: group.name,
+      }
+    }
+
+    return groups
+  }
+
+  divisionNamesOf(competition) {
+    const names = {}
+
+    for (const bracket of competition.brackets ?? []) {
+      names[bracket.division_id] = bracket.division_name
+    }
+
+    return names
+  }
+
+  divisionIdsFor(competition) {
+    const divisionIds = new Set(competition.groups.map(group => group.division_id))
+    for (const bracket of competition.brackets ?? []) {
+      divisionIds.add(bracket.division_id)
+    }
+    return divisionIds
+  }
+
+  /**
+   * Reshapes the saved bracket shells into the round-grouped form the
+   * knockout scheduler wants. Only rounds that actually have shells
+   * appear, so a half-built bracket doesn't produce empty rounds.
+   */
+  bracketsFor(competition) {
+    return (competition.brackets ?? []).map(bracket => ({
+      name: bracket.division_name,
+      rounds: KNOCKOUT_ROUND_ORDER
+        .filter(round => bracket.matches.some(match => match.round === round))
+        .map(round => ({
+          name: round,
+          matches: bracket.matches
+            .filter(match => match.round === round)
+            .map(match => ({
+              id: match.id,
+              division_id: bracket.division_id,
+              home_team_id: match.home_team_id,
+              visitor_team_id: match.visitor_team_id,
+            })),
+        })),
+    }))
+  }
+
+  /**
+   * Runs the generator for one competition's groups against its own
+   * cells, replacing that competition's matches - every other
+   * competition's matches are left exactly as they were.
+   *
+   * Fetches that competition first: a board holds a day at a time, and
+   * generating against the days a director happened to open would
+   * leave the rest of the week unscheduled.
+   */
+  async generate(competitionId) {
+    if (!await this.fetchCompetition(competitionId)) {
+      return false
+    }
+
+    const competition = this.state.competitions.find(c => c.id === competitionId)
+
+    if (!competition) {
+      return false
+    }
+
+    const { matches, unplaced } = placeGroupsIntoCells({
+      cells: competition.cells,
+      groups: competition.groups.map(group => ({
+        id: group.id,
+        divisionId: group.division_id,
+        teamIds: group.team_ids,
+        groupSize: group.pool_size,
+      })),
+    })
+
+    const { matches: knockoutMatches, unplaced: knockoutUnplaced } = placeKnockoutIntoCells({
+      cells: competition.knockout_cells ?? [],
+      brackets: this.bracketsFor(competition),
+    })
+
+    const divisionIds = this.divisionIdsFor(competition)
+
+    this.matches = this.matches.filter(match => !divisionIds.has(match.division_id))
+    this.matches.push(...matches)
+    this.matches.push(...knockoutMatches)
+
+    this.unscheduledByCompetition.set(
+      competitionId, unplaced.length + knockoutUnplaced.length
+    )
+
+    this.dispatchEvent(new CustomEvent('tennis-schedule:changed', {
+      bubbles: true,
+      detail: { matches: this.matches },
+    }))
+
+    const scheduled = matches.length + knockoutMatches.length
+
+    this.dispatchEvent(new CustomEvent('tennis-schedule:generated', {
+      bubbles: true,
+      detail: {
+        competition: competition.name,
+        scheduled,
+        unplaced: unplaced.length + knockoutUnplaced.length,
+      },
+    }))
+
+    this.render()
+
+    return scheduled > 0
+  }
+
+  /**
+   * Unschedules the whole event, or just the day on screen.
+   *
+   * Sent as a delete rather than as an empty save: which rows to drop
+   * follows from the event and the date, and a board that holds one
+   * day at a time could not send the rest of them to be replaced.
+   */
+  clearAll() {
+    return this.clear(this.getConfig()['clear-api'], null, () => {
+      this.matches = []
+      this.unscheduledByCompetition = new Map()
+    })
+  }
+
+  clearDay(date) {
+    if (!date) {
+      return Promise.resolve(false)
+    }
+
+    return this.clear(`${this.getConfig()['day-api']}/${date}`, date, () => {
+      this.matches = this.matches.filter(match => match.date !== date)
+    })
+  }
+
+  /**
+   * @param {string} url
+   * @param {?string} date the date cleared, or null for the whole
+   *   event - said in the event a page toasts.
+   * @param {Function} apply drops the cleared matches from the board's
+   *   own copy, once the server has dropped them from the database.
+   * @returns {Promise<boolean>}
+   */
+  async clear(url, date, apply) {
+    const config = this.getConfig()
+
+    const response = await fetch(url, {
+      method: 'DELETE',
+      headers: {
+        Accept: 'application/json',
+        'X-CSRF-TOKEN': config['csrf-token'],
+      },
+    })
+
+    if (!response.ok) {
+      this.dispatchEvent(new CustomEvent('tennis-schedule:save-error', {
+        bubbles: true,
+        detail: await response.json().catch(() => ({})),
+      }))
+      return false
+    }
+
+    apply()
+
+    await this.refreshCounts()
+
+    this.dispatchEvent(new CustomEvent('tennis-schedule:changed', {
+      bubbles: true,
+      detail: { matches: this.matches },
+    }))
+
+    this.dispatchEvent(new CustomEvent('tennis-schedule:cleared', {
+      bubbles: true,
+      detail: { date },
+    }))
+
+    this.render()
+
+    return true
+  }
+
+  /**
+   * How many matches this competition can actually produce.
+   *
+   * Asked of the placer rather than worked out again here: a short
+   * group is played at the size it was planned at, so its byes count,
+   * and a knockout bye is never played, so it does not. Counting them
+   * the other way round had a competition report more matches
+   * scheduled than it has.
+   */
+  expectedMatchCount(competition) {
+    const groups = competition.groups.reduce(
+      (total, group) => total + groupFixtures({
+        teamIds: group.team_ids, groupSize: group.pool_size,
+      }).filter(fixture => fixture.playable).length,
+      0
+    )
+
+    const knockout = (competition.brackets ?? []).reduce(
+      (total, bracket) =>
+        total + bracket.matches.filter(match => !isBye(match)).length,
+      0
+    )
+
+    return groups + knockout
+  }
+
+  /**
+   * court_id != null matters: a knockout shell exists as a match row
+   * before it has been placed anywhere, so counting rows alone would
+   * report a full schedule while cells sit empty.
+   */
+  /**
+   * A competition's tally, as the legend reads it.
+   *
+   * The server counts what is stored, because a board holding one day
+   * at a time cannot: it would report a week's schedule as the one day
+   * it happens to have. Once a competition has been fetched whole the
+   * board counts its own copy instead, so a generate that has not been
+   * saved yet still shows.
+   *
+   * @param {Object} competition
+   * @returns {{expected: number, scheduled: number}}
+   */
+  countsFor(competition) {
+    if (!competition.loaded) {
+      return competition.counts ?? { expected: 0, scheduled: 0 }
+    }
+
+    return {
+      expected: this.expectedMatchCount(competition),
+      scheduled: this.scheduledMatchCount(competition),
+    }
+  }
+
+  /**
+   * Re-reads the stored tallies after a save or a clear changed them.
+   * The shell is the cheap call, and nothing else it returns has
+   * moved.
+   */
+  async refreshCounts() {
+    const data = await this.fetchJSON(this.getConfig()['shell-api'])
+
+    if (!data) {
+      return
+    }
+
+    const counts = new Map(
+      data.competitions.map(competition => [competition.id, competition.counts])
+    )
+
+    for (const competition of this.state.competitions) {
+      competition.counts = counts.get(competition.id) ?? competition.counts
+    }
+  }
+
+  scheduledMatchCount(competition) {
+    const divisionIds = this.divisionIdsFor(competition)
+    return this.matches.filter(
+      match => divisionIds.has(match.division_id) && match.court_id != null
+    ).length
+  }
+
+  matchAt(courtId, date, hour) {
+    return this.matches.find(match =>
+      match.court_id === courtId && match.date === date && match.hour === hour
+    )
+  }
+
+  /**
+   * The grid only needs to cover the days/hours a competition actually
+   * has capacity cells for - not the full event range, most of which
+   * would just be an empty grid here.
+   */
+  allCells(competition) {
+    return [...competition.cells, ...(competition.knockout_cells ?? [])]
+  }
+
+  /**
+   * The event's days, as Planning draws them.
+   *
+   * Falls back to the days the planned cells mention, for a backend
+   * that sends no grid of its own.
+   */
+  dates() {
+    if (this.state.days?.length) {
+      return [...this.state.days]
+    }
+
+    const dates = new Set()
+    for (const competition of this.state.competitions) {
+      for (const cell of this.allCells(competition)) {
+        dates.add(cell.date)
+      }
+    }
+    return [...dates].sort()
+  }
+
+  /**
+   * The day to open on: the first with anything planned in it.
+   *
+   * The tabs cover the whole event, as Planning's do, but an event
+   * usually opens before play does - landing on a day with nothing in
+   * it reads as a board that failed to load. The shell says which days
+   * have anything on them, so the day to open on is known before any
+   * of them has been fetched.
+   *
+   * @param {string[]} dates
+   * @returns {string}
+   */
+  firstPlannedDate(dates) {
+    const planned = new Set(this.state.planned_days ?? [])
+
+    if (planned.size === 0) {
+      for (const competition of this.state.competitions) {
+        for (const cell of this.allCells(competition)) {
+          planned.add(cell.date)
+        }
+      }
+    }
+
+    return dates.find(date => planned.has(date)) ?? dates[0]
+  }
+
+  /**
+   * The rows of one day, worked out the way Planning works them out -
+   * per competition, from its own sessions. A court and hour with
+   * nothing planned in it is drawn blocked: nothing may be scheduled
+   * where nothing was planned.
+   */
+  hoursFor(date) {
+    return rowsForDate({
+      date,
+      competitions: this.state.competitions ?? [],
+      cells: this.allCellsWithCompetition(),
+    }).map(row => row.key)
+  }
+
+  /**
+   * Every planned cell, carrying the competition it belongs to -
+   * which the row logic needs and the payload nests instead.
+   */
+  allCellsWithCompetition() {
+    return (this.state.competitions ?? []).flatMap(competition =>
+      this.allCells(competition).map(cell => ({
+        ...cell, competition_id: competition.id,
+      }))
+    )
+  }
+
+  courtsFor(date, hour) {
+    const courtIds = new Set()
+    for (const competition of this.state.competitions) {
+      for (const cell of this.allCells(competition)) {
+        if (cell.date === date && cell.slot === hour) {
+          courtIds.add(cell.court_id)
+        }
+      }
+    }
+    return this.state.courts.filter(court => courtIds.has(court.id))
+  }
+
+  render() {
+    this.$('[data-status]').hidden = true
+    this.$('[data-clear-all]').hidden = false
+    this.$('[data-clear-day]').hidden = false
+    this.$('[data-legend]').hidden = false
+    this.$('[data-save]').hidden = false
+    this.$('[data-view-toggle]').hidden = false
+
+    // The schedule as data, for reading rather than looking at - the
+    // same toggle Planning has.
+    const showData = this.$('[data-show-data]').checked
+    const data = this.$('[data-schedule-data]')
+
+    data.hidden = !showData
+    this.$('[data-schedule]').hidden = showData
+
+    if (showData) {
+      data.textContent = JSON.stringify(this.scheduleData(), null, 2)
+      return
+    }
+
+    this.renderLegend()
+    this.renderSchedule()
+  }
+
+  /**
+   * The schedule as plain data: a day holds courts, a court holds
+   * hours, an hour holds what is played in it.
+   */
+  scheduleData() {
+    return this.dates().map(date => ({
+      date,
+      hours: this.hoursFor(date).map(hour => ({
+        hour,
+        courts: this.courtsFor(date, hour).map(court => {
+          const match = this.matchAt(court.id, date, hour)
+
+          return {
+            court: court.name,
+            division: match
+              ? this.divisionNamesById[match.division_id] ?? null
+              : null,
+            group: match ? this.groupsById[match.group_id]?.name ?? null : null,
+            round: match?.round ?? null,
+            home: match
+              ? this.sideMembers(match.home_team_id, match.visitor_team_id)
+                .join(', ')
+              : null,
+            visitor: match
+              ? this.sideMembers(match.visitor_team_id, match.home_team_id)
+                .join(', ')
+              : null,
+          }
+        }),
+      })),
+    }))
+  }
+
+  renderLegend() {
+    const legend = this.$('[data-legend]')
+    legend.replaceChildren()
+
+    for (const competition of this.state.competitions) {
+      if (this.countsFor(competition).expected === 0) {
+        continue
+      }
+
+      const item = document.createElement('li')
+      item.dataset.competitionId = competition.id
+
+      const name = document.createElement('span')
+      name.dataset.legendName = ''
+      name.textContent = competition.name
+
+      const count = document.createElement('span')
+      count.dataset.legendCount = ''
+      const counts = this.countsFor(competition)
+      count.textContent = `${counts.scheduled}/${counts.expected} matches scheduled`
+
+      item.append(name, count)
+
+      const unscheduled = this.unscheduledByCompetition.get(competition.id)
+      if (unscheduled) {
+        const warning = document.createElement('span')
+        warning.dataset.legendWarning = ''
+        warning.textContent = `${unscheduled} could not fit - allocate more capacity in Planning`
+        item.appendChild(warning)
+      }
+
+      const button = document.createElement('button')
+      button.type = 'button'
+      button.dataset.legendGenerate = ''
+      button.textContent = 'Generate schedule'
+      button.addEventListener('click', event => {
+        withBusyButton(
+          event.currentTarget, () => this.generate(competition.id), GENERATING
+        )
+      })
+
+      item.appendChild(button)
+      legend.appendChild(item)
+    }
+  }
+
+  renderSchedule() {
+    const container = this.$('[data-schedule]')
+    const activeDate = container.querySelector('semtic-tabbed')?.getAttribute('current')
+    container.replaceChildren()
+
+    const dates = this.dates()
+
+    if (dates.length === 0) {
+      return
+    }
+
+    const tabbed = document.createElement('semtic-tabbed')
+    const initial = dates.includes(activeDate)
+      ? activeDate
+      : this.firstPlannedDate(dates)
+
+    tabbed.setAttribute('current', initial)
+
+    for (const date of dates) {
+      const tab = document.createElement('semtic-tab')
+      tab.setAttribute('tab', date)
+      tab.setAttribute('label', date)
+      tabbed.appendChild(tab)
+    }
+
+    this.buildDay(tabbed, initial)
+
+    tabbed.addEventListener(
+      'semtic-tabbed:activated', event => this.buildDay(tabbed, event.detail.tab)
+    )
+
+    container.appendChild(tabbed)
+  }
+
+  /**
+   * Draws one day's grid, fetching that day first if this is the first
+   * time it has been opened, and drawing it again when that arrives.
+   * What is drawn in between is whatever the board already holds for
+   * the day - a competition generated earlier holds every day of its
+   * own, so it shows at once.
+   *
+   * @param {HTMLElement} tabbed
+   * @param {string} date
+   */
+  buildDay(tabbed, date) {
+    const tab = tabbed.querySelector(`:scope > semtic-tab[tab="${date}"]`)
+
+    if (!tab) {
+      return
+    }
+
+    tab.replaceChildren(this.tableForDay(date))
+
+    if (this.loadedDates.has(date)) {
+      return
+    }
+
+    this.fetchDay(date).then(applied => {
+      if (applied && tab.isConnected) {
+        tab.replaceChildren(this.tableForDay(date))
+      }
+    })
+  }
+
+  tableForDay(date) {
+    const hours = this.hoursFor(date)
+    const courts = this.state.courts
+
+    const table = document.createElement('table')
+    table.dataset.day = date
+
+    const thead = document.createElement('thead')
+    const headRow = document.createElement('tr')
+    headRow.appendChild(document.createElement('th'))
+    for (const court of courts) {
+      const th = document.createElement('th')
+      th.dataset.courtId = court.id
+      th.textContent = court.name
+      headRow.appendChild(th)
+    }
+    thead.appendChild(headRow)
+    table.appendChild(thead)
+
+    const tbody = document.createElement('tbody')
+    for (const hour of hours) {
+      tbody.appendChild(this.gridRow(date, hour, courts))
+    }
+    table.appendChild(tbody)
+
+    return table
+  }
+
+  gridRow(date, hour, courts) {
+    const row = document.createElement('tr')
+    row.dataset.slot = hour
+
+    const heading = document.createElement('th')
+    heading.dataset.slotLabel = ''
+    heading.textContent = hour
+    row.appendChild(heading)
+
+    const availableCourts = new Set(this.courtsFor(date, hour).map(court => court.id))
+
+    for (const court of courts) {
+      const cell = document.createElement('td')
+
+      if (!availableCourts.has(court.id)) {
+        cell.dataset.blocked = ''
+        row.appendChild(cell)
+        continue
+      }
+
+      cell.dataset.courtId = court.id
+
+      const match = this.matchAt(court.id, date, hour)
+
+      cell.appendChild(match ? this.matchLabel(match) : this.emptySlotLabel())
+
+      row.appendChild(cell)
+    }
+
+    return row
+  }
+
+  /**
+   * [name 1]    [opp 1]
+   * [name 2] vs [opp 2]
+   * [division / group]
+   *
+   * A team's display name is one name for singles, or its 2 members
+   * comma-separated for doubles (see MatchDaySchedulingController's
+   * teamNames) - split back out so each member gets their own line,
+   * lined up against their counterpart on the other team.
+   */
+  /**
+   * A match as a cell reads it: what is being played, then who is
+   * playing it.
+   *
+   * The group or the round comes first and stands on its own, because
+   * that is what a director scans a column for. It carries the
+   * division's own hue, the one Planning draws it in, so two cells of
+   * the same division read as the same division without either of them
+   * being read.
+   */
+  matchLabel(match) {
+    const group = this.groupsById[match.group_id]
+
+    // A knockout match has no group, so it labels itself by its round
+    // instead.
+    const badge = group ? group.name : match.round
+    const divisionName = group
+      ? group.division_name
+      : this.divisionNamesById[match.division_id]
+
+    const container = document.createElement('div')
+    container.dataset.cellMatch = ''
+
+    const hue = this.divisionHue(match.division_id)
+
+    if (hue != null) {
+      container.style.setProperty('--division-hue', hue)
+    }
+
+    container.append(
+      this.metaLabel(badge, divisionName),
+      this.teamsLabel(match)
+    )
+
+    return container
+  }
+
+  metaLabel(badge, divisionName) {
+    const meta = document.createElement('div')
+    meta.dataset.cellMeta = ''
+
+    const badgeElement = document.createElement('span')
+    badgeElement.dataset.cellBadge = ''
+    badgeElement.textContent = badge ?? ''
+
+    const division = document.createElement('span')
+    division.dataset.cellDivision = ''
+    division.textContent = divisionName ?? ''
+
+    meta.append(badgeElement, division)
+
+    return meta
+  }
+
+  /**
+   * The two sides, one column each, with the vs between them.
+   *
+   * Every name is placed on its own row, so a doubles pair lines up
+   * against its counterpart. The vs sits on the middle row where there
+   * is one and between the two middle rows where there is not, which
+   * it does by spanning them all and centring itself.
+   */
+  teamsLabel(match) {
+    const home = this.sideMembers(match.home_team_id, match.visitor_team_id)
+    const visitor = this.sideMembers(match.visitor_team_id, match.home_team_id)
+
+    const teams = document.createElement('div')
+    teams.dataset.cellTeams = ''
+
+    const rows = Math.max(home.length, visitor.length, 1)
+    teams.dataset.rows = rows
+
+    for (const [index, name] of home.entries()) {
+      teams.appendChild(this.playerLabel('cellName', name, index + 1))
+    }
+
+    for (const [index, name] of visitor.entries()) {
+      teams.appendChild(this.playerLabel('cellOpp', name, index + 1))
+    }
+
+    const vs = document.createElement('span')
+    vs.dataset.cellVs = ''
+    vs.textContent = 'vs'
+    vs.style.gridRow = rows % 2 === 0
+      ? '1 / -1'
+      : String(Math.ceil(rows / 2))
+
+    teams.appendChild(vs)
+
+    return teams
+  }
+
+  /**
+   * One name, on its own row of its side's column.
+   *
+   * The flag in front of a name is drawn as an image where the
+   * platform would draw it as two letters instead, which is what
+   * Windows does with every flag. `flag-svg` decides when: always,
+   * never, or windows.
+   *
+   * @param {string} side cellName or cellOpp
+   * @param {string} name
+   * @param {number} row
+   * @returns {HTMLElement}
+   */
+  playerLabel(side, name, row) {
+    const element = document.createElement('span')
+
+    element.dataset[side] = ''
+    element.style.gridRow = String(row)
+
+    setNameText(element, name, this.getConfig()['flag-svg'])
+
+    return element
+  }
+
+  /**
+   * The hue this division is drawn in, the one Planning draws it in.
+   *
+   * @see division-hues.mjs
+   */
+  divisionHue(divisionId) {
+    this._divisionHues ??= divisionHues(this.state.competitions)
+
+    const hue = this._divisionHues.get(divisionId)
+
+    if (hue != null) {
+      return hue
+    }
+
+    const index = this.state.competitions.findIndex(
+      competition => this.divisionIdsFor(competition).has(divisionId)
+    )
+
+    return competitionHue(index, this.state.competitions.length)
+  }
+
+  /**
+   * A planned cell with no match to put in it. Planning reserves full
+   * capacity while Scheduling fills actual matches, so the leftover
+   * cells are expected, not an error.
+   */
+  emptySlotLabel() {
+    const container = document.createElement('div')
+    container.dataset.cellMatch = ''
+    container.dataset.cellEmpty = ''
+
+    const teams = document.createElement('div')
+    teams.dataset.cellTeams = ''
+    teams.dataset.rows = 1
+
+    const name = document.createElement('span')
+    name.dataset.cellName = ''
+    name.textContent = '[empty]'
+    name.style.gridRow = '1'
+
+    const vs = document.createElement('span')
+    vs.dataset.cellVs = ''
+    vs.textContent = 'vs'
+    vs.style.gridRow = '1'
+
+    const opp = document.createElement('span')
+    opp.dataset.cellOpp = ''
+    opp.textContent = '[empty]'
+    opp.style.gridRow = '1'
+
+    teams.append(name, opp, vs)
+    container.appendChild(teams)
+
+    return container
+  }
+
+
+  /**
+   * The names on one side of a fixture.
+   *
+   * An empty side against a team is a bye and says so: a short group
+   * is played at the size it was planned at, and a cell reading "A vs
+   * bye" explains itself where a blank one leaves a director guessing.
+   * Both sides empty is a fixture waiting on winners, and says
+   * nothing yet.
+   */
+  sideMembers(teamId, opponentId) {
+    if (teamId === null || teamId === undefined) {
+      return opponentId === null || opponentId === undefined ? [] : ['bye']
+    }
+
+    return this.teamMembers(teamId)
+  }
+
+  teamMembers(teamId) {
+    const name = this.teamNames[teamId]
+
+    if (!name) {
+      return []
+    }
+
+    return name.split(',').map(part => part.trim())
+  }
+
+  async save() {
+    return withBusyButton(this.$('[data-save]'), async () => {
+
+      const config = this.getConfig()
+
+      const generated = this.generatedDivisionIds()
+
+      const matches = this.matches
+        .filter(match => generated.has(match.division_id))
+        .map(match => ({
+          id: match.id,
+          round: match.round,
+          division_id: match.division_id,
+          group_id: match.group_id,
+          slot: match.slot,
+          court_id: match.court_id,
+          date: match.date,
+          hour: match.hour,
+          home_team_id: match.home_team_id,
+          visitor_team_id: match.visitor_team_id,
+        }))
+
+      const response = await fetch(config['save-api'], {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          'X-CSRF-TOKEN': config['csrf-token'],
+        },
+        body: JSON.stringify({ matches }),
+      })
+
+      const body = await response.json()
+
+      if (!response.ok) {
+        this.dispatchEvent(new CustomEvent('tennis-schedule:save-error', {
+          bubbles: true,
+          detail: body,
+        }))
+        return false
+      }
+
+      await this.refreshCounts()
+      this.render()
+
+      // An acknowledgement is enough - the board already holds what it
+      // sent. Returning the whole schedule and re-rendering from it cost
+      // more than the save.
+      this.dispatchEvent(new CustomEvent('tennis-schedule:save', {
+        bubbles: true,
+        detail: { saved: body },
+      }))
+
+      return true
+    }, SAVING)
+  }
+
+}
+