@opndev/tennis-match-center 0.0.1 → 0.0.2

package/lib/gameday-facts.mjs

@@ -0,0 +1,305 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+/**
+ * What the desk knows about a match, worked out from the day and the
+ * shell rather than from the DOM.
+ *
+ * Here rather than on the board because a card asks the same questions
+ * the board does, and two components answering them separately is how
+ * a line and the dialog about that line end up disagreeing.
+ */
+
+/**
+ * Which segment a match belongs in. Anything played is finished,
+ * walkovers included.
+ *
+ * @param {object} match
+ * @returns {string}
+ */
+export function segmentOf(match) {
+  if (match.completed_at || match.status === 'completed') {
+    return 'finished'
+  }
+
+  return match.started_at || match.status === 'live' ? 'started' : 'pending'
+}
+
+/**
+ * @param {object} match
+ * @returns {string}
+ */
+export function startTimeOf(match) {
+  const at = match.scheduled_at
+
+  return at ? at.slice(11, 16) : 'Unscheduled'
+}
+
+/**
+ * The group or the round, whichever a match belongs to. Carried on its
+ * own so it can be the badge the public card gives it.
+ *
+ * @param {object} day
+ * @param {object} match
+ * @returns {string}
+ */
+export function stageOf(day, match) {
+  const group = day.groups[match.group_id]
+
+  return match.round === 'group'
+    ? (group ? `Group ${group}` : 'Group')
+    : match.round
+}
+
+/**
+ * @param {object} shell
+ * @param {object} match
+ * @returns {string}
+ */
+export function divisionOf(shell, match) {
+  return shell.divisions[match.division_id]?.name ?? ''
+}
+
+/**
+ * @param {object} shell
+ * @param {object} match
+ * @returns {number|null|undefined}
+ */
+export function hueOf(shell, match) {
+  return shell.divisions[match.division_id]?.hue
+}
+
+/**
+ * A side in one string, for the places that cannot carry two: a
+ * tooltip, a modal, the question of who won.
+ *
+ * @param {object} day
+ * @param {number|null} teamId
+ * @returns {string}
+ */
+export function teamName(day, teamId) {
+  const team = day.teams[teamId]
+
+  if (!team) {
+    return 'TBD'
+  }
+
+  // A string, for a day that still sends one.
+  if (typeof team === 'string') {
+    return team
+  }
+
+  return [team.name, team.members].filter(Boolean).join(': ') || 'TBD'
+}
+
+/**
+ * @param {object} shell
+ * @param {object} match
+ * @returns {object|null}
+ */
+export function formatFor(shell, match) {
+  const division = shell.divisions[match.division_id]
+
+  return division?.scoring_format_id
+    ? shell.scoring_formats[division.scoring_format_id] ?? null
+    : null
+}
+
+/**
+ * Which court a match is actually on. The desk never rewrites the
+ * planned court; the planning board still owns that.
+ *
+ * @param {object} match
+ * @returns {number|null}
+ */
+export function effectiveCourtId(match) {
+  return match.actual_court_id ?? match.court_id
+}
+
+/**
+ * @param {object} match
+ * @returns {boolean}
+ */
+export function movedCourt(match) {
+  return match.actual_court_id != null
+    && match.actual_court_id !== match.court_id
+}
+
+/**
+ * The courts with a started, unfinished match on them in `day`.
+ * `match` is not counted against its own court.
+ *
+ * @param {object|null} day
+ * @param {object|null} match
+ * @returns {Set<number|null>}
+ */
+export function busyCourtIds(day, match) {
+  return new Set(
+    (day?.matches ?? [])
+      .filter(other => other.id !== match?.id && segmentOf(other) === 'started')
+      .map(other => effectiveCourtId(other))
+  )
+}
+
+/**
+ * Every court, the busy ones marked.
+ *
+ * @param {object} shell
+ * @param {object|null} day
+ * @param {object|null} match
+ * @returns {Array<{value: string, label: string}>}
+ */
+export function courtOptions(shell, day = null, match = null) {
+  const busy = busyCourtIds(day, match)
+
+  return shell.courts.map(court => ({
+    value: String(court.id),
+    label: busy.has(court.id) ? `${court.name} (on court)` : court.name,
+  }))
+}
+
+/**
+ * Active courts with no started, unfinished match on them in `day`.
+ * `match` itself is not counted against its own court.
+ *
+ * @param {object} shell
+ * @param {object|null} day
+ * @param {object|null} match
+ * @returns {Array<{value: string, label: string}>}
+ */
+export function freeCourtOptions(shell, day, match) {
+  const busy = busyCourtIds(day, match)
+
+  return shell.courts
+    .filter(court => court.active !== false && !busy.has(court.id))
+    .map(court => ({
+      value: String(court.id),
+      label: court.name,
+    }))
+}
+
+/**
+ * @param {object} shell
+ * @param {number|null} courtId
+ * @returns {string}
+ */
+export function courtName(shell, courtId) {
+  return shell.courts.find(court => court.id === courtId)?.name ?? 'No court'
+}
+
+/**
+ * What the match is doing, said in a word.
+ *
+ * Only the tooltip asks: on the line itself the section it is filed
+ * under and the lit court already say it.
+ *
+ * @param {object} match
+ * @returns {string}
+ */
+export function stateOf(match) {
+  const named = {
+    walkover: 'Walkover',
+    retired: 'Retired',
+    no_show: 'No show',
+    cancelled: 'Cancelled',
+  }
+
+  if (named[match.status]) {
+    return named[match.status]
+  }
+
+  const segment = segmentOf(match)
+
+  return segment === 'finished' ? 'Final'
+    : segment === 'started' ? 'On court'
+    : 'Pending'
+}
+
+/**
+ * @param {string|null} iso
+ * @returns {string}
+ */
+export function clockOf(iso) {
+  return iso ? String(iso).slice(11, 16) : ''
+}
+
+/**
+ * Whole minutes, because nobody reads a match in seconds.
+ *
+ * @param {object} match
+ * @returns {number|null}
+ */
+export function minutesOf(match) {
+  if (!match.started_at || !match.completed_at) {
+    return null
+  }
+
+  const minutes = Math.round(
+    (Date.parse(match.completed_at) - Date.parse(match.started_at)) / 60000
+  )
+
+  return Number.isFinite(minutes) && minutes > 0 ? minutes : null
+}
+
+/**
+ * @param {number} minutes
+ * @returns {string}
+ */
+export function saidAsTime(minutes) {
+  if (!Number.isFinite(minutes)) {
+    return ''
+  }
+
+  return minutes < 60
+    ? `${minutes} mins`
+    : `${Math.floor(minutes / 60)}h ${String(minutes % 60).padStart(2, '0')}m`
+}
+
+/**
+ * When the match actually went on, and how long it took once it is
+ * over.
+ *
+ * The block it sits under is its slot, not when it started: a day runs
+ * late and the difference between the two is the thing an official is
+ * trying to see.
+ *
+ * @param {object} match
+ * @returns {string}
+ */
+export function tookOf(match) {
+  const at = clockOf(match.started_at)
+
+  if (!at) {
+    return ''
+  }
+
+  const minutes = minutesOf(match)
+
+  return minutes === null ? at : `${at} / ${saidAsTime(minutes)}`
+}
+
+/**
+ * A set counts once both sides are filled in, and they have to differ:
+ * 0 against an empty box is a half-typed score, and 0-0 is a set
+ * nobody played.
+ *
+ * @param {object} set
+ * @returns {boolean}
+ */
+export function setHasScore(set) {
+  return Number.isFinite(set?.home_games)
+    && Number.isFinite(set?.visitor_games)
+    && set.home_games !== set.visitor_games
+}
+
+/**
+ * Whether a result was actually typed. An emptied box leaves its set
+ * behind holding nulls, so the sets being there is not the question.
+ *
+ * @param {object} match
+ * @returns {boolean}
+ */
+export function hasScore(match) {
+  return (match.sets ?? []).some(set => setHasScore(set))
+}

package/lib/gameday-next.mjs

@@ -0,0 +1,164 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { effectiveCourtId, segmentOf } from './gameday-facts.mjs'
+
+/**
+ * What happens on a court once the match on it is over.
+ *
+ * A court that has just been handed back is the one moment somebody
+ * can do something about the day running out of shape, and it is also
+ * the moment an official has their head down writing a score. So the
+ * desk works it out for them.
+ */
+
+/**
+ * Whether a match could actually be played right now.
+ *
+ * A group match always could: both sides are known the moment the
+ * draw is made. A knockout match may be waiting on the two matches
+ * that feed it, and telling an official a court is free for a
+ * quarter-final whose players do not exist yet is telling them
+ * nothing.
+ *
+ * @param {object} match
+ * @returns {boolean}
+ */
+function playable(match) {
+  return Boolean(match.home_team_id) && Boolean(match.visitor_team_id)
+}
+
+/**
+ * Every match still waiting, longest wait first.
+ *
+ * Longest waiting, not nearest in the schedule: by the afternoon the
+ * day is behind and the queue is what the desk is working through, so
+ * the one that should have gone on first is the one to name. A
+ * playable match comes before an unplayable one, and within each the
+ * earlier slot leads, which a stable sort gives for free.
+ *
+ * Only matches still waiting. One already under way is a state the
+ * desk can see for itself, and a played one is not waiting.
+ *
+ * @param {object} day
+ * @param {object} done - the one that just finished, never its own next
+ * @returns {Array<object>}
+ */
+function queue(day, done) {
+  return day.matches
+    .filter(other => other.id !== done.id)
+    .filter(other => other.scheduled_at)
+    .filter(other => segmentOf(other) === 'pending')
+    .sort((a, b) => a.scheduled_at < b.scheduled_at ? -1 : 1)
+    .sort((a, b) => Number(playable(b)) - Number(playable(a)))
+}
+
+/**
+ * The match that has been waiting longest anywhere on the day.
+ *
+ * Anywhere, not on this court: a court coming free is somewhere to put
+ * the match that has been standing around longest, whichever court it
+ * was planned for.
+ *
+ * @param {object} day
+ * @param {object} done
+ * @returns {object|null}
+ */
+export function longestWaiting(day, done) {
+  return queue(day, done)[0] ?? null
+}
+
+/**
+ * The match that has been waiting longest on the court that just came
+ * free.
+ *
+ * @param {object} day
+ * @param {object} done
+ * @returns {object|null}
+ */
+export function nextOnCourt(day, done) {
+  const court = effectiveCourtId(done)
+
+  if (court === null || court === undefined) {
+    return null
+  }
+
+  return queue(day, done).find(
+    other => effectiveCourtId(other) === court
+  ) ?? null
+}
+
+/**
+ * How long a match takes around here, in minutes.
+ *
+ * Today's average if today has any matches behind it, the event's
+ * otherwise, because the first court to come free on a Saturday has no
+ * day to average yet. Null when nothing has been played at all, and
+ * then the desk says nothing about a gap being long: it has no idea
+ * what long is.
+ *
+ * @param {object} day
+ * @returns {number|null}
+ */
+export function typicalMinutes(day) {
+  for (const stats of [day?.durations?.day, day?.durations?.event]) {
+    if (stats?.count && Number.isFinite(stats.average)) {
+      return stats.average
+    }
+  }
+
+  return null
+}
+
+/**
+ * What the desk has to say about a court that just came free.
+ *
+ *     behind   the next match was due before now
+ *     idle     the court waits longer than a match takes
+ *     next     the next match, on schedule
+ *     clear    nothing left on this court today
+ *
+ * `minutes` is how late it is for 'behind' and how long the wait is
+ * for the other two.
+ *
+ * @param {object} day
+ * @param {object} match - the one that just finished
+ * @param {string} [endedAt] - when it finished, defaulting to the
+ *   match's own end time. Compared as an instant and not as a time of
+ *   day: a match still waiting from last season really has been
+ *   waiting since last season, and 7458h is the honest number.
+ * @returns {{kind: string, next: ?object, longest: ?object, minutes: ?number, typical: ?number}}
+ */
+export function whatIsNext(day, match, endedAt = match.completed_at) {
+  const next = nextOnCourt(day, match)
+  const longest = longestWaiting(day, match)
+  const typical = typicalMinutes(day)
+
+  if (!next) {
+    return { kind: 'clear', next: null, longest, minutes: null, typical }
+  }
+
+  const due = Date.parse(next.scheduled_at)
+  const now = Date.parse(endedAt)
+  const minutes = Math.round(
+    (due - (Number.isFinite(now) ? now : Date.now())) / 60000
+  )
+
+  if (!Number.isFinite(minutes)) {
+    return { kind: 'next', next, longest, minutes: null, typical }
+  }
+
+  if (minutes < 0) {
+    return { kind: 'behind', next, longest, minutes: -minutes, typical }
+  }
+
+  // A gap you could have played a match in is a gap worth knowing
+  // about: either the day is ahead of its plan or something can be
+  // pulled forward into it.
+  if (typical !== null && minutes > typical) {
+    return { kind: 'idle', next, longest, minutes, typical }
+  }
+
+  return { kind: 'next', next, longest, minutes, typical }
+}

package/lib/gameday-parts.mjs

@@ -0,0 +1,112 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+/**
+ * The small pieces the desk draws in more than one place: a card
+ * draws them on a line and a dialog draws them again to say which
+ * match it is about.
+ */
+
+import { teamName } from './gameday-facts.mjs'
+
+/**
+ * An element carrying a data role and nothing else. The role is the
+ * hook a host's CSS and a host's own template both address it by.
+ *
+ * @param {string} name
+ * @param {string} role
+ * @param {string} text
+ * @returns {HTMLElement}
+ */
+export function textTag(name, role, text) {
+  const element = document.createElement(name)
+
+  element.dataset[role] = ''
+  element.textContent = text
+
+  return element
+}
+
+/**
+ * One side of a match, drawn by <tennis-participant>.
+ *
+ * A pair arrives as one string with the players separated by commas.
+ * Splitting that is the participant element's job and it already does
+ * it, along with the flags, so the desk hands it the string and stays
+ * out of the way. Two boards splitting the same string two ways is how
+ * they end up writing a name differently.
+ *
+ * @param {object} day
+ * @param {string} role - 'home' or 'visitor'
+ * @param {number|null} teamId
+ * @returns {HTMLElement}
+ */
+export function teamCell(day, role, teamId) {
+  const team = day.teams[teamId]
+  const cell = document.createElement('tennis-participant')
+
+  cell.dataset[role] = ''
+  cell.setAttribute('label', team?.members ?? teamName(day, teamId))
+
+  // A team with a name of its own still shows who is in it. An
+  // official announcing a Team Cup match is reading the players out,
+  // and last year they only had the team's name to read from.
+  if (team?.name) {
+    cell.setAttribute('team-name', team.name)
+  }
+
+  return cell
+}
+
+/**
+ * One box for one set, on one side.
+ *
+ * A <semtic-input> with the control authored inside it, so a host that
+ * never registered semtic still has a working number box: the element
+ * is unknown to that page and its child input is what is left.
+ *
+ * @param {{set: number, value: ?number, label: ?string, disabled: ?boolean}} spec
+ * @returns {HTMLElement}
+ */
+export function scoreField({ set, value, label, disabled }) {
+  const field = document.createElement('semtic-input')
+  const input = document.createElement('input')
+  const said = value === undefined || value === null ? '' : String(value)
+
+  field.setAttribute('type', 'number')
+  field.setAttribute('min', '0')
+  field.setAttribute('inputmode', 'numeric')
+  field.dataset.set = String(set)
+
+  if (disabled) {
+    field.setAttribute('disabled', '')
+  }
+
+  if (label) {
+    field.dataset.label = label
+    field.setAttribute('title', label)
+  }
+
+  input.setAttribute('wc-control', '')
+  input.type = 'number'
+  input.min = '0'
+  input.inputMode = 'numeric'
+  input.value = said
+  input.disabled = Boolean(disabled)
+
+  // Also on the control, not only on the host: a host that never
+  // registered semtic forwards nothing, and the set number is what
+  // says which box a typed score belongs to.
+  input.dataset.set = String(set)
+
+  if (label) {
+    input.dataset.label = label
+    input.title = label
+  }
+
+  field.setAttribute('value', said)
+  field.appendChild(input)
+
+  return field
+}

package/lib/index.mjs

@@ -2,8 +2,6 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-const VERSION = "0.0.1"
-
-export { VERSION }
+const VERSION = "0.0.2";export { VERSION }
 export { autoFillBracket } from './bracket-autofill.mjs'
 

package/lib/knockout-draw.mjs

@@ -55,6 +55,7 @@ export class KnockoutDraw {
     this.placedInRound = 0
     this.placed = 0
     this.roundCourts = null
+    this.lastCourts = null
     this.lastParts = 1
     this.freeFrom = -Infinity
   }
@@ -203,6 +204,9 @@ export class KnockoutDraw {
     this.lastParts = parts
     this.roundIndex += 1
     this.placedInRound = 0
+    // Where the round that just ended played. The next one is half
+    // as wide and belongs beside it.
+    this.lastCourts = this.roundCourts ?? this.lastCourts
     this.roundCourts = null
     this.freeFrom = slotIndex + parts + (parts > 1 ? 0 : restSlots)
   }