atris 3.74.14 → 3.74.15

package/lib/gm-phone-page.js

@@ -90,6 +90,8 @@ button:active:not(:disabled):not(.muted) { opacity: 0.7; }
 :focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
 /* a link's ring hugs its own tall tap box, round, so it never touches the button above */
 .links button:focus-visible, .quiet:focus-visible, .bet td button:focus-visible { outline-offset: 0; border-radius: 12px; }
+/* a new card holds the focus itself (landFocus): its ring is round like the page's boxes and clear of the small orb above */
+.bet:focus-visible { outline-offset: 6px; border-radius: 14px; }
 [hidden] { display: none !important; }
 /* dark until the page's script has run: a slow link never shows the words without the dots or the card */
 body:not(.on) .screen, body:not(.on) nav { visibility: hidden; }
@@ -104,9 +106,21 @@ body:not(.on) .screen, body:not(.on) nav { visibility: hidden; }
   padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
   display: flex; flex-direction: column; align-items: center; justify-content: center;
 }
+/* the big orb is 72% of the screen's short side, at most 520px. On a short
+   screen (a phone on its side) it is as tall as the room between the top
+   margin (--top) and the footer with 8px above it (--foot), once its line
+   has its two lines and the 4px above them (55px) */
 .stage { position: relative; width: min(72vmin, 520px); aspect-ratio: 1 / 1; }
-/* on a short screen (a phone on its side) the orb leaves room for its line and the footer */
-.stage { width: min(72vmin, 520px, 100svh - 200px); }
+@supports (height: 100svh) {
+  .screen {
+    --top: max(24px, env(safe-area-inset-top));
+    --foot: calc(max(20px, env(safe-area-inset-bottom)) + 44px + 8px);
+    --orb: min(72vmin, 520px, 100svh - var(--top) - var(--foot) - 55px);
+    /* the orb and its line stay centred, lifted only as far as the line needs to end above the footer */
+    padding-bottom: max(24px, env(safe-area-inset-bottom), var(--top) + var(--orb) + 55px + 2 * var(--foot) - 100svh);
+  }
+  .stage { width: var(--orb); }
+}
 .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; touch-action: none; cursor: pointer; }
 .stage canvas:focus-visible { outline-offset: -8%; }
 .line {
@@ -147,14 +161,21 @@ body.wide .screen { max-width: 64rem; }
 /* the team's member header is held with its names, so every header stays over its column */
 .bet table.k-team th.member { position: sticky; left: 0; z-index: 2; background: var(--bg); }
 .bet td.member button { font-size: 18px; font-weight: 700; text-align: left; min-height: 32px; }
-/* a long name never takes over a phone: the held column stops at about fifteen letters and the name breaks at its hyphens */
-.bet table.k-team td.member button { width: max-content; max-width: 8.5em; white-space: normal; overflow-wrap: break-word; }
+/* a long name never takes over a phone: the held column stops at about fifteen letters and the name breaks at its hyphens;
+   on the narrowest phones it stops sooner, so the status beside it keeps about 7rem */
+.bet table.k-team td.member button { width: max-content; max-width: min(8.5em, 100vw - 195px); white-space: normal; overflow-wrap: break-word; }
 .bet td.role { min-width: 9rem; color: var(--text-2); }
 .bet td.ovr { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
 .bet th.ovr { text-align: right; }
 .bet td.engine, .bet td.done { white-space: nowrap; }
 .bet td.engine button { text-align: left; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.25em; min-height: 32px; }
 .bet td.status { min-width: 16rem; color: var(--text-2); }
+/* the team's status is its last column: swiped all the way, it fills the room
+   beside the held names (--room, measured) and no more, so every line starts
+   beside the names, never under them; with room to spare it keeps 16rem, and
+   the table is only as wide as its columns, so no spare width widens it */
+.bet table.k-team { min-width: 0; }
+.bet table.k-team td.status { min-width: min(16rem, var(--room, 16rem)); overflow-wrap: anywhere; }
 .bet td.status.working { color: var(--text); }
 .bet td.status.waiting-for-your-yes, .bet td.status.needs-you { color: var(--amber); }
 .bet td.work { min-width: 14rem; }
@@ -498,8 +519,8 @@ body.waiting .bet { position: absolute; left: 24px; right: 24px; width: auto; to
     var CARRY = 0.82;
     // what the dots did on the last frame, kept on the canvas so the motion can be
     // measured, and ms: how much of the dots' own clock that frame was, which is
-    // at most 50ms however long the frame took
-    var stats = { frame: 0, mode: 'idle', step: 0, mean: 0, ms: 0 };
+    // at most 50ms however long the frame took; dots: how many the sphere has
+    var stats = { frame: 0, mode: 'idle', step: 0, mean: 0, ms: 0, dots: 0 };
     canvas.__orb = stats;
     // Two speeds, chosen by truth. A bet already waiting in the queue plays
     // the same curves at FAST of their length (tap to card in about two seconds, unhurried).
@@ -510,7 +531,17 @@ body.waiting .bet { position: absolute; left: 24px; right: 24px; width: auto; to
     var bridgeAt = 0;
     var REST = 56;
     var dpr = Math.min(window.devicePixelRatio || 1, 2);
-    var count = window.innerWidth < 768 ? 5500 : 11000;
+    // How many dots, by the size the sphere is drawn at. An upright phone's
+    // orb (230 to 320px across) draws 5500 and a laptop's (520px) 11000, as
+    // always. A smaller orb (a phone on its side) keeps the spacing of the
+    // narrowest phone's, and a bigger one the spacing of the biggest phone's
+    // until it reaches 11000, so the sphere is the same light stipple at any
+    // size and never a solid ball.
+    function dotsFor(size) {
+      if (size < 230) return Math.round(5500 * (size / 230) * (size / 230));
+      if (size <= 320) return 5500;
+      return Math.min(11000, Math.round(5500 * (size / 320) * (size / 320)));
+    }
     var w = 0, h = 0, R = 0, cx = 0, cy = 0;
     var dots = [];
     // the dots are drawn by color and brightness, LEVELS of each, so a frame
@@ -546,27 +577,40 @@ body.waiting .bet { position: absolute; left: 24px; right: 24px; width: auto; to
       n.style.setProperty('--spin', v[0]); n.style.setProperty('--rot0', v[1]);
     });
 
+    // the sphere's size on the page, and the dots that size holds
     function measure() {
       w = canvas.clientWidth; h = canvas.clientHeight;
       canvas.width = w * dpr; canvas.height = h * dpr;
       ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
       R = Math.min(w, h) * 0.42; cx = w / 2; cy = h / 2;
+      if (w && h) fit(dotsFor(Math.min(w, h)));
     }
 
-    function seed() {
-      // random points on a sphere (normalised gaussians), so it reads as stipple
+    // Grow or trim the sphere to n dots: random points on it (normalised
+    // gaussians), so it reads as stipple, and any n of them still do. Every
+    // dot kept keeps its place. The first dots start at the centre, so the
+    // sphere grows out of the point; one added later starts on the sphere.
+    function fit(n) {
+      if (n === dots.length) return;
       var gauss = function () { return Math.sqrt(-2 * Math.log(1 - Math.random())) * Math.cos(2 * Math.PI * Math.random()); };
-      dots = [];
-      px = new Float32Array(count); py = new Float32Array(count); pr = new Float32Array(count); pb = new Int16Array(count); order = new Int32Array(count);
-      for (var i = 0; i < count; i++) {
+      var born = dots.length > 0, cosA = Math.cos(angle), sinA = Math.sin(angle);
+      if (n < dots.length) dots.length = n;
+      while (dots.length < n) {
         var gx = gauss(), gy = gauss(), gz = gauss();
-        var n = Math.hypot(gx, gy, gz) || 1;
-        dots.push({
-          x: gx / n, y: gy / n, z: gz / n, sx: cx, sy: cy, vx: 0, vy: 0, r: 0.4 + Math.random() * 0.7, bx: 0, by: 0, dl: 0, kx: 0, ky: 0,
+        var len = Math.hypot(gx, gy, gz) || 1;
+        var d = {
+          x: gx / len, y: gy / len, z: gz / len, sx: cx, sy: cy, vx: 0, vy: 0, r: 0.4 + Math.random() * 0.7, bx: 0, by: 0, dl: 0, kx: 0, ky: 0,
           // its own slow loop in the swarm
           f1: 0.5 + Math.random() * 0.8, f2: 0.5 + Math.random() * 0.8, p1: Math.random() * 6.283, p2: Math.random() * 6.283,
-        });
+        };
+        if (born) { d.sx = cx + (d.x * cosA + d.z * sinA) * R; d.sy = cy + d.y * R; }
+        // mid spiral it goes in with the rest, from where it starts
+        d.bx = d.sx; d.by = d.sy;
+        d.dl = (1 - Math.min(1, Math.hypot(d.sx - cx, d.sy - cy) / (R || 1))) * 0.28 + Math.random() * 0.05;
+        dots.push(d);
       }
+      px = new Float32Array(n); py = new Float32Array(n); pr = new Float32Array(n); pb = new Int16Array(n); order = new Int32Array(n);
+      stats.dots = n;
     }
 
     // StippleOrb startBoom: each dot remembers where it starts, and the outer
@@ -909,7 +953,6 @@ body.waiting .bet { position: absolute; left: 24px; right: 24px; width: auto; to
     }
 
     measure();
-    seed();
 
     // StippleOrb's pointer, ported with trackWindow on, as LetterOrb uses it.
     // Over the sphere the dots part around the pointer and spring back; the
@@ -950,11 +993,12 @@ body.waiting .bet { position: absolute; left: 24px; right: 24px; width: auto; to
       var ratio = Math.min(window.devicePixelRatio || 1, 2);
       // a phone's bars sliding in and out send resizes too; only a real change redraws
       if (!canvas.clientWidth || (canvas.clientWidth === w && canvas.clientHeight === h && ratio === dpr)) return;
-      var was = { cx: cx, cy: cy, R: R };
+      var was = { cx: cx, cy: cy, R: R }, kept = dots.length;
       dpr = ratio;
       measure();
       var k = was.R ? R / was.R : 1;
-      for (var i = 0; i < dots.length; i++) {
+      // the dots it had move with the sphere; any it gained already sit on it
+      for (var i = 0; i < Math.min(kept, dots.length); i++) {
         var d = dots[i];
         d.sx = cx + (d.sx - was.cx) * k; d.sy = cy + (d.sy - was.cy) * k;
         d.bx = cx + (d.bx - was.cx) * k; d.by = cy + (d.by - was.cy) * k;
@@ -1141,9 +1185,7 @@ body.waiting .bet { position: absolute; left: 24px; right: 24px; width: auto; to
     var inCells = card.options.filter(function (o) { return o.cell; });
     if (card.table) {
       var grid = b.appendChild(drawTable(card, inCells));
-      // whatever scrolls into view in the table lands beside the held names, never under them
-      var held = grid.querySelector('tbody td.member');
-      if (held && getComputedStyle(held).position === 'sticky') grid.style.scrollPaddingLeft = held.offsetWidth + 'px';
+      holdNames(grid);
       moreRight(grid);
       grid.addEventListener('scroll', function () { moreRight(grid); }, { passive: true });
     }
@@ -1203,7 +1245,16 @@ body.waiting .bet { position: absolute; left: 24px; right: 24px; width: auto; to
 
   // the fade on a table's right edge, while some of it is still off to the right
   function moreRight(grid) { grid.classList.toggle('more-right', grid.scrollLeft + grid.clientWidth < grid.scrollWidth - 1); }
-  window.addEventListener('resize', function () { var g = box().querySelector('.grid'); if (g) moreRight(g); });
+  // whatever scrolls into view in the table lands beside the held names, never
+  // under them, and the room beside them is kept for the last column's width
+  function holdNames(grid) {
+    var held = grid.querySelector('tbody td.member');
+    if (!held || getComputedStyle(held).position !== 'sticky' || !grid.clientWidth) return;
+    grid.style.scrollPaddingLeft = held.offsetWidth + 'px';
+    grid.style.setProperty('--room', (grid.clientWidth - held.offsetWidth) + 'px');
+  }
+  // a turned phone: the room beside the names changes with the screen
+  window.addEventListener('resize', function () { var g = box().querySelector('.grid'); if (g) { holdNames(g); moreRight(g); } });
   // A row of small links that wraps never ends or starts a line with its dot:
   // a dot whose two links sit on different lines becomes the line break.
   function breakLinks(root) {
@@ -2291,17 +2342,21 @@ body.waiting .bet { position: absolute; left: 24px; right: 24px; width: auto; to
   }, true);
 
   // Where the focus goes. A new card: when the focus left with the old card
-  // (or sits on the orb), it goes to the new card's first action, never its
-  // typing box, so a keyboard or a screen reader carries on from there. Back
-  // on the big orb, a focus that was lost goes to the orb itself.
+  // (or sits on the orb), it goes to the card itself, never to one of its
+  // options or its typing box. An Enter still being pressed (a note just
+  // sent with Enter) then lands on nothing, never on do it or yes, which arm
+  // and then start; a screen reader reads the card from its title, and one
+  // Tab is its first option. Back on the big orb, a focus that was lost (on
+  // a card that has gone) goes to the orb itself.
   function focusFree() {
     var a = document.activeElement;
-    return !a || a === document.body || !a.isConnected || a.id === 'orb' || a.id === 'lava';
+    return !a || a === document.body || !a.isConnected || a.id === 'orb' || a.id === 'lava' || (a === box() && !document.body.classList.contains('has-card'));
   }
+  // the card can hold the focus, though Tab never stops on it
+  box().tabIndex = -1;
   function landFocus() {
     if (!document.body.classList.contains('has-card') || !focusFree()) return;
-    var first = box().querySelector('button:not([disabled]):not(.send)');
-    if (first) first.focus({ preventScroll: true });
+    box().focus({ preventScroll: true });
   }
   new MutationObserver(function () {
     var orbNode = document.getElementById('orb');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atris",
-  "version": "3.74.14",
+  "version": "3.74.15",
   "description": "you say what you want in plain words. atris builds it, checks it, and shows you proof.",
   "mcpName": "io.github.atrislabs/atris",
   "main": "bin/atris.js",