@opndev/tennis-match-center 0.0.1 → 0.0.2

package/lib/components/planning-board.mjs

@@ -3,25 +3,58 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { HTMLElementSugar } from '@skirbi/sugar'
-import { withLitRequired } from '../lighting.mjs'
+import { courtCanTake, toMinutes, withLitRequired } from '../lighting.mjs'
 import { autoFillPlanning, activeSession } from '../auto-planner.mjs'
 import { rowsForDate } from '../day-rows.mjs'
 import { withBusyButton } from '../busy-button.mjs'
 import { competitionHue, divisionHues } from '../division-hues.mjs'
+import { TennisDayGridElement } from './day-grid.mjs'
+import { fourTeamMatches, fourTeamUnitLayout } from '../four-team-planner.mjs'
+import { threeTeamUnitLayout } from '../three-team-planner.mjs'
+import { unitLayout } from '../paired-court-planner.mjs'
+import { GROUP_TEMPLATES, templateMatches } from '../group-schedule.mjs'
 
 const SAVING = { busy: 'Saving…', done: 'Saved', failed: 'Save failed' }
 
+/**
+ * The slots the planner knows how to lay: a group shape, how many
+ * groups share the court set, and how many courts that set is. Rest
+ * is what the sharing buys - a group waits out the others' turns
+ * instead of playing its own matches back to back.
+ */
+// How much darker every other turn of a slot is drawn, in percent of
+// lightness - see markRuns.
+const WASH_STEP = 10
+
+// What Clear takes off a region: the naming, not the cells. The
+// competition and phase are what painting put there.
+const UNNAMED = {
+  division_id: null,
+  division_name: null,
+  division_gender: null,
+  group_id: null,
+  group_name: null,
+  round: null,
+  match_slot: null,
+}
+
+const SHAPES = [
+  { teams: 3, label: 'no rest', count: 1, courts: 1 },
+  { teams: 3, label: 'rest', count: 2, courts: 1 },
+  { teams: 4, label: '2 on 2', count: 2, courts: 2 },
+  { teams: 4, label: '3 on 2', count: 3, courts: 2 },
+  { teams: 5, label: '5 on 1', count: 1, courts: 1 },
+]
+
+function teamIdsFor(group) {
+  return Array.from({ length: group.team_count ?? group.pool_size ?? 0 }, (_, i) => i + 1)
+}
+
 // A row's fallback length when a booked block's slot no longer matches
 // any configured session (spec.md never promises one) - just enough to
 // give it a real height on the timeline rather than none at all.
 const FALLBACK_SLOT_MINUTES = 45
 
-// Pixels per minute of real time on the timeline. A 45-minute slot -
-// the shortest common match length - needs room for four lines
-// (competition, division, group, round) plus padding, not just the
-// one or two a bare label used to need.
-const PX_PER_MINUTE = 64 / 45
-
 /**
  * <tennis-planning-board api="..." save-api="...">
  *
@@ -83,6 +116,11 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
     // equal parts rather than allowed to run into the small hours or
     // spill onto the next morning - see auto-planner.mjs's own retry.
     'day-end': {},
+
+    // Minutes before dark-from that an unlit court stops taking new
+    // play, so nothing is booked to end just as the light goes. Zero
+    // holds an unlit court open right up to dark-from.
+    'light-buffer': {},
   }
 
   static HtmlTemplate = ['tennis-planning-board-template', function () {
@@ -107,8 +145,13 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
           <input data-show-data type="checkbox">
           Show data
         </label>
+        <label data-narrow-toggle hidden>
+          <input data-narrow-empty type="checkbox">
+          Narrow empty courts
+        </label>
         <pre data-plan hidden></pre>
         <div data-schedule hidden></div>
+        <planning-menu data-menu hidden></planning-menu>
         <button data-save type="button" hidden>Save planning</button>
       </div>
     `)
@@ -140,6 +183,7 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
       this.$('[data-registration-closed]').addEventListener('change', () => this.render())
       this.$('[data-always-bye-short-groups]').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())
       this.$('[data-clear-day]').addEventListener('click', () => {
         const activeDate = this.$('[data-schedule] semtic-tabbed')?.getAttribute('current')
@@ -151,12 +195,24 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
       // ends the selection instead of leaving it stuck "selecting".
       window.addEventListener('mouseup', () => {
         this.isSelecting = false
+        this.drop()
+      })
+
+      window.addEventListener('mousedown', event => {
+        if (!this.$('[data-menu]').contains(event.target)) {
+          this.closeMenu()
+        }
       })
 
       // Backspace/Delete clears the current selection - the same
       // action as clicking "Clear selection" in the legend, just
       // faster for a director working through a lot of cells.
       window.addEventListener('keydown', event => {
+        if (event.key === 'Escape') {
+          this.closeMenu()
+          return
+        }
+
         if (event.key !== 'Backspace' && event.key !== 'Delete') {
           return
         }
@@ -283,9 +339,7 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
   }
 
   isSelectable(court, slot) {
-    // A physical impossibility, not a soft preference - spec.md: "a
-    // non-lit court cannot be assigned to the evening slot".
-    return !(slot.lit_required && !court.lit)
+    return courtCanTake(court, slot)
   }
 
   cellKey(row, col) {
@@ -343,16 +397,18 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
    * worth of cells. Scoped to the active day only.
    */
   paintSelection() {
-    const day = this.$(`planning-day[data-day="${this.selectionDate}"]`)
+    this.gridFor(this.selectionDate)?.paint(this.selection)
+  }
 
-    if (!day) {
-      return
-    }
+  gridFor(date) {
+    return this.$(`tennis-day-grid[data-day="${date}"]`)
+  }
 
-    for (const slot of day.querySelectorAll('planning-slot[data-row]')) {
-      const key = this.cellKey(Number(slot.dataset.row), Number(slot.dataset.col))
-      slot.toggleAttribute('data-selected', this.selection.has(key))
-    }
+  showDrag() {
+    this.gridFor(this.drag?.date ?? this.selectionDate)?.showDrag(
+      this.drag ? new Set(this.drag.keys) : null,
+      this.drag?.over ? this.cellKey(this.drag.over.row, this.drag.over.col) : null
+    )
   }
 
   /**
@@ -398,6 +454,682 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
     this.render()
   }
 
+  /**
+   * Picks up what is under the cursor: the whole selection if the
+   * grabbed cell is part of it, otherwise that one block.
+   *
+   * @param {string} date
+   * @param {number} row
+   * @param {number} col
+   */
+  startDrag(date, row, col) {
+    const grabbed = this.cellKey(row, col)
+    const keys = this.selectionDate === date && this.selection.has(grabbed)
+      ? [...this.selection]
+      : [grabbed]
+
+    const rows = this.rowsFor(date)
+
+    this.drag = {
+      date,
+      row,
+      col,
+      over: null,
+      keys: keys.filter(key => {
+        const [r, c] = key.split(',').map(Number)
+
+        return this.blockAt(this.state.courts[c].id, date, rows[r].key)
+      }),
+    }
+
+    this.showDrag()
+  }
+
+  /**
+   * Drops what is being dragged, moving every block by the same
+   * row/court step. A step that would land on a blocked cell, or on a
+   * block that is staying put, is refused outright: nothing is
+   * overwritten and nothing moves halfway.
+   */
+  drop() {
+    const drag = this.drag
+
+    this.drag = null
+    this.gridFor(drag?.date ?? this.selectionDate)?.showDrag(null, null)
+
+    if (!drag?.over || !drag.keys.length) {
+      return
+    }
+
+    const rowStep = drag.over.row - drag.row
+    const colStep = drag.over.col - drag.col
+
+    if (rowStep === 0 && colStep === 0) {
+      return
+    }
+
+    const rows = this.rowsFor(drag.date)
+    const moving = new Set(drag.keys)
+    const moves = []
+
+    for (const key of drag.keys) {
+      const [row, col] = key.split(',').map(Number)
+      const toRow = row + rowStep
+      const toCol = col + colStep
+      const court = this.state.courts[toCol]
+      const slot = rows[toRow]
+
+      if (!court || !slot || !this.isSelectable(court, slot)) {
+        return
+      }
+
+      const sitting = this.blockAt(court.id, drag.date, slot.key)
+
+      if (sitting && !moving.has(this.cellKey(toRow, toCol))) {
+        return
+      }
+
+      moves.push({
+        block: this.blockAt(this.state.courts[col].id, drag.date, rows[row].key),
+        courtId: court.id,
+        slot: slot.key,
+        key: this.cellKey(toRow, toCol),
+      })
+    }
+
+    for (const move of moves) {
+      move.block.court_id = move.courtId
+      move.block.slot = move.slot
+    }
+
+    this.selection = new Set(moves.map(move => move.key))
+    this.selectionDate = drag.date
+
+    this.dispatchEvent(new CustomEvent('tennis-planning:changed', {
+      bubbles: true,
+      detail: { blocks: this.blocks },
+    }))
+
+    this.render()
+    this.paintSelection()
+  }
+
+  /**
+   * A group's own matches, off the same templates the planner lays
+   * out from.
+   *
+   * @param {Object} group
+   * @returns {Array}
+   */
+  groupMatches(group) {
+    const teamIds = teamIdsFor(group)
+
+    return group.pool_size === 4
+      ? fourTeamMatches({ teamIds })
+      : templateMatches({ teamIds, groupSize: group.pool_size })
+  }
+
+  /**
+   * How much room the painted region has, in courts and slots.
+   *
+   * @returns {Object}
+   */
+  selectionSize() {
+    const cells = [...this.selection].map(key => key.split(',').map(Number))
+
+    return {
+      courts: new Set(cells.map(([, col]) => col)).size,
+      slots: new Set(cells.map(([row]) => row)).size,
+    }
+  }
+
+  /**
+   * The competition's groups that still owe court time. A group
+   * already holding all its cells has nothing left to slot.
+   *
+   * @param {Object} competition
+   * @returns {Array}
+   */
+  owingGroups(competition) {
+    return (competition.groups ?? []).filter(group => {
+      const needed = this.groupMatches(group).length
+      const planned = this.blocks.filter(block => block.group_id === group.id).length
+
+      return needed > 0 && planned < needed
+    })
+  }
+
+  /**
+   * The slots the planner could lay into the painted region, by group
+   * shape. Only shapes with groups left to place, and only groups
+   * that still owe court time. Anything else is manual.
+   *
+   * @returns {Array}
+   */
+  slotOptions(context) {
+    if (context?.phase !== 'group') {
+      return []
+    }
+
+    const competition = this.state.competitions.find(c => c.id === context.competitionId)
+
+    if (!competition) {
+      return []
+    }
+
+    const owing = this.owingGroups(competition)
+    const region = this.selectionSize()
+
+    return SHAPES
+      .map(shape => {
+        const groups = owing.filter(group => group.pool_size === shape.teams)
+
+        if (groups.length < shape.count) {
+          return null
+        }
+
+        const slots = (this.groupMatches(groups[0]).length / shape.courts) * shape.count
+
+        return {
+          ...shape,
+          groups,
+          slots,
+          fits: region.courts >= shape.courts && region.slots >= slots,
+        }
+      })
+      .filter(Boolean)
+  }
+
+  /**
+   * How the planner lays this shape out: 4-team takes a pair of
+   * courts, 3-team and 5-team one, and every group in the unit takes
+   * its turn on it.
+   *
+   * @param {Array} groups
+   * @returns {Array}
+   */
+  layoutFor(groups) {
+    const unit = groups.map(group => ({ id: group.id, teamIds: teamIdsFor(group) }))
+
+    if (groups[0].pool_size === 4) {
+      return fourTeamUnitLayout(unit)
+    }
+
+    if (groups[0].pool_size === 3) {
+      return threeTeamUnitLayout(unit)
+    }
+
+    return unitLayout(unit, {
+      template: GROUP_TEMPLATES[5],
+      matchesFor: group => templateMatches({ teamIds: group.teamIds, groupSize: 5 }),
+    })
+  }
+
+  /**
+   * Lays the chosen groups into the region, turn by turn, exactly as
+   * the planner would place them.
+   *
+   * @param {Array} groups
+   */
+  createSlot(groups, context) {
+    if (!groups.length || !context) {
+      return
+    }
+
+    const layout = this.layoutFor(groups)
+
+    const date = this.selectionDate
+    const rows = this.rowsFor(date)
+    const cells = [...this.selection].map(key => key.split(',').map(Number))
+    const rowIndexes = [...new Set(cells.map(([row]) => row))].sort((a, b) => a - b)
+    const colIndexes = [...new Set(cells.map(([, col]) => col))].sort((a, b) => a - b)
+    const width = Math.max(...layout.map(slot => slot.length))
+
+    if (colIndexes.length < width || rowIndexes.length < layout.length) {
+      return
+    }
+
+    const competitionId = context.competitionId
+
+    for (const [slotIndex, slot] of layout.entries()) {
+      for (let courtIndex = 0; courtIndex < width; courtIndex++) {
+        const court = this.state.courts[colIndexes[courtIndex]]
+        const row = rows[rowIndexes[slotIndex]]
+
+        this.blocks = this.blocks.filter(block =>
+          !(block.court_id === court.id && block.date === date && block.slot === row.key)
+        )
+
+        const entry = slot[courtIndex]
+
+        if (!entry) {
+          continue
+        }
+
+        const group = groups.find(candidate => candidate.id === entry.groupId)
+
+        this.blocks.push({
+          id: null,
+          court_id: court.id,
+          date,
+          slot: row.key,
+          phase: 'group',
+          competition_id: competitionId,
+          division_id: group.division_id,
+          division_name: group.division_name,
+          division_gender: group.division_gender,
+          group_id: group.id,
+          group_name: group.name,
+          match_slot: entry.index,
+        })
+      }
+    }
+
+    this.closeMenu()
+
+    this.dispatchEvent(new CustomEvent('tennis-planning:changed', {
+      bubbles: true,
+      detail: { blocks: this.blocks },
+    }))
+
+    this.render()
+    this.paintSelection()
+  }
+
+  /**
+   * The blocks under the current selection.
+   *
+   * @returns {Array}
+   */
+  selectedBlocks() {
+    if (!this.selectionDate) {
+      return []
+    }
+
+    const rows = this.rowsFor(this.selectionDate)
+
+    return [...this.selection]
+      .map(key => {
+        const [row, col] = key.split(',').map(Number)
+
+        return this.blockAt(this.state.courts[col].id, this.selectionDate, rows[row].key)
+      })
+      .filter(Boolean)
+  }
+
+  /**
+   * Which competition and phase the region is being worked on as:
+   * what is painted there, or - on cells with nothing on them yet -
+   * whatever the menu was told to treat them as.
+   *
+   * @returns {?Object}
+   */
+  selectionContext() {
+    const blocks = this.selectedBlocks()
+    const fixtures = new Set(blocks.map(block => `${block.competition_id}:${block.phase}`))
+
+    if (fixtures.size === 1) {
+      return { competitionId: blocks[0].competition_id, phase: blocks[0].phase }
+    }
+
+    return blocks.length === 0 ? this.menuContext ?? null : null
+  }
+
+  /**
+   * What the region can be told it is: the divisions of its
+   * competition, each with its groups or its rounds.
+   *
+   * @param {?Object} context
+   * @returns {?Array}
+   */
+  identityOptions(context) {
+    const competition = context
+      && this.state.competitions.find(c => c.id === context.competitionId)
+
+    if (!competition) {
+      return null
+    }
+
+    return context.phase === 'knockout'
+      ? this.roundOptions(competition)
+      : this.groupOptions(competition)
+  }
+
+  groupOptions(competition) {
+    const divisions = new Map()
+
+    for (const group of competition.groups ?? []) {
+      if (!divisions.has(group.division_id)) {
+        divisions.set(group.division_id, {
+          id: group.division_id,
+          name: group.division_name,
+          items: [],
+        })
+      }
+
+      divisions.get(group.division_id).items.push({
+        label: `Group ${group.name}`,
+        fixture: {
+          division_id: group.division_id,
+          division_name: group.division_name,
+          division_gender: group.division_gender,
+          group_id: group.id,
+          group_name: group.name,
+          round: null,
+        },
+      })
+    }
+
+    return [...divisions.values()]
+  }
+
+  roundOptions(competition) {
+    return (competition.knockout_rounds_by_division ?? []).map(division => ({
+      id: division.division_id,
+      name: division.division_name,
+      items: division.waves.map(wave => ({
+        label: wave.round,
+        fixture: {
+          division_id: division.division_id,
+          division_name: division.division_name,
+          division_gender: division.division_gender,
+          group_id: null,
+          group_name: null,
+          round: wave.round,
+        },
+      })),
+    }))
+  }
+
+  /**
+   * Opens the menu at the pointer: what the planner would lay into
+   * the region, then the divisions and groups to name it by hand.
+   * Nothing to offer means no menu.
+   *
+   * @param {number} x
+   * @param {number} y
+   */
+  openMenu(x, y) {
+    const menu = this.$('[data-menu]')
+    const context = this.selectionContext()
+
+    menu.replaceChildren()
+
+    if (!context) {
+      this.offerCompetitions(x, y)
+      return
+    }
+
+    const slots = this.slotOptions(context)
+    const identities = this.identityOptions(context) ?? []
+    const painted = this.selectedBlocks().length > 0
+
+    if (!slots.length && !identities.length && !painted) {
+      menu.hidden = true
+      return
+    }
+
+    const list = document.createElement('ul')
+
+    if (slots.length) {
+      const region = this.selectionSize()
+
+      list.appendChild(this.menuSection(
+        `Assign slots (${region.courts} x ${region.slots} selected)`,
+        slots.map(option => {
+          const button = this.menuButton(
+            `${option.teams} team: ${option.label} (needs ${option.courts} x ${option.slots})`,
+            () => this.openSlotPicker(option, context)
+          )
+
+          button.dataset.slotCreate = ''
+          button.disabled = !option.fits
+
+          return button
+        })
+      ))
+    }
+
+    if (identities.length) {
+      list.appendChild(this.menuSection('Manual assignment', identities.map(division => {
+        const button = this.menuButton(division.name, () => this.openManualPicker(division, context))
+
+        button.dataset.menuDivision = division.id
+
+        return button
+      })))
+    }
+
+    if (painted) {
+      const clear = this.menuButton('Clear', () => this.assignIdentity(UNNAMED))
+
+      clear.dataset.menuClear = ''
+      list.appendChild(this.menuSection('', [clear]))
+    }
+
+    menu.appendChild(list)
+    this.showMenu(x, y)
+  }
+
+  /**
+   * A region with nothing on it has no competition to work from, so
+   * the menu asks for one before it can offer anything.
+   *
+   * @param {number} x
+   * @param {number} y
+   */
+  offerCompetitions(x, y) {
+    const menu = this.$('[data-menu]')
+    const entries = this.competitionsForDate(this.selectionDate)
+
+    if (!this.selection.size || !entries.length) {
+      menu.hidden = true
+      return
+    }
+
+    const list = document.createElement('ul')
+
+    list.appendChild(this.menuSection('Which competition', entries.map(({ competition, phase }) => {
+      const button = this.menuButton(
+        `${competition.name} (${phase === 'knockout' ? 'Knockout' : 'Group'})`,
+        () => {
+          this.menuContext = { competitionId: competition.id, phase }
+          this.openMenu(x, y)
+        }
+      )
+
+      button.dataset.menuCompetition = competition.id
+
+      return button
+    })))
+
+    menu.appendChild(list)
+    this.showMenu(x, y)
+  }
+
+  /**
+   * Which groups go in the slot. The planner bundles a fixed number
+   * per court set, so the button waits for exactly that many.
+   *
+   * @param {Object} option
+   * @param {Object} context
+   */
+  openSlotPicker(option, context) {
+    const menu = this.$('[data-menu]')
+    const chosen = new Set()
+
+    const create = this.menuButton('Assign', () => this.createSlot([...chosen], context))
+    create.dataset.slotConfirm = ''
+
+    // A competition can have sixty groups, and the list of them buries
+    // the button. Once the slot has the groups it takes, only those
+    // are left on show.
+    const draw = () => {
+      const full = chosen.size === option.count
+      const shown = full ? [...chosen] : option.groups
+
+      create.disabled = !full
+
+      const boxes = shown.map(group => {
+        const label = document.createElement('label')
+        const box = document.createElement('input')
+
+        box.type = 'checkbox'
+        box.checked = chosen.has(group)
+        box.dataset.slotGroup = group.id
+        box.addEventListener('change', () => {
+          if (box.checked) {
+            chosen.add(group)
+          }
+          else {
+            chosen.delete(group)
+          }
+
+          draw()
+        })
+
+        label.append(box, document.createTextNode(` ${group.division_name} ${group.name}`))
+
+        return label
+      })
+
+      menu.replaceChildren()
+      menu.appendChild(document.createElement('ul')).appendChild(
+        this.menuSection(
+          full
+            ? option.label
+            : `${option.label}: pick ${option.count} ${option.count === 1 ? 'group' : 'groups'}`,
+          [...boxes, create]
+        )
+      )
+    }
+
+    draw()
+    menu.hidden = false
+  }
+
+  /**
+   * Which group or round the region is. One answer, picked the same
+   * way a slot's groups are.
+   *
+   * @param {Object} division
+   */
+  openManualPicker(division, context) {
+    const menu = this.$('[data-menu]')
+    let chosen = null
+
+    const assign = this.menuButton('Assign', () => this.assignIdentity(chosen, context))
+    assign.dataset.menuConfirm = ''
+    assign.disabled = true
+
+    const choices = division.items.map(option => {
+      const label = document.createElement('label')
+      const radio = document.createElement('input')
+
+      radio.type = 'radio'
+      radio.name = 'manual-assign'
+      radio.dataset.menuAssign = option.label
+      radio.addEventListener('change', () => {
+        chosen = option.fixture
+        assign.disabled = false
+      })
+
+      label.append(radio, document.createTextNode(` ${option.label}`))
+
+      return label
+    })
+
+    menu.replaceChildren()
+    menu.appendChild(document.createElement('ul')).appendChild(
+      this.menuSection(division.name, [...choices, assign])
+    )
+
+    menu.hidden = false
+  }
+
+  menuButton(label, onClick) {
+    const button = document.createElement('button')
+
+    button.type = 'button'
+    button.textContent = label
+    button.addEventListener('click', onClick)
+
+    return button
+  }
+
+  menuSection(title, children) {
+    const item = document.createElement('li')
+    const name = document.createElement('strong')
+
+    name.textContent = title
+    item.append(name, ...children)
+
+    return item
+  }
+
+  showMenu(x, y) {
+    const menu = this.$('[data-menu]')
+
+    menu.style.left = `${x}px`
+    menu.style.top = `${y}px`
+    menu.hidden = false
+  }
+
+  closeMenu() {
+    const menu = this.$('[data-menu]')
+
+    menu.hidden = true
+    menu.replaceChildren()
+    this.menuContext = null
+  }
+
+  /**
+   * Names the selection: every block in it becomes this division and
+   * group, or this division and round. The selection stays, so a
+   * region can be renamed without picking it out again.
+   *
+   * @param {Object} fixture
+   */
+  assignIdentity(fixture, context) {
+    const rows = this.rowsFor(this.selectionDate)
+
+    for (const key of this.selection) {
+      const [row, col] = key.split(',').map(Number)
+      const court = this.state.courts[col]
+      const slot = rows[row]
+      const block = this.blockAt(court.id, this.selectionDate, slot.key)
+
+      if (block) {
+        Object.assign(block, fixture)
+        continue
+      }
+
+      // Nothing painted there yet: the menu was told what to treat
+      // the region as, so the cell is made rather than skipped.
+      if (context) {
+        this.blocks.push({
+          id: null,
+          court_id: court.id,
+          date: this.selectionDate,
+          slot: slot.key,
+          phase: context.phase,
+          competition_id: context.competitionId,
+          ...fixture,
+        })
+      }
+    }
+
+    this.closeMenu()
+
+    this.dispatchEvent(new CustomEvent('tennis-planning:changed', {
+      bubbles: true,
+      detail: { blocks: this.blocks },
+    }))
+
+    this.render()
+    this.paintSelection()
+  }
+
   /**
    * How many one-hour matches are currently scheduled for a
    * competition in the given phase, so the legend can show
@@ -438,6 +1170,24 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
     return this.$('[data-always-bye-short-groups]')?.checked ?? false
   }
 
+  /**
+   * Left off the element, the planner's own default stands. "0" is a
+   * real answer, hence no `|| undefined`.
+   *
+   * @returns {?number}
+   */
+  lightBuffer() {
+    const raw = this.getConfig()['light-buffer']
+
+    if (raw == null || String(raw).trim() === '') {
+      return undefined
+    }
+
+    const minutes = Number(raw)
+
+    return Number.isFinite(minutes) && minutes >= 0 ? minutes : undefined
+  }
+
   /**
    * The groups that will be pooled rather than given a court of their
    * own. Worth saying out loud: they are the ones a director can still
@@ -489,6 +1239,7 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
         groupSlotsFromSessions: true,
         darkFrom: this.getConfig()['dark-from'],
         dayEnd: this.getConfig()['day-end'] || undefined,
+        lightBuffer: this.lightBuffer(),
       })
 
       this.blocks = blocks
@@ -566,6 +1317,7 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
     this.$('[data-registration]').hidden = false
     this.$('[data-always-bye]').hidden = false
     this.$('[data-view-toggle]').hidden = false
+    this.$('[data-narrow-toggle]').hidden = false
 
     // The plan as data, for reading rather than looking at.
     const showData = this.$('[data-show-data]').checked
@@ -646,6 +1398,12 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
     // re-renders the whole schedule, and without this it would always
     // snap back to the first day.
     const activeDate = container.querySelector('semtic-tabbed')?.getAttribute('current')
+    // A day scrolls inside its own tab, and that tab is thrown away
+    // here, so a director working on court 30 would be handed back
+    // court 1 after every assignment.
+    const wasAt = this.scrollPosition(
+      container.querySelector(`semtic-tab[tab="${activeDate}"]`)
+    )
 
     container.replaceChildren()
 
@@ -701,6 +1459,33 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
     tabbed.addEventListener('semtic-tabbed:activated', event => buildDay(event.detail.tab))
 
     container.appendChild(tabbed)
+    this.scrollBackTo(tabbed.querySelector(`:scope > semtic-tab[tab="${initial}"]`), wasAt)
+  }
+
+  scrollPosition(tab) {
+    const view = this.ownerDocument?.defaultView
+
+    return {
+      left: tab?.scrollLeft ?? 0,
+      top: tab?.scrollTop ?? 0,
+      pageX: view?.scrollX ?? 0,
+      pageY: view?.scrollY ?? 0,
+    }
+  }
+
+  scrollBackTo(tab, wasAt) {
+    if (tab) {
+      tab.scrollLeft = wasAt.left
+      tab.scrollTop = wasAt.top
+    }
+
+    const view = this.ownerDocument?.defaultView
+
+    // Only when it actually moved: asking otherwise is how a board
+    // ends up fighting whatever else is scrolling the page.
+    if (view && (view.scrollX !== wasAt.pageX || view.scrollY !== wasAt.pageY)) {
+      view.scrollTo?.(wasAt.pageX, wasAt.pageY)
+    }
   }
 
   /**
@@ -772,6 +1557,8 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
       competitions: this.state.competitions ?? [],
       cells: this.blocks,
       fallbackSlots: this.state.slots ?? [],
+      darkFromMinutes: toMinutes(this.getConfig()['dark-from']),
+      lightBufferMinutes: this.lightBuffer() ?? 0,
     })
   }
 
@@ -875,106 +1662,144 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
    * canvas is continuous, the cells on it are not.
    */
   dayForDate(date) {
-    const day = document.createElement('planning-day')
-    day.dataset.day = date
-    day.setAttribute('date', date)
-
+    const grid = document.createElement(TennisDayGridElement.tag)
     const rows = this.rowsFor(date)
-    const range = this.dayRangeFor(rows)
 
-    day.style.setProperty('--planning-day-height', `${this.pxFor(range.end - range.start)}px`)
+    grid.addEventListener('day-grid:press', event => this.pressed(event.detail))
+    grid.addEventListener('day-grid:enter', event => this.entered(event.detail))
+    grid.addEventListener('day-grid:menu', event => this.rightClicked(event.detail))
 
-    day.appendChild(this.timeColumn(rows, range))
-
-    this.state.courts.forEach((court, courtIndex) => {
-      day.appendChild(this.courtColumn(court, courtIndex, date, rows, range))
+    grid.draw({
+      date,
+      courts: this.state.courts,
+      rows,
+      cellFor: (court, courtIndex, slot) => this.cellFor(court, date, slot),
+      compact: this.$('[data-narrow-empty]')?.checked ?? false,
     })
 
-    return day
+    this.markRuns(grid, date, rows)
+
+    return grid
   }
 
   /**
-   * Minutes of the day, in pixels on the timeline.
+   * What Planning puts in a cell: nothing on a court that may not
+   * take this hour, and otherwise whatever is booked there.
+   *
+   * @param {Object} court
+   * @param {string} date
+   * @param {Object} slot
+   * @returns {Object}
    */
-  pxFor(minutes) {
-    return minutes * PX_PER_MINUTE
+  cellFor(court, date, slot) {
+    if (!this.isSelectable(court, slot)) {
+      return { blocked: true }
+    }
+
+    const block = this.blockAt(court.id, date, slot.key)
+
+    return {
+      minutes: block ? this.blockDurationMinutes(block, date) : undefined,
+      content: block ? this.matchElement(block) : null,
+      filled: Boolean(block),
+    }
   }
 
   /**
-   * 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.
+   * A press on the grid: on a match already picked out it takes hold
+   * of it, and anywhere else it starts a selection.
+   *
+   * @param {Object} where
    */
-  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`)
-
-    rows.forEach(slot => {
-      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
-      body.appendChild(time)
-    })
+  pressed({ date, row, col, onContent, button, ctrlKey }) {
+    // A mac's ctrl-click is a right-click, and its mousedown lands
+    // first. Acting on it would throw away the very region the menu
+    // is about to work on.
+    if (button === 2 || ctrlKey) {
+      return
+    }
 
-    column.appendChild(body)
+    const mine = this.selectionDate === date && this.selection.has(this.cellKey(row, col))
 
-    return column
-  }
+    if (onContent && mine) {
+      this.startDrag(date, row, col)
 
-  courtColumn(court, courtIndex, date, rows, range) {
-    const column = document.createElement('planning-court')
-    column.setAttribute('court', court.name)
-    column.dataset.courtId = court.id
+      return
+    }
+
+    this.startSelection(date, row, col)
+  }
 
-    if (court.lit) {
-      column.setAttribute('lit', '')
+  entered({ date, row, col }) {
+    if (this.isSelecting && this.selectionDate === date) {
+      this.updateSelection(row, col)
     }
 
-    if (court.pro) {
-      column.setAttribute('pro', '')
+    if (this.drag?.date === date) {
+      this.drag.over = { row, col }
+      this.showDrag()
     }
+  }
 
-    const heading = document.createElement('planning-court-name')
-    heading.textContent = court.name
-    column.appendChild(heading)
+  /**
+   * Right-clicking outside the painted region takes that one cell
+   * rather than doing nothing.
+   *
+   * @param {Object} where
+   */
+  rightClicked({ date, row, col, x, y }) {
+    if (this.selectionDate !== date || !this.selection.has(this.cellKey(row, col))) {
+      this.startSelection(date, row, col)
+      this.isSelecting = false
+    }
 
-    const body = document.createElement('planning-rows')
-    body.style.setProperty('--planning-day-height', `${this.pxFor(range.end - range.start)}px`)
+    this.openMenu(x, y)
+  }
 
-    // A row's own span is only ever the finest clock running that day
-    // (see rowsFor) - a real match longer than that (Team Cup's 90
-    // minutes among someone else's 45) draws its own slot taller
-    // instead, covering however many of these rows its real length
-    // reaches. Those covered rows are this court's alone to skip - a
-    // different court still gets its own row here, whatever its own
-    // match (or lack of one) actually needs.
-    let coveredUntil = -Infinity
+  /**
+   * A slot is a run of cells down one court, all of one division. The
+   * first and last of a run say so, so the stylesheet can close a
+   * border round the whole thing rather than round every cell.
+   *
+   * @param {Array} placed
+   */
+  markRuns(grid, date, rows) {
+    const together = (a, b) => Boolean(a) && Boolean(b)
+      && a.competition_id === b.competition_id
+      && a.division_id === b.division_id
+      && a.phase === b.phase
+
+    for (const column of grid.columns()) {
+      const placed = column.cells.map(({ element, row }) => ({
+        element,
+        block: row == null ? null : this.blockAt(column.courtId, date, rows[row].key),
+      }))
 
-    rows.forEach((slot, rowIndex) => {
-      if (slot.start_minutes < coveredUntil) {
-        return
-      }
+      // Zebra down the run: a slot hands the court from one group to
+      // the next every turn, and striping those turns is what shows
+      // where each turn starts.
+      let turn = 0
 
-      const element = this.slotElement(court, date, slot, rowIndex, courtIndex, range)
-      body.appendChild(element)
+      placed.forEach(({ element, block }, index) => {
+        const match = element.querySelector('planning-match')
 
-      const spanEnd = Number(element.dataset.spanEnd)
+        if (!match) {
+          return
+        }
 
-      if (!Number.isNaN(spanEnd)) {
-        coveredUntil = spanEnd
-      }
-    })
+        if (!together(placed[index - 1]?.block, block)) {
+          match.setAttribute('run-start', '')
+          turn = 0
+        }
 
-    column.appendChild(body)
+        if (!together(block, placed[index + 1]?.block)) {
+          match.setAttribute('run-end', '')
+        }
 
-    return column
+        match.style.setProperty('--group-wash', turn % 2 === 0 ? 0 : -WASH_STEP)
+        turn += 1
+      })
+    }
   }
 
   /**
@@ -991,48 +1816,6 @@ export class TennisPlanningBoardElement extends HTMLElementSugar {
     return session?.playtime ?? FALLBACK_SLOT_MINUTES
   }
 
-  slotElement(court, date, slot, rowIndex, courtIndex, range) {
-    const element = document.createElement('planning-slot')
-    const block = this.blockAt(court.id, date, slot.key)
-    const duration = block
-      ? this.blockDurationMinutes(block, date)
-      : 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(duration)}px`
-
-    if (slot.start_minutes != null) {
-      element.setAttribute('duration', duration)
-      element.dataset.spanEnd = slot.start_minutes + duration
-    }
-
-    if (!this.isSelectable(court, slot)) {
-      element.setAttribute('blocked', '')
-      return element
-    }
-
-    element.dataset.row = rowIndex
-    element.dataset.col = courtIndex
-
-    element.addEventListener('mousedown', event => {
-      event.preventDefault()
-      this.startSelection(date, rowIndex, courtIndex)
-    })
-
-    element.addEventListener('mouseenter', () => {
-      if (this.isSelecting && this.selectionDate === date) {
-        this.updateSelection(rowIndex, courtIndex)
-      }
-    })
-
-    if (block) {
-      element.appendChild(this.matchElement(block))
-    }
-
-    return element
-  }
-
   /**
    * What is played in a slot. Everything Planning has decided about it
    * is an attribute, so the booking can be read straight off the DOM.