@opndev/tennis-match-center 0.0.1 → 0.0.2

package/lib/components/gameday-card.mjs

@@ -0,0 +1,325 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { HTMLElementSugar } from '@skirbi/sugar'
+
+import {
+  courtName,
+  divisionOf,
+  effectiveCourtId,
+  formatFor,
+  hueOf,
+  movedCourt,
+  segmentOf,
+  stageOf,
+  startTimeOf,
+  stateOf,
+  teamName,
+  tookOf,
+} from '../gameday-facts.mjs'
+
+import { scoreField, teamCell, textTag } from '../gameday-parts.mjs'
+
+/**
+ * <tennis-gameday-card> - one match on the officials desk.
+ *
+ * Given a match, the day it is in and the shell describing the event,
+ * it draws the line and says what was pressed. It decides nothing: a
+ * card never starts a match, ends one or moves a court, it reports
+ * that somebody asked for that and the board decides what happens.
+ *
+ * The shape is a template, `tennis-gameday-card-template`, so a host
+ * that wants the line laid out differently authors its own without
+ * touching this. Every part is a named hook and a hook that is not in
+ * the host's template is simply not drawn, which is what makes an
+ * override an override and not a fork.
+ *
+ * Fired, all bubbling, all carrying `{ match }`:
+ *
+ *     gameday-card:score   a score box was typed in
+ *     gameday-card:action  end the match, or reopen it
+ *     gameday-card:start   start the match, or take that back
+ *     gameday-card:court   the court was asked about
+ */
+export class TennisGamedayCardElement extends HTMLElementSugar {
+  static tag = 'tennis-gameday-card'
+
+  static HtmlTemplate = ['tennis-gameday-card-template', function () {
+    return this.tpl(`
+      <span data-identifier></span>
+      <span data-badge></span>
+      <span data-division></span>
+      <span data-took></span>
+      <tennis-participant data-home></tennis-participant>
+      <span data-scores data-side="home"></span>
+      <span data-vs>vs</span>
+      <span data-scores data-side="visitor"></span>
+      <tennis-participant data-visitor></tennis-participant>
+      <button type="button" data-action></button>
+      <span data-court-slot></span>
+      <button type="button" lead data-start></button>
+    `)
+  }]
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    if (!this._drawn) {
+      this._drawn = true
+      this.appendChild(this.renderFromTemplate())
+
+      this.addEventListener('input', event => {
+        const input = event.target.closest('[data-scores] input')
+
+        if (input) {
+          this.say('score', {
+            set: Number(input.dataset.set),
+            side: input.closest('[data-scores]').dataset.side,
+            value: input.value,
+          })
+        }
+      })
+
+      this.addEventListener('click', event => {
+        const pressed = event.target.closest(
+          '[data-court-open], [data-start], [data-action]'
+        )
+
+        if (!pressed || !this.contains(pressed)) {
+          return
+        }
+
+        this.say(
+          pressed.hasAttribute('data-court-open') ? 'court'
+            : pressed.hasAttribute('data-start') ? 'start'
+            : 'action'
+        )
+      })
+    }
+
+    this.render()
+  }
+
+  /**
+   * @param {string} what
+   * @param {object} detail
+   */
+  say(what, detail = {}) {
+    this.dispatchEvent(new CustomEvent(`gameday-card:${what}`, {
+      bubbles: true,
+      detail: { match: this.match, ...detail },
+    }))
+  }
+
+  render() {
+    const match = this.match
+    const segment = segmentOf(match)
+    const hue = hueOf(this.shell, match)
+
+    this.dataset.matchId = match.id
+    this.dataset.matchIdentifier = match.identifier ?? ''
+    this.dataset.status = match.status
+    this.dataset.segment = segment
+
+    if (movedCourt(match)) {
+      this.dataset.moved = ''
+    } else {
+      delete this.dataset.moved
+    }
+
+    if (hue !== undefined && hue !== null) {
+      this.style.setProperty('--division-hue', String(hue))
+    }
+
+    this.write('[data-identifier]', match.identifier ?? '')
+    this.write('[data-badge]', stageOf(this.day, match))
+    this.write('[data-division]', divisionOf(this.shell, match))
+    this.write('[data-took]', tookOf(match))
+
+    this.drawSide('[data-home]', 'home', match.home_team_id)
+    this.drawSide('[data-visitor]', 'visitor', match.visitor_team_id)
+
+    this.drawScores('home')
+    this.drawScores('visitor')
+
+    this.drawAction(segment)
+    this.drawStart(segment)
+    this.drawCourt(segment)
+
+    this.title = this.summary()
+  }
+
+  /**
+   * @param {string} selector
+   * @param {string} text
+   */
+  write(selector, text) {
+    const hook = this.$(selector)
+
+    if (hook) {
+      hook.textContent = text
+    }
+  }
+
+  /**
+   * A side is a <tennis-participant> the template already holds, so
+   * only what it says changes. A host that dropped the element gets a
+   * fresh one in the hook it left behind.
+   *
+   * @param {string} selector
+   * @param {string} role
+   * @param {number|null} teamId
+   */
+  drawSide(selector, role, teamId) {
+    const hook = this.$(selector)
+
+    if (!hook) {
+      return
+    }
+
+    hook.replaceWith(teamCell(this.day, role, teamId))
+  }
+
+  /**
+   * One side's score: a box per set the division's format expects,
+   * beside that side's name.
+   *
+   * A finished match is read only. The result has been reported and
+   * filed, so correcting it is a decision an official makes through
+   * the board, not something a stray keystroke can do.
+   *
+   * @param {string} side
+   */
+  drawScores(side) {
+    const column = this.$(`[data-scores][data-side="${side}"]`)
+
+    if (!column) {
+      return
+    }
+
+    const sets = formatFor(this.shell, this.match)?.sets ?? [{}]
+    const filed = segmentOf(this.match) === 'finished'
+
+    if (filed) {
+      column.dataset.filed = ''
+    } else {
+      delete column.dataset.filed
+    }
+
+    column.replaceChildren(...sets.map((set, index) => scoreField({
+      set: index + 1,
+      value: this.match.sets[index]?.[`${side}_games`],
+      label: set.label,
+      disabled: filed,
+    })))
+  }
+
+  /**
+   * Where the run of tabs lands, so it is the one that has to look
+   * like the button you are about to press blind.
+   *
+   * @param {string} segment
+   */
+  drawAction(segment) {
+    const button = this.$('[data-action]')
+
+    if (!button) {
+      return
+    }
+
+    button.textContent = segment === 'finished' ? 'Reopen' : 'End match'
+    button.removeAttribute(segment === 'finished' ? 'lead' : 'support')
+    if (segment === 'finished') {
+      button.setAttribute('support', '')
+    }
+    else if (segment === 'started') {
+      button.setAttribute('lead', '')
+    }
+    else {
+      button.setAttribute('support', '')
+    }
+  }
+
+  /**
+   * Starting a match is not the thing an official came to the line to
+   * do, so it does not compete with End match for the eye. Always
+   * drawn, so a line keeps the same cells whatever state it is in.
+   *
+   * @param {string} segment
+   */
+  drawStart(segment) {
+    const button = this.$('[data-start]')
+
+    if (!button) {
+      return
+    }
+
+    button.textContent = segment === 'started' ? 'Undo start' : 'Start'
+    button.removeAttribute(segment === 'started' ? 'lead' : 'support')
+    button.setAttribute(segment === 'started' ? 'support' : 'lead', '')
+    button.disabled = segment === 'finished'
+  }
+
+  /**
+   * A played match is not going to be moved anywhere, so its court is
+   * a badge and not something to press. Everything else is one button
+   * into one dialog, whether the match has started or not: moving a
+   * match is one job and not two depending on when you do it.
+   *
+   * @param {string} segment
+   */
+  drawCourt(segment) {
+    const hook = this._court ?? this.$('[data-court-slot]')
+
+    if (!hook) {
+      return
+    }
+
+    const said = courtName(this.shell, effectiveCourtId(this.match))
+    let control
+
+    if (segment === 'finished') {
+      control = textTag('span', 'court', said)
+    } else {
+      control = document.createElement('button')
+      control.type = 'button'
+
+      // How loudly a court asks to be looked at, in pinta's own words:
+      // the [lead] while it is being played on the court that was
+      // planned, an [extra] otherwise. Pinta draws both; the card only
+      // says which.
+      const leads = segment === 'started' && !movedCourt(this.match)
+
+      control.setAttribute(leads ? 'lead' : 'extra', '')
+      control.dataset.court = ''
+      control.dataset.courtOpen = ''
+      control.textContent = said
+    }
+
+    hook.replaceWith(control)
+    this._court = control
+  }
+
+  /**
+   * The line in one sentence, for a tooltip.
+   *
+   * Who against who, where, and when: the three things somebody says
+   * when they walk up to the desk. The line itself has to fit ten
+   * columns, so a name it had to cut is readable here.
+   *
+   * @returns {string}
+   */
+  summary() {
+    const match = this.match
+    const sides = `${teamName(this.day, match.home_team_id)} vs ${teamName(this.day, match.visitor_team_id)}`
+    const when = tookOf(match) || startTimeOf(match)
+
+    const said = [sides, courtName(this.shell, effectiveCourtId(match)), when]
+      .map(part => String(part || '').trim())
+      .filter(Boolean)
+      .join(', ')
+
+    return `${stateOf(match)}: ${said}`
+  }
+}

package/lib/components/gameday-list.mjs

@@ -0,0 +1,199 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { HTMLElementSugar } from '@skirbi/sugar'
+
+import { segmentOf, startTimeOf } from '../gameday-facts.mjs'
+import { textTag } from '../gameday-parts.mjs'
+
+import { TennisGamedayCardElement } from './gameday-card.mjs'
+
+/**
+ * <tennis-gameday-list data-section="pending" heading="Pending">
+ *
+ * One part of the desk: the matches in one state, grouped by the time
+ * they start, each group folding away on its own.
+ *
+ * The desk has three of these and they differ only in which matches
+ * they hold and what they are called, which is why they are one
+ * component and not three blocks of the same markup.
+ *
+ * A block folds with <details> rather than a button of our own: it
+ * opens on Enter and on Space, and says whether it is open, without
+ * any of that being written here.
+ */
+export class TennisGamedayListElement extends HTMLElementSugar {
+  static tag = 'tennis-gameday-list'
+
+  static attributeDefs = {
+    heading: {},
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.appendChild(this.title())
+  }
+
+  /**
+   * What this list is called. A host that authored its own heading
+   * keeps it; the attribute is only the default.
+   *
+   * @returns {HTMLElement}
+   */
+  title() {
+    return this.$('h2') ?? textTag('h2', 'heading', this.getConfig().heading ?? '')
+  }
+
+  /**
+   * Which state this list holds.
+   *
+   * @returns {string}
+   */
+  get segment() {
+    return this.dataset.section ?? ''
+  }
+
+  /**
+   * Draw the matches that belong here, and say nothing at all when
+   * none do.
+   *
+   * @param {Array<object>} matches
+   * @param {{day: object, shell: object, folded: Set<string>, openFirst: ?number}} desk
+   *   openFirst - how many blocks from the top may open. Left out, all
+   *   of them.
+   */
+  show(matches, { day, shell, folded, openFirst }) {
+    this.day = day
+    this.shell = shell
+    this.folded = folded
+    this.openFirst = openFirst ?? Infinity
+
+    this.hidden = !matches.length
+
+    // One operation, so the page loses its height once rather than
+    // once per block. The board puts the scroll back after, and it can
+    // only do that if the list stops changing height under it.
+    this.replaceChildren(this.title(), ...this.timeBlocks(matches))
+  }
+
+  /**
+   * @returns {Array<HTMLDetailsElement>}
+   */
+  blocks() {
+    return this.$$('[data-time]')
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  anyOpen() {
+    return this.blocks().some(block => block.open)
+  }
+
+  /**
+   * @param {boolean} shut
+   */
+  foldAll(shut) {
+    for (const block of this.blocks()) {
+      block.open = !shut
+    }
+  }
+
+  /**
+   * Which blocks are folded shut right now, read off the list before
+   * it is redrawn.
+   *
+   * Asked of the DOM rather than tracked as it happens: <details> is
+   * opened by the browser, and its toggle event neither bubbles nor
+   * fires the same way everywhere. What is on screen is the one answer
+   * that is always right.
+   */
+  rememberFolds() {
+    for (const block of this.blocks()) {
+      const key = `${this.segment}:${block.dataset.time}`
+
+      if (block.open) {
+        this.folded.delete(key)
+      } else {
+        this.folded.add(key)
+      }
+    }
+  }
+
+  /**
+   * The matches as start times, each holding what starts then.
+   *
+   * @param {Array<object>} matches
+   * @returns {Array<HTMLDetailsElement>}
+   */
+  timeBlocks(matches) {
+    const byTime = new Map()
+
+    for (const match of matches) {
+      const time = startTimeOf(match)
+
+      if (!byTime.has(time)) {
+        byTime.set(time, [])
+      }
+
+      byTime.get(time).push(match)
+    }
+
+    return [...byTime.entries()].map(
+      ([time, block], index) => this.timeBlock(time, block, index)
+    )
+  }
+
+  /**
+   * @param {string} time
+   * @param {Array<object>} matches
+   * @param {number} index - where this block sits in the list
+   * @returns {HTMLDetailsElement}
+   */
+  timeBlock(time, matches, index) {
+    const block = document.createElement('details')
+    const summary = document.createElement('summary')
+    const onCourt = matches.filter(match => segmentOf(match) === 'started')
+
+    summary.appendChild(textTag('span', 'blockTime', time))
+
+    // A shut block still has to say it is holding a match somebody is
+    // playing right now, because that is the one an official is about
+    // to be asked about.
+    if (onCourt.length) {
+      summary.appendChild(textTag(
+        'span', 'blockOnCourt', `${onCourt.length} on court`
+      ))
+    }
+
+    summary.appendChild(textTag('span', 'blockCount', String(matches.length)))
+
+    block.dataset.time = time
+    block.dataset.segment = this.segment
+    block.open = index < this.openFirst
+      && !this.folded.has(`${this.segment}:${time}`)
+    block.appendChild(summary)
+
+    for (const match of matches) {
+      block.appendChild(this.card(match))
+    }
+
+    return block
+  }
+
+  /**
+   * @param {object} match
+   * @returns {HTMLElement}
+   */
+  card(match) {
+    const card = document.createElement(TennisGamedayCardElement.tag)
+
+    card.match = match
+    card.day = this.day
+    card.shell = this.shell
+
+    return card
+  }
+}