@opndev/tennis-match-center 0.0.1 → 0.0.2

package/Changes

@@ -1,5 +1,31 @@
 Revision history for@opndev/tennis-match-center
 
+0.0.2       2026-09-21 03:14:21Z
+
+  * Add <tennis-gameday-board>, the officials desk: one day split into
+    finished, started and pending, with a score box per set the
+    division's format expects. Keyboard first, a line tabs score, other
+    score, end match, and ending one puts the desk on the next match
+    waiting. Changes live in the browser only until the write endpoints
+    exist.
+
+  * Add <tennis-match> and <tennis-participant>: one match with its
+    court, stage, state and score, and the two sides that played it.
+    The winner is derived from the sets and marked with a `won`
+    attribute. Any child carrying `side` is treated as a side, so an
+    application with its own participant element keeps using it. Laid
+    out like the scheduling board's cell: stage badge, division, then
+    both sides on shared rows with the vs between them.
+
+  * Declare @skirbi/semtic as a peer dependency. The planning and
+    schedule boards have built <semtic-tabbed> since they were written
+    without the package saying so.
+
+  * A started match no longer changes court from a select. The court
+    becomes a button that opens a <semtic-modal> to confirm the move,
+    with a reset back to the planned court. The planned court is never
+    rewritten.
+
 0.0.1       2026-09-16 00:12:43Z
 
     * First release to an unsuspecting world

package/lib/auto-planner.mjs

@@ -67,6 +67,9 @@ import { MATCH_MINUTES } from './match-time.mjs'
  *   params.courts
  * @param {Array<{key: string, lit_required: boolean}>} params.slots
  *   Hourly columns, in order.
+ * @param {number} [params.lightBuffer] How long before dark an unlit
+ *   court stops taking new play. Zero holds one open until the light
+ *   itself goes; left out, PlanningDay's own default applies.
  * @param {string[]} params.days Y-m-d, in order.
  * @param {Array<Object>} params.competitions Each carries id, is_pro,
  *   games_needed {group, knockout}, games_needed_by_date,
@@ -93,6 +96,7 @@ export function autoFillPlanning(params) {
     courtOverrides = [],
     darkFrom = null,
     dayEnd = '24:00',
+    lightBuffer = undefined,
     groupSlotsFromSessions = false,
     splitRounds = false,
   } = params
@@ -828,6 +832,7 @@ export function autoFillPlanning(params) {
       occupancy: taken,
       plan,
       darkFromMinutes,
+      lightBufferMinutes: lightBuffer,
     })
 
     assignKnockout(day, {
@@ -888,26 +893,6 @@ export function autoFillPlanning(params) {
   return knockoutOverflow(competitions, retried) < overflow ? retried : result
 }
 
-/**
- * How much of the event's knockout did not fit where it was meant to:
- * capacity nobody could place at all, plus every cell that landed on
- * a day its competition's knockout was never scheduled for.
- *
- * A competition with no knockout session of its own is not counted -
- * it was never given a day to overflow from.
- */
-/**
- * When a session opens, allowing for the rhythm runs are laid out on.
- *
- * Runs start on a section boundary, so a session opening part way
- * through one is due on at the next: that is the rhythm, not lateness.
- *
- * @param {Array} own The session's own slots, in order.
- * @param {string} startTime The session's configured start.
- * @param {number} runLength Slots to a run in this phase.
- * @returns {?Object} The slot it is due on, or null where the day has
- *   no such slot at all.
- */
 /**
  * Whether a group run has to have a lit court.
  *
@@ -1092,18 +1077,6 @@ function groupKey(competitionId, date) {
 }
 
 
-/**
- * Hands out one court per eligible entry per pass, looping until
- * either the court list or every entry's remaining need is exhausted -
- * so a lone eligible competition gets every court offered, and several
- * eligible competitions split them round by round in priority order.
- *
- * A group-phase entry claims a whole run of consecutive slots on one
- * court at once (group_run_length - a 5-team group's 5 matches), and
- * only on a court that can host every slot of that run. A court that
- * runs out of light partway through cannot host the group at all, so
- * it is never given the run's opening slot either.
- */
 /**
  * Which queued run belongs on a court that has already been taken.
  *

package/lib/components/day-grid.mjs

@@ -0,0 +1,288 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { HTMLElementSugar } from '@skirbi/sugar'
+
+/**
+ * Pixels per minute of real time. A 45-minute slot - the shortest
+ * common match length - needs room for four lines (competition,
+ * division, group, round) plus padding.
+ */
+export const PX_PER_MINUTE = 64 / 45
+
+/**
+ * The stretch of the day worth drawing: the earliest row's start to
+ * the latest row's end.
+ *
+ * @param {Array} rows
+ * @returns {{start: number, end: number}}
+ */
+export function dayRange(rows) {
+  const starts = rows.map(row => row.start_minutes).filter(minutes => minutes != null)
+  const ends = rows.map(row => row.end_minutes).filter(minutes => minutes != null)
+
+  return starts.length === 0
+    ? { start: 0, end: 0 }
+    : { start: Math.min(...starts), end: Math.max(...ends) }
+}
+
+/**
+ * <tennis-day-grid>
+ *
+ * One day of one board: the hours down the side, a column per court,
+ * and a cell for every slot, drawn to scale from real minutes rather
+ * than as uniform rows - a 90-minute match reads twice as tall as a
+ * 45-minute one, and an idle stretch between two competitions' clocks
+ * shows as real blank space.
+ *
+ * The chrome only. What goes in a cell, and what any gesture on it
+ * means, belongs to whichever board is drawing: the grid reports that
+ * a cell was pressed, entered or right-clicked and leaves the rest
+ * alone. Planning refuses a drop onto an occupied cell where
+ * Scheduling swaps the two, and neither rule belongs here.
+ */
+export class TennisDayGridElement extends HTMLElementSugar {
+  static tag = 'tennis-day-grid'
+
+  /**
+   * Draws a day, replacing whatever was drawn before.
+   *
+   * @param {Object} day
+   * @param {string} day.date
+   * @param {Array} day.courts
+   * @param {Array} day.rows Slots, in order.
+   * @param {Function} day.cellFor Called per court and row, and hands
+   *   back what that cell is: `blocked` for a cell that may not be
+   *   used at all, `minutes` where what is in it runs longer than the
+   *   row, `content` for the element to put inside it, and `filled`
+   *   where what is in it counts as play - a scheduled cell waiting
+   *   for a match draws something and holds nothing.
+   * @param {number} [day.scale] Pixels per minute. A board whose cell
+   *   carries four names needs more room per hour than one carrying a
+   *   division and a group.
+   * @param {boolean} [day.compact] Narrow the courts nothing is on.
+   */
+  draw({ date, courts, rows, cellFor, scale = PX_PER_MINUTE, compact = false }) {
+    const range = dayRange(rows)
+
+    this.date = date
+    this.rows = rows
+    this.scale = scale
+    this.dataset.day = date
+    this.setAttribute('date', date)
+    this.toggleAttribute('compact', compact)
+    this.style.setProperty('--planning-day-height', `${this.pxFor(range.end - range.start)}px`)
+
+    this.replaceChildren(
+      this.timeColumn(rows, range),
+      ...courts.map((court, courtIndex) =>
+        this.courtColumn(court, courtIndex, rows, range, cellFor)
+      )
+    )
+  }
+
+  /**
+   * The hours down the side. Its own column rather than a cell in
+   * every row, so a court knows nothing about how the day is labelled.
+   */
+  timeColumn(rows, range) {
+    const column = document.createElement('planning-times')
+
+    // Stands in for the court name, so the hours line up with the
+    // slots rather than riding a row above them.
+    column.appendChild(document.createElement('planning-times-head'))
+
+    const body = document.createElement('planning-rows')
+    body.style.setProperty('--planning-day-height', `${this.pxFor(range.end - range.start)}px`)
+
+    for (const slot of rows) {
+      const time = document.createElement('planning-time')
+
+      time.setAttribute('start', slot.key)
+      time.style.top = `${this.pxFor(slot.start_minutes - range.start)}px`
+      time.style.height = `${this.pxFor(slot.end_minutes - slot.start_minutes)}px`
+      time.textContent = slot.label ?? slot.key
+
+      column.appendChild(body).appendChild(time)
+    }
+
+    return column
+  }
+
+  courtColumn(court, courtIndex, rows, range, cellFor) {
+    const column = document.createElement('planning-court')
+
+    column.setAttribute('court', court.name)
+    column.dataset.courtId = court.id
+
+    if (court.lit) {
+      column.setAttribute('lit', '')
+    }
+
+    if (court.pro) {
+      column.setAttribute('pro', '')
+    }
+
+    const heading = document.createElement('planning-court-name')
+    heading.textContent = court.name
+    column.appendChild(heading)
+
+    const body = document.createElement('planning-rows')
+    body.style.setProperty('--planning-day-height', `${this.pxFor(range.end - range.start)}px`)
+
+    // A row's own span is only ever the finest clock running that day
+    // - a real match longer than that (Team Cup's 90 minutes among
+    // someone else's 45) draws its own cell taller instead, covering
+    // however many of these rows its real length reaches. Those
+    // covered rows are this court's alone to skip.
+    let coveredUntil = -Infinity
+    let played = false
+
+    rows.forEach((slot, rowIndex) => {
+      if (slot.start_minutes < coveredUntil) {
+        return
+      }
+
+      const cell = cellFor(court, courtIndex, slot, rowIndex) ?? {}
+      const element = this.cellElement(cell, slot, rowIndex, courtIndex, range)
+
+      played = played || (cell.filled ?? Boolean(cell.content))
+
+      body.appendChild(element)
+
+      if (!cell.blocked && slot.start_minutes != null) {
+        coveredUntil = slot.start_minutes + (cell.minutes ?? (slot.end_minutes - slot.start_minutes))
+      }
+    })
+
+    column.appendChild(body)
+
+    // A court with nothing on it from the first row to the last is
+    // still a court - it says where the row is and it can be dropped
+    // on - but it need not hold the width of one that is working. The
+    // grid only says so; what that is worth is the stylesheet's.
+    column.toggleAttribute('empty', !played)
+
+    return column
+  }
+
+  cellElement(cell, slot, rowIndex, courtIndex, range) {
+    const element = document.createElement('planning-slot')
+    const minutes = cell.minutes ?? (slot.end_minutes - slot.start_minutes)
+
+    element.setAttribute('start', slot.key)
+    element.style.top = `${this.pxFor(slot.start_minutes - range.start)}px`
+    element.style.height = `${this.pxFor(minutes)}px`
+
+    if (slot.start_minutes != null) {
+      element.setAttribute('duration', minutes)
+      element.dataset.spanEnd = slot.start_minutes + minutes
+    }
+
+    // A blocked cell is chrome and nothing else: no row, no column,
+    // nothing to press. Every board agrees on that much.
+    if (cell.blocked) {
+      element.setAttribute('blocked', '')
+
+      return element
+    }
+
+    element.dataset.row = rowIndex
+    element.dataset.col = courtIndex
+
+    element.addEventListener('mousedown', event => {
+      this.report('press', event, rowIndex, courtIndex, {
+        // Whether the press landed on what is in the cell rather than
+        // on the cell itself, which is the difference between taking
+        // hold of a match and reaching past it to the grid.
+        onContent: event.target !== element,
+        button: event.button,
+        ctrlKey: event.ctrlKey,
+      })
+    })
+
+    element.addEventListener('mouseenter', event => {
+      this.report('enter', event, rowIndex, courtIndex)
+    })
+
+    element.addEventListener('contextmenu', event => {
+      this.report('menu', event, rowIndex, courtIndex, {
+        x: event.clientX ?? 0,
+        y: event.clientY ?? 0,
+      })
+    })
+
+    if (cell.content) {
+      element.appendChild(cell.content)
+    }
+
+    return element
+  }
+
+  report(what, event, row, col, extra = {}) {
+    if (what !== 'enter') {
+      event.preventDefault()
+    }
+
+    this.dispatchEvent(new CustomEvent(`day-grid:${what}`, {
+      bubbles: true,
+      detail: { date: this.date, row, col, ...extra },
+    }))
+  }
+
+  pxFor(minutes) {
+    return minutes * (this.scale ?? PX_PER_MINUTE)
+  }
+
+  /**
+   * Shows what is being dragged and where it would land. The boards
+   * decide what a drag means; showing one is the same job on both.
+   *
+   * @param {?Set<string>} from Cells being carried.
+   * @param {?string} over Cell under the cursor.
+   */
+  showDrag(from, over) {
+    this.toggleAttribute('dragging', Boolean(from?.size))
+
+    for (const cell of this.querySelectorAll('planning-slot[data-row]')) {
+      const key = `${cell.dataset.row},${cell.dataset.col}`
+
+      cell.toggleAttribute('data-dragging', Boolean(from?.has(key)))
+      cell.toggleAttribute('data-drop', over === key && !from?.has(key))
+    }
+  }
+
+  /**
+   * Shows which cells are picked out. Toggled directly rather than by
+   * redrawing, so dragging a selection across a tournament's worth of
+   * cells stays smooth.
+   *
+   * @param {Set<string>} keys "row,col"
+   */
+  paint(keys) {
+    for (const cell of this.querySelectorAll('planning-slot[data-row]')) {
+      cell.toggleAttribute(
+        'data-selected',
+        keys.has(`${cell.dataset.row},${cell.dataset.col}`)
+      )
+    }
+  }
+
+  /**
+   * The cells as drawn, court by court, for a board that has
+   * something to say about a run of them.
+   *
+   * @returns {Array}
+   */
+  columns() {
+    return [...this.querySelectorAll('planning-court')].map(column => ({
+      courtId: Number(column.dataset.courtId),
+      cells: [...column.querySelectorAll('planning-slot')].map(element => ({
+        element,
+        row: element.dataset.row == null ? null : Number(element.dataset.row),
+      })),
+    }))
+  }
+}
+