@opndev/tennis-match-center 0.0.1 → 0.0.2

package/lib/components/gameday-board.mjs

@@ -0,0 +1,1691 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { HTMLElementSugar } from '@skirbi/sugar'
+
+import * as facts from '../gameday-facts.mjs'
+import { GamedayDialog } from '../gameday-dialog.mjs'
+import { whatIsNext } from '../gameday-next.mjs'
+import { scoreField, teamCell, textTag } from '../gameday-parts.mjs'
+
+import { TennisGamedayCardElement } from './gameday-card.mjs'
+import { TennisGamedayListElement } from './gameday-list.mjs'
+
+/**
+ * An official is reading the line they are typing into. Focus that
+ * scrolls the board out from under them is worse than focus they have
+ * to find, so nothing here ever moves the page to follow it.
+ */
+const NO_SCROLL = { preventScroll: true }
+
+/**
+ * <tennis-gameday-board shell-api="..." day-api="...">
+ *
+ * The officials desk: one day, read down as a list of start times,
+ * each holding the matches that start then. A line is the two sides, a
+ * score per set, the court, and a button to start it.
+ *
+ * The day is fetched whole and split client-side:
+ *
+ *     [finished]
+ *     [started]
+ *     [pending]
+ *
+ * A meta component: it owns the day, what is written back, and what
+ * the dialogs ask. It draws no line and folds no block.
+ *
+ *     <tennis-gameday-list>    one state, grouped by start time
+ *     <tennis-gameday-card>    one match, and what was asked of it
+ *     GamedayDialog            one dialog, and when it is open
+ *
+ * A card reports; the board decides. Nothing here reaches into a line
+ * to find out what was pressed.
+ */
+export class TennisGamedayBoardElement extends HTMLElementSugar {
+  static tag = 'tennis-gameday-board'
+  static renderGuardSelector = '[data-toolbar]'
+
+  static REASONS = [
+    ['walkover', 'Walkover'],
+    ['injury', 'Injury'],
+    ['no_show', 'No show'],
+    ['other', 'Other'],
+  ]
+
+  /**
+   * What a match that was not played out is called afterwards. 'other'
+   * is a real result with a note against it rather than a named one.
+   */
+  static REASON_STATUS = {
+    walkover: 'walkover',
+    injury: 'retired',
+    no_show: 'no_show',
+
+    // A walkover too. 'completed' is the one status a line draws no
+    // marker for, so a match nobody played sat in the day looking
+    // exactly like a match somebody did. The note says what happened.
+    other: 'walkover',
+  }
+
+  static FORFEIT_GAMES = 7
+
+  /** Blocks open on the first draw, by section. */
+  static OPENS_WITH = { finished: 0, pending: 2 }
+
+  static attributeDefs = {
+    'shell-api': {},
+    'day-api': {},
+    'match-api': {},
+    'csrf-token': {},
+
+    // A width, as CSS says one: below it the day opens folded. Named
+    // by the host, because which width is small is the host's layout
+    // and not this board's business. Left off, nothing folds.
+    'fold-below': {},
+  }
+
+  static HtmlTemplate = ['tennis-gameday-board-template', function () {
+    return this.tpl(`
+      <p data-status>Loading…</p>
+      <nav data-toolbar hidden>
+        <semtic-select data-day label="Day" label-position="top"></semtic-select>
+        <button type="button" extra data-fold-all></button>
+      </nav>
+      <dl data-durations hidden></dl>
+      <tennis-gameday-list data-section="finished" heading="Finished" hidden></tennis-gameday-list>
+      <tennis-gameday-list data-section="started" heading="Started" hidden></tennis-gameday-list>
+      <tennis-gameday-list data-section="pending" heading="Pending" hidden></tennis-gameday-list>
+      <semtic-modal data-reopen-modal hidden
+        header="Change the score"
+        cancel-label="Leave it as it is"
+        confirm-label="Save the score"
+        show-confirm="true">
+        <p data-reopen-match></p>
+        <p data-reopen-said></p>
+        <button slot="actions" type="button" antagonist data-reopen-confirm>Re-open match</button>
+      </semtic-modal>
+      <semtic-modal data-unstart-modal hidden
+        header="Take the start back"
+        cancel-label="Leave it running"
+        confirm-label="Take it back"
+        show-confirm="true">
+        <p data-unstart-match></p>
+        <p data-unstart-said></p>
+      </semtic-modal>
+      <semtic-modal data-forfeit-modal hidden
+        header="End without a score"
+        cancel-label="Cancel"
+        confirm-label="Record it"
+        show-confirm="true">
+        <p data-forfeit-match></p>
+        <div data-forfeit-questions>
+          <semtic-fieldset data-forfeit-reason label="What happened"></semtic-fieldset>
+          <semtic-fieldset data-forfeit-winner label="Who won"></semtic-fieldset>
+        </div>
+        <div data-forfeit-note-field hidden>
+          <semtic-input data-forfeit-note
+            label="Note" label-position="top" maxlength="255"></semtic-input>
+        </div>
+
+        <semtic-checkbox data-forfeit-remaining
+          label="Forfeit every match that team has left"
+          label-position="right"></semtic-checkbox>
+      </semtic-modal>
+      <semtic-modal data-next-modal hidden
+        header="Next on court"
+        cancel-label="Back to the desk"
+        confirm-label="Play"
+        show-confirm="true">
+        <p data-next-said></p>
+        <p data-waiting-label></p>
+        <p data-waiting-head></p>
+        <p data-waiting-match></p>
+        <p data-queued-label></p>
+        <p data-queued-head></p>
+        <p data-queued-match></p>
+      </semtic-modal>
+      <semtic-modal data-busy-modal hidden
+        header="That court is taken"
+        cancel-label="Do not start"
+        confirm-label="Move and start"
+        show-confirm="true">
+        <p data-busy-said></p>
+        <p data-busy-match></p>
+        <semtic-select data-busy-select label="Play it on" label-position="top"></semtic-select>
+        <p data-busy-none hidden>Every court has a match on it.</p>
+      </semtic-modal>
+      <semtic-modal data-court-modal hidden
+        header="Change court"
+        cancel-label="Cancel"
+        confirm-label="Change court"
+        show-confirm="true">
+        <p data-court-modal-match></p>
+        <p data-court-modal-planned></p>
+        <semtic-select data-court-modal-select></semtic-select>
+        <button slot="actions" type="button" support data-court-reset>Use planned court</button>
+      </semtic-modal>
+    `)
+  }]
+
+  async connectedCallback() {
+    super.connectedCallback()
+
+    if (!this.hasRenderedShape()) {
+      this.appendChild(this.renderFromTemplate())
+    }
+
+    this.folded = this.folded ?? new Set()
+
+    if (!this._listenersBound) {
+      this._listenersBound = true
+
+      // The control, not the <semtic-select> around it: semtic echoes
+      // change from the host as well, and the day would be fetched
+      // twice for one pick.
+      this.$('[data-day]').addEventListener('change', event => {
+        if (event.target.tagName === 'SELECT') {
+          this.showDay(event.target.value)
+        }
+      })
+
+      this.$('[data-fold-all]').addEventListener('click', () => {
+        this.foldAll(this.anyOpen())
+      })
+
+      // A card says what was asked of it and the board decides what
+      // happens. Nothing here reaches into a line to find out what was
+      // pressed; that is the card's own business and it reports it.
+      this.addEventListener('gameday-card:score', event => {
+        this.recordScore(event.detail)
+      })
+
+      this.addEventListener('gameday-card:court', event => {
+        this.courtDialog.open(event.detail.match)
+      })
+
+      this.addEventListener('gameday-card:start', event => {
+        this.toggleStarted(event.detail.match)
+      })
+
+      this.addEventListener('gameday-card:action', event => {
+        this.toggleFinished(event.detail.match)
+      })
+
+      this.bindDialogs()
+    }
+
+    this.shell = null
+    this.day = null
+
+    const shell = await this.fetchJSON(this.getConfig()['shell-api'])
+
+    if (!shell) {
+      return
+    }
+
+    if (!Array.isArray(shell.match_days)) {
+      this.fail('The desk data came back in a shape this board does not understand.')
+
+      return
+    }
+
+    this.shell = shell
+
+    this.fillSelect(
+      this.$('[data-day]'),
+      shell.match_days.map(date => ({ value: date, label: date })),
+      shell.match_days[0] ?? ''
+    )
+
+    if (!shell.match_days.length) {
+      this.$('[data-status]').textContent = 'Nothing is scheduled yet.'
+
+      return
+    }
+
+    this.$('[data-toolbar]').hidden = false
+
+    await this.showDay(shell.match_days[0])
+  }
+
+  /**
+   * The four dialogs, each owning when it is open and which match it
+   * is about. The board says what goes in one and what to do when it
+   * is answered; opening it, closing it and tidying up after it is the
+   * dialog's own business.
+   */
+  bindDialogs() {
+    this.reopenDialog = new GamedayDialog(this.$('[data-reopen-modal]'), {
+      fill: match => this.fillReopen(match),
+      focus: () => this.$('[data-reopen-match] input'),
+      confirmed: () => this.saveCorrection(),
+    })
+
+    this.$('[data-reopen-confirm]').addEventListener('click', () => this.takeResultBack())
+
+    this.unstartDialog = new GamedayDialog(this.$('[data-unstart-modal]'), {
+      fill: match => this.fillUnstart(match),
+
+      // Cancel, not confirm: undoing a start throws away when the
+      // match went on, so the safe answer is the one under the finger.
+      focus: modal => modal.querySelector('[semtic-modal-cancel]'),
+      confirmed: () => this.confirmUnstart(),
+    })
+
+    this.forfeitDialog = new GamedayDialog(this.$('[data-forfeit-modal]'), {
+      fill: match => this.fillForfeit(match),
+      focus: modal => modal.querySelector('[data-forfeit-winner] input'),
+      confirmed: () => this.confirmForfeit(),
+    })
+
+    this.$('[data-forfeit-reason]').addEventListener('change', () => {
+      this.$('[data-forfeit-note-field]').hidden = this.forfeitReason() !== 'other'
+    })
+
+    this.nextDialog = new GamedayDialog(this.$('[data-next-modal]'), {
+      fill: match => this.fillNext(match),
+      focus: modal => modal.querySelector('[data-next-modal] input') ?? modal.querySelector('[semtic-modal-cancel]'),
+      confirmed: match => this.playPicked(this.effectiveCourtId(match)),
+    })
+
+    this.busyDialog = new GamedayDialog(this.$('[data-busy-modal]'), {
+      fill: match => this.fillBusy(match),
+      focus: modal => modal.querySelector('[data-busy-select] select')
+        ?? modal.querySelector('[semtic-modal-cancel]'),
+      confirmed: match => {
+        const courtId = Number(this.$('[data-busy-select]').value)
+
+        this.busyDialog.close()
+        this.playOn(match, courtId)
+      },
+    })
+
+    this.courtDialog = new GamedayDialog(this.$('[data-court-modal]'), {
+      fill: match => this.fillCourt(match),
+      focus: modal => modal.querySelector('[data-court-modal-select]'),
+      confirmed: match => {
+        this.moveCourt(match, Number(this.$('[data-court-modal-select]').value))
+        this.courtDialog.close()
+      },
+    })
+
+    this.$('[data-court-reset]').addEventListener('click', () => {
+      const match = this.courtDialog.match
+
+      this.courtDialog.close()
+      this.resetCourt(match)
+    })
+  }
+
+
+  /**
+   * Null when the request failed or a newer one has started.
+   *
+   * Never throws: an official needs to read an error, not a blank page.
+   *
+   * @param {string} url
+   * @returns {Promise<object|null>}
+   */
+  async fetchJSON(url) {
+    const requestId = (this._fetchGeneration = (this._fetchGeneration ?? 0) + 1)
+
+    let data = null
+
+    try {
+      const response = await fetch(url, {
+        headers: { Accept: 'application/json' },
+      })
+
+      if (!response.ok) {
+        this.fail(`Could not load the desk (${response.status}).`)
+
+        return null
+      }
+
+      data = await response.json()
+    } catch (error) {
+      this.fail('Could not reach the server.')
+
+      return null
+    }
+
+    return requestId === this._fetchGeneration ? data : null
+  }
+
+  /**
+   * @param {string} message
+   */
+  fail(message) {
+    const status = this.$('[data-status]')
+
+    status.hidden = false
+    status.dataset.failed = ''
+    status.textContent = message
+  }
+
+  /**
+   * Send one desk action and keep what the server says.
+   *
+   * The board has already drawn the change, because an official is
+   * standing there and a round trip is not their problem. If the
+   * server refuses it, the match goes back to what it was and the
+   * refusal is put on screen: a desk that silently kept a score the
+   * database does not have would be worse than a slow one.
+   *
+   * @param {object} match
+   * @param {object} body
+   * @param {object} before what the match was before the board drew
+   *   the change, taken by the caller because by the time this runs
+   *   the match already says what it hopes to say.
+   * @returns {Promise<boolean>}
+   */
+  async save(match, body, before) {
+    const config = this.getConfig()
+    const url = config['match-api']
+
+    if (!url) {
+      return true
+    }
+
+    let response
+
+    try {
+      response = await fetch(`${url}/${match.id}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+          'X-CSRF-TOKEN': config['csrf-token'],
+        },
+        body: JSON.stringify(body),
+      })
+    } catch (error) {
+      return this.refuse(match, before, 'Could not reach the server. Nothing was saved.')
+    }
+
+    if (!response.ok) {
+      const problem = await response.json().catch(() => ({}))
+
+      if (problem.court_busy) {
+        return this.askAnotherCourt(match, before, problem.court_busy)
+      }
+
+      return this.refuse(match, before, this.reasonFrom(problem, response.status))
+    }
+
+    const data = await response.json().catch(() => ({}))
+
+    if (data.match) {
+      Object.assign(match, data.match)
+    }
+
+    this.render()
+
+    return true
+  }
+
+  /**
+   * @param {object} problem
+   * @param {number} status
+   * @returns {string}
+   */
+  reasonFrom(problem, status) {
+    const first = Object.values(problem.errors ?? {})[0]
+
+    if (Array.isArray(first) && first.length) {
+      return first[0]
+    }
+
+    return problem.message || `The desk could not save that (${status}).`
+  }
+
+  /**
+   * @param {object} match
+   * @param {object} before
+   * @returns {boolean}
+   */
+  refuse(match, before, message) {
+    Object.assign(match, before)
+
+    this.render()
+    this.fail(message)
+
+    return false
+  }
+
+  /**
+   * Put the line back and ask which free court to play on instead.
+   *
+   * @param {object} match
+   * @param {object} before
+   * @param {object} busy - the server's court_busy
+   * @returns {boolean}
+   */
+  askAnotherCourt(match, before, busy) {
+    Object.assign(match, before)
+
+    this.render()
+
+    this.busy = busy
+    this.busyDialog.open(match)
+
+    return false
+  }
+
+  /**
+   * @param {object} match
+   */
+  fillBusy(match) {
+    const free = this.freeCourtOptions(match)
+
+    const court = this.courtName(this.busy.court_id)
+
+    this.$('[data-busy-said]').textContent = this.busy.identifier
+      ? `${this.busy.identifier} is still on ${court}.`
+      : `${court} has a match on it.`
+
+    this.sayWhichMatch('[data-busy-match]', match)
+
+    this.$('[data-busy-select]').hidden = !free.length
+    this.$('[data-busy-none]').hidden = free.length > 0
+
+    // Nothing to confirm when there is nowhere to send them.
+    this.busyDialog.modal.setAttribute('show-confirm', free.length ? 'true' : 'false')
+
+    if (free.length) {
+      this.fillSelect(this.$('[data-busy-select]'), free, free[0].value)
+    }
+  }
+
+  /**
+   * Move to `courtId`, then start. The start is sent the usual way, so
+   * a court taken in the meantime refuses it and asks again.
+   *
+   * @param {object|null} match
+   * @param {number} courtId
+   */
+  async playOn(match, courtId) {
+    if (!match || Number.isNaN(courtId)) {
+      return
+    }
+
+    await this.moveCourt(match, courtId)
+    await this.toggleStarted(match)
+  }
+
+  /**
+   * @param {string} date
+   */
+  async showDay(date) {
+    const day = await this.fetchJSON(`${this.getConfig()['day-api']}/${date}`)
+
+    if (!day) {
+      return
+    }
+
+    this.day = day
+    this.$('[data-day]').value = date
+
+    this.render()
+  }
+
+  /**
+   * @param {object} match
+   * @returns {string}
+   */
+  segmentOf(match) {
+    return facts.segmentOf(match)
+  }
+
+
+  render() {
+    const status = this.$('[data-status]')
+
+    status.hidden = true
+    delete status.dataset.failed
+
+    this.rememberFolds()
+
+    // Every list is replaced wholesale, which on its own drops the
+    // page back to wherever the shorter document ends. Ending a match
+    // moves its line to another section, so the board underneath an
+    // official genuinely changes height; putting the scroll back is
+    // what keeps the line they are working on where they left it.
+    const wasAt = this.scrollPosition()
+
+    this.renderDurations()
+
+    // Only ever on the first day drawn. After that the folds are the
+    // official's own and a redraw must not undo them.
+    const first = !this.drawn
+    const narrow = first && this.startsFolded()
+
+    this.drawn = true
+
+    for (const list of this.lists()) {
+      list.show(
+        this.day.matches.filter(
+          match => facts.segmentOf(match) === list.segment
+        ),
+        {
+          day: this.day,
+          shell: this.shell,
+          folded: this.folded,
+          openFirst: first ? this.opensWith(list.segment, narrow) : Infinity,
+        }
+      )
+    }
+
+    this.sayFoldAll()
+    this.scrollBackTo(wasAt)
+  }
+
+  /**
+   * Where the page is, or null when nothing can say.
+   *
+   * @returns {number|null}
+   */
+  scrollPosition() {
+    const view = this.ownerDocument?.defaultView
+
+    return typeof view?.scrollY === 'number' ? view.scrollY : null
+  }
+
+  /**
+   * @param {number|null} position
+   */
+  scrollBackTo(position) {
+    const view = this.ownerDocument?.defaultView
+
+    if (position === null || typeof view?.scrollTo !== 'function') {
+      return
+    }
+
+    if (view.scrollY !== position) {
+      view.scrollTo(view.scrollX ?? 0, position)
+    }
+  }
+
+  /**
+   * How long a match takes, as far as the day knows.
+   *
+   * Every figure, because they answer different questions. The average
+   * is pulled about by the match that went to three tiebreaks; the
+   * median is not. The mode is the length a match usually is, when
+   * there is one. The trimmed mean drops the shortest and the longest
+   * and averages what is left, which is what a director means by "how
+   * long does a match take, really".
+   */
+  renderDurations() {
+    const box = this.$('[data-durations]')
+    const stats = this.day?.durations?.day
+    const event = this.day?.durations?.event
+
+    if (!stats || !stats.count) {
+      box.hidden = true
+      box.replaceChildren()
+
+      return
+    }
+
+    const rows = [
+      ['Played', String(stats.count)],
+      ['Average', this.saidAsTime(stats.average)],
+      ['Median', this.saidAsTime(stats.median)],
+      ['Usually', stats.mode === null ? 'no length twice' : this.saidAsTime(stats.mode)],
+      ['Without the outliers', stats.trimmed === null ? 'not enough played' : this.saidAsTime(stats.trimmed)],
+      ['Shortest', this.saidAsTime(stats.minimum)],
+      ['Longest', this.saidAsTime(stats.maximum)],
+    ]
+
+    if (event && event.count > stats.count) {
+      rows.push(['Whole event', `${this.saidAsTime(event.median)} over ${event.count}`])
+    }
+
+    box.replaceChildren(...rows.flatMap(([term, said]) => [
+      this.textTag('dt', 'durationTerm', term),
+      this.textTag('dd', 'durationValue', said),
+    ]))
+
+    box.hidden = false
+  }
+
+  /**
+   * How many of a section's blocks open on the first draw. Below the
+   * width the host names, none.
+   *
+   * @param {string} segment
+   * @param {boolean} narrow
+   * @returns {number}
+   */
+  opensWith(segment, narrow) {
+    return narrow
+      ? 0
+      : TennisGamedayBoardElement.OPENS_WITH[segment] ?? Infinity
+  }
+
+  /**
+   * Whether the day opens with every block shut.
+   *
+   * A phone shows one block of a day and the rest is scrolling. The
+   * board asks the browser rather than guessing from a width it read
+   * itself, so it folds on exactly the screens the host's CSS calls
+   * small.
+   *
+   * @returns {boolean}
+   */
+  startsFolded() {
+    const edge = this.getConfig()['fold-below']
+    const view = this.ownerDocument?.defaultView
+
+    if (!edge || typeof view?.matchMedia !== 'function') {
+      return false
+    }
+
+    return view.matchMedia(`(max-width: ${edge})`).matches
+  }
+
+  /**
+   * @returns {Array<TennisGamedayListElement>}
+   */
+  lists() {
+    return this.$$(TennisGamedayListElement.tag)
+  }
+
+  /**
+   * Whether anything is still open, which is what the button offers to
+   * do something about.
+   *
+   * @returns {boolean}
+   */
+  anyOpen() {
+    return this.lists().some(list => list.anyOpen())
+  }
+
+
+  /**
+   * Shut every block, or open every block.
+   *
+   * By the afternoon the finished section is most of the day, and
+   * shutting it a block at a time is its own chore.
+   *
+   * @param {boolean} shut
+   */
+  foldAll(shut) {
+    for (const list of this.lists()) {
+      list.foldAll(shut)
+    }
+
+    this.rememberFolds()
+    this.sayFoldAll()
+  }
+
+
+  /**
+   * The button says what pressing it will do, not what is true now.
+   */
+  sayFoldAll() {
+    const button = this.$('[data-fold-all]')
+
+    if (button) {
+      button.textContent = this.anyOpen() ? 'Fold all' : 'Unfold all'
+    }
+  }
+
+  /**
+   * Which blocks are folded shut right now, asked of each list before
+   * the board is redrawn.
+   */
+  rememberFolds() {
+    for (const list of this.lists()) {
+      list.folded = this.folded
+      list.rememberFolds()
+    }
+  }
+
+
+
+  /**
+   * @param {object} match
+   * @returns {string}
+   */
+  startTimeOf(match) {
+    return facts.startTimeOf(match)
+  }
+
+
+  /**
+   * One line, drawn by the card that owns it.
+   *
+   * The board hands a card the match, the day it is in and the shell
+   * describing the event, and the card draws itself and says what was
+   * pressed. What a line looks like stopped being the board's business
+   * here.
+   *
+   * @param {object} match
+   * @returns {HTMLElement}
+   */
+  matchLine(match) {
+    const card = document.createElement(TennisGamedayCardElement.tag)
+
+    card.match = match
+    card.day = this.day
+    card.shell = this.shell
+
+    return card
+  }
+
+
+  /**
+   * @param {object} match
+   * @returns {string}
+   */
+  lineSummary(match) {
+    const card = document.createElement(TennisGamedayCardElement.tag)
+
+    card.match = match
+    card.day = this.day
+    card.shell = this.shell
+
+    return card.summary()
+  }
+
+
+  /**
+   * @param {object} match
+   * @returns {string}
+   */
+  stateOf(match) {
+    return facts.stateOf(match)
+  }
+
+
+
+  /**
+   * @param {object} match
+   * @returns {string}
+   */
+  tookOf(match) {
+    return facts.tookOf(match)
+  }
+
+
+  /**
+   * @param {string|null} iso
+   * @returns {string}
+   */
+  clockOf(iso) {
+    return facts.clockOf(iso)
+  }
+
+
+  /**
+   * @param {object} match
+   * @returns {number|null}
+   */
+  minutesOf(match) {
+    return facts.minutesOf(match)
+  }
+
+
+  /**
+   * @param {number} minutes
+   * @returns {string}
+   */
+  saidAsTime(minutes) {
+    return facts.saidAsTime(minutes)
+  }
+
+
+  /**
+   * @param {HTMLElement} element - anything inside a match line
+   * @returns {object|null}
+   */
+  matchOf(element) {
+    const line = element.closest('[data-match-id]')
+
+    if (!line) {
+      return null
+    }
+
+    const id = Number(line.dataset.matchId)
+
+    return this.day.matches.find(match => match.id === id) ?? null
+  }
+
+  /**
+   * Keep what was typed, so a redraw does not lose a half-entered
+   * score.
+   *
+   * @param {{match: object, set: number, side: string, value: string}} typed
+   */
+  recordScore({ match, set, side, value }) {
+    if (!match) {
+      return
+    }
+
+    const index = set - 1
+
+    match.sets[index] = match.sets[index] ?? { set_number: set }
+    match.sets[index][`${side}_games`] = value === '' ? null : Number(value)
+  }
+
+  /**
+   * @param {object} match
+   */
+  /**
+   * Start a match, or take that start back.
+   *
+   * The desk works down a list and the button is next to the one above
+   * it, so a match gets started by mistake. Taking it back is the same
+   * button, the way ending one and reopening it are.
+   *
+   * @param {object} match
+   */
+  async toggleStarted(match, onDeck = false) {
+    const before = structuredClone(match)
+
+    if (this.segmentOf(match) === 'started') {
+      this.unstartDialog.open(match)
+
+      return
+    }
+
+    match.started_at = new Date().toISOString()
+    match.status = 'live'
+
+    this.render()
+    this.focusScore(match.id)
+
+    await this.save(match, { action: 'start', on_deck: onDeck }, before)
+  }
+
+  /**
+   * End a match, or put a finished one back. Ending one nobody started
+   * stamps a start too, since results are reported after the fact.
+   *
+   * A match cannot be ended on nothing. If no score was typed, the
+   * desk is asked what happened instead, because a match that ends
+   * without being played out still has a winner and a reason.
+   *
+   * @param {object} match
+   */
+  async toggleFinished(match) {
+    const before = structuredClone(match)
+
+    if (this.segmentOf(match) === 'finished') {
+      this.reopenDialog.open(match)
+
+      return
+    }
+
+    if (!this.hasScore(match)) {
+      this.forfeitDialog.open(match)
+
+      return
+    }
+
+    const sets = match.sets.filter(set => this.setHasScore(set))
+
+    match.started_at = match.started_at ?? new Date().toISOString()
+    match.completed_at = new Date().toISOString()
+    match.status = 'completed'
+
+    this.render()
+
+    // Move focus to the first match still waiting.
+    this.focusFirstPending()
+
+    if (await this.save(match, { action: 'end', sets }, before)) {
+      this.nextDialog.open(match)
+    }
+  }
+
+  /**
+   * A finished match, with its score there to be typed over.
+   *
+   * Two different things can be wrong with a result. The number can be
+   * wrong, which is a correction: the match still happened, still
+   * ended when it ended, and only the score moves. Or the match did
+   * not happen the way it was reported at all, which takes the whole
+   * result back and starts again.
+   *
+   * @param {object} match
+   */
+  fillReopen(match) {
+    // One row, the way a line reads it: a side, its score, the other
+    // score, the other side. The names above the boxes and the boxes
+    // below the names are two things to look at; this is one.
+    this.$('[data-reopen-match]').replaceChildren(
+      ...(match.identifier
+        ? [textTag('span', 'modalIdentifier', match.identifier)]
+        : []),
+      this.teamCell('modalHome', match.home_team_id),
+      this.correctionColumn(match, 'home'),
+      textTag('span', 'modalVersus', 'vs'),
+      this.correctionColumn(match, 'visitor'),
+      this.teamCell('modalVisitor', match.visitor_team_id)
+    )
+
+    this.$('[data-reopen-said]').textContent =
+      'The match keeps the time it ended. Re-open it instead if it did not happen this way at all.'
+  }
+
+
+  /**
+   * One side's score, ready to be typed over.
+   *
+   * @param {object} match
+   * @param {string} side - 'home' or 'visitor'
+   * @returns {HTMLElement}
+   */
+  correctionColumn(match, side) {
+    const format = this.formatFor(match)
+    const sets = format?.sets ?? [{}]
+    const column = document.createElement('span')
+
+    column.dataset.correctionScores = ''
+    column.dataset.side = side
+
+    sets.forEach((set, index) => {
+      column.appendChild(this.scoreField({
+        set: index + 1,
+        value: match.sets[index]?.[`${side}_games`],
+        label: set.label,
+      }))
+    })
+
+    return column
+  }
+
+  /**
+   * Fill a <semtic-select> with what it can be.
+   *
+   * The options are its children. semtic reads them and renders the
+   * control around them, whether they were there when it upgraded or
+   * put there afterwards, which is how the board fills these: the
+   * courts and the days only arrive with the shell.
+   *
+   * @param {HTMLElement} field - the <semtic-select> to fill
+   * @param {Array<{value: string, label: string}>} options
+   * @param {string} value
+   */
+  fillSelect(field, options, value) {
+    field.replaceChildren(...options.map(({ value: each, label }) => {
+      const option = document.createElement('option')
+
+      option.value = each
+      option.textContent = label
+      option.selected = each === value
+
+      return option
+    }))
+  }
+
+  /**
+   * @param {string} role - the data attribute the board knows it by
+   * @param {string} position - where its label sits
+   * @returns {HTMLElement}
+   */
+  selectField(role, position = 'top') {
+    const field = document.createElement('semtic-select')
+
+    // Labelled somewhere other than left, which is semtic's default:
+    // left keeps a column for the label whether there is one or not,
+    // and on a board where a select has to be exactly as wide as the
+    // badge over it, that column is the difference.
+    field.setAttribute('label-position', position)
+    field.dataset[role] = ''
+
+    return field
+  }
+
+  /**
+   * @param {{set: number, value: ?number, label: ?string, disabled: ?boolean}} spec
+   * @returns {HTMLElement}
+   */
+  scoreField(spec) {
+    return scoreField(spec)
+  }
+
+
+  /**
+   * What the modal's boxes say, as sets.
+   *
+   * @returns {Array<object>}
+   */
+  correctionSets() {
+    const columns = [...this.$$('[data-correction-scores]')]
+    const sets = []
+
+    for (const column of columns) {
+      for (const input of column.querySelectorAll('input')) {
+        const index = Number(input.dataset.set) - 1
+
+        sets[index] = sets[index] ?? { set_number: index + 1 }
+        sets[index][`${column.dataset.side}_games`] =
+          input.value === '' ? null : Number(input.value)
+      }
+    }
+
+    return sets
+  }
+
+  /**
+   * Only the score moves. The match stays finished and keeps the time
+   * it ended, because it did end then.
+   */
+  async saveCorrection() {
+    const match = this.reopenDialog.match
+
+    if (!match) {
+      return
+    }
+
+    const before = structuredClone(match)
+    const sets = this.correctionSets().filter(set => this.setHasScore(set))
+
+    if (!sets.length) {
+      this.fail('A score has to say who took the match.')
+
+      return
+    }
+
+    this.reopenDialog.close()
+
+    await this.save(match, { action: 'correct', sets }, before)
+  }
+
+  /**
+   * The result did not happen this way at all. What the score becomes
+   * is the server's to settle.
+   */
+  async takeResultBack() {
+    const match = this.reopenDialog.match
+
+    if (!match) {
+      return
+    }
+
+    const before = structuredClone(match)
+
+    match.completed_at = null
+    match.status = match.started_at ? 'live' : 'scheduled'
+
+    this.reopenDialog.close()
+    this.render()
+    this.focusScore(match.id)
+
+    await this.save(match, { action: 'reopen' }, before)
+  }
+
+
+
+  /**
+   * @param {object} match
+   */
+  fillUnstart(match) {
+    this.sayWhichMatch('[data-unstart-match]', match)
+
+    this.$('[data-unstart-said]').textContent = match.started_at
+      ? `Started at ${this.clockOf(match.started_at)}. It goes back to waiting, and that time is forgotten.`
+      : 'It goes back to waiting.'
+  }
+
+
+
+
+  async confirmUnstart() {
+    const match = this.unstartDialog.match
+
+    if (!match) {
+      return
+    }
+
+    const before = structuredClone(match)
+
+    match.started_at = null
+    match.status = 'scheduled'
+
+    this.unstartDialog.close()
+    this.render()
+
+    await this.save(match, { action: 'unstart' }, before)
+  }
+
+  /**
+   * @param {object} set
+   * @returns {boolean}
+   */
+  setHasScore(set) {
+    return facts.setHasScore(set)
+  }
+
+
+  /**
+   * @param {object} match
+   * @returns {boolean}
+   */
+  hasScore(match) {
+    return facts.hasScore(match)
+  }
+
+
+  /**
+   * @returns {string}
+   */
+  forfeitReason() {
+    return this.$('[data-forfeit-reason] input:checked')?.value ?? ''
+  }
+
+  /**
+   * @param {object} match
+   */
+  fillForfeit(match) {
+    this.$('[data-forfeit-match]').textContent = match.identifier ?? ''
+
+    this.$('[data-forfeit-reason]').replaceChildren(
+      ...TennisGamedayBoardElement.REASONS.map(([value, label], index) =>
+        this.choice(`forfeit-reason-${match.id}`, value, label, index === 0, 'right'))
+    )
+
+    // Who won, not who lost. The winner is the one standing at the
+    // desk saying so, and asking an official to name the side that is
+    // not in front of them is a way to get the wrong one clicked.
+    //
+    // Laid out the way a score is: a side, its box, the other box, the
+    // other side. The choice sits where the number would.
+    this.$('[data-forfeit-winner]').replaceChildren(
+      this.choice(`forfeit-winner-${match.id}`, 'home', this.teamName(match.home_team_id), false, 'right'),
+      this.choice(`forfeit-winner-${match.id}`, 'visitor', this.teamName(match.visitor_team_id), false, 'right')
+    )
+
+    this.$('[data-forfeit-note]').value = ''
+    this.$('[data-forfeit-note-field]').hidden = true
+    this.$('[data-forfeit-remaining]').checked = false
+    this.$('[data-forfeit-modal] [semtic-modal-confirm]')?.removeAttribute('disabled')
+  }
+
+
+
+
+
+  /**
+   * @param {string} name
+   * @param {string} value
+   * @param {string} text
+   * @param {boolean} checked
+   * @returns {HTMLElement}
+   */
+  /**
+   * One choice in a group, as <semtic-radio> wants it: a label, a name
+   * shared with its group, a value, and an id of its own. The id is
+   * not optional, because semtic falls back to the group's name when
+   * one is not given and then every radio in the group answers to it.
+   *
+   * @param {string} group
+   * @param {string} value
+   * @param {string} text
+   * @param {boolean} checked
+   * @param {string} position - where the label sits, semtic's default
+   *   when not said
+   * @returns {HTMLElement}
+   */
+  choice(group, value, text, checked, position = '') {
+    const radio = document.createElement('semtic-radio')
+
+    radio.setAttribute('label', text)
+
+    if (position) {
+      radio.setAttribute('label-position', position)
+    }
+
+    radio.setAttribute('id', `${group}-${value}`)
+    radio.setAttribute('name', group)
+    radio.setAttribute('value', value)
+
+    if (checked) {
+      radio.setAttribute('checked', '')
+    }
+
+    return radio
+  }
+
+
+
+  /**
+   * Write the forfeit down: a clean set to whoever was left standing,
+   * so it reaches standings as a win rather than as a match nobody
+   * played, and the reason as the status.
+   */
+  async confirmForfeit() {
+    const match = this.forfeitDialog.match
+    const winner = this.$('[data-forfeit-winner] input:checked')?.value
+
+    if (!match || !winner) {
+      return
+    }
+
+    const reason = this.forfeitReason()
+
+    // The desk is asked who won. The server is told who lost, because
+    // that is the side the forfeit is against and the side that may be
+    // out of the rest of it.
+    const loser = winner === 'home' ? 'visitor' : 'home'
+    const note = this.$('[data-forfeit-note]').value.trim()
+    const before = structuredClone(match)
+
+    match.sets = [{
+      set_number: 1,
+      home_games: winner === 'home' ? TennisGamedayBoardElement.FORFEIT_GAMES : 0,
+      visitor_games: winner === 'visitor' ? TennisGamedayBoardElement.FORFEIT_GAMES : 0,
+    }]
+
+    match.started_at = match.started_at ?? new Date().toISOString()
+    match.completed_at = new Date().toISOString()
+    match.status = TennisGamedayBoardElement.REASON_STATUS[reason] ?? 'completed'
+    match.winner_team_id = match[`${winner}_team_id`]
+
+    if (reason === 'other' && note) {
+      match.notes = note
+    }
+
+    const rest = this.$('[data-forfeit-remaining]').checked
+
+    if (rest) {
+      this.forfeitRemaining(match, match[`${loser}_team_id`])
+    }
+
+    this.forfeitDialog.close()
+    this.render()
+    this.focusFirstPending()
+
+    const saved = await this.save(match, {
+      action: 'forfeit',
+      reason,
+      loser_side: loser,
+      note: note || null,
+      forfeit_remaining: rest,
+    }, before)
+
+    // The cascade is the server's to work out, so the day is read
+    // again rather than trusted to the copy this board just guessed at.
+    if (saved && rest) {
+      await this.showDay(this.$('[data-day]').value)
+    }
+
+    // A court is free whether the match was played out or given away.
+    if (saved) {
+      this.nextDialog.open(match)
+    }
+  }
+
+  /**
+   * Everything else that team was still due to play. To the opponent
+   * on the other side of the net, a team that has left the tournament
+   * is a walkover whatever sent them home.
+   *
+   * @param {object} from
+   * @param {number|null} teamId
+   */
+  forfeitRemaining(from, teamId) {
+    if (teamId == null) {
+      return
+    }
+
+    for (const match of this.day.matches) {
+      if (match.id === from.id || this.segmentOf(match) === 'finished') {
+        continue
+      }
+
+      const side = match.home_team_id === teamId
+        ? 'home'
+        : (match.visitor_team_id === teamId ? 'visitor' : null)
+
+      if (!side) {
+        continue
+      }
+
+      match.sets = [{
+        set_number: 1,
+        home_games: side === 'home' ? 0 : TennisGamedayBoardElement.FORFEIT_GAMES,
+        visitor_games: side === 'visitor' ? 0 : TennisGamedayBoardElement.FORFEIT_GAMES,
+      }]
+
+      match.started_at = match.started_at ?? new Date().toISOString()
+      match.completed_at = new Date().toISOString()
+      match.status = 'walkover'
+      match.winner_team_id = match[side === 'home' ? 'visitor_team_id' : 'home_team_id']
+    }
+  }
+
+  /**
+   * @param {number} matchId
+   */
+  focusScore(matchId) {
+    this.$(`[data-match-id="${matchId}"] [data-side="home"] input`)?.focus(NO_SCROLL)
+  }
+
+  focusFirstPending() {
+    this.$('[data-section="pending"] tennis-gameday-card [data-side="home"] input')?.focus(NO_SCROLL)
+  }
+
+  /**
+   * @param {string} name
+   * @param {string} role
+   * @param {string} text
+   * @returns {HTMLElement}
+   */
+  textTag(name, role, text) {
+    return textTag(name, role, text)
+  }
+
+
+  /**
+   * @param {object} match
+   * @returns {string}
+   */
+  stageOf(match) {
+    return facts.stageOf(this.day, match)
+  }
+
+
+  /**
+   * @param {object} match
+   * @returns {string}
+   */
+  divisionOf(match) {
+    return facts.divisionOf(this.shell, match)
+  }
+
+
+  /**
+   * Which match a dialog is about, drawn the way a line draws it.
+   *
+   * A team's name run together with its players reads as one long
+   * sentence, and a Team Cup tie has eight names in it. The same two
+   * participants the line shows instead, so an official is looking at
+   * what they were already looking at. Singles and doubles come out of
+   * the same call: one name, or two, or a name with a squad under it.
+   *
+   * @param {string} selector
+   * @param {object} match
+   */
+  sayWhichMatch(selector, match) {
+    const said = this.$(selector)
+
+    said.replaceChildren(
+      ...(match.identifier
+        ? [this.textTag('span', 'modalIdentifier', match.identifier)]
+        : []),
+      this.teamCell('modalHome', match.home_team_id),
+      this.textTag('span', 'modalVersus', 'vs'),
+      this.teamCell('modalVisitor', match.visitor_team_id)
+    )
+  }
+
+  /**
+   * @param {string} role - 'home' or 'visitor'
+   * @param {number|null} teamId
+   * @returns {HTMLElement}
+   */
+  teamCell(role, teamId) {
+    return teamCell(this.day, role, teamId)
+  }
+
+
+  /**
+   * @param {number|null} teamId
+   * @returns {string}
+   */
+  teamName(teamId) {
+    return facts.teamName(this.day, teamId)
+  }
+
+
+
+  /**
+   * @param {object} match
+   * @returns {object|null}
+   */
+  formatFor(match) {
+    return facts.formatFor(this.shell, match)
+  }
+
+
+  /**
+   * @param {object} match
+   * @returns {number|null}
+   */
+  effectiveCourtId(match) {
+    return facts.effectiveCourtId(match)
+  }
+
+
+  /**
+   * @param {object} match
+   * @returns {boolean}
+   */
+  movedCourt(match) {
+    return facts.movedCourt(match)
+  }
+
+
+  /**
+   * @param {object|null} match
+   * @returns {Array<{value: string, label: string}>}
+   */
+  courtOptions(match) {
+    return facts.courtOptions(this.shell, this.day, match)
+  }
+
+
+  /**
+   * @param {object|null} match
+   * @returns {Array<{value: string, label: string}>}
+   */
+  freeCourtOptions(match) {
+    return facts.freeCourtOptions(this.shell, this.day, match)
+  }
+
+
+  /**
+   * @param {number|null} courtId
+   * @returns {string}
+   */
+  courtName(courtId) {
+    return facts.courtName(this.shell, courtId)
+  }
+
+
+
+  /**
+   * What happens on the court the match was just played on.
+   *
+   * The modal is handed the match that finished and works the rest out
+   * itself: which court that was, what is still queued on it, and
+   * whether the wait is worth saying out loud.
+   *
+   * @param {object} match
+   */
+  fillNext(match) {
+    const said = whatIsNext(this.day, match)
+
+    const court = this.courtName(this.effectiveCourtId(match))
+    const wait = facts.saidAsTime(said.minutes)
+
+    const headers = {
+      behind: `${court} is running behind`,
+      idle: `${court} is free for ${wait}`,
+      next: `Next on ${court}`,
+      clear: `${court} is done for the day`,
+    }
+
+    const sentences = {
+      behind: `It should have started ${wait} ago.`,
+      idle: said.typical === null
+        ? ''
+        : `A match here takes about ${facts.saidAsTime(Math.round(said.typical))}, so something could be pulled forward.`,
+      next: '',
+      clear: 'Nothing else is scheduled on it.',
+    }
+
+    this.$('[data-next-modal]').setAttribute('header', headers[said.kind])
+    this.$('[data-next-said]').textContent = sentences[said.kind]
+    this.$('[data-next-said]').hidden = !sentences[said.kind]
+
+    // Two blocks: what has been standing around longest anywhere, and
+    // what this court is holding. The court that just came free is
+    // somewhere to put the first of those, which is the whole point of
+    // saying it here.
+    const longest = said.longest
+
+    this.sayMatchBlock('waiting', longest, 'Longest waiting match')
+
+    // One match, said once. When the longest wait is this court's own
+    // queue, a second block would be the same two names again.
+    this.sayMatchBlock(
+      'queued',
+      said.next && said.next !== longest ? said.next : null,
+      `Next planned match on ${court}`
+    )
+
+    // Nothing is waiting anywhere, so there is nothing to put on.
+    this.$('[data-next-modal] [semtic-modal-confirm]')
+      ?.toggleAttribute('disabled', !longest && !said.next)
+  }
+
+  /**
+   * Put the picked match on the court that just came free.
+   *
+   * Two writes, because they are two things: the match moves court,
+   * and then it starts. A match already planned for this court only
+   * does the second. Either is a thing that happened and the logbook
+   * says so separately.
+   *
+   * @param {number|null} courtId - the court that came free
+   */
+  async playPicked(courtId) {
+    const picked = this.$('[data-next-modal] input[name="next-play"]:checked')?.value
+    const match = this.day.matches.find(other => String(other.id) === picked)
+
+    this.nextDialog.close()
+
+    if (!match || courtId === null || courtId === undefined) {
+      return
+    }
+
+    if (this.effectiveCourtId(match) !== courtId) {
+      await this.moveCourt(match, courtId)
+    }
+
+    // Said out loud, because a match picked off the queue is one the
+    // players are not standing beside. Working down the board is the
+    // other case and says nothing.
+    await this.toggleStarted(match, true)
+  }
+
+  /**
+   * One match in the next-up dialog: where and when it was meant to
+   * go on, what it is, and who is in it.
+   *
+   *     [Court 3] 09:15 Beginner Group A
+   *     Alice, Bob  vs  Carl, Dana
+   *
+   * The planned time, not the time anything actually happened. A day
+   * running behind is the gap between those two, and an official
+   * reading a plan needs the plan.
+   *
+   * @param {string} role - 'waiting' or 'queued'
+   * @param {object|null} match
+   * @param {string} label
+   */
+  sayMatchBlock(role, match, label) {
+    for (const part of ['label', 'head', 'match']) {
+      this.$(`[data-${role}-${part}]`).hidden = !match
+    }
+
+    if (!match) {
+      this.$(`[data-${role}-head]`).replaceChildren()
+      this.$(`[data-${role}-match]`).replaceChildren()
+
+      return
+    }
+
+    this.$(`[data-${role}-label]`).replaceChildren(this.choice(
+      'next-play',
+      String(match.id),
+      label,
+      role === 'waiting',
+      'right'
+    ))
+
+    this.$(`[data-${role}-head]`).replaceChildren(
+      textTag('span', 'pickCourt', this.courtName(this.effectiveCourtId(match))),
+      textTag('span', 'pickWhen', this.startTimeOf(match)),
+      textTag('span', 'pickWhat', [
+        this.divisionOf(match),
+        this.stageOf(match),
+      ].filter(Boolean).join(' '))
+    )
+
+    this.sayWhichMatch(`[data-${role}-match]`, match)
+  }
+
+  /**
+   * @param {object} match
+   */
+  fillCourt(match) {
+    this.sayWhichMatch('[data-court-modal-match]', match)
+
+    this.$('[data-court-modal-planned]').textContent =
+      `Planned for ${this.courtName(match.court_id)}.`
+
+    this.$('[data-court-reset]').hidden = !this.movedCourt(match)
+
+    this.fillSelect(
+      this.$('[data-court-modal-select]'),
+      this.courtOptions(match),
+      String(this.effectiveCourtId(match) ?? '')
+    )
+  }
+
+
+
+
+  /**
+   * @param {object|null} match
+   * @param {number} courtId
+   */
+  async moveCourt(match, courtId) {
+    if (!match || Number.isNaN(courtId)) {
+      return
+    }
+
+    const before = structuredClone(match)
+
+    match.actual_court_id = courtId === match.court_id ? null : courtId
+
+    this.render()
+
+    await this.save(match, { action: 'court', actual_court_id: match.actual_court_id }, before)
+  }
+
+  /**
+   * @param {object|null} match
+   */
+  async resetCourt(match) {
+    if (!match) {
+      return
+    }
+
+    const before = structuredClone(match)
+
+    match.actual_court_id = null
+
+    this.render()
+
+    await this.save(match, { action: 'court', actual_court_id: null }, before)
+  }
+}