@sensiblestats/widget-react 0.10.1 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

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);
@@ -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 })
   ] });
@@ -1182,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); }