@sensiblestats/widget-react 0.60.4 → 0.60.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sensiblestats/widget-react
 
+## 0.60.6
+
+### Patch Changes
+
+- Games: Higher/Lower buttons fit phone-width cards (icons drop and type tightens on narrow cards, stacking below 180px), and Guess the XI shows a nationality's three-letter code at a size that fits its disc when there is no flag.
+
+## 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

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;
@@ -4847,6 +4847,9 @@ function nationalityFlag(nationality) {
   const key = nationality.trim().toLowerCase();
   return FLAGS[key] ?? nationality.slice(0, 3).toUpperCase();
 }
+function isNationCode(flag) {
+  return /^[A-Z]{1,3}$/.test(flag);
+}
 
 // src/components/games/PlayerAvatar.tsx
 var import_react30 = require("react");
@@ -5515,8 +5518,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 +5527,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) {
@@ -5700,12 +5705,12 @@ function BeatTheGridGame({
           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 }),
@@ -5914,15 +5919,17 @@ function GuessTheXiGame({
           /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "ss-g-gxi-rows", children: rows.map((row, r) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "ss-g-gxi-row", children: row.map((pos, c) => {
             const posLabel = pos.slot ? posBySlot.get(pos.slot) ?? "" : "";
             const name = pos.slot ? nameBySlot.get(pos.slot) : void 0;
+            const flag = nationalityFlag(pos.nationality);
             return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "ss-g-gxi-node", "data-revealed": name ? "true" : void 0, children: [
               /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 "span",
                 {
                   className: "ss-g-gxi-disc",
+                  "data-code": isNationCode(flag) ? "true" : void 0,
                   role: "img",
                   title: pos.nationality,
                   "aria-label": `${posLabel ? posLabel + " \u2014 " : ""}${pos.nationality}${name ? " \u2014 " + name : ""}`,
-                  children: nationalityFlag(pos.nationality)
+                  children: flag
                 }
               ),
               name ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ss-g-gxi-pos ss-g-gxi-pos--name", children: splitName(name).last }) : posLabel && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ss-g-gxi-pos", children: posLabel })
@@ -6834,7 +6841,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);
         }
@@ -6844,11 +6851,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();
@@ -8383,6 +8391,16 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* 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; }
+/* Phone-width cards: the info column is ~230px, too narrow for "DAHA FAZLA" + icon side by side.
+   Drop the icons and tighten the type first; stack the buttons only when even that cannot fit. */
+.ss-g-hl-info { container: hlinfo / inline-size; }
+@container hlinfo (max-width: 280px) {
+  .ss-g-hl-btns .ss-g-btn svg { display: none; }
+  .ss-g-hl-btns .ss-g-btn { font-size: 12px; letter-spacing: 0; padding: 0 4px; }
+}
+@container hlinfo (max-width: 180px) {
+  .ss-g-hl-btns { flex-direction: column; }
+}
 .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; }
@@ -8419,6 +8437,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-gxi-node { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 72px; }
 .ss-g-gxi-disc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ss-g-pitch-chip); border: 2px solid var(--ss-g-pitch-ink); font-size: 22px; line-height: 1; }
 .ss-g-gxi-node[data-revealed] .ss-g-gxi-disc { border-color: var(--ss-w-accent); }
+.ss-g-gxi-disc[data-code] { font-family: var(--ss-g-font-body); font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--ss-g-pitch-ink); }
 .ss-g-gxi-pos { max-width: 100%; padding: 1px 6px; border-radius: 4px; background: var(--ss-g-pitch-chip); color: var(--ss-g-pitch-ink); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-g-gxi-pos--name { color: var(--ss-w-accent); text-transform: uppercase; }
 .ss-g-gxi-wrong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }