cuju-render 0.1.0__py3-none-any.whl

cuju/render/web/js/play/teasers.js

@@ -0,0 +1,196 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// The pictures of the challenge cards on the Play page. Each card shows a still of its challenge,
+// and its short teaser video plays while the pointer rests on the card or the keyboard focus is
+// inside it, or after a press of its play button. Under reduced motion, from the system or the
+// page's own setting, only the play button starts a teaser. One teaser plays at a time, every
+// teaser is muted, and a card that loses the pointer and the focus goes back to its still. A
+// card without a teaser keeps its still, and a card without either draws a picture of its kind.
+// ci/make_challenge_teasers.py makes the files and their manifest.
+
+export const TEASER_FOLDER = 'assets/challenges/';
+
+// Whether a name from the manifest is a plain file of the folder.
+function plainName(name, suffix) {
+    return typeof name === 'string' && /^[a-z0-9_]+\.[a-z0-9]+$/.test(name) && name.endsWith(suffix);
+}
+
+// The teaser and still of each challenge, by identifier, from the manifest's document. Entries
+// whose names are not plain files of the folder are left out.
+export function teaserFiles(document) {
+    const files = {};
+    const entries = document && typeof document === 'object' ? document.challenges : null;
+    if (!entries || typeof entries !== 'object') {
+        return files;
+    }
+    for (const [id, entry] of Object.entries(entries)) {
+        if (!entry || typeof entry !== 'object') {
+            continue;
+        }
+        const teaser = plainName(entry.teaser, '.mp4') ? TEASER_FOLDER + entry.teaser : null;
+        const still = plainName(entry.still, '.webp') ? TEASER_FOLDER + entry.still : null;
+        if (teaser || still) {
+            files[id] = { teaser, still };
+        }
+    }
+    return files;
+}
+
+let loaded = null;
+
+// The files of the teasers, read once from the manifest, or none when it cannot be read.
+export function loadTeasers(fetcher = globalThis.fetch) {
+    if (!loaded) {
+        loaded = (async () => {
+            try {
+                const res = await fetcher(`${TEASER_FOLDER}manifest.json`);
+                return res.ok ? teaserFiles(await res.json()) : {};
+            } catch {
+                return {};
+            }
+        })();
+    }
+    return loaded;
+}
+
+// What a card shows. picture is still, or drawn when no still is there to show, button whether
+// it offers its play button, and playing whether its teaser plays. A card plays for a request of
+// its button, or under full motion for the pointer or the focus.
+export function teaserView({ still = false, teaser = false, reduced = false, reasons = [] } = {}) {
+    const why = new Set(reasons);
+    const playing = !!teaser && (why.has('request') || (!reduced && (why.has('hover') || why.has('focus'))));
+    return { picture: still ? 'still' : 'drawn', button: !!teaser, playing };
+}
+
+// The teasers of a list of cards. A card is an object with an id, whether it has a still and a
+// teaser, and show(view), which draws what teaserView returns. The controller keeps the reasons
+// each card has to play and lets one card play at a time.
+export class TeaserCards {
+    constructor({ reduced = () => false } = {}) {
+        this.reduced = reduced;
+        this.cards = new Map();
+        this.current = null;
+    }
+
+    add(card) {
+        this.cards.set(card.id, { card, reasons: new Set() });
+        this.update(card.id);
+        return card;
+    }
+
+    clear() {
+        for (const entry of this.cards.values()) {
+            entry.reasons.clear();
+            this.draw(entry);
+        }
+        this.cards.clear();
+        this.current = null;
+    }
+
+    // The page leaves the screen, and every card goes back to its still.
+    stop() {
+        for (const entry of this.cards.values()) {
+            entry.reasons.clear();
+        }
+        this.refresh();
+    }
+
+    view(id) {
+        const entry = this.cards.get(id);
+        return entry ? this.viewOf(entry) : null;
+    }
+
+    viewOf(entry) {
+        const { card } = entry;
+        return teaserView({ still: !!card.still, teaser: !!card.teaser, reduced: this.reduced(), reasons: [...entry.reasons] });
+    }
+
+    // The pointer rests on the card, or the focus moves into it.
+    enter(id, reason) {
+        this.reason(id, reason, true);
+    }
+
+    // The pointer or the focus leaves the card. Once neither is left, the card goes back to its
+    // still, a request of its button included.
+    leave(id, reason) {
+        const entry = this.cards.get(id);
+        if (!entry) {
+            return;
+        }
+        entry.reasons.delete(reason);
+        if (!entry.reasons.has('hover') && !entry.reasons.has('focus')) {
+            entry.reasons.delete('request');
+        }
+        this.update(id);
+    }
+
+    // The play button of the card, which starts the teaser or stops it.
+    toggle(id) {
+        const entry = this.cards.get(id);
+        if (!entry) {
+            return false;
+        }
+        if (this.viewOf(entry).playing) {
+            entry.reasons.clear();
+        } else {
+            entry.reasons.add('request');
+        }
+        this.update(id);
+        return this.viewOf(entry).playing;
+    }
+
+    // A teaser that fails to load stays off, and its card keeps its still.
+    fail(id) {
+        const entry = this.cards.get(id);
+        if (entry) {
+            entry.card.teaser = null;
+            entry.reasons.clear();
+            this.update(id);
+        }
+    }
+
+    // The motion setting changed, so every card draws again.
+    refresh() {
+        for (const id of this.cards.keys()) {
+            this.update(id);
+        }
+    }
+
+    reason(id, reason, on) {
+        const entry = this.cards.get(id);
+        if (!entry) {
+            return;
+        }
+        if (on) {
+            entry.reasons.add(reason);
+        } else {
+            entry.reasons.delete(reason);
+        }
+        this.update(id);
+    }
+
+    update(id) {
+        const entry = this.cards.get(id);
+        if (!entry) {
+            return;
+        }
+        if (this.viewOf(entry).playing && this.current !== id) {
+            // Another card that plays stops, and forgets why it played.
+            const before = this.current && this.cards.get(this.current);
+            this.current = id;
+            if (before) {
+                before.reasons.clear();
+                this.draw(before);
+            }
+        }
+        if (!this.viewOf(entry).playing && this.current === id) {
+            this.current = null;
+        }
+        this.draw(entry);
+    }
+
+    draw(entry) {
+        entry.card.show(this.viewOf(entry));
+    }
+}

cuju/render/web/js/play/touch.js

@@ -0,0 +1,350 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// Touch controls. During a game on Play, a touch screen shows an on-screen stick and the buttons
+// of GRF's layout, short pass, long pass, high pass, shot, sprint and dribble, each held by a
+// finger of its own, so several fingers play at once. They press the same inputs as the keys and
+// the buttons of a controller, through a device of their own that drives the person's side as the
+// keyboard does. A setting shows them always, never, or once a touch screen is used. On Watch,
+// the controls grow to the size of a finger on a touch screen, and a swipe along the timeline
+// moves through the match from where it stands, while a tap seeks to the place tapped. The rules
+// at the top of the file touch nothing of the page, so they hold the same in a test.
+
+import { t } from '../core/i18n.js';
+import { icon, symbolOnly } from '../core/icons.js';
+
+export const TOUCH_KEY = 'cuju.touchControls';
+export const TOUCH_CHOICES = ['auto', 'on', 'off'].map((choice) => [choice, t(`touch.choice.${choice}`)]);
+
+// The buttons of the pad, each with the inputs it presses, the same as the keys of play send.
+// High pass also slides when defending, as GRF reads one input for both.
+export const TOUCH_BUTTONS = [
+    { id: 'long_pass', names: ['long_pass'] },
+    { id: 'high_pass', names: ['high_pass', 'sliding'] },
+    { id: 'shot', names: ['shot'] },
+    { id: 'short_pass', names: ['short_pass'] },
+    { id: 'sprint', names: ['sprint'] },
+    { id: 'dribble', names: ['dribble'] },
+].map((button) => ({ ...button, label: t(`touch.button.${button.id}`), short: t(`touch.button.${button.id}.short`) }));
+
+// The stored choice, auto for anything else.
+export function touchChoice(value) {
+    return TOUCH_CHOICES.some(([choice]) => choice === value) ? value : 'auto';
+}
+
+// Whether the pad shows for a choice, once a touch screen has been seen or not.
+export function touchShown(choice, touched) {
+    const chosen = touchChoice(choice);
+    return chosen === 'on' || (chosen === 'auto' && !!touched);
+}
+
+// The directions that a stick pushed by dx and dy from its centre holds, as a controller's stick
+// counts them, each axis past the dead zone as a share of the radius. Screen y grows downwards.
+export function stickNames(dx, dy, radius, dead = 0.35) {
+    const reach = Math.max(1, radius) * dead;
+    const names = [];
+    if (dx <= -reach) {
+        names.push('left');
+    } else if (dx >= reach) {
+        names.push('right');
+    }
+    if (dy <= -reach) {
+        names.push('up');
+    } else if (dy >= reach) {
+        names.push('down');
+    }
+    return names;
+}
+
+// The frame that a swipe along the timeline reaches, the width of the timeline being the whole
+// match, kept within the frames held.
+export function swipeFrame(from, dx, width, first, last) {
+    const frame = from + (dx / Math.max(1, width)) * (last - first);
+    return Math.max(first, Math.min(last, frame));
+}
+
+function h(tag, attributes = {}, ...children) {
+    const node = document.createElement(tag);
+    for (const [key, value] of Object.entries(attributes)) {
+        if (value !== null && value !== undefined && value !== false) {
+            node.setAttribute(key, value === true ? '' : value);
+        }
+    }
+    node.append(...children.flat().filter((child) => child !== null && child !== undefined));
+    return node;
+}
+
+function load() {
+    try {
+        return touchChoice(JSON.parse(localStorage.getItem(TOUCH_KEY)));
+    } catch {
+        return 'auto';
+    }
+}
+
+export class TouchControls {
+    constructor(app) {
+        this.app = app;
+        this.choice = load();
+        this.touched = !!(window.matchMedia && window.matchMedia('(pointer: coarse)').matches);
+        this.pad = null;
+        this.device = null;
+        this.stickHeld = [];
+        window.addEventListener('pointerdown', (e) => {
+            if (e.pointerType === 'touch' && !this.touched) {
+                this.touched = true;
+                this.update();
+            }
+        }, true);
+        this.bindSetting();
+        this.bindTimeline();
+        setInterval(() => this.update(), 250);
+        this.update();
+    }
+
+    bindSetting() {
+        const anchor = document.getElementById('pointer-lock')?.closest('label');
+        if (!anchor) {
+            return;
+        }
+        this.select = h('select', { id: 'touch-controls', 'aria-label': t('touch.setting') },
+            TOUCH_CHOICES.map(([value, label]) => h('option', { value }, label)));
+        this.select.value = this.choice;
+        this.select.addEventListener('change', () => {
+            this.choice = touchChoice(this.select.value);
+            try {
+                localStorage.setItem(TOUCH_KEY, JSON.stringify(this.choice));
+            } catch {
+                // Storage can be unavailable, the setting then lasts for this visit only.
+            }
+            this.update();
+        });
+        anchor.after(h('label', {}, t('touch.setting'), this.select));
+        import('../core/menu.js').then((menu) => menu.enhanceSelect(this.select, { className: 'in-panel', align: 'right' }))
+            .catch(() => {});
+    }
+
+    // The pad of the Play page, built into its stage the first time the stage exists.
+    build(play) {
+        this.play = play;
+        this.device = new play.keyboard.constructor('touch', t('touch.device'));
+        play.touch = this.device;
+        this.knob = h('div', { class: 'touch-knob' });
+        this.stick = h('div', { class: 'touch-stick' }, this.knob);
+        this.buttons = TOUCH_BUTTONS.map((button) => {
+            const node = h('button', {
+                type: 'button', class: `touch-btn touch-${button.id}`, tabindex: '-1',
+                'data-action': button.id, title: button.label,
+            }, button.short);
+            this.hold(node, (down) => this.press(button.names, down));
+            return node;
+        });
+        this.pause = h('button', { type: 'button', class: 'touch-pause', tabindex: '-1', ...symbolOnly(t('touch.pause'), t('touch.pause.title')) }, icon('pause'));
+        this.pause.addEventListener('click', () => {
+            if (play.game && !play.game.ended) {
+                play.pause(true);
+            }
+        });
+        // Keys and screen readers have the keys of play, so the pad stays out of their way.
+        this.pad = h('div', { class: 'touch-pad', 'aria-hidden': 'true', hidden: true },
+            this.stick, h('div', { class: 'touch-cluster' }, this.buttons), this.pause);
+        this.pad.addEventListener('contextmenu', (e) => e.preventDefault());
+        this.bindStick();
+        play.stage.append(this.pad);
+    }
+
+    // A button held by one finger, pressed until that finger lifts or leaves the screen.
+    hold(node, change) {
+        let finger = null;
+        node.addEventListener('pointerdown', (e) => {
+            e.preventDefault();
+            if (finger !== null) {
+                return;
+            }
+            finger = e.pointerId;
+            node.setPointerCapture?.(e.pointerId);
+            node.classList.add('held');
+            change(true);
+        });
+        const up = (e) => {
+            if (e.pointerId !== finger) {
+                return;
+            }
+            finger = null;
+            node.classList.remove('held');
+            change(false);
+        };
+        node.addEventListener('pointerup', up);
+        node.addEventListener('pointercancel', up);
+        node.addEventListener('lostpointercapture', up);
+    }
+
+    bindStick() {
+        let finger = null;
+        const move = (e) => {
+            const rect = this.stick.getBoundingClientRect();
+            const radius = rect.width / 2;
+            let dx = e.clientX - (rect.left + radius);
+            let dy = e.clientY - (rect.top + radius);
+            const length = Math.hypot(dx, dy);
+            if (length > radius) {
+                dx *= radius / length;
+                dy *= radius / length;
+            }
+            this.knob.style.transform = `translate(${dx}px, ${dy}px)`;
+            this.steer(stickNames(dx, dy, radius));
+        };
+        this.stick.addEventListener('pointerdown', (e) => {
+            e.preventDefault();
+            if (finger !== null) {
+                return;
+            }
+            finger = e.pointerId;
+            this.stick.setPointerCapture?.(e.pointerId);
+            this.stick.classList.add('held');
+            move(e);
+        });
+        this.stick.addEventListener('pointermove', (e) => {
+            if (e.pointerId === finger) {
+                move(e);
+            }
+        });
+        const up = (e) => {
+            if (e.pointerId !== finger) {
+                return;
+            }
+            finger = null;
+            this.stick.classList.remove('held');
+            this.knob.style.transform = '';
+            this.steer([]);
+        };
+        this.stick.addEventListener('pointerup', up);
+        this.stick.addEventListener('pointercancel', up);
+        this.stick.addEventListener('lostpointercapture', up);
+    }
+
+    // Holds the directions of the stick, releasing those it left and pressing those it reached.
+    steer(names) {
+        const off = this.stickHeld.filter((name) => !names.includes(name));
+        const on = names.filter((name) => !this.stickHeld.includes(name));
+        this.stickHeld = names;
+        if (off.length) {
+            this.press(off, false);
+        }
+        if (on.length) {
+            this.press(on, true);
+        }
+    }
+
+    // Sends inputs as a key of play does, while a game runs and its pause menu is closed.
+    press(names, down) {
+        const play = this.play;
+        const game = play && play.game;
+        if (!game || game.ended || !game.started || (down && !play.menu.hidden)) {
+            return;
+        }
+        play.use(this.device);
+        this.device.set(names, down);
+        play.flush();
+    }
+
+    // Lets every finger go, as a key of play does when the window loses focus.
+    releaseAll() {
+        if (this.device && this.device.held.size) {
+            this.device.held.clear();
+            this.play.flush();
+        }
+        this.stickHeld = [];
+        for (const node of this.pad ? this.pad.querySelectorAll('.held') : []) {
+            node.classList.remove('held');
+        }
+        if (this.knob) {
+            this.knob.style.transform = '';
+        }
+    }
+
+    update() {
+        const app = this.app;
+        document.getElementById('app')?.classList.toggle('touch', this.touched);
+        const play = app.play;
+        if (!this.pad && play && play.stage) {
+            this.build(play);
+        }
+        if (!this.pad) {
+            return;
+        }
+        const game = play.game;
+        const show = touchShown(this.choice, this.touched) && app.page === 'play' && !play.stage.hidden
+            && !!game && game.started && !game.ended && play.menu.hidden && play.end.hidden;
+        if (this.pad.hidden === show) {
+            this.pad.hidden = !show;
+            if (!show) {
+                this.releaseAll();
+            }
+        }
+    }
+
+    // A swipe along the timeline by touch moves through the match from where it stands, and a
+    // tap seeks to the place tapped. Mouse and pen keep the timeline's own drag.
+    bindTimeline() {
+        const track = document.getElementById('timeline');
+        const controls = document.getElementById('controls');
+        if (!track || !controls) {
+            return;
+        }
+        let swipe = null;
+        controls.addEventListener('pointerdown', (e) => {
+            const tl = this.app.timeline;
+            if (e.pointerType !== 'touch' || !tl || !track.contains(e.target)) {
+                return;
+            }
+            e.stopPropagation();
+            e.preventDefault();
+            swipe = { id: e.pointerId, x: e.clientX, from: tl.t, moved: false, playing: tl.playing && !tl.following };
+            tl.playing = false;
+            tl.following = false;
+            track.setPointerCapture?.(e.pointerId);
+        }, true);
+        const seek = (frame) => {
+            const tl = this.app.timeline;
+            tl.seek(frame);
+            this.app.afterSeek();
+        };
+        controls.addEventListener('pointermove', (e) => {
+            const tl = this.app.timeline;
+            if (!swipe || e.pointerId !== swipe.id || !tl) {
+                return;
+            }
+            e.stopPropagation();
+            const dx = e.clientX - swipe.x;
+            swipe.moved ||= Math.abs(dx) > 8;
+            if (swipe.moved) {
+                seek(swipeFrame(swipe.from, dx, track.getBoundingClientRect().width, tl.first, tl.last));
+            }
+        }, true);
+        const end = (e) => {
+            const tl = this.app.timeline;
+            if (!swipe || e.pointerId !== swipe.id) {
+                return;
+            }
+            e.stopPropagation();
+            const done = swipe;
+            swipe = null;
+            if (!tl) {
+                return;
+            }
+            if (!done.moved && e.type === 'pointerup') {
+                const rect = track.getBoundingClientRect();
+                const share = Math.max(0, Math.min(1, (done.x - rect.left) / Math.max(1, rect.width)));
+                seek(tl.first + share * (tl.last - tl.first));
+            }
+            if (done.playing) {
+                tl.playing = true;
+            }
+            this.app.updateHash();
+            this.app.updatePlayUi();
+        };
+        controls.addEventListener('pointerup', end, true);
+        controls.addEventListener('pointercancel', end, true);
+    }
+}