cuju-render 0.1.0__py3-none-any.whl

cuju/render/web/js/recording/timeline.js

@@ -0,0 +1,275 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// Frame storage and the playback clock, shared by recordings and live streams.
+// Positions on the timeline are absolute frame numbers, so live frames dropped from the front
+// do not move anything, the first kept frame is just no longer zero.
+
+import { Annotations } from './annotation-data.js';
+import { findGoals, isCut } from './format.js';
+
+// A recording keeps all its frames. A live store is a ring of at most limit frames, so a long
+// stream drops its oldest frames in constant time. annotations, the records of a recording or []
+// for a stream that sends them, become the store's Annotations, null without them.
+export class FrameStore {
+    constructor(header, frames = [], limit = Infinity, annotations = null) {
+        this.header = header;
+        this.limit = limit;
+        this.annotations = annotations ? new Annotations(annotations) : null;
+        this.ring = Number.isFinite(limit) ? new Array(limit) : frames;
+        this.head = 0;
+        this.count = frames.length;
+        this.base = 0;
+        if (this.ring !== frames) {
+            frames.slice(-limit).forEach((f, i) => {
+                this.ring[i] = f;
+            });
+            this.count = Math.min(frames.length, limit);
+            this.base = frames.length - this.count;
+        }
+        this.goals = findGoals(frames).filter((g) => g.index >= this.base);
+    }
+
+    get first() {
+        return this.base;
+    }
+
+    get last() {
+        return this.base + this.count - 1;
+    }
+
+    get size() {
+        return this.count;
+    }
+
+    get(index) {
+        const i = index - this.base;
+        if (i < 0 || i >= this.count) {
+            return undefined;
+        }
+        return Number.isFinite(this.limit) ? this.ring[(this.head + i) % this.limit] : this.ring[i];
+    }
+
+    push(frame) {
+        const previous = this.count ? this.get(this.last) : null;
+        if (!Number.isFinite(this.limit)) {
+            this.ring.push(frame);
+            this.count++;
+        } else if (this.count < this.limit) {
+            this.ring[(this.head + this.count) % this.limit] = frame;
+            this.count++;
+        } else {
+            this.ring[this.head] = frame;
+            this.head = (this.head + 1) % this.limit;
+            this.base++;
+            if (this.goals.length && this.goals[0].index < this.base) {
+                this.goals = this.goals.filter((g) => g.index >= this.base);
+            }
+        }
+        if (previous && (frame.scoreLeft > previous.scoreLeft || frame.scoreRight > previous.scoreRight)) {
+            this.goals.push({
+                index: this.last,
+                team: frame.scoreLeft > previous.scoreLeft ? 0 : 1,
+                step: frame.step,
+            });
+        }
+    }
+}
+
+// A live view plays three seconds behind the newest frame, which absorbs network jitter and
+// leaves the restart transitions frames to look ahead into, the taker and the first step.
+export const LIVE_DELAY_FRAMES = 30;
+
+export class Timeline {
+    constructor(store, live) {
+        this.store = store;
+        this.live = live;
+        this.sps = store.header.steps_per_second || 10;
+        this.t = store.first;
+        this.playing = false;
+        this.direction = 1;
+        this.speed = 1;
+        this.following = live;
+        this.onEnd = null;
+        this.jumps = 0;
+        // Frames the view keeps behind the newest one, how strongly it leans towards that, and
+        // the gap past which it jumps. A game that a person plays keeps a small delay.
+        this.delay = LIVE_DELAY_FRAMES;
+        this.lean = 0.12;
+        this.jump = 90;
+    }
+
+    get first() {
+        return this.store.first;
+    }
+
+    get last() {
+        return Math.max(this.store.first, this.store.last);
+    }
+
+    get index() {
+        return Math.floor(this.t);
+    }
+
+    // Seconds between the newest frame and the frame on screen.
+    get behindLive() {
+        return Math.max(0, (this.store.last - this.t) / this.sps);
+    }
+
+    update(dt) {
+        if (this.store.size === 0) {
+            return;
+        }
+        // Up to a second per update, so playback keeps real time even at a few frames a second.
+        dt = Math.min(Math.max(0, dt), 1);
+        if (this.live && this.following) {
+            this.followLive(dt);
+            return;
+        }
+        if (!this.playing) {
+            this.clamp();
+            return;
+        }
+        this.t += this.direction * this.speed * this.sps * dt;
+        if (this.t >= this.last) {
+            this.t = this.last;
+            if (this.live) {
+                this.following = true;
+                this.speed = 1;
+            } else {
+                this.playing = false;
+                if (this.onEnd) {
+                    this.onEnd();
+                }
+            }
+        } else if (this.t <= this.first) {
+            this.t = this.first;
+            this.playing = false;
+        }
+    }
+
+    // Plays at real time a few frames behind the newest one, which absorbs network jitter.
+    // The rate leans towards the target so bursts and gaps even out without visible jumps.
+    followLive(dt) {
+        this.playing = true;
+        this.direction = 1;
+        const target = this.last - this.delay;
+        // A restart's transition and pre-roll hold play for a few seconds, which the lean below
+        // makes up for, only a longer gap jumps.
+        if (target - this.t > this.jump || this.t < this.first) {
+            this.t = Math.max(this.first, target);
+            return;
+        }
+        const rate = Math.min(1.6, Math.max(0.6, 1 + (target - this.t) * this.lean));
+        this.t = Math.min(this.last, this.t + rate * this.sps * dt);
+    }
+
+    clamp() {
+        this.t = Math.min(this.last, Math.max(this.first, this.t));
+    }
+
+    // Returns the two frames around t and the blend weight, zero across a cut.
+    sample() {
+        this.clamp();
+        const i = Math.floor(this.t);
+        const a = this.store.get(i);
+        const b = i + 1 <= this.store.last ? this.store.get(i + 1) : null;
+        let w = this.t - i;
+        if (!b || isCut(a, b)) {
+            w = 0;
+        }
+        return { index: i, a, b: w > 0 ? b : null, w };
+    }
+
+    play(direction = 1) {
+        if (this.store.size === 0) {
+            return;
+        }
+        this.direction = direction;
+        if (!this.live && direction > 0 && this.t >= this.last) {
+            this.t = this.first;
+        }
+        if (direction < 0 && this.t <= this.first) {
+            this.t = this.last;
+        }
+        if (this.live && direction < 0) {
+            this.following = false;
+        }
+        this.playing = true;
+    }
+
+    pause() {
+        this.playing = false;
+        this.following = false;
+    }
+
+    toggle() {
+        if (this.playing) {
+            this.pause();
+        } else {
+            this.play(this.direction);
+        }
+    }
+
+    seek(t) {
+        const from = this.t;
+        this.t = t;
+        this.clamp();
+        // Seeks that move more than two seconds count as jumps, which the lessons read.
+        if (Math.abs(this.t - from) > 2 * this.sps) {
+            this.jumps += 1;
+        }
+        if (this.live && this.t < this.last - this.delay - 1) {
+            this.following = false;
+        }
+    }
+
+    // Steps whole frames from where the view is. Forwards counts from the frame shown and
+    // backwards from the next one, so a position between two frames lands on the nearer one in
+    // the direction of the step and never skips a frame.
+    stepFrames(n) {
+        this.pause();
+        const from = n > 0 ? Math.floor(this.t + 1e-6) : Math.ceil(this.t - 1e-6);
+        this.seek(from + n);
+    }
+
+    skipSeconds(seconds) {
+        const wasFollowing = this.following;
+        this.seek(this.t + seconds * this.sps);
+        if (this.live && !wasFollowing && this.t >= this.last - this.delay) {
+            this.goLive();
+        } else if (wasFollowing && seconds < 0) {
+            this.following = false;
+            this.playing = true;
+            this.direction = 1;
+        }
+    }
+
+    goLive() {
+        this.following = true;
+        this.playing = true;
+        this.direction = 1;
+        this.speed = 1;
+        this.t = Math.max(this.first, this.last - this.delay);
+    }
+
+    restart() {
+        this.seek(this.first);
+    }
+
+    // Goal before or after the current position, by frame number. Lead is how far before a goal
+    // the jumps land, so a press right after a jump moves on to the next goal.
+    goalNear(direction, lead = 0) {
+        const goals = this.store.goals;
+        const here = this.t + lead;
+        if (direction > 0) {
+            return goals.find((g) => g.index > here + 1) || null;
+        }
+        for (let k = goals.length - 1; k >= 0; k--) {
+            if (goals[k].index < here - 1) {
+                return goals[k];
+            }
+        }
+        return null;
+    }
+}

cuju/render/web/js/teams/art.js

@@ -0,0 +1,50 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// Team artwork from the server, the flat shirt front and back, and the four sponsor boards.
+
+import { api } from '../core/api.js';
+
+export const SHIRT_SLOTS = ['shirt-front', 'shirt-back'];
+export const SPONSOR_SLOTS = ['sponsor-1', 'sponsor-2', 'sponsor-3', 'sponsor-4'];
+export const SPONSOR_SIZE = { width: 1024, height: 128 };
+// The shirt panels cover half the kit texture across and 0.41 of it down, in kit UV space.
+export const SHIRT_SIZE = { width: 512, height: 420 };
+
+const cache = new Map();
+let generation = 0;
+
+// Forgets loaded artwork, after an edit.
+export function invalidateArt() {
+    generation++;
+    cache.clear();
+}
+
+async function bitmap(id, slot) {
+    try {
+        return await createImageBitmap(await api.image(id, slot));
+    } catch (err) {
+        console.warn('team image not loaded', id, slot, err);
+        return null;
+    }
+}
+
+// Returns the front, back and sponsors of a registry team, missing pieces null or left out.
+export function loadTeamArt(team) {
+    if (!team || !Array.isArray(team.images) || team.images.length === 0) {
+        return Promise.resolve({ front: null, back: null, sponsors: [] });
+    }
+    const key = `${generation}:${team.id}:${team.images.slice().sort().join(',')}`;
+    if (!cache.has(key)) {
+        const has = (slot) => team.images.includes(slot);
+        cache.set(key, (async () => {
+            const [front, back, ...sponsors] = await Promise.all([
+                has('shirt-front') ? bitmap(team.id, 'shirt-front') : null,
+                has('shirt-back') ? bitmap(team.id, 'shirt-back') : null,
+                ...SPONSOR_SLOTS.map((s) => (has(s) ? bitmap(team.id, s) : null)),
+            ]);
+            return { front, back, sponsors: sponsors.filter(Boolean) };
+        })());
+    }
+    return cache.get(key);
+}

cuju/render/web/js/teams/clip-editor.js

@@ -0,0 +1,293 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// The team editor's part for celebration clips, the list of a team's clips under Celebrations,
+// their upload and removal, which save at once as sounds do, and the joint mapping of each clip.
+// The animations of the clips join the moves of the section, where Play previews them on the
+// team's model, and the roster, where a player may take one as his own.
+
+import { api, formatBytes } from '../core/api.js';
+import {
+    MAX_CLIPS, MAX_CLIP_BYTES, MAX_TEAM_CLIP_BYTES, clipNameOf, loadTeamClips, qualify, readClip,
+    uploadMoveLabel, uploadMoves,
+} from '../players/clips.js';
+import { NODE_NAMES } from '../recording/format.js';
+import { h } from './library.js';
+import { uploadDuration } from '../players/retarget.js';
+import { t, tn } from '../core/i18n.js';
+import { icon, symbolOnly } from '../core/icons.js';
+
+// The moves a team's clips add, by their names in the style.
+export function clipMoves(editor) {
+    return uploadMoves(editor.team).map(([value]) => value);
+}
+
+// The animation's name of a move of a clip, or null for another move.
+export function clipMoveLabel(editor, value) {
+    return uploadMoveLabel(editor.team, value);
+}
+
+// What the preview plays for a move, the loaded clip's own name for a move of a clip, and how long
+// it plays, a clip at least once up to 15 seconds.
+export function previewMove(editor, value) {
+    const pose = qualify(value, editor.clipTag);
+    const span = uploadDuration(pose);
+    return { pose, length: span > 0 ? Math.min(15, Math.max(5, span)) : 5 };
+}
+
+// Loads the clips of the team that the editor opened, then shows their moves.
+export async function openClips(editor, token = editor.token) {
+    editor.clipTag = null;
+    const team = editor.team;
+    if (!team || !Array.isArray(team.clips) || !team.clips.length) {
+        return;
+    }
+    const tag = await loadTeamClips(team);
+    if (token === editor.token && editor.team === team) {
+        editor.clipTag = tag;
+        refresh(editor);
+    }
+}
+
+function refresh(editor) {
+    const clean = !editor.dirty;
+    editor.invalidate('celebrations', 'roster');
+    // A clip saves at once, so the editor's own changes stay as they were.
+    if (clean) {
+        editor.initial = editor.snapshot();
+        editor.markDirty();
+    }
+}
+
+function message(editor, text, kind = 'info') {
+    const el = editor.dialog.querySelector('.clip-message');
+    if (el) {
+        el.textContent = text;
+        el.dataset.kind = kind;
+    }
+}
+
+// Uploads a clip from a file the user picked or dropped, a new clip or one of the same name.
+export async function uploadClip(editor, file) {
+    if (!file) {
+        return false;
+    }
+    const team = editor.team;
+    const token = editor.token;
+    const clips = Array.isArray(team.clips) ? team.clips : [];
+    const name = clipNameOf(file.name);
+    const others = clips.filter((c) => c.name !== name);
+    const fail = (text) => {
+        message(editor, text, 'error');
+        editor.app.hud.toast(text, 'error', 7000);
+        return false;
+    };
+    if (!/\.glb$/i.test(file.name)) {
+        return fail(t('clip-editor.wrongType'));
+    }
+    if (file.size > MAX_CLIP_BYTES) {
+        return fail(t('clip-editor.tooLarge', { size: formatBytes(file.size) }));
+    }
+    if (others.length >= MAX_CLIPS) {
+        return fail(t('clip-editor.tooMany', { max: MAX_CLIPS }));
+    }
+    if (others.reduce((sum, c) => sum + c.bytes, 0) + file.size > MAX_TEAM_CLIP_BYTES) {
+        return fail(t('clip-editor.tooMuch'));
+    }
+    let read;
+    let bytes;
+    try {
+        bytes = await file.arrayBuffer();
+        read = await readClip(bytes);
+    } catch (err) {
+        return fail(t('clip-editor.unusable', { reason: String(err.message || err).replace(/\.$/, '') }));
+    }
+    try {
+        const entry = await api.putClip(team.id, name, read.guess, bytes);
+        if (token !== editor.token) {
+            return false;
+        }
+        team.clips = entry.clips;
+        editor.clipTag = await loadTeamClips(team);
+    } catch (err) {
+        return fail(err.message || String(err));
+    }
+    if (token !== editor.token) {
+        return false;
+    }
+    refresh(editor);
+    const count = read.gltf.animations.length;
+    const text = read.guess.body
+        ? t('clip-editor.saved', { file: file.name, count })
+        : t('clip-editor.savedUnmapped', { file: file.name });
+    message(editor, text, read.guess.body ? 'info' : 'error');
+    editor.app.hud.toast(text);
+    if (read.guess.body) {
+        editor.playCelebration(`upload:${name}.0`);
+    }
+    return true;
+}
+
+// Removes a clip after asking, with the team's choices of its animations.
+export async function removeClip(editor, name) {
+    if (!confirm(t('clip-editor.removeConfirm', { name }))) {
+        return;
+    }
+    const team = editor.team;
+    const token = editor.token;
+    try {
+        await api.deleteClip(team.id, name);
+    } catch (err) {
+        editor.app.hud.toast(err.message || String(err), 'error');
+        return;
+    }
+    if (token !== editor.token) {
+        return;
+    }
+    const clean = !editor.dirty;
+    // The server took the clip's moves out of the saved style, the editor's copy follows.
+    const gone = (v) => typeof v === 'string' && v.startsWith(`upload:${name}.`);
+    const s = editor.style;
+    s.celebrations = s.celebrations.filter((v) => !gone(v));
+    for (const p of s.players) {
+        if (gone(p.celebration)) {
+            p.celebration = 'team';
+        }
+    }
+    if (team.style) {
+        team.style.celebrations = (team.style.celebrations || []).filter((v) => !gone(v));
+    }
+    team.clips = (team.clips || []).filter((c) => c.name !== name);
+    editor.clipTag = await loadTeamClips(team);
+    if (token !== editor.token) {
+        return;
+    }
+    editor.invalidate('celebrations', 'roster');
+    if (clean) {
+        editor.initial = editor.snapshot();
+        editor.markDirty();
+    }
+    editor.app.hud.toast(t('clip-editor.removed', { name }));
+}
+
+// The table that maps the joints of GRF's skeleton to the bones of a clip, read when opened.
+function mappingTable(editor, clip, host) {
+    const token = editor.token;
+    host.replaceChildren(h('p', { class: 'muted small' }, t('clip-editor.reading')));
+    (async () => {
+        let read;
+        try {
+            read = await readClip(await api.clipBytes(editor.team.id, clip.name));
+        } catch (err) {
+            host.replaceChildren(h('p', { class: 'muted small' }, t('clip-editor.readFailed', { reason: err.message || err })));
+            return;
+        }
+        if (token !== editor.token || !host.isConnected) {
+            return;
+        }
+        const joints = { ...(clip.joints && clip.joints.body ? clip.joints : read.guess) };
+        const status = h('span', { class: 'req' });
+        const showStatus = () => {
+            status.textContent = ` ${joints.body ? t('editor.joints.required') : t('editor.joints.requiredPelvis')}`;
+        };
+        showStatus();
+        const rows = NODE_NAMES.map((node) => {
+            const select = h('select', { 'aria-label': t('clip-editor.boneOf', { node: t(`editor.joints.node.${node}`) }) },
+                h('option', { value: '' }, node === 'player' ? t('editor.joints.root') : t('editor.joints.unmapped')),
+                read.bones.map((b) => h('option', { value: b, selected: joints[node] === b }, b)));
+            select.addEventListener('change', () => {
+                if (select.value) {
+                    joints[node] = select.value;
+                } else {
+                    delete joints[node];
+                }
+                showStatus();
+            });
+            return h('tr', {}, h('td', {}, t(`editor.joints.node.${node}`), node === 'body' ? status : null), h('td', {}, select));
+        });
+        const save = async (mapping) => {
+            try {
+                const entry = await api.clipJoints(editor.team.id, clip.name, mapping);
+                if (token !== editor.token) {
+                    return;
+                }
+                editor.team.clips = entry.clips;
+                editor.clipTag = await loadTeamClips(editor.team);
+                if (token !== editor.token) {
+                    return;
+                }
+                refresh(editor);
+                editor.app.hud.toast(t('clip-editor.mappingSaved', { name: clip.name }));
+            } catch (err) {
+                editor.app.hud.toast(err.message || String(err), 'error', 7000);
+            }
+        };
+        host.replaceChildren(
+            h('p', { class: 'muted small' }, tn('clip-editor.mappingNote')),
+            h('table', {}, h('tbody', {}, rows)),
+            h('div', { class: 'row' },
+                h('button', {
+                    type: 'button',
+                    class: 'btn small',
+                    ...symbolOnly(t('clip-editor.saveMapping')),
+                    onclick: () => {
+                        if (!joints.body) {
+                            editor.app.hud.toast(t('clip-editor.needPelvis'), 'error');
+                            return;
+                        }
+                        save(joints);
+                    },
+                }, icon('save')),
+                h('button', { type: 'button', class: 'btn small ghost', onclick: () => save({}) }, t('clip-editor.mapByNames'))));
+    })();
+}
+
+// The part of the Celebrations section that lists and uploads the team's clips.
+export function clipsPanel(editor) {
+    const clips = Array.isArray(editor.team.clips) ? editor.team.clips : [];
+    const file = h('input', { type: 'file', accept: '.glb,model/gltf-binary', hidden: true, class: 'clip-file' });
+    file.addEventListener('change', () => {
+        const f = file.files[0];
+        file.value = '';
+        uploadClip(editor, f);
+    });
+    const rows = clips.map((clip) => {
+        const count = (clip.animations || []).length;
+        const mapping = h('div', { class: 'joints' });
+        const details = h('details', { class: 'joints-box' }, h('summary', {}, t('editor.joints.summary')), mapping);
+        details.addEventListener('toggle', () => {
+            if (details.open && !mapping.childNodes.length) {
+                mappingTable(editor, clip, mapping);
+            }
+        });
+        const mapped = clip.joints && clip.joints.body ? t('clip-editor.mappedByHand') : t('clip-editor.mappedByNames');
+        return h('li', { class: 'sound-row has clip-row', 'data-clip': clip.name },
+            h('span', { class: 'sound-text' },
+                h('span', { class: 'sound-label' }, clip.name),
+                h('span', { class: 'muted small' }, t('clip-editor.rowMeta', { count, size: formatBytes(clip.bytes), mapped }))),
+            h('span', { class: 'row sound-actions' },
+                h('button', { type: 'button', class: 'btn small ghost danger', ...symbolOnly(t('clip-editor.removeLabel', { name: clip.name })), onclick: () => removeClip(editor, clip.name) }, icon('trash'))),
+            details);
+    });
+    const drop = h('div', { class: 'dropzone small' },
+        h('p', {}, t('clip-editor.drop')),
+        h('button', { type: 'button', class: 'btn', ...symbolOnly(t('clip-editor.upload')), onclick: () => file.click() }, icon('upload')), file);
+    drop.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        drop.classList.add('over');
+    });
+    drop.addEventListener('dragleave', () => drop.classList.remove('over'));
+    drop.addEventListener('drop', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        drop.classList.remove('over');
+        uploadClip(editor, e.dataTransfer.files[0]);
+    });
+    return h('section', { class: 'clips' },
+        h('h4', {}, t('clip-editor.heading')),
+        h('p', { class: 'muted small' }, tn('clip-editor.note')),
+        rows.length ? h('ul', { class: 'sound-list clip-list' }, rows) : null,
+        drop,
+        h('p', { class: 'clip-message muted small', role: 'status', 'data-kind': 'info' }));
+}