@opndev/tennis-match-center 0.0.1

package/lib/components/roster-board.mjs

@@ -0,0 +1,273 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { HTMLElementSugar } from '@skirbi/sugar'
+import { seedGroups, groupName } from '../roster-seeding.mjs'
+
+/**
+ * <tennis-roster-board api="..." save-api="...">
+ *
+ * Gate 1: Group Creation (spec.md). Loads confirmed teams and any saved
+ * groups from `api`, runs the seeding algorithm entirely client-side,
+ * and only ever mutates the in-browser copy until Save is pressed.
+ */
+export class TennisRosterBoardElement extends HTMLElementSugar {
+  static tag = 'tennis-roster-board'
+  static renderGuardSelector = '[data-columns]'
+
+  static attributeDefs = {
+    api: {},
+    'save-api': {},
+    'csrf-token': {},
+  }
+
+  static HtmlTemplate = ['tennis-roster-board-template', function () {
+    return this.tpl(`
+      <div>
+        <p data-status>Loading…</p>
+        <div data-toolbar hidden>
+          <label>
+            Pool size
+            <select data-pool-size>
+              <option value="3">3</option>
+              <option value="4">4</option>
+              <option value="5">5</option>
+            </select>
+          </label>
+          <button data-prefill type="button">Prefill</button>
+          <button data-clear type="button">Clear</button>
+          <button data-reset type="button">Reset from database</button>
+          <button data-save type="button">Save</button>
+        </div>
+        <div data-columns></div>
+      </div>
+    `)
+  }]
+
+  async connectedCallback() {
+    super.connectedCallback()
+
+    // Guard the one-time DOM setup, but always (re)fetch and render
+    // below. A morph-driven insertion can disconnect/reconnect this
+    // element once synchronously right after creation; if fetch were
+    // also skipped on the second connect, whichever instance ends up
+    // permanently live would never get real data.
+    if (!this.hasRenderedShape()) {
+      this.appendChild(this.renderFromTemplate())
+    }
+
+    if (!this._listenersBound) {
+      this._listenersBound = true
+
+      this.addEventListener('roster-team-group-change', event => {
+        this.moveTeamToGroup(event.detail.teamId, event.detail.groupName)
+      })
+
+      this.$('[data-pool-size]').addEventListener('change', event => {
+        this.poolSize = Number(event.target.value)
+        // Otherwise changing this silently does nothing visible until
+        // a separate Prefill click - re-seed immediately so the group
+        // columns actually reflect the new size right away. Nothing is
+        // persisted until Save either way.
+        this.prefill()
+      })
+
+      this.$('[data-prefill]').addEventListener('click', () => this.prefill())
+      this.$('[data-clear]').addEventListener('click', () => this.clear())
+      this.$('[data-reset]').addEventListener('click', () => this.resetFromDatabase())
+      this.$('[data-save]').addEventListener('click', () => this.save())
+    }
+
+    // That same double-connect means two of these fetches can be in
+    // flight at once. Without this token, whichever one resolves last
+    // wins - including a stray first-connect fetch resolving *after*
+    // the user has already clicked Prefill using the second connect's
+    // data, silently discarding it. Only the fetch started by the most
+    // recent connectedCallback call is allowed to apply its result.
+    const requestId = (this._fetchGeneration = (this._fetchGeneration ?? 0) + 1)
+
+    const { api } = this.getConfig()
+
+    const response = await fetch(api, {
+      headers: { Accept: 'application/json' },
+    })
+
+    const data = await response.json()
+
+    if (requestId !== this._fetchGeneration) {
+      return
+    }
+
+    this.saved = data
+    this.poolSize = this.saved.groups[0]?.pool_size ?? 4
+    this.groups = this.saved.groups.map(group => ({ ...group }))
+
+    this.$('[data-pool-size]').value = String(this.poolSize)
+
+    this.render()
+  }
+
+  unassignedTeams() {
+    const assigned = new Set(this.groups.flatMap(group => group.team_ids))
+
+    return this.saved.teams.filter(team => !assigned.has(team.id))
+  }
+
+  prefill() {
+    const groupCount = Math.max(1, Math.ceil(this.saved.teams.length / this.poolSize))
+    const seeded = seedGroups(this.saved.teams, groupCount)
+
+    this.groups = seeded.map((teamIds, index) => ({
+      id: null,
+      name: groupName(index),
+      pool_size: this.poolSize,
+      team_ids: teamIds,
+    }))
+
+    this.render()
+  }
+
+  clear() {
+    this.groups = []
+    this.render()
+  }
+
+  resetFromDatabase() {
+    this.groups = this.saved.groups.map(group => ({ ...group }))
+    this.render()
+  }
+
+  moveTeamToGroup(teamId, targetGroupName) {
+    for (const group of this.groups) {
+      group.team_ids = group.team_ids.filter(id => id !== teamId)
+    }
+
+    if (targetGroupName) {
+      const group = this.groups.find(item => item.name === targetGroupName)
+
+      if (group) {
+        group.team_ids.push(teamId)
+      }
+    }
+
+    this.dispatchEvent(new CustomEvent('tennis-roster:changed', {
+      bubbles: true,
+      detail: { groups: this.groups },
+    }))
+
+    this.render()
+  }
+
+  render() {
+    this.$('[data-status]').hidden = true
+    this.$('[data-toolbar]').hidden = false
+
+    const columns = this.$('[data-columns]')
+    columns.replaceChildren()
+
+    columns.appendChild(this.columnFor(null, this.unassignedTeams()))
+
+    for (const group of this.groups) {
+      const teams = group.team_ids
+        .map(id => this.saved.teams.find(team => team.id === id))
+        .filter(Boolean)
+
+      columns.appendChild(this.columnFor(group.name, teams))
+    }
+  }
+
+  columnFor(currentGroupName, teams) {
+    const column = document.createElement('div')
+
+    column.dataset.group = currentGroupName ?? ''
+
+    column.addEventListener('dragover', event => {
+      event.preventDefault()
+      event.dataTransfer.dropEffect = 'move'
+      column.dataset.dragover = ''
+    })
+
+    column.addEventListener('dragleave', () => {
+      delete column.dataset.dragover
+    })
+
+    column.addEventListener('drop', event => {
+      event.preventDefault()
+      delete column.dataset.dragover
+
+      const teamId = Number(event.dataTransfer.getData('text/plain'))
+
+      if (Number.isFinite(teamId)) {
+        this.moveTeamToGroup(teamId, currentGroupName)
+      }
+    })
+
+    const heading = document.createElement('h3')
+    heading.textContent = currentGroupName ? `Group ${currentGroupName}` : 'Unassigned'
+    column.appendChild(heading)
+
+    const count = document.createElement('span')
+    count.dataset.count = ''
+    count.textContent = String(teams.length)
+    heading.appendChild(count)
+
+    const list = document.createElement('div')
+    list.dataset.list = ''
+    column.appendChild(list)
+
+    const groupNames = this.groups.map(group => group.name)
+
+    for (const team of teams) {
+      const element = document.createElement('tennis-roster-team')
+
+      element.team = team
+      element.groupNames = groupNames
+      element.currentGroupName = currentGroupName
+
+      list.appendChild(element)
+    }
+
+    return column
+  }
+
+  async save() {
+    const config = this.getConfig()
+
+    const groups = this.groups.map(group => ({
+      ...group,
+      pool_size: this.poolSize,
+    }))
+
+    const response = await fetch(config['save-api'], {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': config['csrf-token'],
+      },
+      body: JSON.stringify({ groups }),
+    })
+
+    const body = await response.json()
+
+    if (!response.ok) {
+      this.dispatchEvent(new CustomEvent('tennis-roster:save-error', {
+        bubbles: true,
+        detail: body,
+      }))
+      return
+    }
+
+    this.saved = body
+    this.groups = this.saved.groups.map(group => ({ ...group }))
+
+    this.dispatchEvent(new CustomEvent('tennis-roster:save', {
+      bubbles: true,
+      detail: { state: this.saved },
+    }))
+
+    this.render()
+  }
+}
+

package/lib/components/roster-team.mjs

@@ -0,0 +1,92 @@
+// SPDX-FileCopyrightText: 2026 Wesley Schwengle <wesley@opndev.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { HTMLElementSugar } from '@skirbi/sugar'
+
+/**
+ * One team entry in the Roster board. Draggable between groups (see
+ * "Manual Override" in spec.md); the select is kept as an equivalent,
+ * keyboard/screen-reader-reachable way to do the same move.
+ */
+export class TennisRosterTeamElement extends HTMLElementSugar {
+  static tag = 'tennis-roster-team'
+  static HtmlTemplate = ['tennis-roster-team-template', function () {
+    return this.tpl(`
+      <article data-card>
+        <p data-label></p>
+        <select data-group></select>
+      </article>
+    `)
+  }]
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.appendChild(this.renderFromTemplate())
+
+    this.$('[data-group]').addEventListener('change', event => {
+      this.dispatchEvent(new CustomEvent('roster-team-group-change', {
+        bubbles: true,
+        detail: {
+          teamId: this.team.id,
+          groupName: event.target.value || null,
+        },
+      }))
+    })
+
+    this.draggable = true
+
+    this.addEventListener('dragstart', event => {
+      event.dataTransfer.setData('text/plain', String(this.team.id))
+      event.dataTransfer.effectAllowed = 'move'
+      this.dataset.dragging = ''
+    })
+
+    this.addEventListener('dragend', () => {
+      delete this.dataset.dragging
+    })
+
+    this.render()
+  }
+
+  render() {
+    this.dataset.teamId = this.team.id
+
+    this.$('[data-label]').textContent = this.label()
+
+    const select = this.$('[data-group]')
+    select.replaceChildren()
+
+    const unassigned = document.createElement('option')
+    unassigned.value = ''
+    unassigned.textContent = 'Unassigned'
+    unassigned.selected = !this.currentGroupName
+    select.appendChild(unassigned)
+
+    for (const groupName of this.groupNames) {
+      const option = document.createElement('option')
+
+      option.value = groupName
+      option.textContent = `Group ${groupName}`
+      option.selected = groupName === this.currentGroupName
+
+      select.appendChild(option)
+    }
+  }
+
+  label() {
+    const parts = [this.team.display_name]
+
+    if (this.team.country) {
+      parts.push(this.team.country)
+    }
+
+    if (this.team.age != null) {
+      parts.push(`${this.team.age}y`)
+    }
+
+    return parts.join(' · ')
+  }
+}
+