@opndev/tennis-match-center 0.0.2 → 0.0.3

package/Changes

@@ -1,4 +1,35 @@
-Revision history for@opndev/tennis-match-center
+Revision history for @opndev/tennis-match-center
+
+0.0.3       2026-10-08 15:31:37Z
+
+  * Auto score on the gameday desk. Enter in a score box fills the other
+    side with 7 when one side is under 7 and the other is empty, then
+    ends the match. Leaving a score box, by Tab or a click, only
+    prefills the 7 and leaves the match open, so a click on the end
+    button is not lost. With both boxes filled, Enter just ends the
+    match.
+
+  * The next-on-court dialog lists the match planned for the court that
+    came free first and picks it by default, with the longest wait as
+    the alternative below it. Enter in the dialog presses Play, and a
+    held Enter that repeats into the dialog is ignored.
+
+  * The match card says where a match is next to its court: Not before a
+    time, Go to court, On court or Final. A host states it with the new
+    `state` and `not-before` attributes, because next up depends on the
+    other matches on the court. Without a state the card reads started
+    and ended as before, and a walkover or retirement still says what
+    it was.
+
+  * The roster board says when each group starts: the first planned
+    match of each day it plays, from a `starts` list the roster data
+    can carry, such as `Mon 10 Nov, 13:00 / Tue 11 Nov, 09:30`. A group
+    nothing is planned for says nothing.
+
+  * The day grid sizes its hours and cells by the CSS variable
+    --planning-scale. A host can make a day more compact or roomier
+    with one variable, and a day already drawn follows it without a
+    redraw. The default scale is 1, as before.
 
 0.0.2       2026-09-21 03:14:21Z
 

package/lib/components/day-grid.mjs

@@ -72,7 +72,7 @@ export class TennisDayGridElement extends HTMLElementSugar {
     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.style.setProperty('--planning-day-height', this.lengthFor(range.end - range.start))
 
     this.replaceChildren(
       this.timeColumn(rows, range),
@@ -94,14 +94,14 @@ export class TennisDayGridElement extends HTMLElementSugar {
     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`)
+    body.style.setProperty('--planning-day-height', this.lengthFor(range.end - range.start))
 
     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.style.top = this.lengthFor(slot.start_minutes - range.start)
+      time.style.height = this.lengthFor(slot.end_minutes - slot.start_minutes)
       time.textContent = slot.label ?? slot.key
 
       column.appendChild(body).appendChild(time)
@@ -129,7 +129,7 @@ export class TennisDayGridElement extends HTMLElementSugar {
     column.appendChild(heading)
 
     const body = document.createElement('planning-rows')
-    body.style.setProperty('--planning-day-height', `${this.pxFor(range.end - range.start)}px`)
+    body.style.setProperty('--planning-day-height', this.lengthFor(range.end - range.start))
 
     // 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
@@ -172,8 +172,8 @@ export class TennisDayGridElement extends HTMLElementSugar {
     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`
+    element.style.top = this.lengthFor(slot.start_minutes - range.start)
+    element.style.height = this.lengthFor(minutes)
 
     if (slot.start_minutes != null) {
       element.setAttribute('duration', minutes)
@@ -235,6 +235,18 @@ export class TennisDayGridElement extends HTMLElementSugar {
     return minutes * (this.scale ?? PX_PER_MINUTE)
   }
 
+  /**
+   * The same size as a CSS length that follows --planning-scale, so a
+   * host can make the whole day more compact (or roomier) with one
+   * variable, and a day already drawn follows it without a redraw.
+   *
+   * @param {number} minutes
+   * @returns {string}
+   */
+  lengthFor(minutes) {
+    return `calc(${this.pxFor(minutes)}px * var(--planning-scale, 1))`
+  }
+
   /**
    * 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.

package/lib/components/gameday-board.mjs

@@ -138,12 +138,12 @@ export class TennisGamedayBoardElement extends HTMLElementSugar {
         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>
+        <p data-waiting-label></p>
+        <p data-waiting-head></p>
+        <p data-waiting-match></p>
       </semtic-modal>
       <semtic-modal data-busy-modal hidden
         header="That court is taken"
@@ -200,6 +200,14 @@ export class TennisGamedayBoardElement extends HTMLElementSugar {
         this.recordScore(event.detail)
       })
 
+      this.addEventListener('gameday-card:enter', event => {
+        this.autoScore(event.detail)
+      })
+
+      this.addEventListener('gameday-card:leave', event => {
+        this.autoPrefill(event.detail)
+      })
+
       this.addEventListener('gameday-card:court', event => {
         this.courtDialog.open(event.detail.match)
       })
@@ -285,10 +293,27 @@ export class TennisGamedayBoardElement extends HTMLElementSugar {
 
     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]'),
+      focus: modal => modal.querySelector('[data-next-modal] input:checked')
+        ?? modal.querySelector('[data-next-modal] input')
+        ?? modal.querySelector('[semtic-modal-cancel]'),
       confirmed: match => this.playPicked(this.effectiveCourtId(match)),
     })
 
+    // Enter is Play. A held Enter repeats into the dialog that the first
+    // one opened, so only a fresh press counts.
+    this.$('[data-next-modal]').addEventListener('keydown', event => {
+      const confirm = this.$('[data-next-modal] [semtic-modal-confirm]')
+
+      if (event.key !== 'Enter' || event.repeat || event.target.closest('button')) {
+        return
+      }
+
+      if (confirm && !confirm.hasAttribute('disabled')) {
+        event.preventDefault()
+        confirm.click()
+      }
+    })
+
     this.busyDialog = new GamedayDialog(this.$('[data-busy-modal]'), {
       fill: match => this.fillBusy(match),
       focus: modal => modal.querySelector('[data-busy-select] select')
@@ -871,6 +896,78 @@ export class TennisGamedayBoardElement extends HTMLElementSugar {
     match.sets[index][`${side}_games`] = value === '' ? null : Number(value)
   }
 
+  /**
+   * One side has a score under seven and the other is empty: the other
+   * side gets seven.
+   *
+   * @param {object} match
+   * @param {number} set
+   * @returns {?string} the side that was filled in, if any
+   */
+  autoFill(match, set) {
+    const row = match.sets[set - 1]
+
+    if (!row) {
+      return null
+    }
+
+    const home = row.home_games ?? null
+    const visitor = row.visitor_games ?? null
+
+    if (home !== null && visitor === null && home < 7) {
+      row.visitor_games = 7
+
+      return 'visitor'
+    }
+
+    if (visitor !== null && home === null && visitor < 7) {
+      row.home_games = 7
+
+      return 'home'
+    }
+
+    return null
+  }
+
+  /**
+   * Enter in a score box ends the match, after the auto score.
+   *
+   * @param {{match: object, set: number}} entered
+   */
+  async autoScore({ match, set }) {
+    if (!match || this.segmentOf(match) === 'finished') {
+      return
+    }
+
+    this.autoFill(match, set)
+
+    if (this.hasScore(match)) {
+      await this.toggleFinished(match)
+    }
+  }
+
+  /**
+   * Focus left the score boxes: prefill the seven and leave the
+   * ending to the desk. The box is written directly, since a redraw
+   * under the pointer would swallow a click on the end button.
+   *
+   * @param {{match: object, set: number}} left
+   */
+  autoPrefill({ match, set }) {
+    if (!match || this.segmentOf(match) === 'finished') {
+      return
+    }
+
+    const side = this.autoFill(match, set)
+    const box = side && this.$(
+      `[data-match-id="${match.id}"] [data-side="${side}"] input[data-set="${set}"]`
+    )
+
+    if (box) {
+      box.value = '7'
+    }
+  }
+
   /**
    * @param {object} match
    */
@@ -1541,15 +1638,15 @@ export class TennisGamedayBoardElement extends HTMLElementSugar {
     // 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}`
-    )
+    const queued = said.next && said.next !== longest ? said.next : null
+
+    this.sayMatchBlock('queued', queued, `Next planned match on ${court}`, true)
+
+    // What was planned for this court is the default. The longest wait
+    // is the alternative, or the only choice when nothing is queued here.
+    this.sayMatchBlock('waiting', longest, 'Longest waiting match', !queued)
 
     // Nothing is waiting anywhere, so there is nothing to put on.
     this.$('[data-next-modal] [semtic-modal-confirm]')
@@ -1600,8 +1697,9 @@ export class TennisGamedayBoardElement extends HTMLElementSugar {
    * @param {string} role - 'waiting' or 'queued'
    * @param {object|null} match
    * @param {string} label
+   * @param {boolean} checked - whether it is the default pick
    */
-  sayMatchBlock(role, match, label) {
+  sayMatchBlock(role, match, label, checked) {
     for (const part of ['label', 'head', 'match']) {
       this.$(`[data-${role}-${part}]`).hidden = !match
     }
@@ -1617,7 +1715,7 @@ export class TennisGamedayBoardElement extends HTMLElementSugar {
       'next-play',
       String(match.id),
       label,
-      role === 'waiting',
+      checked,
       'right'
     ))
 

package/lib/components/gameday-card.mjs

@@ -38,6 +38,8 @@ import { scoreField, teamCell, textTag } from '../gameday-parts.mjs'
  * Fired, all bubbling, all carrying `{ match }`:
  *
  *     gameday-card:score   a score box was typed in
+ *     gameday-card:enter   Enter was pressed in a score box
+ *     gameday-card:leave   focus left the score boxes
  *     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
@@ -81,6 +83,35 @@ export class TennisGamedayCardElement extends HTMLElementSugar {
         }
       })
 
+      this.addEventListener('keydown', event => {
+        const input = event.target.closest?.('[data-scores] input')
+
+        if (input && event.key === 'Enter') {
+          event.preventDefault()
+          this.say('enter', {
+            set: Number(input.dataset.set),
+            side: input.closest('[data-scores]').dataset.side,
+          })
+        }
+      })
+
+      this.addEventListener('focusout', event => {
+        const input = event.target.closest?.('[data-scores] input')
+        const next = event.relatedTarget
+
+        if (!input) {
+          return
+        }
+
+        if (!next && this.ownerDocument.hasFocus?.() === false) {
+          return
+        }
+
+        this.say('leave', {
+          set: Number(input.dataset.set),
+        })
+      })
+
       this.addEventListener('click', event => {
         const pressed = event.target.closest(
           '[data-court-open], [data-start], [data-action]'

package/lib/components/match.mjs

@@ -39,6 +39,8 @@ export class TennisMatchElement extends withConnectedSucu(HTMLElementSugar) {
     ended: { default: null },
     'on-court': { default: null },
     status: { default: '' },
+    state: { default: '' },
+    'not-before': { default: '' },
     winner: { default: '' },
     hue: { default: '' },
   }
@@ -159,6 +161,21 @@ export class TennisMatchElement extends withConnectedSucu(HTMLElementSugar) {
       return named[status]
     }
 
+    // Said by the host when it knows, because next up depends on the
+    // other matches on the court and a card cannot see those.
+    const state = String(cfg.state || '').trim()
+
+    if (state) {
+      const notBefore = String(cfg['not-before'] || '').trim()
+
+      return {
+        final: 'Final',
+        on_court: 'On court',
+        next_up: 'Go to court',
+        pending: notBefore ? `Not before ${notBefore}` : '',
+      }[state] ?? ''
+    }
+
     // hasAttribute, not the config: an absent attribute comes back as
     // undefined rather than the declared null.
     if (this.hasAttribute('ended')) {

package/lib/components/roster-board.mjs

@@ -5,6 +5,37 @@
 import { HTMLElementSugar } from '@skirbi/sugar'
 import { seedGroups, groupName } from '../roster-seeding.mjs'
 
+const DAY = new Intl.DateTimeFormat('en-GB', {
+  weekday: 'short',
+  day: 'numeric',
+  month: 'short',
+  timeZone: 'UTC',
+})
+
+/**
+ * The day an ISO timestamp falls on, read off the string so the event's
+ * own clock is what is said, not the browser's.
+ *
+ * @param {string} iso
+ * @returns {string}
+ */
+function dayOf(iso) {
+  return DAY.format(new Date(`${iso.slice(0, 10)}T12:00:00Z`))
+}
+
+/**
+ * When a group starts playing, as far as the planning knows it: the
+ * first match of each day it plays.
+ *
+ * @param {Array<string>} starts - ISO timestamps, one per day
+ * @returns {string}
+ */
+export function startsLine(starts) {
+  return starts
+    .map(iso => `${dayOf(iso)}, ${iso.slice(11, 16)}`)
+    .join(' / ')
+}
+
 /**
  * <tennis-roster-board api="..." save-api="...">
  *
@@ -173,11 +204,11 @@ export class TennisRosterBoardElement extends HTMLElementSugar {
         .map(id => this.saved.teams.find(team => team.id === id))
         .filter(Boolean)
 
-      columns.appendChild(this.columnFor(group.name, teams))
+      columns.appendChild(this.columnFor(group.name, teams, group.starts))
     }
   }
 
-  columnFor(currentGroupName, teams) {
+  columnFor(currentGroupName, teams, starts = []) {
     const column = document.createElement('div')
 
     column.dataset.group = currentGroupName ?? ''
@@ -212,6 +243,15 @@ export class TennisRosterBoardElement extends HTMLElementSugar {
     count.textContent = String(teams.length)
     heading.appendChild(count)
 
+    if (starts?.length) {
+      const when = document.createElement('p')
+
+      when.dataset.planned = ''
+      when.title = 'First match of the group, per day'
+      when.textContent = startsLine(starts)
+      column.appendChild(when)
+    }
+
     const list = document.createElement('div')
     list.dataset.list = ''
     column.appendChild(list)

package/lib/index.mjs

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

package/package.json

@@ -40,5 +40,5 @@
   },
   "sideEffects": true,
   "type": "module",
-  "version": "0.0.2"
+  "version": "0.0.3"
 }