cuju-render 0.1.0__py3-none-any.whl

cuju/render/web/js/pages/moments-ui.js

@@ -0,0 +1,359 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// The search of moments across the library, a panel of the Recordings page and entries of the
+// command palette. A query goes to the server's index, `GET /api/search?q=`, in the small query
+// language of the guide, such as `goal team:Greens after:60`, and the filters of the panel add
+// their terms to it. A result opens Watch a few seconds before its moment.
+
+import { formatDate } from '../core/api.js';
+import { hiddenRecording } from '../core/spoilers.js';
+import { serverNodes, serverText, t, tn } from '../core/i18n.js';
+import { enhanceSelect } from '../core/menu.js';
+import { icon } from '../core/icons.js';
+import { composeQuery, looksLikeMoments as looksMoments } from '../recording/moments-query.js';
+
+export { KIND_WORDS, composeQuery, looksLikeMoments } from '../recording/moments-query.js';
+
+// The day a number of days before now, as the query language takes dates.
+function daysAgo(days) {
+    const d = new Date(Date.now() - days * 864e5);
+    const pad = (x) => String(x).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+// The choices of each filter, each a value of the query language with the message of its label,
+// whose id ends in the value with its colons as dots, or in any for the empty value.
+const choices = (group, values) => values.map((v) => [v, t(`moments.${group}.${v.replace(/:/g, '.') || 'any'}`)]);
+const KIND_CHOICES = choices('kind', ['', 'goal', 'shot', 'save', 'block', 'pass', 'tackle', 'card', 'foul', 'offside',
+    'set-piece', 'corner', 'free-kick', 'penalty', 'throw-in', 'possession', 'woodwork']);
+const TIME_CHOICES = choices('time', ['', 'before:45', 'after:45', 'after:75', 'before:15']);
+const SCORE_CHOICES = choices('score', ['', 'leading', 'level', 'trailing']);
+const SOURCE_CHOICES = choices('source', ['', 'requested', 'game', 'tournament', 'challenge', 'recorder', 'live']);
+const DATE_CHOICES = choices('date', ['', '0', '7', '30']);
+
+function el(tag, attributes = {}, ...children) {
+    const node = document.createElement(tag);
+    for (const [key, value] of Object.entries(attributes)) {
+        if (key.startsWith('on') && typeof value === 'function') {
+            node.addEventListener(key.slice(2), value);
+        } else if (value !== null && value !== undefined && value !== false) {
+            node.setAttribute(key, value === true ? '' : value);
+        }
+    }
+    node.append(...children.flat().filter((c) => c !== null && c !== undefined));
+    return node;
+}
+
+async function fetchSearch(query, limit, signal = undefined) {
+    const res = await fetch(`/api/search?q=${encodeURIComponent(query)}&limit=${limit}`, { cache: 'no-store', signal });
+    const body = await res.json().catch(() => ({}));
+    if (!res.ok) {
+        const error = new Error(body.error ? serverText(body) : t('moments.serverStatus', { status: res.status }));
+        // The answer itself, whose message shows with its marks, such as a filter as code.
+        error.answer = body.error ? body : null;
+        throw error;
+    }
+    // A moment of an unwatched match of a tournament without spoilers stays out of the hits.
+    if (body && Array.isArray(body.results)) {
+        body.results = body.results.filter((hit) => !hiddenRecording(hit.match));
+    }
+    return body;
+}
+
+// Opens Watch a few seconds before a moment, seeking in place when its recording is open.
+export function openMoment(app, result) {
+    const tl = app.timeline;
+    if (app.source && app.source.kind === 'match' && app.source.id === result.match && tl) {
+        app.showPage('watch');
+        if (app.director) {
+            app.director.stop(false);
+        }
+        tl.seek(tl.first + result.seek * tl.sps);
+        app.afterSeek();
+        if (app.updatePlayUi) {
+            app.updatePlayUi();
+        }
+        app.updateHash(true);
+        return;
+    }
+    app.openMatch(result.match, result.seek);
+}
+
+export class MomentSearch {
+    constructor(app) {
+        this.app = app;
+        this.text = '';
+        this.filters = { kind: '', team: '', player: '', scenario: '', source: '', since: '', score: '', time: '' };
+        this.date = '';
+        this.open = false;
+        this.results = null;
+        this.error = null;
+        this.token = 0;
+        this.timer = null;
+        this.palette = { query: null, results: [], busy: false };
+    }
+
+    // The query of the panel as it stands.
+    query() {
+        return composeQuery(this.text, { ...this.filters, since: this.date === '' ? '' : daysAgo(Number(this.date)) });
+    }
+
+    // A select of the filters, which shows a symbol where one reads clearly and its label otherwise.
+    select(label, choices, value, pick, symbol = null) {
+        const node = el('select', { 'aria-label': label }, choices.map(([v, t]) => el('option', { value: v }, t)));
+        node.value = value;
+        node.addEventListener('change', () => pick(node.value));
+        queueMicrotask(() => enhanceSelect(node, symbol ? { label, icon: symbol } : { label, prefix: label }));
+        return node;
+    }
+
+    // Builds the panel into a host of the Recordings page.
+    mount(host, scenarios = [], teams = []) {
+        this.host = host;
+        this.toggle = el('button', {
+            type: 'button', class: 'btn', id: 'moments-toggle', 'aria-expanded': this.open ? 'true' : 'false',
+            'aria-controls': 'moments-panel', onclick: () => this.setOpen(!this.open),
+        }, icon('search'), t('moments.toggle'));
+        this.input = el('input', {
+            type: 'search', id: 'moments-query', class: 'search', value: this.text, spellcheck: 'false',
+            'aria-label': t('moments.query.label'), placeholder: t('moments.query.placeholder'),
+            'aria-describedby': 'moments-help',
+        });
+        this.input.addEventListener('input', () => {
+            this.text = this.input.value;
+            this.schedule();
+        });
+        this.input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.run();
+            } else if (e.key === 'ArrowDown' && this.list && this.list.firstElementChild) {
+                e.preventDefault();
+                this.list.firstElementChild.focus();
+            }
+        });
+        const pick = (key) => (value) => {
+            this.filters[key] = value;
+            this.run();
+        };
+        const player = el('input', {
+            type: 'text', id: 'moments-player', class: 'small-input', value: this.filters.player,
+            'aria-label': t('moments.player'), placeholder: t('moments.player'), spellcheck: 'false',
+        });
+        player.addEventListener('input', () => {
+            this.filters.player = player.value;
+            this.schedule();
+        });
+        const filters = el('div', { class: 'filter-bar moments-filters' },
+            this.select(t('moments.filter.kind'), KIND_CHOICES, this.filters.kind, pick('kind')),
+            this.select(t('moments.filter.team'), [['', t('moments.team.any')], ['left', t('moments.team.left')],
+                ['right', t('moments.team.right')], ...teams.map((name) => [name, name])], this.filters.team, pick('team'), 'shirt'),
+            player,
+            this.select(t('moments.filter.time'), TIME_CHOICES, this.filters.time, pick('time'), 'clock'),
+            this.select(t('moments.filter.score'), SCORE_CHOICES, this.filters.score, pick('score')),
+            this.select(t('moments.filter.scenario'), [['', t('moments.scenario.any')], ...scenarios.map(([v, name]) => [v, name])],
+                this.filters.scenario, pick('scenario'), 'field'),
+            this.select(t('moments.filter.source'), SOURCE_CHOICES, this.filters.source, pick('source')),
+            this.select(t('moments.filter.date'), DATE_CHOICES, this.date, (v) => {
+                this.date = v;
+                this.run();
+            }, 'calendar'));
+        this.status = el('p', { class: 'muted small moments-status', role: 'status', 'aria-live': 'polite' });
+        this.list = el('ul', { class: 'moments-list', id: 'moments-results', 'aria-label': t('moments.results') });
+        this.list.addEventListener('keydown', (e) => this.onListKey(e));
+        this.panel = el('section', { id: 'moments-panel', class: 'moments-panel', 'aria-label': t('moments.panel'), hidden: !this.open },
+            el('div', { class: 'toolbar' }, this.input, filters),
+            el('p', { id: 'moments-help', class: 'muted small' },
+                tn('moments.help')),
+            this.status, this.list);
+        host.replaceChildren(this.panel);
+        this.renderResults();
+        return this.toggle;
+    }
+
+    setOpen(open, focus = true) {
+        this.open = !!open;
+        if (this.panel) {
+            this.panel.hidden = !this.open;
+        }
+        if (this.toggle) {
+            this.toggle.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+        }
+        if (this.open) {
+            this.run();
+            if (focus && this.input) {
+                this.input.focus();
+            }
+        }
+    }
+
+    // Shows the panel with a query, from the palette or the Match menu.
+    show(text) {
+        this.text = text;
+        this.app.showPage('recordings');
+        const apply = () => {
+            if (this.input) {
+                this.input.value = text;
+            }
+            this.setOpen(true);
+        };
+        if (this.panel && this.panel.isConnected) {
+            apply();
+        } else {
+            setTimeout(apply, 0);
+        }
+    }
+
+    schedule() {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => this.run(), 250);
+    }
+
+    async run() {
+        clearTimeout(this.timer);
+        if (!this.open) {
+            return;
+        }
+        const token = ++this.token;
+        const query = this.query();
+        // An empty query names every moment of the library, so the panel waits for a word or a
+        // filter and lists nothing until then.
+        if (!query.trim()) {
+            this.results = null;
+            this.error = null;
+            this.renderResults();
+            if (this.status) {
+                this.status.textContent = t('moments.status.empty');
+            }
+            return;
+        }
+        if (this.status) {
+            this.status.textContent = t('moments.status.searching');
+        }
+        // A newer query cancels the request of an older one, which frees its connection.
+        if (this.request) {
+            this.request.abort();
+        }
+        const request = (this.request = new AbortController());
+        try {
+            const found = await fetchSearch(query, 200, request.signal);
+            if (token !== this.token) {
+                return;
+            }
+            this.results = found;
+            this.error = null;
+        } catch (err) {
+            if (token !== this.token) {
+                return;
+            }
+            this.results = null;
+            this.error = err.message;
+            this.errorAnswer = err.answer || null;
+        }
+        this.renderResults();
+    }
+
+    renderResults() {
+        if (!this.list) {
+            return;
+        }
+        if (this.error) {
+            this.status.replaceChildren(...(this.errorAnswer ? serverNodes(this.errorAnswer) : [this.error]));
+            this.list.replaceChildren();
+            return;
+        }
+        const found = this.results;
+        if (!found) {
+            this.status.textContent = '';
+            this.list.replaceChildren();
+            return;
+        }
+        const shown = found.results.length;
+        const recordings = t('moments.status.recordings', { count: found.recordings });
+        this.status.textContent = found.total === 0 ? t('moments.status.none', { recordings })
+            : t(shown < found.total ? 'moments.status.foundFirst' : 'moments.status.found', { count: found.total, recordings, shown });
+        this.list.replaceChildren(...found.results.map((r) => el('li', {
+            class: 'moment-row', tabindex: '-1', role: 'button', 'data-match': r.match, 'data-kind': r.kind,
+            'aria-label': t('moments.result', { text: serverText(r, 'text'), minute: r.minute, title: serverText(r, 'title') }),
+            onclick: () => openMoment(this.app, r),
+        }, el('span', { class: 'moment-minute' }, r.minute),
+        el('span', { class: 'moment-text' }, serverText(r, 'text')),
+        el('span', { class: 'moment-match muted small' }, [serverText(r, 'title'), formatDate(r.created)].filter(Boolean).join(', ')))));
+        const first = this.list.firstElementChild;
+        if (first) {
+            first.tabIndex = 0;
+        }
+    }
+
+    onListKey(e) {
+        const row = e.target.closest('.moment-row');
+        if (!row) {
+            return;
+        }
+        const rows = [...this.list.children];
+        const at = rows.indexOf(row);
+        const go = (i) => {
+            const next = rows[Math.max(0, Math.min(rows.length - 1, i))];
+            for (const r of rows) {
+                r.tabIndex = -1;
+            }
+            next.tabIndex = 0;
+            next.focus();
+        };
+        if (e.key === 'ArrowDown') {
+            go(at + 1);
+        } else if (e.key === 'ArrowUp') {
+            if (at === 0) {
+                this.input.focus();
+            } else {
+                go(at - 1);
+            }
+        } else if (e.key === 'Home') {
+            go(0);
+        } else if (e.key === 'End') {
+            go(rows.length - 1);
+        } else if (e.key === 'Enter' || e.key === ' ') {
+            row.click();
+        } else {
+            return;
+        }
+        e.preventDefault();
+    }
+
+    // The entries of the palette for a typed line, the moments found for it, best first, and one
+    // that opens the panel with it. The search runs in the background, and refresh draws the
+    // palette again when it answers.
+    paletteActions(query, refresh) {
+        if (!looksMoments(query)) {
+            return [];
+        }
+        const text = query.trim();
+        const keywords = `${text} ${t('moments.palette.keywords')}`;
+        const list = [{
+            group: t('moments.palette.group'), title: t('moments.palette.search', { query: text }), keywords, hint: t('moments.palette.hint'),
+            run: () => this.show(text),
+        }];
+        const state = this.palette;
+        if (state.query !== text) {
+            state.query = text;
+            state.results = [];
+            clearTimeout(state.timer);
+            state.timer = setTimeout(() => {
+                fetchSearch(text, 8).then((found) => {
+                    if (state.query === text) {
+                        state.results = found.results;
+                        refresh();
+                    }
+                }).catch(() => {});
+            }, 200);
+        }
+        for (const r of state.results) {
+            list.push({
+                group: t('moments.palette.group'), title: `${r.minute}  ${serverText(r, 'text')}`, keywords, hint: serverText(r, 'title'),
+                run: () => openMoment(this.app, r),
+            });
+        }
+        return list;
+    }
+}

cuju/render/web/js/pages/queue-filters.js

@@ -0,0 +1,63 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// The Team and Scenario filters of the list of requested matches on the Matches page, what they
+// offer and which requests they keep. A part drawn at random stays out of them while its match
+// waits, as the list shows it as Random, so no filter tells what the draw picked before the match
+// starts. The module touches no page, so the Node tests run it alone.
+
+import { hiddenPart } from './draw.js';
+
+// The teams of a request that the list shows by name, null for a side that shows as Random.
+export function shownTeams(r) {
+    return [hiddenPart(r, 'left') ? null : r.left, hiddenPart(r, 'right') ? null : r.right];
+}
+
+// The scenario of a request that the list shows by name, null while it shows as Random.
+export function shownScenario(r) {
+    return hiddenPart(r, 'scenario') ? null : r.scenario;
+}
+
+// The teams that the Team filter offers, those the list shows by name. They come in the order of
+// the registry, the order of the team lists of a new match, so they keep their places as requests
+// come and go, and a team that the registry no longer holds comes after them.
+export function filterTeams(requests, teams) {
+    const named = new Set(requests.flatMap(shownTeams).filter((id) => typeof id === 'string'));
+    const known = new Set(teams.map((x) => x.id));
+    return [...teams.map((x) => x.id).filter((id) => named.has(id)), ...[...named].filter((id) => !known.has(id))];
+}
+
+// The scenarios that the Scenario filter offers, those the list shows by name, in order.
+export function filterScenarios(requests) {
+    return [...new Set(requests.map(shownScenario).filter((sc) => typeof sc === 'string'))].sort();
+}
+
+// The values of the filters, Every team and Every scenario as ALL, and each team or scenario
+// after a prefix, so a team or a scenario whose name is the word all never reads as every one.
+export const ALL = 'all';
+
+export function teamValue(id) {
+    return `team:${id}`;
+}
+
+export function scenarioValue(name) {
+    return `scenario:${name}`;
+}
+
+// Whether a request passes the Team filter and the Scenario filter by their values, ALL passing
+// every request.
+export function passesTeam(r, value) {
+    return value === ALL || shownTeams(r).some((id) => id !== null && teamValue(id) === value);
+}
+
+export function passesScenario(r, value) {
+    const scenario = shownScenario(r);
+    return value === ALL || (scenario !== null && scenarioValue(scenario) === value);
+}
+
+// The teams that the requests name and the registry does not hold, a team added since the page
+// loaded the registry or one removed since.
+export function unknownTeams(requests, teams) {
+    const known = new Set(teams.map((x) => x.id));
+    return [...new Set(requests.flatMap((r) => [r.left, r.right]))].filter((id) => typeof id === 'string' && !known.has(id));
+}

cuju/render/web/js/pages/recording-groups.js

@@ -0,0 +1,80 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// The groups of the Recordings page. The recordings of one run of a challenge share a group, which
+// the table shows as one row that names the challenge, the competitor and the run's result, and
+// which opens to the rows of its attempts. This module reads summaries alone, so Node tests it.
+
+// The group of a summary, or null for a recording outside any group.
+export function groupOf(summary) {
+    const group = summary && summary.group;
+    return group && typeof group === 'object' && typeof group.id === 'string' && group.id ? group : null;
+}
+
+function attemptOf(summary) {
+    const attempt = groupOf(summary).attempt;
+    return Number.isInteger(attempt) ? attempt : 0;
+}
+
+// The items of the table for rows already filtered and sorted. A recording outside a group is
+// { kind: 'recording', recording }, and a group is { kind: 'group', id, group, members } at the
+// place of its first row, with its members in the order of their attempts.
+export function groupRows(rows) {
+    const items = [];
+    const groups = new Map();
+    for (const summary of rows) {
+        const group = groupOf(summary);
+        if (!group) {
+            items.push({ kind: 'recording', recording: summary });
+            continue;
+        }
+        let item = groups.get(group.id);
+        if (!item) {
+            item = { kind: 'group', id: group.id, group, members: [] };
+            groups.set(group.id, item);
+            items.push(item);
+        }
+        item.members.push(summary);
+    }
+    for (const item of groups.values()) {
+        item.members.sort((a, b) => attemptOf(a) - attemptOf(b));
+    }
+    return items;
+}
+
+// The totals of a group's members, their steps and bytes added up and the newest date.
+export function groupTotals(members) {
+    let steps = 0;
+    let bytes = 0;
+    let created = null;
+    let newest = -Infinity;
+    for (const summary of members) {
+        steps += Number(summary.steps) || 0;
+        bytes += Number(summary.bytes) || 0;
+        const time = Date.parse(summary.created);
+        if (!Number.isNaN(time) && time > newest) {
+            newest = time;
+            created = summary.created;
+        }
+    }
+    return { steps, bytes, created };
+}
+
+// The rows that the keyboard and the selection walk, in the order of the table. A group is one row
+// that selects all its members, and the rows of its members follow while it is open.
+export function navigationRows(items, open) {
+    const rows = [];
+    for (const item of items) {
+        if (item.kind === 'recording') {
+            rows.push({ key: item.recording.id, ids: [item.recording.id], recording: item.recording, group: null });
+            continue;
+        }
+        rows.push({ key: `group:${item.id}`, ids: item.members.map((m) => m.id), recording: null, group: item });
+        if (open.has(item.id)) {
+            for (const member of item.members) {
+                rows.push({ key: member.id, ids: [member.id], recording: member, group: null, parent: item.id });
+            }
+        }
+    }
+    return rows;
+}