cuju-render 0.1.0__py3-none-any.whl

cuju/render/web/easy.css

@@ -0,0 +1,357 @@
+/*
+Copyright 2026 The cuju Authors
+SPDX-License-Identifier: Apache-2.0
+*/
+
+/* The parts that make the page easy to start with, the command palette, the presets of the
+   settings, the first run tips and hints, and the touch controls of Play and Watch. */
+
+/* The command palette, a search field over a list, high on the page above everything else. */
+#palette {
+    position: fixed;
+    inset: 0;
+    z-index: 80;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: max(48px, 12vh) 8px 8px;
+    background: var(--scrim);
+}
+
+#palette[hidden] {
+    display: none;
+}
+
+.palette-box {
+    display: flex;
+    flex-direction: column;
+    width: min(560px, 100%);
+    max-height: min(520px, 100%);
+    border: 1px solid var(--border);
+    border-top: 2px solid var(--accent);
+    background: var(--surface);
+    box-shadow: 0 12px 32px var(--shade, rgba(0, 0, 0, 0.45));
+}
+
+#palette-input {
+    flex: none;
+    margin: 10px;
+    padding: 8px 10px;
+    font-size: 16px;
+}
+
+#palette-list {
+    flex: 1;
+    min-height: 0;
+    margin: 0;
+    padding: 0 0 4px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    list-style: none;
+}
+
+#palette-list [role="option"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: 12px;
+    row-gap: 1px;
+    padding: 6px 14px;
+    border-left: 3px solid transparent;
+    cursor: pointer;
+}
+
+#palette-list [aria-selected="true"] {
+    border-left-color: var(--accent);
+    background: var(--surface-2);
+}
+
+#palette-list .palette-title,
+#palette-list .palette-group {
+    grid-column: 1;
+}
+
+/* The shortcut of an action, at the right of its two lines. */
+.palette-keys {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    align-self: center;
+}
+
+.palette-group,
+.palette-count {
+    color: var(--muted);
+    font-size: 12px;
+}
+
+.palette-count {
+    flex: none;
+    margin: 0;
+    padding: 6px 14px 8px;
+    border-top: 1px solid var(--border);
+}
+
+/* The presets of the settings panel, three buttons in a row that read as one choice. */
+.presets {
+    display: flex;
+    border: 1px solid var(--border);
+}
+
+.preset-btn {
+    flex: 1;
+    min-height: 32px;
+    padding: 4px 6px;
+    border: 0;
+    border-left: 1px solid var(--border);
+    background: transparent;
+    color: var(--text);
+    cursor: pointer;
+}
+
+.preset-btn:first-child {
+    border-left: 0;
+}
+
+.preset-btn[aria-checked="true"] {
+    background: var(--accent);
+    color: var(--on-accent);
+}
+
+.preset-btn[aria-disabled="true"] {
+    color: var(--muted);
+    cursor: default;
+}
+
+.preset-note {
+    margin: 0;
+}
+
+/* A tip of the first run, in the lower left corner, above the controls of Watch. */
+.tip {
+    position: fixed;
+    left: 12px;
+    bottom: 12px;
+    z-index: 35;
+    width: min(320px, calc(100vw - 24px));
+    padding: 10px 12px;
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--accent);
+    background: var(--surface);
+    box-shadow: 0 8px 24px var(--shade, rgba(0, 0, 0, 0.45));
+}
+
+.tip[hidden] {
+    display: none;
+}
+
+#app[data-page="watch"] .tip,
+#app[data-page="play"] .tip {
+    bottom: 120px;
+}
+
+/* A tip that would cover a control of the page or a notice takes another corner. */
+#app .tip[data-spot$="right"] {
+    left: auto;
+    right: 12px;
+}
+
+#app .tip[data-spot^="top"] {
+    top: calc(var(--bar, 46px) + 12px);
+    bottom: auto;
+}
+
+.tip-text {
+    margin: 0 0 8px;
+}
+
+.tip-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+/* The line of help of a control, beside the control that has the focus or the pointer. */
+.help-tip {
+    position: fixed;
+    z-index: 90;
+    max-width: min(280px, calc(100vw - 16px));
+    padding: 4px 8px;
+    border: 1px solid var(--border);
+    background: var(--surface-2);
+    color: var(--text);
+    font-size: 13px;
+    pointer-events: none;
+}
+
+.help-tip[hidden] {
+    display: none;
+}
+
+.empty-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+}
+
+.teams-first {
+    margin: 12px 0 0;
+    padding: 12px;
+}
+
+#watch-empty .watch-next {
+    margin-top: 10px;
+}
+
+/* The touch pad of Play, a stick in the lower left corner and the buttons of GRF's layout in the
+   lower right, laid out as a controller's face buttons with sprint and dribble above them. */
+.touch-pad {
+    position: absolute;
+    inset: 0;
+    z-index: 6;
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+}
+
+.touch-pad[hidden] {
+    display: none;
+}
+
+.touch-stick,
+.touch-btn,
+.touch-pause {
+    pointer-events: auto;
+    touch-action: none;
+}
+
+.touch-stick {
+    position: absolute;
+    left: max(16px, env(safe-area-inset-left));
+    bottom: max(20px, env(safe-area-inset-bottom));
+    width: 140px;
+    height: 140px;
+    border: 2px solid rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.25);
+}
+
+.touch-knob {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 60px;
+    height: 60px;
+    margin: -30px 0 0 -30px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.55);
+}
+
+.touch-stick.held .touch-knob {
+    background: rgba(255, 255, 255, 0.8);
+}
+
+.touch-cluster {
+    position: absolute;
+    right: max(16px, env(safe-area-inset-right));
+    bottom: max(16px, env(safe-area-inset-bottom));
+    display: grid;
+    grid-template-columns: repeat(3, 60px);
+    grid-template-rows: repeat(4, 60px);
+    gap: 6px;
+    grid-template-areas:
+        "dribble . sprint"
+        ". long ."
+        "high . shot"
+        ". pass .";
+}
+
+.touch-btn {
+    width: 60px;
+    height: 60px;
+    padding: 0;
+    border: 2px solid rgba(255, 255, 255, 0.55);
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.35);
+    color: #fff;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.touch-btn.held {
+    background: rgba(255, 255, 255, 0.45);
+    color: #000;
+}
+
+.touch-long_pass { grid-area: long; }
+.touch-high_pass { grid-area: high; }
+.touch-shot { grid-area: shot; }
+.touch-short_pass { grid-area: pass; }
+.touch-sprint { grid-area: sprint; border-radius: 12px; }
+.touch-dribble { grid-area: dribble; border-radius: 12px; }
+
+.touch-pause {
+    position: absolute;
+    left: 50%;
+    top: 12px;
+    min-width: 64px;
+    min-height: 40px;
+    transform: translateX(-50%);
+    border: 2px solid rgba(255, 255, 255, 0.55);
+    background: rgba(0, 0, 0, 0.35);
+    color: #fff;
+}
+
+/* On a touch screen, the controls of Watch and the bar above them take the size of a finger, and
+   the timeline gives the finger a taller strip to swipe along. */
+@media (pointer: coarse) {
+    #app #controls .icon-btn,
+    #app #controls .text-btn,
+    #app #watch-bar .bar-btn {
+        min-width: 44px;
+        min-height: 44px;
+    }
+
+    #app #timeline {
+        height: 36px;
+    }
+
+    #app #timeline .track,
+    #app #timeline-fill {
+        top: 16px;
+    }
+
+    #app #timeline-thumb {
+        top: 9px;
+        height: 18px;
+    }
+
+    #app .marker {
+        top: 11px;
+    }
+}
+
+#app.touch #controls .icon-btn,
+#app.touch #controls .text-btn,
+#app.touch #watch-bar .bar-btn {
+    min-width: 44px;
+    min-height: 44px;
+}
+
+#app.touch #timeline {
+    height: 36px;
+}
+
+#app.touch #timeline .track,
+#app.touch #timeline-fill {
+    top: 16px;
+}
+
+#app.touch #timeline-thumb {
+    top: 9px;
+    height: 18px;
+}
+
+#app.touch .marker {
+    top: 11px;
+}

cuju/render/web/export.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<!--
+Copyright 2026 The cuju Authors
+SPDX-License-Identifier: Apache-2.0
+
+The page of the command cuju render video. A headless browser opens it, and the export of the
+browser itself draws the recording in a frame of the Watch page and encodes it, see
+js/export/export-host.js.
+-->
+<html lang="en-US">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data: blob:; connect-src 'self' data: blob:; style-src 'self' 'unsafe-inline'; script-src 'self'; frame-src 'self'; object-src 'none'; base-uri 'self'; form-action 'none'">
+    <title>Cuju</title>
+    <style>
+        html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; color-scheme: dark; }
+    </style>
+    <script type="module" src="js/export/export-host.js"></script>
+</head>
+<body>
+</body>
+</html>

cuju/render/web/feed.css

@@ -0,0 +1,262 @@
+/*
+Copyright 2026 The cuju Authors
+SPDX-License-Identifier: Apache-2.0
+*/
+
+/* A picture of fixed size, the clean feed and the video export. js/export/safe-frame.js marks the app as
+   framed, sets the margins of the safe area as --safe-top, --safe-right, --safe-bottom and
+   --safe-left, and names the shape of the picture as shape-wide, shape-square or shape-tall. The
+   graphics then keep inside the safe area at every size and shape. */
+
+#app.framed[data-page] #scoreboard {
+    top: var(--safe-top);
+    left: var(--safe-left);
+    max-width: calc(100% - var(--safe-left) - var(--safe-right));
+}
+
+#app.framed[data-page] #mode-banner {
+    top: calc(var(--safe-top) + 44px);
+    max-width: calc(100% - var(--safe-left) - var(--safe-right));
+}
+
+#app.framed[data-page] #replay-badge {
+    top: var(--safe-top);
+    right: var(--safe-right);
+}
+
+#app.framed[data-page] #goal-banner,
+#app.framed[data-page] #follow-label {
+    left: var(--safe-left);
+    bottom: var(--safe-bottom);
+    max-width: calc(100% - var(--safe-left) - var(--safe-right));
+}
+
+#app.framed[data-page] .captions {
+    left: var(--safe-left);
+    right: var(--safe-right);
+    bottom: calc(var(--safe-bottom) + 56px);
+}
+
+#app.framed[data-page] .decision-banner,
+#app.framed[data-page] .card-third {
+    left: var(--safe-left);
+    bottom: calc(var(--safe-bottom) + 10px);
+    max-width: calc(100% - var(--safe-left) - var(--safe-right));
+}
+
+#app.framed[data-page] .title-card {
+    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
+    box-sizing: border-box;
+}
+
+#app.framed[data-page] .tc-inner {
+    box-sizing: border-box;
+    min-width: min(720px, 100%);
+    max-width: 100%;
+}
+
+/* The team sheets take the band under the scoreboard and the banner of the kick off, centered
+   in it, so they cover neither at any shape. */
+#app.framed[data-page] #lineups {
+    --lineups-top: calc(var(--safe-top) + 80px);
+    box-sizing: border-box;
+    top: var(--lineups-top);
+    bottom: var(--safe-bottom);
+    width: min(860px, calc(100% - var(--safe-left) - var(--safe-right)));
+    height: fit-content;
+    max-height: calc(100% - var(--lineups-top) - var(--safe-bottom));
+    margin: auto 0;
+    transform: translateX(-50%);
+    animation-name: lineups-in-framed;
+}
+
+@keyframes lineups-in-framed {
+    from {
+        opacity: 0;
+        transform: translate(-50%, 4%);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%);
+    }
+}
+
+#app.framed.shape-tall[data-page] #lineups,
+#app.framed.shape-square[data-page] #lineups {
+    --lineups-top: calc(var(--safe-top) + 124px);
+}
+
+/* A square or tall picture keeps the badge of a replay under the scoreboard, which takes most of
+   the width, and gives the lower thirds the whole width of the safe area. */
+#app.framed.shape-tall[data-page] #scoreboard,
+#app.framed.shape-square[data-page] #scoreboard {
+    right: var(--safe-right);
+}
+
+/* There each team takes half of what the scores and the clock leave, its name beside its chip. */
+#app.framed.shape-tall[data-page] #scoreboard .team,
+#app.framed.shape-square[data-page] #scoreboard .team {
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: none;
+}
+
+#app.framed.shape-tall[data-page] #scoreboard .name,
+#app.framed.shape-square[data-page] #scoreboard .name {
+    flex: 1 1 auto;
+}
+
+#app.framed.shape-tall[data-page] #scoreboard .team.right .name,
+#app.framed.shape-square[data-page] #scoreboard .team.right .name {
+    text-align: right;
+}
+
+#app.framed.shape-tall[data-page] #replay-badge,
+#app.framed.shape-square[data-page] #replay-badge {
+    top: calc(var(--safe-top) + 44px);
+}
+
+#app.framed.shape-tall[data-page] #mode-banner,
+#app.framed.shape-square[data-page] #mode-banner {
+    top: calc(var(--safe-top) + 88px);
+}
+
+#app.framed.shape-tall[data-page] #goal-banner,
+#app.framed.shape-tall[data-page] #follow-label,
+#app.framed.shape-tall[data-page] .decision-banner,
+#app.framed.shape-tall[data-page] .card-third {
+    right: var(--safe-right);
+    min-width: 0;
+}
+
+/* The clean feed shows the picture and its broadcast graphics alone, with no pointer, no
+   controls, no messages and no buttons, over the background that its address names. */
+
+html.cuju-feed,
+html.cuju-feed body {
+    background: var(--feed-background, #000);
+    cursor: none;
+}
+
+html.cuju-feed #app,
+html.cuju-feed #pages,
+html.cuju-feed #page-watch,
+html.cuju-feed #watch {
+    background: transparent;
+}
+
+html.cuju-feed #app {
+    pointer-events: none;
+    cursor: none;
+    user-select: none;
+}
+
+html.cuju-feed .skip-link,
+html.cuju-feed #topbar,
+html.cuju-feed #watch-bar,
+html.cuju-feed #controls,
+html.cuju-feed #watch-empty,
+html.cuju-feed #drop-hint,
+html.cuju-feed #toast,
+html.cuju-feed #tv-hint,
+html.cuju-feed #loading,
+html.cuju-feed #waiting,
+html.cuju-feed #fatal,
+html.cuju-feed #settings,
+html.cuju-feed #match-menu,
+html.cuju-feed #view-menu,
+html.cuju-feed #tip,
+html.cuju-feed #help-tip,
+html.cuju-feed #flat-suggest,
+html.cuju-feed .touch-pad,
+html.cuju-feed .player-labels,
+html.cuju-feed dialog,
+html.cuju-feed #watch button,
+html.cuju-feed .post-hint,
+html.cuju-feed #cuju-home-veil {
+    display: none !important;
+}
+
+html.cuju-feed.feed-no-score #scoreboard {
+    display: none !important;
+}
+
+/* While nothing shows, and in a feed of the graphics alone, the background takes the picture's
+   place. */
+html.cuju-feed #app.no-source #stage,
+html.cuju-feed #app.feed-idle #stage,
+html.cuju-feed #app.feed-idle #hud,
+html.cuju-feed[data-feed-layer="graphics"] #stage,
+html.cuju-feed[data-feed-layer="graphics"] #flat-view {
+    visibility: hidden;
+}
+
+#feed-slate {
+    position: absolute;
+    inset: 0;
+    z-index: 30;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
+    padding: var(--safe-top, 5%) var(--safe-right, 5%) var(--safe-bottom, 5%) var(--safe-left, 5%);
+    color: #f4f4f4;
+    font: 600 20px/1.3 var(--broadcast-font, var(--font));
+    letter-spacing: 0.02em;
+    text-align: center;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.6s, visibility 0s linear 0.6s;
+}
+
+#feed-slate.show {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.6s;
+}
+
+/* The slate's bare mark lies over whatever the stream puts behind the feed, as its light words do,
+   so it takes their shadow and an outline that keeps it on a light picture. */
+#feed-slate img {
+    width: 68px;
+    height: 68px;
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
+}
+
+/* The Copy feed address dialog of the Watch page. */
+dialog.feed-address {
+    width: min(600px, calc(100% - 24px));
+    max-height: calc(100% - 24px);
+    padding: 16px 20px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+}
+
+dialog.feed-address::backdrop {
+    background: rgba(0, 0, 0, 0.6);
+}
+
+dialog.feed-address #fa-url {
+    box-sizing: border-box;
+    width: 100%;
+    font-family: var(--mono, monospace);
+    font-size: 13px;
+}
+
+/* The fields of a custom size in the dialogs that take a size. */
+.size-custom {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.size-custom[hidden] {
+    display: none;
+}
+
+.size-custom input {
+    width: 84px;
+}

cuju/render/web/feed.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<!--
+Copyright 2026 The cuju Authors
+SPDX-License-Identifier: Apache-2.0
+
+The clean feed of the renderer, a picture of fixed size for a streaming program such as OBS. It
+holds the Watch page in a frame laid out at the size that keeps the graphics in proportion and
+scales the frame to the picture, see js/feed-frame.js.
+-->
+<html lang="en-US">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; frame-src 'self'; object-src 'none'; base-uri 'self'; form-action 'none'">
+    <title data-i18n="feed.page.title">Cuju feed</title>
+    <link rel="icon" type="image/png" sizes="128x128" href="assets/cuju-logo.png">
+    <link rel="icon" type="image/svg+xml" sizes="any" href="assets/cuju-logo.svg">
+    <style>
+        html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; cursor: none; }
+        #feed-frame { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: transparent; pointer-events: none; color-scheme: dark; }
+    </style>
+    <script type="application/json" id="cuju-languages"></script>
+    <script type="module" src="js/feed-frame.js"></script>
+</head>
+<body>
+<iframe id="feed-frame" title="Cuju feed" data-i18n-title="feed.page.frame" scrolling="no" tabindex="-1"></iframe>
+</body>
+</html>