refactor: enhance animation reflow handling and improve changelog consistency checks

Author: thomasasen

CHANGELOG.md

@@ -21,6 +21,12 @@ direkt zu einer versionierten Release-Sektion.
 
 ### Fixed
 
+- Nutzerwirkung: Keine beabsichtigte sichtbare Verhaltensänderung; ausgewählte Board-, Sweep- und Trend-Animationen sowie der interne Changelog-Check laufen auf denselben fachlichen Pfaden weiter, sind aber in dieser Sonar-Welle klarer und direkter ausgedrückt.
+  Technik: Die vier `void`-basierten Reflow-Trigger in `average-trend-arrow`, `turn-start-sweep` und `cricket-grid-fx` verwenden jetzt explizite lokale Reflow-Helfer statt des `void`-Operators, das kleine `S3776` in `scripts/check-changelog-consistency.mjs` wurde nur durch lokale Helper-Aufteilung reduziert, und neue direkte Runtime-Tests sichern die Re-Trigger-/Cleanup-Verträge der Sweep- und Trend-Animationen auf dem Fake-DOM gegen Drift ab.
+
+- Nutzerwirkung: Keine beabsichtigte sichtbare Verhaltensänderung; die Board-SVG-Erkennung verarbeitet `viewBox`-Werte weiterhin identisch, drückt eine rein mechanische String-Normalisierung aber direkter aus.
+  Technik: In `dartboard-svg` wurde ein einzelner Sonar-Reliability-Treffer (`S7781`) mit dem kleinstmöglichen Diff bereinigt, indem die feste Komma-Ersetzung von einer Regex-Variante auf `replaceAll(\",\", \" \")` umgestellt wurde; die bestehende Runtime-Abdeckung für ViewBox-Parsing und Board-Erkennung bleibt dabei unverändert der fachliche Schutz.
+
 - Nutzerwirkung: Keine beabsichtigte sichtbare Verhaltensänderung; die nächste sichere Sonar-Welle hält `Triple/Double/Bull Hits` bei denselben Throw-, Burst- und Korrekturpfaden, räumt interne Dekorations-Metadaten aber konsequent auf moderneren DOM-Zugriff um.
   Technik: In `triple-double-bull-hits/logic` wurden die verbliebenen mechanischen `dataset`- und Optional-Chaining-Treffer lokal ersetzt, ohne Signaturen oder Ablaufsteuerung zu ändern; die bestehenden Runtime-Regressionen prüfen jetzt zusätzlich, dass Theme-/Burst-Metadaten beim Setzen und Löschen der Hit-Dekoration weiterhin korrekt über `dataset` und Attributspiegelung synchron bleiben.
 

dist/autodarts-xconfig.user.js

@@ -7191,7 +7191,7 @@
         hasExactBoardViewBox: false
       };
     }
-    const rawViewBox = String(node.getAttribute("viewBox") || "").trim().replaceAll(/,/g, " ").replaceAll(/\s+/g, " ");
+    const rawViewBox = String(node.getAttribute("viewBox") || "").trim().replaceAll(",", " ").replaceAll(/\s+/g, " ");
     if (!rawViewBox) {
       return {
         hasSquareViewBox: false,
@@ -11095,12 +11095,21 @@
     }
     return arrow;
   }
+  function forceAnimationReflow(node) {
+    if (!node) {
+      return 0;
+    }
+    if (Number.isFinite(node.offsetWidth)) {
+      return node.offsetWidth;
+    }
+    return Number(node.getBoundingClientRect?.().width || 0);
+  }
   function animateArrowNode(arrowNode, durationMs, timeoutByArrow) {
     if (!arrowNode?.classList) {
       return;
     }
     arrowNode.classList.remove(ANIMATE_CLASS);
-    void arrowNode.offsetWidth;
+    forceAnimationReflow(arrowNode);
     arrowNode.classList.add(ANIMATE_CLASS);
     const previousTimeout = timeoutByArrow.get(arrowNode);
     if (previousTimeout) {
@@ -11462,6 +11471,15 @@
   function findActivePlayerNode(documentRef) {
     return findBySelectors(documentRef, ACTIVE_PLAYER_SELECTORS);
   }
+  function forceAnimationReflow2(node) {
+    if (!node) {
+      return 0;
+    }
+    if (Number.isFinite(node.offsetWidth)) {
+      return node.offsetWidth;
+    }
+    return Number(node.getBoundingClientRect?.().width || 0);
+  }
   function runTurnStartSweep(node, state, config = {}, windowRef = null) {
     if (!node?.classList || !state) {
       return;
@@ -11471,7 +11489,7 @@
     const setTimeoutRef = windowRef && typeof windowRef.setTimeout === "function" ? windowRef.setTimeout.bind(windowRef) : setTimeout;
     const clearTimeoutRef = windowRef && typeof windowRef.clearTimeout === "function" ? windowRef.clearTimeout.bind(windowRef) : clearTimeout;
     node.classList.remove(SWEEP_CLASS);
-    void node.offsetWidth;
+    forceAnimationReflow2(node);
     node.classList.add(SWEEP_CLASS);
     state.nodes.add(node);
     const previousTimeout = state.timeoutsByNode.get(node);
@@ -19705,12 +19723,21 @@
     }
     badgeNode.classList.add(BADGE_STATE_CLASS.neutral);
   }
+  function forceAnimationReflow3(node) {
+    if (!node) {
+      return 0;
+    }
+    if (Number.isFinite(node.offsetWidth)) {
+      return node.offsetWidth;
+    }
+    return Number(node.getBoundingClientRect?.().width || 0);
+  }
   function toggleTimedClass(state, node, className, timeoutMs = 700) {
     if (!state || !node?.classList || !className) {
       return;
     }
     node.classList.remove(className);
-    void node.offsetWidth;
+    forceAnimationReflow3(node);
     node.classList.add(className);
     const timeoutRef = state.windowRef && typeof state.windowRef.setTimeout === "function" ? state.windowRef.setTimeout.bind(state.windowRef) : setTimeout;
     const handle = timeoutRef(() => {
@@ -19736,7 +19763,7 @@
       return;
     }
     clearProgressClasses(targetNode);
-    void targetNode.offsetWidth;
+    forceAnimationReflow3(targetNode);
     targetNode.classList.add(MARK_PROGRESS_CLASS);
     const clampedMarks = Math.max(0, Math.min(3, Number(marks) || 0));
     targetNode.classList.add(

scripts/check-changelog-consistency.mjs

@@ -109,65 +109,86 @@ function parseCompareLink(link) {
   };
 }
 
-function validateSectionEntries(section) {
-  const errors = [];
-  const lines = section.body.split("\n");
-  let entryCount = 0;
-  let currentEntryState = null;
+function isSectionSubheadingLine(line) {
+  return /^###\s+/.test(line);
+}
 
-  for (let index = 0; index < lines.length; index += 1) {
-    const line = lines[index];
-    if (!line.trim()) {
-      continue;
-    }
+function isIndentedTechnikLine(line) {
+  return /^\s+Technik:\s+\S/.test(line);
+}
 
-    if (/^###\s+/.test(line)) {
-      currentEntryState = null;
-      continue;
-    }
+function isIndentedNonTechnikContentLine(line) {
+  return /^\s{2,}\S/.test(line) && !isIndentedTechnikLine(line);
+}
 
-    if (/^\s{2,}\S/.test(line) && !/^\s+Technik:\s+\S/.test(line)) {
-      if (!currentEntryState) {
-        errors.push(
-          `Abschnitt ${section.name}: Eingerückter Fließtext muss zu einem Nutzerwirkung-/Technik-Eintrag gehören.`
-        );
-      }
-      continue;
-    }
+function isStartedUserImpactLine(line) {
+  return /^- Nutzerwirkung:\s+\S/.test(line);
+}
+
+function validateSectionEntryLine(sectionName, line, currentEntryState, errors) {
+  if (!line.trim()) {
+    return currentEntryState;
+  }
 
-    const hasUserImpactPrefix = line.startsWith("- Nutzerwirkung: ");
-    if (
-      line.startsWith("- ") &&
-      (!hasUserImpactPrefix || !line.slice("- Nutzerwirkung: ".length).trim())
-    ) {
-      errors.push(`Abschnitt ${section.name}: Listenpunkte müssen mit "Nutzerwirkung:" beginnen.`);
+  if (isSectionSubheadingLine(line)) {
+    return null;
+  }
+
+  if (isIndentedNonTechnikContentLine(line)) {
+    if (!currentEntryState) {
+      errors.push(
+        `Abschnitt ${sectionName}: Eingerückter Fließtext muss zu einem Nutzerwirkung-/Technik-Eintrag gehören.`
+      );
     }
+    return currentEntryState;
+  }
 
-    if (/^Technik:\s+\S/.test(line)) {
+  if (line.startsWith("- ") && !isStartedUserImpactLine(line)) {
+    errors.push(`Abschnitt ${sectionName}: Listenpunkte müssen mit "Nutzerwirkung:" beginnen.`);
+  }
+
+  if (/^Technik:\s+\S/.test(line)) {
+    errors.push(
+      `Abschnitt ${sectionName}: "Technik:" muss eingerückt direkt unter "Nutzerwirkung:" stehen.`
+    );
+  }
+
+  if (isStartedUserImpactLine(line)) {
+    if (currentEntryState === "user") {
       errors.push(
-        `Abschnitt ${section.name}: "Technik:" muss eingerückt direkt unter "Nutzerwirkung:" stehen.`
+        `Abschnitt ${sectionName}: Ein "Nutzerwirkung:"-Eintrag wurde begonnen, aber der zugehörige "Technik:"-Teil fehlt noch.`
       );
     }
+    return "user";
+  }
+
+  if (!isIndentedTechnikLine(line)) {
+    return currentEntryState;
+  }
+
+  if (currentEntryState !== "user") {
+    errors.push(
+      `Abschnitt ${sectionName}: "Technik:" darf nur direkt auf einen "Nutzerwirkung:"-Eintrag folgen.`
+    );
+    return currentEntryState;
+  }
+
+  return "tech";
+}
+
+function validateSectionEntries(section) {
+  const errors = [];
+  const lines = section.body.split("\n");
+  let entryCount = 0;
+  let currentEntryState = null;
 
-    if (/^- Nutzerwirkung:\s+\S/.test(line)) {
-      if (currentEntryState === "user") {
-        errors.push(
-          `Abschnitt ${section.name}: Ein "Nutzerwirkung:"-Eintrag wurde begonnen, aber der zugehörige "Technik:"-Teil fehlt noch.`
-        );
-      }
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    if (isStartedUserImpactLine(line)) {
       entryCount += 1;
-      currentEntryState = "user";
     }
 
-    if (/^\s+Technik:\s+\S/.test(line)) {
-      if (currentEntryState !== "user") {
-        errors.push(
-          `Abschnitt ${section.name}: "Technik:" darf nur direkt auf einen "Nutzerwirkung:"-Eintrag folgen.`
-        );
-      } else {
-        currentEntryState = "tech";
-      }
-    }
+    currentEntryState = validateSectionEntryLine(section.name, line, currentEntryState, errors);
   }
 
   if (currentEntryState === "user") {

src/features/average-trend-arrow/logic.js

@@ -58,13 +58,25 @@ export function ensureArrowNode(avgNode, arrowByAverageNode, arrowNodes = null)
   return arrow;
 }
 
+function forceAnimationReflow(node) {
+  if (!node) {
+    return 0;
+  }
+
+  if (Number.isFinite(node.offsetWidth)) {
+    return node.offsetWidth;
+  }
+
+  return Number(node.getBoundingClientRect?.().width || 0);
+}
+
 export function animateArrowNode(arrowNode, durationMs, timeoutByArrow) {
   if (!arrowNode?.classList) {
     return;
   }
 
   arrowNode.classList.remove(ANIMATE_CLASS);
-  void arrowNode.offsetWidth;
+  forceAnimationReflow(arrowNode);
   arrowNode.classList.add(ANIMATE_CLASS);
 
   const previousTimeout = timeoutByArrow.get(arrowNode);

src/features/cricket-grid-fx/logic.js

@@ -557,13 +557,25 @@ function setBadgeStateClasses(badgeNode, stateToken) {
   badgeNode.classList.add(BADGE_STATE_CLASS.neutral);
 }
 
+function forceAnimationReflow(node) {
+  if (!node) {
+    return 0;
+  }
+
+  if (Number.isFinite(node.offsetWidth)) {
+    return node.offsetWidth;
+  }
+
+  return Number(node.getBoundingClientRect?.().width || 0);
+}
+
 function toggleTimedClass(state, node, className, timeoutMs = 700) {
   if (!state || !node?.classList || !className) {
     return;
   }
 
   node.classList.remove(className);
-  void node.offsetWidth;
+  forceAnimationReflow(node);
   node.classList.add(className);
 
   const timeoutRef =
@@ -602,7 +614,7 @@ function triggerMarkProgress(state, cellNode, marks, visualConfig) {
   }
 
   clearProgressClasses(targetNode);
-  void targetNode.offsetWidth;
+  forceAnimationReflow(targetNode);
   targetNode.classList.add(MARK_PROGRESS_CLASS);
   const clampedMarks = Math.max(0, Math.min(3, Number(marks) || 0));
   targetNode.classList.add(

src/features/turn-start-sweep/logic.js

@@ -24,6 +24,18 @@ export function findActivePlayerNode(documentRef) {
   return findBySelectors(documentRef, ACTIVE_PLAYER_SELECTORS);
 }
 
+function forceAnimationReflow(node) {
+  if (!node) {
+    return 0;
+  }
+
+  if (Number.isFinite(node.offsetWidth)) {
+    return node.offsetWidth;
+  }
+
+  return Number(node.getBoundingClientRect?.().width || 0);
+}
+
 export function runTurnStartSweep(node, state, config = {}, windowRef = null) {
   if (!node?.classList || !state) {
     return;
@@ -42,7 +54,7 @@ export function runTurnStartSweep(node, state, config = {}, windowRef = null) {
 
   node.classList.remove(SWEEP_CLASS);
   // Force style recalculation so class re-apply retriggers the keyframes.
-  void node.offsetWidth;
+  forceAnimationReflow(node);
   node.classList.add(SWEEP_CLASS);
   state.nodes.add(node);
 

src/shared/dartboard-svg.js

@@ -373,7 +373,7 @@ function parseViewBoxMetrics(node) {
 
   const rawViewBox = String(node.getAttribute("viewBox") || "")
     .trim()
-    .replaceAll(/,/g, " ")
+    .replaceAll(",", " ")
     .replaceAll(/\s+/g, " ");
   if (!rawViewBox) {
     return {

tests/runtime/turn-animations.test.js

@@ -0,0 +1,54 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { animateArrowNode } from "../../src/features/average-trend-arrow/logic.js";
+import { ANIMATE_CLASS } from "../../src/features/average-trend-arrow/style.js";
+import { runTurnStartSweep } from "../../src/features/turn-start-sweep/logic.js";
+import { SWEEP_CLASS } from "../../src/features/turn-start-sweep/style.js";
+import { FakeDocument, createFakeWindow } from "./fake-dom.js";
+
+function wait(ms = 0) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function createImmediateWindow(documentRef) {
+  const windowRef = createFakeWindow({ documentRef });
+  const nativeSetTimeout = setTimeout;
+  windowRef.setTimeout = (callback, _ms, ...args) => nativeSetTimeout(callback, 0, ...args);
+  windowRef.clearTimeout = (handle) => clearTimeout(handle);
+  return windowRef;
+}
+
+test("animateArrowNode retriggers the animation class on fake-dom nodes without offsetWidth", async () => {
+  const documentRef = new FakeDocument();
+  const arrowNode = documentRef.createElement("span");
+  const timeoutByArrow = new Map();
+
+  animateArrowNode(arrowNode, 320, timeoutByArrow);
+
+  assert.equal(arrowNode.classList.contains(ANIMATE_CLASS), true);
+  assert.equal(timeoutByArrow.has(arrowNode), true);
+  clearTimeout(timeoutByArrow.get(arrowNode));
+});
+
+test("runTurnStartSweep retriggers and clears the sweep class on fake-dom nodes without offsetWidth", async () => {
+  const documentRef = new FakeDocument();
+  const windowRef = createImmediateWindow(documentRef);
+  const node = documentRef.createElement("div");
+  const state = {
+    nodes: new Set(),
+    timeoutsByNode: new Map(),
+  };
+
+  runTurnStartSweep(node, state, { durationMs: 420, sweepDelayMs: 0 }, windowRef);
+
+  assert.equal(node.classList.contains(SWEEP_CLASS), true);
+  assert.equal(state.nodes.has(node), true);
+  assert.equal(state.timeoutsByNode.has(node), true);
+
+  await wait(10);
+
+  assert.equal(node.classList.contains(SWEEP_CLASS), false);
+  assert.equal(state.nodes.has(node), false);
+  assert.equal(state.timeoutsByNode.has(node), false);
+});