feat: enhance tv-board-zoom functionality with new mutation handling and improve bull-off theme layout

thomasasen · thomasasen · commit debeebaccf9f · 2026-04-05T18:34:02.000+02:00
diff --git a/dist/autodarts-xconfig.user.js b/dist/autodarts-xconfig.user.js
@@ -30624,6 +30624,11 @@ div.css-nfhdnc {
   backdrop-filter: blur(1px);
 }
 
+#ad-ext-player-display .ad-ext-player > .chakra-stack{
+  grid-template-rows: max-content max-content !important;
+  align-content: center !important;
+}
+
 #ad-ext-player-display .ad-ext-player.ad-ext-player-active{
   border: 2px solid rgba(102, 187, 106, var(--bull-active-border-alpha)) !important;
   box-shadow:
@@ -30652,6 +30657,11 @@ div.css-nfhdnc {
   color: #9ca8b9 !important;
 }
 
+#ad-ext-player-display .ad-ext-player.ad-ext-player-inactive p.chakra-text.ad-ext-player-score,
+#ad-ext-player-display .ad-ext-player.ad-ext-player-inactive .ad-ext_winner-score-wrapper > p{
+  font-size: 7.2em !important;
+}
+
 span.css-3fr5p8{
   background: linear-gradient(90deg, var(--bull-green), var(--bull-red));
   color: #101215;
diff --git a/src/features/themes/bull-off/style.js b/src/features/themes/bull-off/style.js
@@ -129,6 +129,11 @@ div.css-nfhdnc {
   backdrop-filter: blur(1px);
 }
 
+#ad-ext-player-display .ad-ext-player > .chakra-stack{
+  grid-template-rows: max-content max-content !important;
+  align-content: center !important;
+}
+
 #ad-ext-player-display .ad-ext-player.ad-ext-player-active{
   border: 2px solid rgba(102, 187, 106, var(--bull-active-border-alpha)) !important;
   box-shadow:
@@ -157,6 +162,11 @@ div.css-nfhdnc {
   color: #9ca8b9 !important;
 }
 
+#ad-ext-player-display .ad-ext-player.ad-ext-player-inactive p.chakra-text.ad-ext-player-score,
+#ad-ext-player-display .ad-ext-player.ad-ext-player-inactive .ad-ext_winner-score-wrapper > p{
+  font-size: 7.2em !important;
+}
+
 span.css-3fr5p8{
   background: linear-gradient(90deg, var(--bull-green), var(--bull-red));
   color: #101215;
diff --git a/src/features/tv-board-zoom/index.js b/src/features/tv-board-zoom/index.js
@@ -31,6 +31,20 @@ const THROW_HISTORY_CLICK_SELECTORS = Object.freeze([
   "#ad-ext-turn .ad-ext-turn-throw",
   ".ad-ext-turn-throw",
 ]);
+const ZOOM_STRUCTURE_TARGET_SELECTORS = Object.freeze([
+  "svg",
+  ".showAnimations",
+  ".ad-ext-theme-board-canvas",
+  ".ad-ext-theme-board-viewport",
+  ".ad-ext-theme-board-panel",
+  ".ad-ext-theme-content-board",
+]);
+const ZOOM_SEMANTIC_CONTAINER_SELECTORS = Object.freeze([
+  ".suggestion",
+  ".ad-ext-player-score",
+  "#ad-ext-turn",
+  ".ad-ext-turn-throw",
+]);
 
 function isThrowHistoryClickTarget(targetNode) {
   if (!targetNode || typeof targetNode.closest !== "function") {
@@ -48,6 +62,143 @@ function resolveZoomLevel(zoomLevel) {
   return 2.75;
 }
 
+function toElementNode(node) {
+  let current = node || null;
+  while (current && current.nodeType !== 1) {
+    current = current.parentNode || null;
+  }
+  return current || null;
+}
+
+function elementMatchesAnySelector(node, selectors = []) {
+  const elementNode = toElementNode(node);
+  if (!elementNode || typeof elementNode.matches !== "function") {
+    return false;
+  }
+
+  return selectors.some((selector) => {
+    try {
+      return elementNode.matches(selector);
+    } catch (_) {
+      return false;
+    }
+  });
+}
+
+function nodeOrAncestorMatchesAnySelector(node, selectors = []) {
+  const elementNode = toElementNode(node);
+  if (!elementNode || typeof elementNode.closest !== "function") {
+    return false;
+  }
+
+  return selectors.some((selector) => {
+    try {
+      return Boolean(elementNode.closest(selector));
+    } catch (_) {
+      return false;
+    }
+  });
+}
+
+function getTouchedMutationNodes(mutation) {
+  const nodes = [];
+  const pushNode = (node) => {
+    if (node) {
+      nodes.push(node);
+    }
+  };
+
+  pushNode(mutation?.target || null);
+  Array.from(mutation?.addedNodes || []).forEach(pushNode);
+  Array.from(mutation?.removedNodes || []).forEach(pushNode);
+  return nodes;
+}
+
+function isDirectWatchedNodeMutation(mutation, watchedNodes = []) {
+  if (!Array.isArray(watchedNodes) || !watchedNodes.length) {
+    return false;
+  }
+
+  return getTouchedMutationNodes(mutation).some((node) => watchedNodes.includes(node));
+}
+
+function isDescendantWatchedNodeMutation(mutation, watchedNodes = []) {
+  if (!Array.isArray(watchedNodes) || !watchedNodes.length) {
+    return false;
+  }
+
+  return getTouchedMutationNodes(mutation).some((touchedNode) => {
+    return watchedNodes.some((watchedNode) => {
+      if (!watchedNode || touchedNode === watchedNode) {
+        return touchedNode === watchedNode;
+      }
+
+      if (typeof touchedNode?.contains === "function" && touchedNode.contains(watchedNode)) {
+        return true;
+      }
+      if (typeof watchedNode?.contains === "function" && watchedNode.contains(touchedNode)) {
+        return true;
+      }
+      return false;
+    });
+  });
+}
+
+export function shouldScheduleTvBoardZoomMutation(mutations = [], context = {}) {
+  if (!Array.isArray(mutations) || !mutations.length) {
+    return false;
+  }
+
+  const watchedNodes = [
+    context.boardSurface?.svg || null,
+    context.boardSurface?.group || null,
+    context.boardSurface?.zoomTarget || null,
+    context.boardSurface?.zoomHost || null,
+    context.zoomState?.zoomedElement || null,
+    context.zoomState?.zoomHost || null,
+  ].filter(Boolean);
+
+  return mutations.some((mutation) => {
+    if (!mutation || typeof mutation !== "object") {
+      return false;
+    }
+
+    const mutationType = String(
+      mutation.type ||
+        (mutation.attributeName
+          ? "attributes"
+          : mutation.addedNodes || mutation.removedNodes
+            ? "childList"
+            : "")
+    );
+
+    if (mutationType === "attributes") {
+      return (
+        isDirectWatchedNodeMutation(mutation, watchedNodes) ||
+        elementMatchesAnySelector(mutation.target, ZOOM_STRUCTURE_TARGET_SELECTORS)
+      );
+    }
+
+    if (mutationType === "characterData") {
+      return nodeOrAncestorMatchesAnySelector(mutation.target, ZOOM_SEMANTIC_CONTAINER_SELECTORS);
+    }
+
+    if (mutationType === "childList") {
+      return (
+        isDescendantWatchedNodeMutation(mutation, watchedNodes) ||
+        getTouchedMutationNodes(mutation).some((node) =>
+          nodeOrAncestorMatchesAnySelector(node, [
+            ...ZOOM_STRUCTURE_TARGET_SELECTORS,
+            ...ZOOM_SEMANTIC_CONTAINER_SELECTORS,
+          ])
+        )
+      );
+    }
+
+    return false;
+  });
+}
+
 function getNodeClassName(node) {
   if (!node || typeof node.getAttribute !== "function") {
     return "";
@@ -163,6 +314,7 @@ export function initializeTvBoardZoom(context = {}) {
     lastTurnId: "",
     lastThrowCount: -1,
     lastAppliedSignature: "",
+    lastAppliedIntentSignature: "",
     releaseTimeoutId: 0,
     targetStyleSnapshot: null,
     hostStyleSnapshot: null,
@@ -337,6 +489,9 @@ export function initializeTvBoardZoom(context = {}) {
         if (!hasExternalDomMutation(mutations, isManagedNode)) {
           return;
         }
+        if (!shouldScheduleTvBoardZoomMutation(mutations, { boardSurface: boardCache.surface, zoomState })) {
+          return;
+        }
         invalidateBoardCache();
         scheduler.schedule();
       },
diff --git a/src/features/tv-board-zoom/logic.js b/src/features/tv-board-zoom/logic.js
@@ -34,6 +34,7 @@ const CHECKOUT_DOUBLE_ZOOM_RANGE = Object.freeze({
   min: 2.35,
   max: 3.15,
 });
+const TRANSFORM_SIGNATURE_STEP_PX = 0.5;
 
 function parseScoreText(text) {
   const match = String(text || "").match(/-?\d+/);
@@ -165,6 +166,19 @@ export function getBestVisibleScoreFromDom(documentRef, windowRef) {
   return candidates[0].value;
 }
 
+function quantizeForSignature(value, step = TRANSFORM_SIGNATURE_STEP_PX) {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+
+  const numericStep = Number(step);
+  if (!Number.isFinite(numericStep) || numericStep <= 0) {
+    return value;
+  }
+
+  return Math.round(value / numericStep) * numericStep;
+}
+
 function parseSegmentWithFallback(segmentName, x01Rules) {
   if (x01Rules && typeof x01Rules.parseSegment === "function") {
     const parsed = x01Rules.parseSegment(segmentName);
@@ -931,18 +945,22 @@ export function buildZoomTransform(options = {}) {
   }
 
   const transform = `translate(${tx.toFixed(2)}px, ${ty.toFixed(2)}px) scale(${zoomLevel.toFixed(4)})`;
-  const signature = [
-    baseTransform || "none",
-    tx.toFixed(2),
-    ty.toFixed(2),
-    zoomLevel.toFixed(4),
+  const intentSignature = [
     String(segmentPoint.parsedSegment?.normalized || intent.segment || ""),
     String(intent.reason || ""),
+    zoomLevel.toFixed(4),
+  ].join("|");
+  const signature = [
+    baseTransform || "none",
+    quantizeForSignature(tx).toFixed(2),
+    quantizeForSignature(ty).toFixed(2),
+    intentSignature,
   ].join("|");
 
   return {
     transform,
     baseTransform,
+    intentSignature,
     signature,
     anchor,
     tx,
@@ -1271,6 +1289,7 @@ export function applyZoom(
     restoreTargetStyle(state, state.zoomedElement);
     state.zoomedElement = null;
     state.lastAppliedSignature = "";
+    state.lastAppliedIntentSignature = "";
   }
   if (state.zoomHost && state.zoomHost !== hostNode) {
     restoreHostStyle(state, state.zoomHost);
@@ -1299,30 +1318,47 @@ export function applyZoom(
   }
   if (hostNode?.classList) {
     cacheHostStyle(state, hostNode);
-    hostNode.classList.add(ZOOM_HOST_CLASS);
-    setStyleWithPriority(hostNode.style, "overflow", "hidden", "important");
-    setStyleWithPriority(hostNode.style, "overflow-x", "hidden", "important");
-    setStyleWithPriority(hostNode.style, "overflow-y", "hidden", "important");
+    if (!hostNode.classList.contains(ZOOM_HOST_CLASS)) {
+      hostNode.classList.add(ZOOM_HOST_CLASS);
+    }
+    if (getStyleValue(hostNode.style, "overflow") !== "hidden") {
+      setStyleWithPriority(hostNode.style, "overflow", "hidden", "important");
+    }
+    if (getStyleValue(hostNode.style, "overflow-x") !== "hidden") {
+      setStyleWithPriority(hostNode.style, "overflow-x", "hidden", "important");
+    }
+    if (getStyleValue(hostNode.style, "overflow-y") !== "hidden") {
+      setStyleWithPriority(hostNode.style, "overflow-y", "hidden", "important");
+    }
   }
   applyGifOverlayContainment(state, targetNode, hostNode || targetNode);
 
   const composedTransform = zoomData.baseTransform
     ? `${zoomData.baseTransform} ${zoomData.transform}`
     : zoomData.transform;
+  const isSameVisualIntent =
+    state.zoomedElement === targetNode &&
+    state.zoomHost === (hostNode || null) &&
+    state.lastAppliedIntentSignature === zoomData.intentSignature;
   if (state.zoomedElement === targetNode && state.lastAppliedSignature === zoomData.signature) {
     state.zoomHost = hostNode || null;
     return zoomData;
   }
 
-  targetNode.classList.add(ZOOM_CLASS);
+  if (!targetNode.classList.contains(ZOOM_CLASS)) {
+    targetNode.classList.add(ZOOM_CLASS);
+  }
   targetNode.style.transformOrigin = "0 0";
   targetNode.style.willChange = "transform";
-  targetNode.style.transition = `transform ${speedConfig.zoomInMs}ms ${speedConfig.easingIn}`;
+  targetNode.style.transition = isSameVisualIntent
+    ? "none"
+    : `transform ${speedConfig.zoomInMs}ms ${speedConfig.easingIn}`;
   targetNode.style.transform = composedTransform;
 
   state.zoomedElement = targetNode;
   state.zoomHost = hostNode || null;
   state.lastAppliedSignature = zoomData.signature;
+  state.lastAppliedIntentSignature = zoomData.intentSignature;
   return zoomData;
 }
 
@@ -1343,6 +1379,7 @@ export function resetZoom(speedConfig, state, immediate = false) {
     state.zoomHost = null;
     state.hostStyleSnapshot = null;
     state.lastAppliedSignature = "";
+    state.lastAppliedIntentSignature = "";
     return;
   }
 
@@ -1358,6 +1395,7 @@ export function resetZoom(speedConfig, state, immediate = false) {
     state.targetStyleSnapshot = null;
     state.hostStyleSnapshot = null;
     state.lastAppliedSignature = "";
+    state.lastAppliedIntentSignature = "";
     return;
   }
 
@@ -1384,5 +1422,6 @@ export function resetZoom(speedConfig, state, immediate = false) {
     }
 
     state.lastAppliedSignature = "";
+    state.lastAppliedIntentSignature = "";
   }, releaseDelay);
 }
diff --git a/tests/runtime/theme-template-parity.test.js b/tests/runtime/theme-template-parity.test.js
@@ -113,6 +113,10 @@ test("bull-off keeps oldrepo board-first grid and no preview spacer", () => {
     css,
     /#ad-ext-player-display\s+\.ad-ext-player\.ad-ext-player-active\s*>\s*\.chakra-stack,\s*#ad-ext-player-display\s+\.ad-ext-player\.ad-ext-player-winner\s*>\s*\.chakra-stack\s*\{[^}]*grid-template-rows:\s*max-content max-content\s*!important;[^}]*align-content:\s*center\s*!important;/s
   );
+  assert.match(
+    css,
+    /#ad-ext-player-display\s+\.ad-ext-player\s*>\s*\.chakra-stack\s*\{[^}]*grid-template-rows:\s*max-content max-content\s*!important;[^}]*align-content:\s*center\s*!important;/s
+  );
   assert.match(
     css,
     /#ad-ext-player-display\s+\.ad-ext-player\s*>\s*\.chakra-stack\s*\{[^}]*display:\s*grid\s*!important;[^}]*grid-template-columns:\s*minmax\(0,\s*1fr\)\s*max-content\s*!important;[^}]*gap:\s*0px\s*!important;[^}]*min-width:\s*0\s*!important;/s
@@ -121,6 +125,10 @@ test("bull-off keeps oldrepo board-first grid and no preview spacer", () => {
     css,
     /#ad-ext-player-display\s+\.ad-ext-player\s+\.ad-ext-player-score\s*\{[^}]*justify-self:\s*end\s*!important;[^}]*min-width:\s*max-content\s*!important;[^}]*white-space:\s*nowrap\s*!important;/s
   );
+  assert.match(
+    css,
+    /#ad-ext-player-display\s+\.ad-ext-player\.ad-ext-player-inactive\s+p\.chakra-text\.ad-ext-player-score,\s*#ad-ext-player-display\s+\.ad-ext-player\.ad-ext-player-inactive\s+\.ad-ext_winner-score-wrapper\s*>\s*p\s*\{[^}]*font-size:\s*7\.2em\s*!important;/s
+  );
   assert.match(css, /grid-template-columns:\s*0\.94fr 1\.06fr\s*!important;/);
   assert.match(
     css,
diff --git a/tests/runtime/tv-board-zoom-layout.test.js b/tests/runtime/tv-board-zoom-layout.test.js
diff --git a/tests/runtime/tv-board-zoom-runtime.test.js b/tests/runtime/tv-board-zoom-runtime.test.js
