@sensiblestats/widget-react 0.32.1 → 0.33.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sensiblestats/widget-react
 
+## 0.33.0
+
+### Minor Changes
+
+- Live monitor's momentum block gets a localized "Momentum" title with the home/away pressure split (styled like the card's other stat rows), and its end-of-series marker is now an HTML overlay dot instead of an SVG `<circle>` -- the wave's `preserveAspectRatio="none"` scaling was stretching the circle into a squashed, half-clipped oval. `LiveMonitorMatch` gains an additive `momentumHomePct` field.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.29.0
+
 ## 0.32.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -119,7 +119,8 @@ var STRINGS = {
     suspendedLabel: "Suspended",
     fullTimeLabel: "Full time",
     inSlipLabel: "In slip",
-    oddsUnavailable: "Odds unavailable right now"
+    oddsUnavailable: "Odds unavailable right now",
+    momentumLabel: "Momentum"
   },
   tr: {
     launcherLabel: "SensibleStats ile sohbet et",
@@ -187,7 +188,8 @@ var STRINGS = {
     suspendedLabel: "Ask\u0131da",
     fullTimeLabel: "Ma\xE7 sonu",
     inSlipLabel: "Kuponda",
-    oddsUnavailable: "Oranlar \u015Fu anda kullan\u0131lam\u0131yor"
+    oddsUnavailable: "Oranlar \u015Fu anda kullan\u0131lam\u0131yor",
+    momentumLabel: "Momentum"
   }
 };
 function resolveLocaleStrings(locale) {
@@ -268,7 +270,8 @@ function normalizeUi(cfg) {
     suspendedLabel: strings.suspendedLabel,
     fullTimeLabel: strings.fullTimeLabel,
     inSlipLabel: strings.inSlipLabel,
-    oddsUnavailable: strings.oddsUnavailable
+    oddsUnavailable: strings.oddsUnavailable,
+    momentumLabel: strings.momentumLabel
   };
 }
 function toClientOptions(cfg) {
@@ -2511,7 +2514,8 @@ function buildPaths(points) {
   const area = `M0,${BASELINE} L${linePts.join(" L")} L${WIDTH},${BASELINE} Z`;
   const line = `M${linePts.join(" L")}`;
   const lastValue = points[lastIndex]?.value ?? 0;
-  return { area, line, lastX: px(lastIndex).toFixed(1), lastY: py(lastValue).toFixed(1) };
+  const lastLeftPct = lastIndex === 0 ? 0 : 100;
+  return { area, line, lastLeftPct, lastTopPx: py(lastValue) };
 }
 function MomentumWave({
   points,
@@ -2519,7 +2523,7 @@ function MomentumWave({
   clubIsHome
 }) {
   if (points.length === 0) return null;
-  const { area, line, lastX, lastY } = buildPaths(points);
+  const { area, line, lastLeftPct, lastTopPx } = buildPaths(points);
   const clipId = (0, import_react17.useId)();
   const topClipId = `${clipId}-top`;
   const bottomClipId = `${clipId}-bottom`;
@@ -2527,27 +2531,36 @@ function MomentumWave({
   const bottomClass = clubIsHome ? "ss-w-fandash-live-mom-away" : "ss-w-fandash-live-mom-home";
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ss-w-fandash-live-mom", children: [
     caption ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ss-w-fandash-live-mom-caption", children: caption }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-      "svg",
-      {
-        className: "ss-w-fandash-live-mom-svg",
-        viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
-        preserveAspectRatio: "none",
-        role: "img",
-        "aria-label": caption ?? "Momentum",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("defs", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("clipPath", { id: topClipId, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("rect", { x: 0, y: 0, width: WIDTH, height: BASELINE }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("clipPath", { id: bottomClipId, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("rect", { x: 0, y: BASELINE, width: WIDTH, height: HEIGHT - BASELINE }) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: area, className: topClass, clipPath: `url(#${topClipId})` }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: area, className: bottomClass, clipPath: `url(#${bottomClipId})` }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: 0, y1: BASELINE, x2: WIDTH, y2: BASELINE, className: "ss-w-fandash-live-mom-base" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: line, className: "ss-w-fandash-live-mom-line", vectorEffect: "non-scaling-stroke" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: lastX, cy: lastY, r: 3.2, className: "ss-w-fandash-live-mom-now", vectorEffect: "non-scaling-stroke" })
-        ]
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ss-w-fandash-live-mom-plot", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        "svg",
+        {
+          className: "ss-w-fandash-live-mom-svg",
+          viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+          preserveAspectRatio: "none",
+          role: "img",
+          "aria-label": caption ?? "Momentum",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("defs", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("clipPath", { id: topClipId, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("rect", { x: 0, y: 0, width: WIDTH, height: BASELINE }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("clipPath", { id: bottomClipId, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("rect", { x: 0, y: BASELINE, width: WIDTH, height: HEIGHT - BASELINE }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: area, className: topClass, clipPath: `url(#${topClipId})` }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: area, className: bottomClass, clipPath: `url(#${bottomClipId})` }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: 0, y1: BASELINE, x2: WIDTH, y2: BASELINE, className: "ss-w-fandash-live-mom-base" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: line, className: "ss-w-fandash-live-mom-line", vectorEffect: "non-scaling-stroke" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        "span",
+        {
+          className: "ss-w-fandash-live-mom-now",
+          style: { left: `clamp(4px, ${lastLeftPct}%, calc(100% - 4px))`, top: `${lastTopPx}px` },
+          "aria-hidden": "true"
+        }
+      )
+    ] })
   ] });
 }
 
@@ -2917,7 +2930,14 @@ function MonitorMatchCard({ match, promotedPins, monitor, ui, slip }) {
       ] }, row.label);
     }) }),
     match.status === "stale" && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ss-w-mon-asof", children: ui.asOf(formatTime(match.asOfUtc)) }),
-    match.momentum.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MomentumWave, { points: match.momentum, clubIsHome: true }),
+    match.momentum.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "ss-w-mon-mom", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "ss-w-mon-stat-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ss-w-mon-stat-v ss-w-mon-stat-v--home", children: typeof match.momentumHomePct === "number" ? `${match.momentumHomePct}%` : "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ss-w-mon-stat-l", children: ui.momentumLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ss-w-mon-stat-v ss-w-mon-stat-v--away", children: typeof match.momentumHomePct === "number" ? `${100 - match.momentumHomePct}%` : "" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MomentumWave, { points: match.momentum, clubIsHome: true })
+    ] }),
     match.mainMarket && match.phase !== "fullTime" && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MarketOddsCardList, { cards: [toMarketOddsVM(match.mainMarket)], ui, slip }),
     match.phase === "fullTime" && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "ss-w-mon-grace", children: ui.graceNote })
   ] });
@@ -3722,7 +3742,15 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-fandash-live-mom-away { fill: var(--ss-w-away); fill-opacity: .85; }
 .ss-w-fandash-live-mom-line { fill: none; stroke: color-mix(in srgb, var(--ss-w-ink) 55%, transparent); stroke-width: 1.5; }
 .ss-w-fandash-live-mom-base { stroke: var(--ss-w-line); stroke-width: 1; stroke-dasharray: 3 3; }
-.ss-w-fandash-live-mom-now { fill: var(--ss-w-panel); stroke: var(--ss-w-ink); stroke-width: 1.5; }
+.ss-w-fandash-live-mom-plot { position: relative; }
+.ss-w-fandash-live-mom-now {
+  position: absolute; width: 7px; height: 7px; border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-ink);
+  pointer-events: none;
+}
+.ss-w-mon-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }
+.ss-w-mon-mom .ss-w-fandash-live-mom { margin-top: 6px; padding-top: 0; border-top: none; }
 
 .ss-w-fandash-live-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }
 .ss-w-fandash-live-legend-item { display: inline-flex; align-items: center; gap: 6px; }