@sensiblestats/widget-react 0.60.3 → 0.60.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sensiblestats/widget-react
 
+## 0.60.5
+
+### Patch Changes
+
+- Games: send the widget language with game config, result and play requests so server-written game text (quiz questions, grid labels, stat names, hints) arrives in Turkish; Beat the Grid resolves row abbreviations and header icons from stable keys.
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.36.0
+
+## 0.60.4
+
+### Patch Changes
+
+- Games: Higher/Lower labels stay on one line (Turkish "Daha fazla" wrapped), and the Beat the Grid board shrinks its rows so the whole grid and the search field fit on screen while the search sheet is open.
+
 ## 0.60.3
 
 ### Patch Changes

package/dist/index.cjs

@@ -4704,15 +4704,15 @@ function toSubmitResult(payload) {
     attemptsUsed: payload.attemptsUsed
   };
 }
-function useGamePlay(conversation, { gameId, gameDay, fixtureId, refresh }) {
+function useGamePlay(conversation, { gameId, gameDay, fixtureId, locale, refresh }) {
   const [result, setResult] = (0, import_react29.useState)(null);
   const [submitting, setSubmitting] = (0, import_react29.useState)(false);
   const [rawStatus, setRawStatus] = (0, import_react29.useState)(null);
   const inFlightRef = (0, import_react29.useRef)(false);
   const convRef = (0, import_react29.useRef)(conversation);
   convRef.current = conversation;
-  const optsRef = (0, import_react29.useRef)({ gameId, gameDay, fixtureId, refresh });
-  optsRef.current = { gameId, gameDay, fixtureId, refresh };
+  const optsRef = (0, import_react29.useRef)({ gameId, gameDay, fixtureId, locale, refresh });
+  optsRef.current = { gameId, gameDay, fixtureId, locale, refresh };
   const resultRef = (0, import_react29.useRef)(null);
   resultRef.current = result;
   const refetch = (0, import_react29.useCallback)(async () => {
@@ -4720,7 +4720,7 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, refresh }) {
     if (!conv) return;
     const opts = optsRef.current;
     try {
-      const payload = await conv.getGameResult(opts.gameId, opts.fixtureId, opts.gameDay);
+      const payload = await conv.getGameResult(opts.gameId, opts.fixtureId, opts.gameDay, opts.locale);
       if (payload === null) return;
       if (payload.clientStateJson == null && resultRef.current?.clientStateJson != null) {
         setRawStatus(payload.status);
@@ -4738,7 +4738,7 @@ function useGamePlay(conversation, { gameId, gameDay, fixtureId, refresh }) {
     setSubmitting(true);
     try {
       const opts = optsRef.current;
-      const playResult = await conv.postPlay(opts.gameId, answerJson, opts.gameDay, opts.fixtureId);
+      const playResult = await conv.postPlay(opts.gameId, answerJson, opts.gameDay, opts.fixtureId, opts.locale);
       if (playResult !== null) {
         const hasFreshState = playResult.clientStateJson != null;
         const isTerminal2 = playResult.alreadyPlayed === true;
@@ -5515,8 +5515,8 @@ function CareerPathGame({
 // src/components/games/BeatTheGridGame.tsx
 var import_react34 = __toESM(require("react"), 1);
 var import_jsx_runtime71 = require("react/jsx-runtime");
-function criterionIconKind(label) {
-  const l = label.toLowerCase();
+function criterionIconKind(label, key) {
+  const l = (key ?? label).toLowerCase();
   if (l.includes("app")) return "calendar";
   if (l.includes("goal")) return "ball";
   if (l.includes("assist")) return "boot";
@@ -5524,8 +5524,10 @@ function criterionIconKind(label) {
   if (l.includes("tackle")) return "shield";
   return "flag";
 }
-function rowAbbrev(label, map) {
-  return map[label] ?? label;
+function rowAbbrev(label, map, key) {
+  const suffix = key?.split(".").pop();
+  const english = suffix ? suffix.charAt(0).toUpperCase() + suffix.slice(1) : label;
+  return map[english] ?? map[label] ?? label;
 }
 function CriterionIcon({ kind }) {
   switch (kind) {
@@ -5692,17 +5694,20 @@ function BeatTheGridGame({
       /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
         "div",
         {
-          className: "ss-g-btg-grid",
-          style: { gridTemplateColumns: `64px repeat(${cols.length}, minmax(0, 1fr))` },
+          className: activeCell !== null ? "ss-g-btg-grid ss-g-btg-grid--fit" : "ss-g-btg-grid",
+          style: {
+            gridTemplateColumns: `64px repeat(${cols.length}, minmax(0, 1fr))`,
+            gridTemplateRows: `minmax(44px, 60px) repeat(${rows.length}, minmax(44px, 98px))`
+          },
           role: "grid",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ss-g-btg-corner" }),
-            cols.map((col) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ss-g-btg-colhdr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CriterionIcon, { kind: criterionIconKind(col) }),
+            cols.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ss-g-btg-colhdr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CriterionIcon, { kind: criterionIconKind(col, config.colsI18n?.[colIdx]?.key) }),
               /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: col })
             ] }, col)),
             rows.map((rowLabel, rowIdx) => {
-              const abbr = rowAbbrev(rowLabel, s.rowAbbrev);
+              const abbr = rowAbbrev(rowLabel, s.rowAbbrev, config.rowsI18n?.[rowIdx]?.key);
               return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_react34.default.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ss-g-btg-rowhdr", children: abbr === rowLabel ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: rowLabel }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
                   /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { "aria-hidden": "true", children: abbr }),
@@ -6831,7 +6836,7 @@ function GameScreenHost({
     let cancelled = false;
     void (async () => {
       try {
-        const payload = await conversation.getGameConfig(gameId, fixtureId, gameDay || void 0);
+        const payload = await conversation.getGameConfig(gameId, fixtureId, gameDay || void 0, ui.games.lang);
         if (!cancelled && payload?.configJson) {
           setConfigJson(payload.configJson);
         }
@@ -6841,11 +6846,12 @@ function GameScreenHost({
     return () => {
       cancelled = true;
     };
-  }, [conversation, gameId, fixtureId, gameDay]);
+  }, [conversation, gameId, fixtureId, gameDay, ui.games.lang]);
   const { result, submitting, submit, hydrate, rawStatus } = useGamePlay(conversation, {
     gameId,
     gameDay,
-    fixtureId: fixtureId || void 0
+    fixtureId: fixtureId || void 0,
+    locale: ui.games.lang
   });
   (0, import_react40.useEffect)(() => {
     if (conversation) hydrate();
@@ -8376,8 +8382,10 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-hl-value { font: 800 56px var(--ss-g-font-display); line-height: .95; color: var(--ss-w-accent); margin-top: 6px; }
 .ss-g-hl-stat { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-g-muted); }
 .ss-g-hl-btns { display: flex; flex-direction: row; gap: 8px; margin-top: 12px; }
-.ss-g-hl-btns .ss-g-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; }
-.ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
+.ss-g-hl-btns .ss-g-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 6px; gap: 4px; }
+/* Labels stay on one line: Turkish "DAHA FAZLA" wrapped to two in a ~115px button. */
+.ss-g-hl-btns .ss-g-btn { font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
+.ss-g-hl-btns .ss-g-btn svg { flex: none; }
 .ss-g-hl-vs { position: relative; z-index: 1; flex: none; align-self: center; width: 44px; height: 44px; margin: -28px 0; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-ground); border: 2px solid var(--ss-g-line-warm); color: var(--ss-w-accent); font: 800 18px var(--ss-g-font-display); }
 /* Clear the VS badge that straddles the seam between the two cards. */
 .ss-g-hl-pair > .ss-g-hl-card:first-child .ss-g-hl-info { padding-bottom: 24px; }
@@ -8516,10 +8524,13 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* ---- Beat the Grid (u393) ---- */
 .ss-g-btg-grid { display: grid; gap: 6px; }
-.ss-g-btg-colhdr { height: 60px; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
+/* While the search sheet is pinned below, the grid shrinks its rows to share the body with it
+   instead of pushing the bottom row under the sheet. */
+.ss-g-btg-grid--fit { flex: 0 1 auto; min-height: 0; }
+.ss-g-btg-colhdr { min-height: 0; border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 4px; font-size: 12px; font-weight: 700; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
 .ss-g-btg-colhdr svg { color: var(--ss-w-accent); flex: none; }
 .ss-g-btg-rowhdr { border-radius: 12px; background: var(--ss-g-surface); border: 1px solid var(--ss-g-line); display: grid; place-items: center; font-family: var(--ss-g-font-display); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; }
-.ss-g-btg-cell { position: relative; height: 98px; min-width: 0; border-radius: 12px; border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font: inherit; padding: 0; }
+.ss-g-btg-cell { position: relative; min-height: 0; min-width: 0; border-radius: 12px; border: 1.5px dashed var(--ss-g-strong-line); background: transparent; color: var(--ss-g-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font: inherit; padding: 0; }
 .ss-g-btg-cell:disabled { cursor: default; }
 .ss-g-btg-cell[data-state="active"] { border: 2px solid var(--ss-w-accent); background: var(--ss-g-warm); color: var(--ss-w-accent); }
 .ss-g-btg-cell[data-state="correct"], .ss-g-btg-cell[data-state="wrong"] { justify-content: flex-end; background: var(--ss-g-surface); border-style: solid; }
@@ -8543,6 +8554,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-btg-sheet .ss-g-search-box { height: 48px; border-radius: 12px; background: var(--ss-g-ground); }
 .ss-g-btg-sheet-empty { font-size: 13px; color: var(--ss-g-muted); }
 .ss-g-btg-sheet .ss-g-opt { background: var(--ss-g-raised); }
+.ss-g-btg-sheet .ss-g-opts { max-height: 160px; }
 .ss-g-btg-result-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-g-btg-result-plus { color: var(--ss-w-accent); display: flex; }