@opndev/tennis-match-center 0.0.1 → 0.0.2

package/lib/components/match.mjs

@@ -0,0 +1,368 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { HTMLElementSugar, withConnectedSucu } from '@skirbi/sugar'
+
+/**
+ * <tennis-match> - one match, wherever it is shown.
+ *
+ * The two sides are whatever the host puts inside; this renders the
+ * chrome beside them. Naming a participant is the application's job.
+ *
+ * @example
+ * <tennis-match court="Court 13" division="Beginner" stage="Group A" ended>
+ *   <abto-participant side="home" score="7,6,10" label="…"></abto-participant>
+ *   <abto-participant side="guest" score="3,7,8" label="…"></abto-participant>
+ * </tennis-match>
+ *
+ * The score is optional.
+ *
+ * Authored children stay where they are, positioned with CSS `order`
+ * rather than moved into slots: a Livewire morph fights moved nodes.
+ */
+export class TennisMatchElement extends withConnectedSucu(HTMLElementSugar) {
+  static tag = 'tennis-match'
+
+  static exampleHTML = '<tennis-match court="Court 8"></tennis-match>'
+  static exampleRenderedHTML = '<span tennis-match-court>Court 8</span>'
+
+  static renderGuardSelector = ':scope > [tennis-match-chrome]'
+
+  static attributeDefs = {
+    court: { default: '' },
+    division: { default: '' },
+    stage: { default: '' },
+    'start-time': { default: '' },
+    'duration': { default: '' },
+    started: { default: null },
+    ended: { default: null },
+    'on-court': { default: null },
+    status: { default: '' },
+    winner: { default: '' },
+    hue: { default: '' },
+  }
+
+  static HtmlTemplate = ['tennis-match-template', function () {
+    return this.tpl(`
+      <span tennis-match-chrome>
+        <span tennis-match-meta>
+          <span tennis-match-badge></span>
+          <span tennis-match-division></span>
+          <span tennis-match-court></span>
+          <span tennis-match-time></span>
+          <span tennis-match-state></span>
+        </span>
+        <span tennis-match-versus></span>
+        <span tennis-match-score data-for="home"></span>
+        <span tennis-match-score data-for="guest"></span>
+      </span>
+    `)
+  }]
+
+  connectedCallbackSugar() {
+    this.render()
+  }
+
+  updatedAttributeSugar(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this.render()
+    }
+  }
+
+  morphedCallbackSugar() {
+    this.render()
+  }
+
+  /**
+   * @param {string} side - 'home' or 'guest'
+   * @returns {Element|null}
+   */
+  sideElement(side) {
+    return this.querySelector(`:scope > [side="${side}"]`)
+  }
+
+  /**
+   * A side's score as numbers, one per set.
+   *
+   * @param {string} side
+   * @returns {Array<number>}
+   */
+  scoreOf(side) {
+    const raw = this.sideElement(side)?.getAttribute('score') ?? ''
+
+    return raw
+      .split(',')
+      .map(part => part.trim())
+      .filter(part => part !== '')
+      .map(Number)
+      .filter(value => !Number.isNaN(value))
+  }
+
+  /**
+   * Which side won, or null while that is not yet decided.
+   *
+   * An explicit `winner` overrides the score, which a walkover or a
+   * retirement does not show. Otherwise: most sets won.
+   *
+   * @returns {string|null}
+   */
+  winnerSide() {
+    const stated = String(this.getConfig().winner || '').trim()
+
+    if (stated === 'home' || stated === 'guest') {
+      return stated
+    }
+
+    const home = this.scoreOf('home')
+    const guest = this.scoreOf('guest')
+
+    if (!home.length || home.length !== guest.length) {
+      return null
+    }
+
+    let homeSets = 0
+    let guestSets = 0
+
+    for (const [index, value] of home.entries()) {
+      if (value > guest[index]) {
+        homeSets += 1
+      } else if (value < guest[index]) {
+        guestSets += 1
+      }
+    }
+
+    if (homeSets === guestSets) {
+      return null
+    }
+
+    return homeSets > guestSets ? 'home' : 'guest'
+  }
+
+  /**
+   * What the match is doing, in one word.
+   *
+   * @returns {string}
+   */
+  stateLabel() {
+    const cfg = this.getConfig()
+    const status = String(cfg.status || '').trim()
+
+    const named = {
+      walkover: 'Walkover',
+      retired: 'Retired',
+      no_show: 'No show',
+      cancelled: 'Cancelled',
+    }
+
+    if (named[status]) {
+      return named[status]
+    }
+
+    // hasAttribute, not the config: an absent attribute comes back as
+    // undefined rather than the declared null.
+    if (this.hasAttribute('ended')) {
+      return 'Final'
+    }
+
+    // A match that has started is a match being played on a court, so
+    // the two say the same thing.
+    return this.hasAttribute('started') || this.hasAttribute('on-court')
+      ? 'On court'
+      : ''
+  }
+
+  /**
+   * When the match went on, and how long it took once it is over.
+   *
+   * A match still to be played says nothing: its slot is already the
+   * heading it is filed under. One being played says when it started,
+   * which is what someone arriving late is asking. A finished one says
+   * how long it took as well, because that is the number a director
+   * reads a day by.
+   *
+   * @returns {string}
+   */
+  timeLabel() {
+    const cfg = this.getConfig()
+    const at = String(cfg['start-time'] || '').trim()
+
+    if (!this.hasAttribute('started') && !this.hasAttribute('ended')) {
+      return ''
+    }
+
+    const took = this.durationLabel()
+
+    return [at, took].filter(Boolean).join(' / ')
+  }
+
+  /**
+   * @returns {string}
+   */
+  durationLabel() {
+    if (!this.hasAttribute('ended')) {
+      return ''
+    }
+
+    const minutes = Number(String(this.getConfig().duration || '').trim())
+
+    if (!Number.isFinite(minutes) || minutes <= 0) {
+      return ''
+    }
+
+    if (minutes < 60) {
+      return `${minutes} mins`
+    }
+
+    return `${Math.floor(minutes / 60)}h ${String(minutes % 60).padStart(2, '0')}m`
+  }
+
+  render() {
+    if (!this.hasRenderedShape()) {
+      this.appendChild(this.renderFromTemplate())
+    }
+
+    const cfg = this.getConfig()
+
+    this.setText('[tennis-match-court]', String(cfg.court || ''))
+    this.setText('[tennis-match-badge]', String(cfg.stage || ''))
+    this.setText('[tennis-match-division]', String(cfg.division || ''))
+
+    const hue = String(cfg.hue || '').trim()
+
+    if (hue === '') {
+      this.style.removeProperty('--division-hue')
+    } else {
+      this.style.setProperty('--division-hue', hue)
+    }
+
+    const scored = this.scoreOf('home').length > 0
+
+    const scores = { home: this.scoreOf('home'), guest: this.scoreOf('guest') }
+
+    for (const side of ['home', 'guest']) {
+      this.setScores(
+        `[tennis-match-score][data-for="${side}"]`,
+        scores[side],
+        scores[side === 'home' ? 'guest' : 'home']
+      )
+    }
+
+    this.setText('[tennis-match-versus]', 'vs')
+    this.setText('[tennis-match-state]', this.stateLabel())
+    this.setText('[tennis-match-time]', this.timeLabel())
+
+    const winner = this.winnerSide()
+
+    for (const side of ['home', 'guest']) {
+      this.sideElement(side)?.toggleAttribute('won', side === winner)
+    }
+
+    this.toggleAttribute('scored', scored)
+    this.title = this.summary()
+  }
+
+  /**
+   * The card in one line, for a tooltip. The state is spelled out
+   * because the badge only says it with a colour.
+   *
+   * @returns {string}
+   */
+  summary() {
+    const cfg = this.getConfig()
+
+    return [cfg.stage, cfg.division, cfg.court, this.timeLabel(), this.stateLabel().toLowerCase()]
+      .map(part => String(part || '').trim())
+      .filter(Boolean)
+      .join(', ')
+  }
+
+  /**
+   * A side's score, a set to a line.
+   *
+   * Three sets written as "7 6 10" read as one number with three
+   * digits in it. One element each and they read as three sets, which
+   * is what the host's CSS then stacks.
+   *
+   * Reconciled rather than replaced: a morph's detached tree never
+   * rebuilds children that were thrown away, so the sets that are
+   * already there are rewritten and only the difference is added or
+   * removed.
+   *
+   * Each set is marked with the side that took it, not the side that
+   * took the match: a team losing 2-1 still won a set, and the score
+   * that won it is theirs to have in bold.
+   *
+   * @param {string} selector
+   * @param {Array<number>} values
+   * @param {Array<number>} against - the other side, set for set
+   */
+  setScores(selector, values, against = []) {
+    const element = this.querySelector(selector)
+
+    if (!element) {
+      return
+    }
+
+    const cells = [...element.querySelectorAll(':scope > [tennis-match-set]')]
+
+    values.forEach((value, index) => {
+      const cell = cells[index] ?? element.appendChild(this.setCell())
+      const said = String(value)
+
+      if (cell.firstChild && cell.firstChild.nodeType === 3) {
+        if (cell.firstChild.nodeValue !== said) {
+          cell.firstChild.nodeValue = said
+        }
+      } else {
+        cell.prepend(document.createTextNode(said))
+      }
+
+      const other = against[index]
+
+      cell.toggleAttribute('won', Number.isFinite(other) && value > other)
+    })
+
+    for (const spare of cells.slice(values.length)) {
+      spare.remove()
+    }
+  }
+
+  /**
+   * @returns {HTMLElement}
+   */
+  setCell() {
+    const cell = document.createElement('span')
+
+    cell.setAttribute('tennis-match-set', '')
+
+    return cell
+  }
+
+  /**
+   * Rewrite an element's text without touching its element children.
+   *
+   * textContent would replace every child, which in a morph's detached
+   * tree is never rebuilt.
+   *
+   * @param {string} selector
+   * @param {string} value
+   */
+  setText(selector, value) {
+    const element = this.querySelector(selector)
+
+    if (!element) {
+      return
+    }
+
+    if (element.firstChild && element.firstChild.nodeType === 3) {
+      if (element.firstChild.nodeValue !== value) {
+        element.firstChild.nodeValue = value
+      }
+
+      return
+    }
+
+    element.prepend(document.createTextNode(value))
+  }
+}

package/lib/components/participant.mjs

@@ -0,0 +1,101 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { HTMLElementSugar, withConnectedSucu } from '@skirbi/sugar'
+import { setNameText } from '../flags.mjs'
+
+/**
+ * <tennis-participant> - one side of a match.
+ *
+ * A participant is the competition entry, not a person: one player,
+ * a doubles pair, or a squad under its own name. A named team shows
+ * its name with its members under it, everything else the members
+ * alone.
+ *
+ * @example
+ * <tennis-participant side="home" score="7,6,10"
+ *   label="🇦🇼 Alice, 🇳🇱 Bob"></tennis-participant>
+ *
+ * @example
+ * <tennis-participant side="guest" team-name="Team Awesome"
+ *   label="🇦🇼 Carl, 🇳🇱 Dana"></tennis-participant>
+ *
+ * `side` and `score` are read by <tennis-match>, not by this one.
+ * <tennis-match> accepts any child carrying `side`, so a host with its
+ * own participant element does not need this.
+ */
+export class TennisParticipantElement extends withConnectedSucu(HTMLElementSugar) {
+  static tag = 'tennis-participant'
+
+  static exampleHTML = '<tennis-participant label="🇦🇼 Alice"></tennis-participant>'
+  static exampleRenderedHTML = '<span tennis-participant-label>🇦🇼 Alice</span>'
+
+  static renderGuardSelector = ':scope > [tennis-participant-root]'
+
+  static attributeDefs = {
+    label: { default: '' },
+    'team-name': { default: '' },
+    'flag-svg': { default: 'windows' },
+  }
+
+  connectedCallbackSugar() {
+    this.render()
+  }
+
+  updatedAttributeSugar(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this.render()
+    }
+  }
+
+  morphedCallbackSugar() {
+    this.render()
+  }
+
+  render() {
+    const cfg = this.getConfig()
+    const teamName = String(cfg['team-name'] || '').trim()
+    const label = String(cfg.label || '').trim()
+    const mode = String(cfg['flag-svg'] || 'windows')
+
+    const root = document.createElement('span')
+
+    root.setAttribute('tennis-participant-root', '')
+
+    if (teamName) {
+      const name = document.createElement('span')
+
+      name.setAttribute('tennis-participant-team-name', '')
+      setNameText(name, teamName, mode)
+      root.append(name)
+    }
+
+    const labelElement = document.createElement('span')
+
+    labelElement.setAttribute('tennis-participant-label', '')
+
+    const players = label.split(',').map(part => part.trim()).filter(Boolean)
+
+    if (players.length > 1) {
+      labelElement.setAttribute('data-player-count', String(players.length))
+
+      for (const player of players) {
+        const playerElement = document.createElement('span')
+
+        playerElement.setAttribute('tennis-participant-player', '')
+        setNameText(playerElement, player, mode)
+        labelElement.append(playerElement)
+      }
+    } else {
+      setNameText(labelElement, label, mode)
+    }
+
+    root.append(labelElement)
+
+    const fragment = document.createDocumentFragment()
+
+    fragment.append(root)
+    this.replaceChildrenSugarSafe(fragment)
+  }
+}