@opndev/tennis-match-center 0.0.2 → 0.0.4

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/planning-board.mjs

@@ -136,8 +136,14 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
           <input data-always-bye-short-groups type="checkbox">
           Always give a short group its bye
         </label>
+        <label data-relaxed hidden>
+          <input data-relaxed-sharing type="checkbox">
+          Share courts when they run short (clear the plan first)
+        </label>
         <p data-short-groups hidden></p>
         <p data-auto-fill-shortfall hidden></p>
+        <p data-auto-fill-split hidden></p>
+        <p data-auto-fill-starts hidden></p>
         <p data-auto-fill-warnings hidden></p>
         <button data-clear-all type="button" hidden>Clear planning (all)</button>
         <button data-clear-day type="button" hidden>Clear planning (day)</button>
@@ -182,6 +188,7 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
       // replacing the grid.
       this.$('[data-registration-closed]').addEventListener('change', () => this.render())
       this.$('[data-always-bye-short-groups]').addEventListener('change', () => this.render())
+      this.$('[data-relaxed-sharing]').addEventListener('change', () => this.render())
       this.$('[data-show-data]').addEventListener('change', () => this.render())
       this.$('[data-narrow-empty]').addEventListener('change', () => this.render())
       this.$('[data-clear-all]').addEventListener('click', () => this.clearAll())
@@ -239,7 +246,7 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
       return
     }
 
-    this.blocks = this.state.blocks.map(block => ({ ...block }))
+    this.blocks = this.withPlayed(this.state.blocks.map(block => ({ ...block })))
     this.selection = new Set()
     this.selectionDate = null
     this.isSelecting = false
@@ -736,6 +743,60 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
     this.paintSelection()
   }
 
+  /**
+   * The saved plan with what actually happened written over it.
+   *
+   * The plan is what was intended. The matches are what was played,
+   * on the court and at the hour they really ran, and the two part
+   * company the moment the plan is changed or a session disagrees with
+   * the day - Monday opened at 08:00 where the sessions said 09:00, and
+   * not one cell of 2166 lined up.
+   *
+   * So a played cell wins twice over: the plan's cell for that same
+   * fixture goes, wherever it had put it, and so does whatever the
+   * plan had on that court at that hour.
+   *
+   * @param {Array} blocks
+   * @returns {Array}
+   */
+  withPlayed(blocks) {
+    const played = this.state.played_cells ?? []
+
+    if (played.length === 0) {
+      return blocks
+    }
+
+    const fixtures = new Set(played.map(cell => this.fixtureKey(cell)))
+    const where = new Set(played.map(cell => `${cell.date}|${cell.court_id}|${cell.slot}`))
+
+    return [
+      ...blocks.filter(block =>
+        !fixtures.has(this.fixtureKey(block))
+          && !where.has(`${block.date}|${block.court_id}|${block.slot}`)
+      ),
+      ...played.map(cell => ({ ...cell, id: null })),
+    ]
+  }
+
+  /**
+   * What a cell is for, as far as two cells can be said to be the
+   * same one: the fixture, not where it was put.
+   *
+   * @param {Object} cell
+   * @returns {string}
+   */
+  fixtureKey(cell) {
+    // A group fixture is its group and its slot; a knockout one is
+    // its round and its slot. The phase decides which, because a
+    // planned group cell carries no round and a played one says
+    // 'group', and they are the same fixture.
+    const of = cell.phase === 'knockout'
+      ? [cell.round ?? '', cell.match_slot ?? '']
+      : [cell.group_id ?? '', cell.match_slot ?? '']
+
+    return [cell.competition_id, cell.division_id ?? '', cell.phase, ...of].join('|')
+  }
+
   /**
    * The blocks under the current selection.
    *
@@ -1170,6 +1231,18 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
     return this.$('[data-always-bye-short-groups]')?.checked ?? false
   }
 
+  /**
+   * Whether groups may share courts when the courts run short.
+   *
+   * Off, a group stays on one court for its whole run and what does not
+   * fit is reported. On, a plan that falls short is planned again with
+   * courts shared. The board only adds to what is on it, so a plan made
+   * strictly has to be cleared before sharing can rearrange it.
+   */
+  relaxed() {
+    return this.$('[data-relaxed-sharing]')?.checked ?? false
+  }
+
   /**
    * Left off the element, the planner's own default stands. "0" is a
    * real answer, hence no `|| undefined`.
@@ -1202,6 +1275,11 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
   }
 
   /**
+   * Fills in what the sessions ask for and the grid does not hold yet.
+   *
+   * It only ever adds: what is on the board stands, and the planner
+   * works around it. To plan a day afresh, clear it first.
+   *
    * Re-fetches the competitions/groups config before computing, so a
    * pairing (or any other config) changed on the Competitions page
    * just before clicking this is what actually gets planned against -
@@ -1223,13 +1301,14 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
         return
       }
 
-      const { blocks, shortfall, warnings } = autoFillPlanning({
+      const { blocks, shortfall, warnings, split } = autoFillPlanning({
         courts: this.state.courts,
         slots: this.state.slots,
         days: this.state.days,
         competitions: this.state.competitions,
         registrationClosed: this.registrationClosed(),
         alwaysByeShortGroups: this.alwaysByeShortGroups(),
+        relaxed: this.relaxed(),
         courtOverrides: this.state.court_overrides ?? [],
 
         // Group play follows each competition's own session, so a
@@ -1240,11 +1319,21 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
         darkFrom: this.getConfig()['dark-from'],
         dayEnd: this.getConfig()['day-end'] || undefined,
         lightBuffer: this.lightBuffer(),
+        standing: this.blocks,
       })
 
-      this.blocks = blocks
+      // The planner hands back the cells it was given on the days it
+      // planned, along with what it added. A cell on a day outside the
+      // canvas never reaches it.
+      const canvas = new Set(this.state.days)
+
+      this.blocks = [
+        ...this.blocks.filter(block => !canvas.has(block.date)),
+        ...blocks,
+      ]
       this.lastAutoFillShortfall = shortfall
       this.lastAutoFillWarnings = warnings
+      this.lastAutoFillSplit = split ?? []
       this.selection = new Set()
 
       const short = this.shortGroups()
@@ -1270,14 +1359,106 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
   }
 
   /**
-   * Empties the whole grid - only ever mutates the in-browser copy
-   * until Save is pressed, same as any other change here.
+   * Which groups ended up on more than one court, and where.
+   *
+   * A group is named by its competition, division and letter: the
+   * letter alone is in every division. Then the court it started on,
+   * the court it moved to and when it first plays there.
+   *
+   * @param {Array<{competition_id: number, group_name: ?string,
+   *   group_id: number, division_name: ?string, date: string,
+   *   courts: number[], moves_at: ?string}>} split
+   * @returns {string}
+   */
+  splitSummary(split) {
+    const courtName = id => this.state.courts.find(court => court.id === id)?.name ?? id
+
+    const named = split.slice(0, 6).map(entry => {
+      const competition = this.state.competitions
+        .find(candidate => candidate.id === entry.competition_id)?.name
+      const group = entry.group_name ?? `#${entry.group_id}`
+      const whom = [competition, entry.division_name].filter(Boolean).join(': ')
+      const [from, ...to] = entry.courts.map(courtName)
+      const moved = to.length
+        ? `${from}, then ${to.join(', then ')}${entry.moves_at ? ` from ${entry.moves_at}` : ''}`
+        : from
+
+      return `${whom}, group ${group} (${entry.date.slice(5)}): ${moved}`
+    })
+
+    const more = split.length > named.length
+      ? `, and ${split.length - named.length} more`
+      : ''
+
+    return `${split.length} group(s) share courts: ${named.join(' · ')}${more}`
+  }
+
+  /**
+   * How many groups of each competition start in each block of the
+   * day, one line a day: "Singles 6/4/6".
+   *
+   * Where courts are shared it is the number to look at. Each category
+   * should spread as evenly as it can over the blocks, and a group's
+   * block is the hour its first match starts.
+   *
+   * @returns {string[]}
+   */
+  startSpread() {
+    const first = new Map()
+
+    for (const block of this.blocks) {
+      if (block.phase !== 'group' || block.group_id == null) {
+        continue
+      }
+
+      const key = [block.competition_id, block.date, block.group_id].join('|')
+      const held = first.get(key)
+
+      if (!held || block.slot < held.slot) {
+        first.set(key, block)
+      }
+    }
+
+    const days = new Map()
+
+    for (const block of first.values()) {
+      const day = days.get(block.date) ?? new Map()
+      const starts = day.get(block.competition_id) ?? new Map()
+
+      starts.set(block.slot, (starts.get(block.slot) ?? 0) + 1)
+      day.set(block.competition_id, starts)
+      days.set(block.date, day)
+    }
+
+    return [...days.keys()].sort().map(date => {
+      const spread = [...days.get(date)].map(([competitionId, starts]) => {
+        const name = this.state.competitions
+          .find(competition => competition.id === competitionId)?.name ?? `#${competitionId}`
+        const counts = [...starts.keys()].sort().map(slot => starts.get(slot))
+
+        return `${name} ${counts.join('/')}`
+      })
+
+      return `${date}: ${spread.join(' · ')}`
+    })
+  }
+
+  /**
+   * Empties the grid, bar what was played.
+   *
+   * A day that has happened cannot be unplanned: clearing it would
+   * leave the matches on it with no cell to sit in, and the next
+   * auto-fill would hand their courts to somebody else.
+   *
+   * Only ever mutates the in-browser copy until Save is pressed, same
+   * as any other change here.
    */
   clearAll() {
-    this.blocks = []
+    this.blocks = this.blocks.filter(block => block.played === true)
     this.selection = new Set()
     this.lastAutoFillShortfall = null
     this.lastAutoFillWarnings = null
+    this.lastAutoFillSplit = null
 
     this.dispatchEvent(new CustomEvent('tennis-planning:changed', {
       bubbles: true,
@@ -1289,14 +1470,18 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
 
   /**
    * Empties just the currently active day tab's cells, leaving every
-   * other day untouched.
+   * other day untouched - and leaving what was played on it, because
+   * a cell a match was played in is a record of the day rather than a
+   * plan for it.
    */
   clearDay(date) {
     if (!date) {
       return
     }
 
-    this.blocks = this.blocks.filter(block => block.date !== date)
+    this.blocks = this.blocks.filter(block =>
+      block.date !== date || block.played === true
+    )
     this.selection = new Set()
 
     this.dispatchEvent(new CustomEvent('tennis-planning:changed', {
@@ -1316,6 +1501,7 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
     this.$('[data-save]').hidden = false
     this.$('[data-registration]').hidden = false
     this.$('[data-always-bye]').hidden = false
+    this.$('[data-relaxed]').hidden = false
     this.$('[data-view-toggle]').hidden = false
     this.$('[data-narrow-toggle]').hidden = false
 
@@ -1326,6 +1512,15 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
     plan.hidden = !showData
     this.$('[data-schedule]').hidden = showData
 
+    // How the groups spread over the blocks of the day is for reading
+    // the plan as data, not for every Auto-fill.
+    const startsEl = this.$('[data-auto-fill-starts]')
+    const starts = showData ? this.startSpread() : []
+
+    startsEl.hidden = starts.length === 0
+    startsEl.style.whiteSpace = 'pre-line'
+    startsEl.textContent = starts.join('\n')
+
     if (showData) {
       plan.textContent = JSON.stringify(this.planData(), null, 2)
       return
@@ -1361,6 +1556,15 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
       shortfallEl.hidden = true
     }
 
+    const splitEl = this.$('[data-auto-fill-split]')
+
+    if (this.lastAutoFillSplit?.length) {
+      splitEl.hidden = false
+      splitEl.textContent = this.splitSummary(this.lastAutoFillSplit)
+    } else {
+      splitEl.hidden = true
+    }
+
     // What the plan could not honour, or had to guess. A plan that
     // quietly does something other than what it was set up to do is
     // the hardest kind of wrong to spot, so it says so here rather
@@ -1380,6 +1584,21 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
               + `no match schedule exists for that few, so it was not planned at all`
           }
 
+          if (warning.kind === 'not-shareable') {
+            return `${name}: sharing courts cannot help, it only works for `
+              + `groups of five`
+          }
+
+          if (warning.kind === 'no-sessions') {
+            return `${name}: has matches to play but no sessions, so it was `
+              + `not planned at all`
+          }
+
+          if (warning.kind === 'outside-days') {
+            return `${name}: has sessions on ${warning.dates.join(', ')}, which `
+              + `are not days of this event, so nothing was planned for them`
+          }
+
           return `${name} (${warning.phase}, ${warning.date}) was due on at `
             + `${warning.expected} but opens at ${warning.earliest}`
         })
@@ -1847,6 +2066,12 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
       match.setAttribute('round', block.round)
     }
 
+    // Played, and therefore not the planner's to move: it is where it
+    // is because that is where it happened.
+    if (block.played === true) {
+      match.setAttribute('played', '')
+    }
+
     if (block.match_slot != null) {
       match.setAttribute('fixture', block.match_slot)
     }