A uniselector for the pause

Foundry's pause is a spinning d20 and a caption. This replaces both from CSS alone, without touching the markup: figure#pause becomes a small navy panel with a yellow rule along the top, and the <img> becomes the arm of a uniselector. A uniselector is the stepping switch inside a telephone exchange — an arm that clicks round one contact at a time, hunting for a free line. It is the right object for this game. The department's whole business is a machine that says where things belong, and OPEN DAY is set inside one. Eleven contacts, because eleven minutes is the interval this setting keeps returning to. It STEPS rather than sweeps: steps(11) over 7.7s, so a contact every 700ms. A continuous spin reads as a loading throbber; a discrete click reads as a machine working through a list, which is what the department is doing while the table is out of the room. The arm carries a faint trailing sector, because without it a 700ms step is easy to miss and the stepping is the whole idea. No new text. Foundry's caption is localised and this only restyles it — a string hardcoded in a stylesheet would be one the lang file could never reach. Two things the browser had to be asked rather than assumed: - Core pins #pause with BOTH top and bottom, so an auto height stretched it to 180px for a 16px caption. It is pinned here instead and sized to content. - The arm is rotated, so getBoundingClientRect returns the diagonal of its own square (75px for a 52px element). The layout takes its size from the flex basis and never from the measured box. prefers-reduced-motion stops the movement and keeps the object — a stepping dial in the corner of the eye is exactly what that preference is asking about. Version 1.0.4. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-12 19:25:12 +01:00
parent 53481bdfc1
commit ad771ff2b5
19 changed files with 119 additions and 18 deletions
@@ -1 +1 @@
-2026/08/12-19:12:20.951787 172dab000 Delete type=3 #1
+2026/08/12-19:24:52.815175 17303f000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:21.036764 172dab000 Delete type=3 #1
+2026/08/12-19:24:52.889991 17384b000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:20.954786 17259f000 Delete type=3 #1
+2026/08/12-19:24:52.817229 17303f000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:21.015776 172dab000 Delete type=3 #1
+2026/08/12-19:24:52.871528 174057000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:20.996296 1735b7000 Delete type=3 #1
+2026/08/12-19:24:52.853027 17303f000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:21.030689 17259f000 Delete type=3 #1
+2026/08/12-19:24:52.884011 174057000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:20.979932 17259f000 Delete type=3 #1
+2026/08/12-19:24:52.837710 17303f000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:21.025079 172dab000 Delete type=3 #1
+2026/08/12-19:24:52.880282 174057000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:21.020396 17259f000 Delete type=3 #1
+2026/08/12-19:24:52.876362 172833000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:21.035224 1735b7000 Delete type=3 #1
+2026/08/12-19:24:52.888015 174057000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:20.942094 17259f000 Delete type=3 #1
+2026/08/12-19:24:52.808706 17303f000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:21.028001 17259f000 Delete type=3 #1
+2026/08/12-19:24:52.882429 174057000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:21.007789 17259f000 Delete type=3 #1
+2026/08/12-19:24:52.863812 17384b000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:21.001198 172dab000 Delete type=3 #1
+2026/08/12-19:24:52.857469 17384b000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:20.946329 173dc3000 Delete type=3 #1
+2026/08/12-19:24:52.811553 17303f000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:20.956885 17259f000 Delete type=3 #1
+2026/08/12-19:24:52.819322 17303f000 Delete type=3 #1
@@ -1 +1 @@
-2026/08/12-19:12:20.948434 17259f000 Delete type=3 #1
+2026/08/12-19:24:52.813317 17384b000 Delete type=3 #1
@@ -1684,3 +1684,104 @@
 .rb-dying { border-left: 3px solid var(--rb-danger); padding-left: 8px; }
 .rb-stable { border-left: 3px solid var(--rb-yellow); padding-left: 8px; }
 .rb-dead { border-left: 3px solid var(--rb-white); padding-left: 8px; }
+
+/* ============================================================
+   THE PAUSE — a uniselector, stepping
+   ============================================================
+   Foundry's pause is a <figure id="pause"> holding an <img class="fa-spin"> and a
+   <figcaption>. Both are replaced here without touching the markup.
+
+   A uniselector is the stepping switch inside a telephone exchange: an arm that clicks
+   round one contact at a time, hunting for a free line. It is the right object for this
+   game — the department's whole business is a machine that says where things belong,
+   and OPEN DAY is set inside one. Eleven contacts, because eleven minutes is the
+   interval this setting keeps coming back to.
+
+   It STEPS rather than sweeps. A continuous spin reads as a loading throbber; a
+   discrete click every 700ms reads as a machine working through a list, which is what
+   the department is doing while the table is out of the room.
+
+   No new text: Foundry's own caption is localised and this only restyles it. A string
+   hardcoded here would be one the lang file could never reach.
+   ============================================================ */
+
+#pause {
+  /* Core pins this with BOTH top and bottom, so an auto height stretches it down the
+     whole screen — 180px tall for a 16px caption. Pin it once, here, and size to
+     content. The arm is rotated, so its bounding box is the diagonal of its own square:
+     the panel is laid out from the flex basis, never from getBoundingClientRect. */
+  position: fixed;
+  left: 50%; bottom: 14vh; top: auto; right: auto;
+  transform: translateX(-50%);
+  height: auto; width: max-content;
+  display: flex; align-items: center; gap: 16px;
+  min-width: 320px; padding: 14px 22px 14px 16px;
+  background: color-mix(in srgb, var(--rb-void) 88%, transparent);
+  border: 1px solid var(--rb-line);
+  border-top: 2px solid var(--rb-yellow);
+  border-radius: 0;
+  box-shadow: 0 10px 40px rgba(0,0,0,.55);
+}
+
+/* the dial: eleven contacts, standing still */
+#pause::before {
+  content: "";
+  position: absolute; left: 16px; top: 50%;
+  width: 52px; height: 52px; margin-top: -26px;
+  border-radius: 50%;
+  border: 1px solid var(--rb-hairline);
+  background:
+    repeating-conic-gradient(from -90deg,
+      var(--rb-line) 0deg 2.4deg, transparent 2.4deg 32.727deg);
+  -webkit-mask: radial-gradient(circle, transparent 0 15px, #000 16px);
+          mask: radial-gradient(circle, transparent 0 15px, #000 16px);
+  opacity: .95;
+}
+
+/* the arm. The <img> keeps its box and loses its pixels: object-position walks the
+   raster out of the frame, which leaves a paintable element without a second wrapper. */
+#pause img {
+  position: relative; z-index: 1;
+  flex: 0 0 52px; width: 52px; height: 52px; margin: 0;
+  object-fit: none; object-position: -999px -999px;
+  border: none; filter: none;
+  /* the arm, and behind it the contact it has just left — without the trailing sector
+     a 700ms step is easy to miss entirely, and the whole point is that it is stepping */
+  background: conic-gradient(from -92deg,
+    var(--rb-yellow) 0deg 5deg,
+    var(--rb-yellow-dim) 5deg 30deg,
+    transparent 30deg 360deg);
+  -webkit-mask: radial-gradient(circle, #000 0 22px, transparent 23px);
+          mask: radial-gradient(circle, #000 0 22px, transparent 23px);
+  animation: rb-uniselector 7.7s steps(11, end) infinite;
+}
+/* Foundry adds fa-spin to that img; ours is the only rotation that should run. */
+#pause img.fa-spin { animation: rb-uniselector 7.7s steps(11, end) infinite; }
+
+/* the hub, and the amber that says the record is being written */
+#pause::after {
+  content: "";
+  position: absolute; left: 38px; top: 50%;
+  width: 8px; height: 8px; margin-top: -4px;
+  border-radius: 50%;
+  background: var(--rb-yellow);
+  animation: rb-pause-pip 2.6s ease-in-out infinite;
+}
+
+#pause figcaption {
+  font-family: var(--rb-display);
+  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
+  color: var(--rb-yellow);
+  text-shadow: none; padding: 0; margin: 0;
+  border-left: 1px solid var(--rb-hairline); padding-left: 16px;
+}
+
+@keyframes rb-uniselector { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+@keyframes rb-pause-pip   { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
+
+/* A stepping dial in the corner of the eye is exactly the sort of thing a reduced-motion
+   preference is asking us not to do. Keep the object, stop the movement. */
+@media (prefers-reduced-motion: reduce) {
+  #pause img, #pause img.fa-spin, #pause::after { animation: none; }
+  #pause img { transform: rotate(-32deg); }
+}
@@ -2,7 +2,7 @@
  "id": "ringbrp",
  "title": "The Custodians",
  "description": "A Basic Roleplaying game of agents who cross the crossing to contain what should not be there — and who come back a little less from here each time.",
-  "version": "1.0.3",
+  "version": "1.0.4",
  "compatibility": {
    "minimum": 13,
    "verified": "14.364"