@sensiblestats/widget-react 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @sensiblestats/widget-react
 
+## 0.11.0
+
+### Minor Changes
+
+- Neutral odds price-movement display on market_odds card rows.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.9.0
+
+## 0.10.1
+
+### Patch Changes
+
+- Fix single-league entity-card header overflow: a long competition name (e.g. "UEFA Europa Conference League") no longer wraps the season pill onto a second line. The competition name now truncates with an ellipsis (full name kept as a `title` tooltip) while the season pill stays pinned on the same row.
+
 ## 0.10.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -61,6 +61,9 @@ var STRINGS = {
     marketPrices: "Market prices",
     moreLines: "More lines",
     hideLines: "Hide lines",
+    oddsMoved: (was, now, direction) => `was ${was}, now ${now}, ${direction}`,
+    oddsShortened: "shortened",
+    oddsDrifted: "drifted",
     updatedLabel: "updated",
     inSlip: "In slip",
     slipAdded: (n) => n === void 0 ? "Added to slip" : `Added to slip (${n} selection${n === 1 ? "" : "s"})`,
@@ -91,6 +94,9 @@ var STRINGS = {
     marketPrices: "Piyasa fiyatlar\u0131",
     moreLines: "Di\u011Fer \xE7izgiler",
     hideLines: "\xC7izgileri gizle",
+    oddsMoved: (was, now, direction) => `\xF6nce ${was}, \u015Fimdi ${now}, ${direction}`,
+    oddsShortened: "d\xFC\u015Ft\xFC",
+    oddsDrifted: "y\xFCkseldi",
     updatedLabel: "g\xFCncellendi",
     inSlip: "Kuponda",
     slipAdded: (n) => n === void 0 ? "Kupona eklendi" : `Kupona eklendi (${n} se\xE7im)`,
@@ -137,6 +143,9 @@ function normalizeUi(cfg) {
     marketPrices: strings.marketPrices,
     moreLines: strings.moreLines,
     hideLines: strings.hideLines,
+    oddsMoved: strings.oddsMoved,
+    oddsShortened: strings.oddsShortened,
+    oddsDrifted: strings.oddsDrifted,
     updatedLabel: strings.updatedLabel,
     addToSlip: strings.addToSlip,
     inSlip: strings.inSlip,
@@ -280,6 +289,8 @@ function toMarketOddsVM(card) {
   const toRow = (r, i) => {
     const selection = [str(r.selectionLabel), str(r.line)].filter(Boolean).join(" ");
     const price = typeof r.price === "number" && Number.isFinite(r.price) ? r.price : void 0;
+    const previous = typeof r.previousPrice === "number" && Number.isFinite(r.previousPrice) ? r.previousPrice : void 0;
+    const direction = r.movementDirection === "shortened" || r.movementDirection === "drifted" ? r.movementDirection : void 0;
     return {
       key: `${selection}:${str(r.line) ?? ""}:${i}`,
       selection,
@@ -287,7 +298,9 @@ function toMarketOddsVM(card) {
       oddsDecimal: price,
       matchOddsId: typeof r.matchOddsId === "number" ? r.matchOddsId : void 0,
       quotedAtUtc: str(r.quotedAtUtc),
-      isMain: r.isMainLine !== false
+      isMain: r.isMainLine !== false,
+      previousOdds: previous !== void 0 && direction !== void 0 ? previous.toFixed(2) : void 0,
+      movementDirection: previous !== void 0 && direction !== void 0 ? direction : void 0
     };
   };
   const vms = rows.map(toRow).filter((r) => r.selection && r.odds);
@@ -580,9 +593,9 @@ function CardBody({ c }) {
     const only = c.scopes[0];
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-body", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "ss-w-ecard-tabs ss-w-ecard-tabs-static", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-lead", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ss-w-ecard-lead", title: only.label, children: [
           only.image ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Crest, { image: only.image }) : null,
-          only.label
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ss-w-ecard-lead-txt", children: only.label })
         ] }),
         season
       ] }),
@@ -823,8 +836,18 @@ var import_react6 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function OddsRow({ vm, row, ui, slip }) {
   const selection = vm.addToSlipEnabled ? marketOddsRowToSlipSelection(vm, row, slip.conversationId) : null;
+  const directionWord = row.movementDirection === "shortened" ? ui?.oddsShortened ?? "shortened" : ui?.oddsDrifted ?? "drifted";
+  const movementLabel = row.previousOdds !== void 0 ? ui?.oddsMoved?.(row.previousOdds, row.odds, directionWord) ?? `was ${row.previousOdds}, now ${row.odds}, ${directionWord}` : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-mo-row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-mo-sel", children: row.selection }),
+    row.previousOdds !== void 0 ? (
+      // Strikethrough is invisible to screen readers, so the whole was/now/direction sentence
+      // rides on one aria-label and the visual glyphs are hidden from the accessibility tree.
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ss-w-mo-move", role: "img", "aria-label": movementLabel, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-mo-prev", "aria-hidden": "true", children: row.previousOdds }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-mo-arrow", "aria-hidden": "true", children: row.movementDirection === "shortened" ? "\u25BC" : "\u25B2" })
+      ] })
+    ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-mo-price", children: row.odds }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SlipButton, { selection, shownOdds: row.odds, marketName: vm.market, slip, ui })
   ] });
@@ -1110,10 +1133,11 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-ecard-tabs { display: flex; align-items: stretch; gap: 3px; border-bottom: 1px solid var(--ss-w-line); margin-bottom: 9px; flex-wrap: wrap; }
 .ss-w-ecard-tab { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 5px 8px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
 .ss-w-ecard-tab[aria-selected="true"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
-.ss-w-ecard-tabs-static { align-items: center; }
-.ss-w-ecard-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 640; color: var(--ss-w-ink); padding: 4px 2px 8px; min-width: 0; }
+.ss-w-ecard-tabs-static { align-items: center; flex-wrap: nowrap; }
+.ss-w-ecard-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 640; color: var(--ss-w-ink); padding: 4px 2px 8px; min-width: 0; flex: 1; }
+.ss-w-ecard-lead-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ss-w-ecard-crest { width: 15px; height: 15px; flex: none; display: block; border-radius: 4px; background-size: cover; background-position: center; }
-.ss-w-ecard-season { margin-left: auto; align-self: center; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
+.ss-w-ecard-season { flex: none; margin-left: auto; align-self: center; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
 .ss-w-ecard-tabs-static .ss-w-ecard-season { margin-bottom: 4px; }
 
 .ss-w-ecard-stats { display: flex; flex-direction: column; gap: 4px; }
@@ -1181,6 +1205,12 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-mo-row:last-child { border-bottom: none; }
 .ss-w-mo-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
 .ss-w-mo-price { margin-left: auto; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--ss-w-accent); }
+/* Movement: BOTH directions share --ss-w-faint on purpose. Green-good/red-bad would frame a
+   shortening price as a discount, which inverts what it actually means for the bettor. */
+.ss-w-mo-move { margin-left: auto; display: inline-flex; align-items: baseline; gap: 4px; color: var(--ss-w-faint); }
+.ss-w-mo-prev { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; text-decoration: line-through; }
+.ss-w-mo-arrow { font-size: 9px; line-height: 1; }
+.ss-w-mo-move + .ss-w-mo-price { margin-left: 0; }
 .ss-w-mo-row .ss-w-slip { margin: 0; }
 .ss-w-mo-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ss-w-faint); }