Versie 0.2.0

client/ui/attention-ring.js

@@ -0,0 +1,31 @@
+// Generated, do not edit. sha256:0c32d1144a8a497df1fbe9e1a74301ff3b50ab942217dad783d7ff7727f69eb8
+import { CONFIG } from '../../shared/config.js';
+
+const timers = new WeakMap();
+
+export function pulseAttention(card, { rounds = CONFIG.ATTENTION_RING.ROUNDS } = {}) {
+  if (!card) return;
+  ringIn(card);
+  card.classList.add('is-attention');
+  clearTimeout(timers.get(card));
+  timers.set(card, setTimeout(() => card.classList.remove('is-attention'), rounds * CONFIG.ATTENTION_RING.ROUND_MS));
+}
+
+export function holdAttention(card) {
+  if (!card) return;
+  ringIn(card);
+  clearTimeout(timers.get(card));
+  card.classList.add('is-attention');
+}
+
+function ringIn(card) {
+  let ring = card.querySelector(':scope > .attn');
+  if (!ring) {
+    ring = document.createElement('span');
+    ring.className = 'attn';
+    ring.setAttribute('aria-hidden', 'true');
+    ring.innerHTML = '<span class="attn-spin"></span>';
+    card.prepend(ring);
+  }
+  card.style.setProperty('--attn-d', `${Math.ceil(Math.hypot(card.offsetWidth, card.offsetHeight))}px`);
+}