@sensiblestats/widget-react 0.72.1 → 0.72.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sensiblestats/widget-react
 
+## 0.72.2
+
+### Patch Changes
+
+- 77ecef1: Set the numbers: the numbers inside each sentence are now dropdowns instead of tap-to-cycle boxes, so it is clear they are a choice. Numbers with no picks today are marked "not today". Prices and totals with no picks cannot be chosen. A match count with no picks at the chosen total can be, and the row then says it is not available today.
+
 ## 0.72.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -181,7 +181,9 @@ var STRINGS = {
       matchesLabel: "Matches",
       fewerMatches: "Fewer matches",
       moreMatches: "More matches",
-      changeNumber: (value) => `${value}, tap to change`,
+      maxPriceName: "Max price",
+      minPriceName: "Lowest price",
+      notToday: " \xB7 not today",
       changeCombo: "Change total or matches"
     },
     games: {
@@ -510,7 +512,9 @@ var STRINGS = {
       matchesLabel: "Ma\xE7 say\u0131s\u0131",
       fewerMatches: "Daha az ma\xE7",
       moreMatches: "Daha fazla ma\xE7",
-      changeNumber: (value) => `${value}, de\u011Fi\u015Ftirmek i\xE7in dokun`,
+      maxPriceName: "En y\xFCksek oran",
+      minPriceName: "En d\xFC\u015F\xFCk oran",
+      notToday: " \xB7 bug\xFCn yok",
       changeCombo: "Toplam\u0131 veya ma\xE7lar\u0131 de\u011Fi\u015Ftir"
     },
     games: {
@@ -2883,11 +2887,6 @@ function comboLegChoices(grid) {
   for (let n = MIN_COMBO_LEGS; n <= max; n++) out.push(n);
   return out;
 }
-function cycle(values, current) {
-  if (values.length === 0) return current;
-  const i = values.findIndex((v) => samePrice(v, current));
-  return values[(i + 1) % values.length] ?? current;
-}
 function startValue(values, preferred) {
   return values.find((v) => samePrice(v, preferred)) ?? values[0] ?? preferred;
 }
@@ -8715,8 +8714,15 @@ function fillTemplate(template, slots) {
     return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react51.Fragment, { children: key !== void 0 && key in slots ? slots[key] : part }, i);
   });
 }
-function NumberButton({ value, label, onCycle }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", className: "ss-w-tool-num", "aria-label": label, onClick: onCycle, children: value });
+function NumberSelect({ current, choices: choices2, label, notToday, lockEmpty = true, onChoose }) {
+  const selected = Math.max(0, choices2.findIndex((c) => c.text === current));
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { className: "ss-w-tool-num", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "ss-w-tool-num-size", "aria-hidden": "true", children: current }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("select", { className: "ss-w-tool-num-select", "aria-label": label, value: String(selected), onChange: (e) => {
+      const c = choices2[Number(e.target.value)];
+      if (c) onChoose(c.value);
+    }, children: choices2.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("option", { value: String(i), disabled: lockEmpty && !c.available && i !== selected, children: c.available ? c.text : `${c.text}${notToday}` }, i)) })
+  ] });
 }
 function SendButton({ label, display, disabled, onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", className: "ss-w-tool-send", "aria-label": `${label}: ${display}`, disabled, onClick, children: label });
@@ -8763,33 +8769,33 @@ function SetNumbersTool({ grid, strings, streaming, formatKickoff, onSend, onClo
   const minCell = findSingles(grid.singlesFrom, minPrice, count);
   const comboCell = findCombo(grid, total, legs);
   const announce = (display, available) => setAnnouncement(available ? display : `${display}. ${strings.unavailable}`);
-  const nextMax = () => {
-    const v = cycle(limits, maxPrice);
+  const chooseMax = (v) => {
     setMaxPrice(v);
     announce(strings.maxPriceDisplay(count, v), !!findSingles(grid.singles, v, count));
   };
-  const nextMin = () => {
-    const v = cycle(floors, minPrice);
+  const chooseMin = (v) => {
     setMinPrice(v);
     announce(strings.minPriceDisplay(count, v), !!findSingles(grid.singlesFrom, v, count));
   };
-  const nextLegs = () => {
-    const v = cycle(legChoices, legs);
+  const chooseLegs = (v) => {
     setLegs(v);
     announce(strings.comboDisplay(v, total), !!findCombo(grid, total, v));
   };
-  const nextTotal = () => {
-    const v = cycle(totals, total);
+  const chooseTotal = (v) => {
     const l = legsForTotal(grid, v, legs);
     setTotal(v);
     setLegs(l);
     announce(strings.comboDisplay(l, v), !!findCombo(grid, v, l));
   };
+  const maxChoices = limits.map((v) => ({ value: v, text: v.toFixed(2), available: !!findSingles(grid.singles, v, count) }));
+  const minChoices = floors.map((v) => ({ value: v, text: v.toFixed(2), available: !!findSingles(grid.singlesFrom, v, count) }));
+  const totalChoices = totals.map((v) => ({ value: v, text: v.toFixed(1), available: legChoices.some((n) => !!findCombo(grid, v, n)) }));
+  const legChoicesList = legChoices.map((n) => ({ value: n, text: String(n), available: !!findCombo(grid, total, n) }));
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(PresetToolModal, { title: strings.setNumbers, closeLabel: strings.close, onClose, children: [
     /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("section", { className: "ss-w-tool-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "ss-w-tool-ask", children: fillTemplate(strings.maxPriceRow, {
         count: String(count),
-        price: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberButton, { value: maxPrice.toFixed(2), label: strings.changeNumber(maxPrice.toFixed(2)), onCycle: nextMax })
+        price: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: maxPrice.toFixed(2), choices: maxChoices, label: strings.maxPriceName, notToday: strings.notToday, onChoose: chooseMax })
       }) }),
       maxCell ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PickList, { picks: maxCell.picks, formatKickoff }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Unavailable, { text: strings.unavailable }),
       /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SendButton, { label: strings.send, display: strings.maxPriceDisplay(count, maxPrice), disabled: !maxCell || streaming, onClick: () => {
@@ -8799,7 +8805,7 @@ function SetNumbersTool({ grid, strings, streaming, formatKickoff, onSend, onClo
     /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("section", { className: "ss-w-tool-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "ss-w-tool-ask", children: fillTemplate(strings.minPriceRow, {
         count: String(count),
-        price: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberButton, { value: minPrice.toFixed(2), label: strings.changeNumber(minPrice.toFixed(2)), onCycle: nextMin })
+        price: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: minPrice.toFixed(2), choices: minChoices, label: strings.minPriceName, notToday: strings.notToday, onChoose: chooseMin })
       }) }),
       minCell ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PickList, { picks: minCell.picks, formatKickoff }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Unavailable, { text: strings.unavailable }),
       /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SendButton, { label: strings.send, display: strings.minPriceDisplay(count, minPrice), disabled: !minCell || streaming, onClick: () => {
@@ -8808,8 +8814,8 @@ function SetNumbersTool({ grid, strings, streaming, formatKickoff, onSend, onClo
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("section", { className: "ss-w-tool-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "ss-w-tool-ask", children: fillTemplate(strings.comboRow, {
-        legs: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberButton, { value: String(legs), label: strings.changeNumber(String(legs)), onCycle: nextLegs }),
-        total: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberButton, { value: total.toFixed(1), label: strings.changeNumber(total.toFixed(1)), onCycle: nextTotal })
+        legs: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: String(legs), choices: legChoicesList, label: strings.matchesLabel, notToday: strings.notToday, lockEmpty: false, onChoose: chooseLegs }),
+        total: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(NumberSelect, { current: total.toFixed(1), choices: totalChoices, label: strings.totalLabel, notToday: strings.notToday, onChoose: chooseTotal })
       }) }),
       comboCell ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ComboPreview, { cell: comboCell, formatKickoff }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Unavailable, { text: strings.unavailable }),
       /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SendButton, { label: strings.send, display: strings.comboDisplay(legs, total), disabled: !comboCell || streaming, onClick: () => {
@@ -9581,7 +9587,13 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-tool-foot { flex: none; padding: 10px 14px 12px; border-top: 1px solid var(--ss-w-line); }
 .ss-w-tool-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; border: 1px solid var(--ss-w-line); border-left: 3px solid var(--ss-w-accent); border-radius: 12px; }
 .ss-w-tool-ask { font-size: 14px; font-weight: 650; line-height: 1.7; color: var(--ss-w-ink); overflow-wrap: anywhere; }
-.ss-w-tool-num { display: inline-block; min-width: 44px; min-height: 32px; margin: 0 2px; padding: 3px 8px; font: inherit; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); border: 1px dashed color-mix(in srgb, var(--ss-w-accent) 55%, var(--ss-w-line)); border-radius: 8px; cursor: pointer; }
+.ss-w-tool-num { position: relative; display: inline-block; vertical-align: middle; margin: 0 2px; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ss-w-accent); }
+.ss-w-tool-num-size { display: block; font-size: max(16px, 1em); user-select: none; -webkit-user-select: none; visibility: hidden; box-sizing: border-box; min-width: 44px; min-height: 32px; padding: 6px 26px 6px 10px; line-height: 1.3; white-space: pre; }
+.ss-w-tool-num-select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 22px 0 10px; font: inherit; font-size: max(16px, 1em); font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ss-w-accent); background-color: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); border: 1.5px solid color-mix(in srgb, var(--ss-w-accent) 65%, var(--ss-w-line)); border-radius: 8px; cursor: pointer; appearance: none; -webkit-appearance: none; }
+.ss-w-tool-num::after { content: ""; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); pointer-events: none; }
+.ss-w-tool-num-select:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
+.ss-w-tool-num-select option { font-weight: 600; color: var(--ss-w-ink); background: var(--ss-w-panel); }
+.ss-w-tool-num-select option:disabled { color: var(--ss-w-faint); }
 .ss-w-tool-picks { list-style: none; display: flex; flex-direction: column; gap: 4px; }
 .ss-w-tool-pick { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 5px 8px; font-size: 12px; line-height: 1.35; background: var(--ss-w-bubble); border-radius: 8px; }
 .ss-w-tool-pick-match { grid-column: 1; font-weight: 650; color: var(--ss-w-ink); overflow-wrap: anywhere; }