@sensiblestats/widget-react 0.60.4 → 0.60.6

package/dist/index.js

@@ -4667,15 +4667,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] = useState23(null);
   const [submitting, setSubmitting] = useState23(false);
   const [rawStatus, setRawStatus] = useState23(null);
   const inFlightRef = useRef11(false);
   const convRef = useRef11(conversation);
   convRef.current = conversation;
-  const optsRef = useRef11({ gameId, gameDay, fixtureId, refresh });
-  optsRef.current = { gameId, gameDay, fixtureId, refresh };
+  const optsRef = useRef11({ gameId, gameDay, fixtureId, locale, refresh });
+  optsRef.current = { gameId, gameDay, fixtureId, locale, refresh };
   const resultRef = useRef11(null);
   resultRef.current = result;
   const refetch = useCallback8(async () => {
@@ -4683,7 +4683,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);
@@ -4701,7 +4701,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;
@@ -4810,6 +4810,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
 import { useState as useState24 } from "react";
@@ -5478,8 +5481,8 @@ function CareerPathGame({
 // src/components/games/BeatTheGridGame.tsx
 import React, { useEffect as useEffect14, useId as useId4, useRef as useRef12, useState as useState28 } from "react";
 import { Fragment as Fragment14, jsx as jsx71, jsxs as jsxs59 } from "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";
@@ -5487,8 +5490,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) {
@@ -5663,12 +5668,12 @@ function BeatTheGridGame({
           role: "grid",
           children: [
             /* @__PURE__ */ jsx71("div", { className: "ss-g-btg-corner" }),
-            cols.map((col) => /* @__PURE__ */ jsxs59("div", { className: "ss-g-btg-colhdr", children: [
-              /* @__PURE__ */ jsx71(CriterionIcon, { kind: criterionIconKind(col) }),
+            cols.map((col, colIdx) => /* @__PURE__ */ jsxs59("div", { className: "ss-g-btg-colhdr", children: [
+              /* @__PURE__ */ jsx71(CriterionIcon, { kind: criterionIconKind(col, config.colsI18n?.[colIdx]?.key) }),
               /* @__PURE__ */ jsx71("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__ */ jsxs59(React.Fragment, { children: [
                 /* @__PURE__ */ jsx71("div", { className: "ss-g-btg-rowhdr", children: abbr === rowLabel ? /* @__PURE__ */ jsx71("span", { children: rowLabel }) : /* @__PURE__ */ jsxs59(Fragment14, { children: [
                   /* @__PURE__ */ jsx71("span", { "aria-hidden": "true", children: abbr }),
@@ -5877,15 +5882,17 @@ function GuessTheXiGame({
           /* @__PURE__ */ jsx73("div", { className: "ss-g-gxi-rows", children: rows.map((row, r) => /* @__PURE__ */ jsx73("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__ */ jsxs61("div", { className: "ss-g-gxi-node", "data-revealed": name ? "true" : void 0, children: [
               /* @__PURE__ */ jsx73(
                 "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__ */ jsx73("span", { className: "ss-g-gxi-pos ss-g-gxi-pos--name", children: splitName(name).last }) : posLabel && /* @__PURE__ */ jsx73("span", { className: "ss-g-gxi-pos", children: posLabel })
@@ -6797,7 +6804,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);
         }
@@ -6807,11 +6814,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
   });
   useEffect15(() => {
     if (conversation) hydrate();
@@ -8346,6 +8354,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; }
@@ -8382,6 +8400,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; }