@sensiblestats/widget-react 0.54.0 → 0.55.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sensiblestats/widget-react
 
+## 0.55.0
+
+### Minor Changes
+
+- ede9739: Fix the daily games resetting on the second guess, and tighten three screens to the design artifact:
+
+  - Guard the play lifecycle against a state-losing submit response: an in-progress `postPlay` that returns no `clientStateJson` (e.g. a server-side concurrency retry) no longer wipes the board — the widget reconciles from `getGameResult` instead of rendering an empty state. (The root-cause fix is server-side; this is defence-in-depth so the board can never blank mid-game.)
+  - Guess the XI pitch now reads as a football field — fixed grass-green with visible yard-lines and a halfway line, and smaller flag dots — instead of a flat dark box.
+  - Mystery Tiger's first load shows one lead line above the search (no empty attribute tiles), matching the artifact; the shirt tile is labelled "Shirt" not "Kit".
+  - Beat the Grid filled cells now name the placed player (compact "F. Last") above the rarity score, so the fan can see who they put where.
+
 ## 0.54.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -4189,6 +4189,24 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, refresh }) {
   convRef.current = conversation;
   const optsRef = (0, import_react28.useRef)({ gameId, gameDay, fixtureId, refresh });
   optsRef.current = { gameId, gameDay, fixtureId, refresh };
+  const resultRef = (0, import_react28.useRef)(null);
+  resultRef.current = result;
+  const refetch = (0, import_react28.useCallback)(async () => {
+    const conv = convRef.current;
+    if (!conv) return;
+    const opts = optsRef.current;
+    try {
+      const payload = await conv.getGameResult(opts.gameId, opts.fixtureId, opts.gameDay);
+      if (payload === null) return;
+      if (payload.clientStateJson == null && resultRef.current?.clientStateJson != null) {
+        setRawStatus(payload.status);
+        return;
+      }
+      setResult(toSubmitResult(payload));
+      setRawStatus(payload.status);
+    } catch {
+    }
+  }, []);
   const submit = (0, import_react28.useCallback)(async (answerJson) => {
     const conv = convRef.current;
     if (!conv || inFlightRef.current) return;
@@ -4198,7 +4216,14 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, refresh }) {
       const opts = optsRef.current;
       const playResult = await conv.postPlay(opts.gameId, answerJson, opts.gameDay, opts.fixtureId);
       if (playResult !== null) {
-        setResult(playResult);
+        const hasFreshState = playResult.clientStateJson != null;
+        const isTerminal2 = playResult.alreadyPlayed === true;
+        const holdsState = resultRef.current?.clientStateJson != null;
+        if (!hasFreshState && !isTerminal2 && holdsState) {
+          await refetch();
+        } else {
+          setResult(playResult);
+        }
         if (playResult.pointsDelta != null) {
           opts.refresh?.();
         }
@@ -4208,22 +4233,10 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, refresh }) {
       inFlightRef.current = false;
       setSubmitting(false);
     }
-  }, []);
+  }, [refetch]);
   const hydrate = (0, import_react28.useCallback)(() => {
-    const conv = convRef.current;
-    if (!conv) return;
-    const opts = optsRef.current;
-    void (async () => {
-      try {
-        const payload = await conv.getGameResult(opts.gameId, opts.fixtureId, opts.gameDay);
-        if (payload !== null) {
-          setResult(toSubmitResult(payload));
-          setRawStatus(payload.status);
-        }
-      } catch {
-      }
-    })();
-  }, []);
+    void refetch();
+  }, [refetch]);
   return { result, submitting, submit, hydrate, rawStatus };
 }
 
@@ -4325,7 +4338,7 @@ var ATTR_LABELS = {
   position: "Pos",
   nationality: "Nat",
   age: "Age",
-  shirtNumber: "Kit",
+  shirtNumber: "Shirt",
   apps: "Apps"
 };
 var ATTR_KEYS = [
@@ -4386,13 +4399,7 @@ function MysteryTigerGame({
           " left"
         ] })
       ] }),
-      guessResults.length === 0 && !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gt-legend", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-legend-lead", children: "Guess any squad player \u2014 each guess reveals how close you are:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gtrow", children: ATTR_KEYS.map((key) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gtile ss-w-gtile--legend", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ss-w-gtile-lab", children: ATTR_LABELS[key] }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ss-w-gtile-v", "aria-hidden": "true", children: "\xB7" })
-        ] }, key)) })
-      ] }),
+      guessResults.length === 0 && !isOver && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gt-lead", children: "Guess any squad player \u2014 each guess reveals how close you are on position, nationality, age, shirt and apps." }),
       guessResults.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "ss-w-gtrows", children: guessResults.map((gr, i) => {
         const player = config.squadPlayers.find((p) => p.id === gr.playerId);
         return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "ss-w-gtguess", children: [
@@ -4726,6 +4733,15 @@ function parseClientState4(json) {
 function findCellResult(cells, row, col) {
   return cells.find((c) => c.row === row && c.col === col);
 }
+function shortName(name) {
+  if (!name) return "";
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  const first = parts[0];
+  if (parts.length === 1) return first;
+  const last = parts[parts.length - 1];
+  return `${first.charAt(0)}. ${last}`;
+}
 function SearchSheet({
   row,
   col,
@@ -4871,8 +4887,11 @@ function BeatTheGridGame({
                   disabled: isLocked2 || submitting,
                   onClick: () => handleCellClick(rowIdx, colIdx),
                   children: filled ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-cell-score", children: filled.rarityScore }),
-                    filled.isCorrect && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-cell-check", "aria-hidden": "true", children: "\u2713" })
+                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-cell-nm", children: shortName(playerPool.find((p) => p.id === filled.playerId)?.name) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "ss-w-btg-cell-score", children: [
+                      filled.rarityScore,
+                      filled.isCorrect && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-cell-check", "aria-hidden": "true", children: " \u2713" })
+                    ] })
                   ] }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "ss-w-btg-cell-empty", "aria-hidden": "true", children: "+" })
                 },
                 `cell-${rowIdx}-${colIdx}`
@@ -6981,10 +7000,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* Guess rows \u2014 one labelled block per guess */
 .ss-w-gtrows { display: flex; flex-direction: column; gap: 8px; }
 /* First-load legend (empty state) */
-.ss-w-gt-legend { display: flex; flex-direction: column; gap: 8px; }
-.ss-w-gt-legend-lead { font-size: 11.5px; color: var(--ss-w-faint); line-height: 1.35; }
-.ss-w-gtile--legend { background: var(--ss-w-bubble); border: 1px dashed var(--ss-w-line); color: var(--ss-w-faint); }
-.ss-w-gtile--legend .ss-w-gtile-lab { opacity: .9; }
+.ss-w-gt-lead { font-size: 11.5px; color: var(--ss-w-faint); line-height: 1.4; }
 .ss-w-gtguess { display: flex; flex-direction: column; gap: 4px; }
 .ss-w-gtguess-nm { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
 .ss-w-gtrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
@@ -7103,8 +7119,10 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-btg-cell--correct { background: color-mix(in srgb, var(--ss-w-correct) 14%, var(--ss-w-panel)); border-color: color-mix(in srgb, var(--ss-w-correct) 35%, var(--ss-w-line)); }
 .ss-w-btg-cell--wrong { background: color-mix(in srgb, var(--ss-w-wrong) 10%, var(--ss-w-panel)); }
 .ss-w-btg-cell--active { border-color: var(--ss-w-accent); }
-.ss-w-btg-cell-score { font-size: 14px; font-weight: 800; color: var(--ss-w-ink); font-variant-numeric: tabular-nums; }
-.ss-w-btg-cell-check { font-size: 12px; color: var(--ss-w-correct); line-height: 1; }
+.ss-w-btg-cell-nm { font-size: 8.5px; font-weight: 600; line-height: 1.05; color: var(--ss-w-ink); text-align: center; max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.ss-w-btg-cell-score { font-size: 12px; font-weight: 800; color: var(--ss-w-accent); font-variant-numeric: tabular-nums; }
+.ss-w-btg-cell--correct .ss-w-btg-cell-score { color: var(--ss-w-correct); }
+.ss-w-btg-cell-check { color: var(--ss-w-correct); line-height: 1; }
 .ss-w-btg-cell-empty { font-size: 16px; color: var(--ss-w-faint); }
 /* Scoped search sheet: slides up over the grid */
 .ss-w-btg-sheet { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-line); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
@@ -7126,12 +7144,16 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* Pitch: a flag per slot laid out in formation rows on a green field. A real min-height plus
    space-between distributes the formation lines top\u2192bottom like a pitch (GK at the back, forwards
    forward); yard-line stripes reinforce the read. Without a height the lines collapse together. */
-.ss-w-gxi-pitch { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 300px; padding: 18px 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ss-w-correct) 22%, var(--ss-w-line));
+/* A football pitch is grass-green regardless of the operator accent, so the field uses fixed
+   green values (not --ss-w-correct, which is a muted per-operator token that vanished on dark
+   themes) plus visible horizontal yard-lines and a brighter halfway line. */
+.ss-w-gxi-pitch { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 300px; padding: 18px 10px; border-radius: 14px; border: 1px solid rgba(46, 160, 86, .38);
   background:
-    linear-gradient(180deg, color-mix(in srgb, var(--ss-w-correct) 12%, var(--ss-w-panel)), color-mix(in srgb, var(--ss-w-correct) 4%, var(--ss-w-panel))),
-    repeating-linear-gradient(180deg, transparent 0 40px, color-mix(in srgb, var(--ss-w-ink) 4%, transparent) 40px 80px); }
-.ss-w-gxi-prow { display: flex; justify-content: center; align-items: center; gap: 14px; }
-.ss-w-gxi-flag { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 20px; line-height: 1; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); box-shadow: 0 1px 3px rgba(0,0,0,.14); overflow: hidden; }
+    linear-gradient(180deg, rgba(46, 160, 86, .015) 0, rgba(46, 160, 86, .015) 49.5%, rgba(255,255,255,.14) 49.5%, rgba(255,255,255,.14) 50.5%, rgba(46, 160, 86, .015) 50.5%),
+    repeating-linear-gradient(180deg, transparent 0 31px, rgba(255,255,255,.045) 31px 32px),
+    linear-gradient(180deg, rgba(46, 160, 86, .28), rgba(38, 132, 71, .16)); }
+.ss-w-gxi-prow { display: flex; justify-content: center; align-items: center; gap: 12px; }
+.ss-w-gxi-flag { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 17px; line-height: 1; background: rgba(9, 12, 10, .55); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 1px 3px rgba(0,0,0,.3); overflow: hidden; }
 /* Wrong-guess trail */
 .ss-w-gxi-wrong { display: flex; flex-wrap: wrap; gap: 6px; }
 .ss-w-gxi-wrong-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ss-w-wrong) 10%, var(--ss-w-panel)); border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); text-decoration: line-through; }