@sensiblestats/widget-react 0.56.0 → 0.57.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @sensiblestats/widget-react
 
+## 0.57.0
+
+### Minor Changes
+
+- Guess the XI now reads as a real formation: the shape is named in text (e.g. "4-3-3") and a
+  position label (GK, CB, CM, ST…) sits under every flag, so the goalkeeper's end is unmistakable.
+  Wrong-guess reveals show the player's surname on the pitch instead of a raw slot code.
+
+  Games/Leaderboard tabs are now gated on the operator actually having games for the day. The games
+  list endpoint returns 200 with an empty list for non-games operators (only a hard 404 means the
+  feature is off), so the hook now enables the tabs from a non-empty list rather than defaulting them
+  on — which had shown the tabs on every operator. Also fixes the tabs never appearing when the
+  conversation initialises after first render (the one-shot fetch was dropped under StrictMode).
+
 ## 0.56.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -1724,18 +1724,19 @@ function computeGameDay(timezone) {
   return new Intl.DateTimeFormat("en-CA", { timeZone: timezone }).format(/* @__PURE__ */ new Date());
 }
 function useGames(conversation, { activeTab, operatorTimezone }) {
-  const [enabled, setEnabled] = (0, import_react6.useState)(true);
+  const [enabled, setEnabled] = (0, import_react6.useState)(false);
   const [games, setGames] = (0, import_react6.useState)([]);
   const [loading, setLoading] = (0, import_react6.useState)(false);
   const [refreshCount, setRefreshCount] = (0, import_react6.useState)(0);
   const inFlightRef = (0, import_react6.useRef)(false);
-  const enabledRef = (0, import_react6.useRef)(true);
+  const hardOffRef = (0, import_react6.useRef)(false);
   const conversationRef = (0, import_react6.useRef)(conversation);
   conversationRef.current = conversation;
   const tzRef = (0, import_react6.useRef)(operatorTimezone ?? DEFAULT_TZ);
   tzRef.current = operatorTimezone ?? DEFAULT_TZ;
+  const ready = conversation != null;
   (0, import_react6.useEffect)(() => {
-    if (!enabledRef.current) return;
+    if (hardOffRef.current) return;
     let active = true;
     const doFetch = async () => {
       const conv = conversationRef.current;
@@ -1747,10 +1748,12 @@ function useGames(conversation, { activeTab, operatorTimezone }) {
         const result = await conv.getGames(gameDay);
         if (!active) return;
         if (result === null) {
-          enabledRef.current = false;
+          hardOffRef.current = true;
           setEnabled(false);
+          setGames([]);
         } else {
           setGames(result.games);
+          setEnabled(result.games.length > 0);
         }
       } catch {
       } finally {
@@ -1762,7 +1765,7 @@ function useGames(conversation, { activeTab, operatorTimezone }) {
     let intervalId;
     if (activeTab === "games") {
       intervalId = window.setInterval(() => {
-        if (!enabledRef.current) {
+        if (hardOffRef.current) {
           window.clearInterval(intervalId);
           return;
         }
@@ -1771,9 +1774,10 @@ function useGames(conversation, { activeTab, operatorTimezone }) {
     }
     return () => {
       active = false;
+      inFlightRef.current = false;
       if (intervalId !== void 0) window.clearInterval(intervalId);
     };
-  }, [activeTab, refreshCount]);
+  }, [activeTab, refreshCount, ready]);
   const refresh = (0, import_react6.useCallback)(() => {
     setRefreshCount((c) => c + 1);
   }, []);
@@ -4970,6 +4974,47 @@ function toRows(positions) {
   });
   return [...byRow.keys()].sort((a, b) => b - a).map((k) => byRow.get(k));
 }
+function formationLabel(rows) {
+  if (rows.length < 2) return "";
+  const gkFirst = [...rows].reverse();
+  return gkFirst.slice(1).map((r) => r.length).join("-");
+}
+var FORMATION_POSITIONS = {
+  "4-4-2": [["GK"], ["LB", "CB", "CB", "RB"], ["LM", "CM", "CM", "RM"], ["ST", "ST"]],
+  "4-3-3": [["GK"], ["LB", "CB", "CB", "RB"], ["CM", "CM", "CM"], ["LW", "ST", "RW"]],
+  "4-2-3-1": [["GK"], ["LB", "CB", "CB", "RB"], ["CDM", "CDM"], ["LW", "CAM", "RW"], ["ST"]],
+  "4-1-4-1": [["GK"], ["LB", "CB", "CB", "RB"], ["CDM"], ["LM", "CM", "CM", "RM"], ["ST"]],
+  "4-5-1": [["GK"], ["LB", "CB", "CB", "RB"], ["LM", "CM", "CM", "CM", "RM"], ["ST"]],
+  "4-4-1-1": [["GK"], ["LB", "CB", "CB", "RB"], ["LM", "CM", "CM", "RM"], ["CAM"], ["ST"]],
+  "4-1-2-1-2": [["GK"], ["LB", "CB", "CB", "RB"], ["CDM"], ["LM", "RM"], ["CAM"], ["ST", "ST"]],
+  "3-5-2": [["GK"], ["CB", "CB", "CB"], ["LWB", "CM", "CM", "CM", "RWB"], ["ST", "ST"]],
+  "3-4-3": [["GK"], ["CB", "CB", "CB"], ["LM", "CM", "CM", "RM"], ["LW", "ST", "RW"]],
+  "5-3-2": [["GK"], ["LWB", "CB", "CB", "CB", "RWB"], ["CM", "CM", "CM"], ["ST", "ST"]],
+  "5-4-1": [["GK"], ["LWB", "CB", "CB", "CB", "RWB"], ["LM", "CM", "CM", "RM"], ["ST"]]
+};
+function lineFallback(lineIdx, totalLines) {
+  if (lineIdx === 0) return "GK";
+  if (lineIdx === totalLines - 1) return "FWD";
+  if (lineIdx === 1) return "DEF";
+  return "MID";
+}
+function positionsBySlot(formation, rowsAttackFirst) {
+  const gkFirst = [...rowsAttackFirst].reverse();
+  const template = FORMATION_POSITIONS[formation];
+  const map = /* @__PURE__ */ new Map();
+  gkFirst.forEach((line, li) => {
+    line.forEach((entry, ci) => {
+      if (!entry.slot) return;
+      const label = template?.[li]?.[ci] ?? lineFallback(li, gkFirst.length);
+      map.set(entry.slot, label);
+    });
+  });
+  return map;
+}
+function surname(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  return parts.length ? parts[parts.length - 1] : name;
+}
 function GuessTheXiGame({
   config,
   result,
@@ -4983,9 +5028,11 @@ function GuessTheXiGame({
   const solved = clientState?.status === "solved";
   const guessedTeamIds = new Set(clientState?.guessHistory.map((g) => g.teamId) ?? []);
   const rows = config ? toRows(config.positions) : [];
-  const revealBySlot = /* @__PURE__ */ new Map();
+  const formation = config?.hasRealFormation ? formationLabel(rows) : "";
+  const posBySlot = config?.hasRealFormation ? positionsBySlot(formation, rows) : /* @__PURE__ */ new Map();
+  const nameBySlot = /* @__PURE__ */ new Map();
   (clientState?.earnedReveals ?? []).forEach((r) => {
-    if (r.slot) revealBySlot.set(r.slot, r);
+    if (r.slot && r.type !== "position") nameBySlot.set(r.slot, r.value);
   });
   const filtered = config && !isOver ? config.teamPool.filter(
     (t) => !guessedTeamIds.has(t.teamId) && t.teamName.toLowerCase().includes(query.toLowerCase())
@@ -4998,13 +5045,16 @@ function GuessTheXiGame({
     onSubmit(JSON.stringify({ guesses: newGuesses }));
   }
   const wrongGuesses = (clientState?.guessHistory ?? []).filter((g) => !g.wasCorrect);
-  const revealCount = clientState?.earnedReveals.length ?? 0;
+  const revealCount = nameBySlot.size;
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi", "data-testid": "game-screen-guess-the-xi", children: [
     !config && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gscreen-body", children: "Loading\u2026" }),
     config && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-head", children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-title", children: "Guess the XI" }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-title", children: [
+            "Guess the XI",
+            formation && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-form", "aria-label": `Formation ${formation}`, children: formation })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-sub", children: [
             "Name the team \xB7 flags are each player's nationality \xB7 ",
             config.poolLabel
@@ -5017,18 +5067,20 @@ function GuessTheXiGame({
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gscroll", children: [
         rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-pitch", children: rows.map((row, r) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ss-w-gxi-prow", children: row.map((pos, c) => {
-          const rev = pos.slot ? revealBySlot.get(pos.slot) : void 0;
+          const posLabel = pos.slot ? posBySlot.get(pos.slot) ?? "" : "";
+          const name = pos.slot ? nameBySlot.get(pos.slot) : void 0;
           return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-slot", children: [
             /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               "div",
               {
-                className: `ss-w-gxi-flag${rev ? " ss-w-gxi-flag--revealed" : ""}`,
+                className: `ss-w-gxi-flag${name ? " ss-w-gxi-flag--revealed" : ""}`,
                 title: pos.nationality,
-                "aria-label": rev ? `${pos.nationality} \u2014 revealed: ${rev.value}` : pos.nationality,
+                "aria-label": `${posLabel ? posLabel + " \u2014 " : ""}${pos.nationality}${name ? " \u2014 " + name : ""}`,
                 children: nationalityFlag(pos.nationality)
               }
             ),
-            rev && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-flag-lab", children: rev.value })
+            posLabel && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-pos", children: posLabel }),
+            name && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ss-w-gxi-flag-lab", children: surname(name) })
           ] }, `${pos.slot}-${c}`);
         }) }, r)) }),
         revealCount > 0 && !isOver && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ss-w-gxi-revnote", children: [
@@ -7189,7 +7241,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-gxi { display: flex; flex-direction: column; gap: 12px; }
 /* Header */
 .ss-w-gxi-head { display: flex; align-items: flex-start; gap: 8px; }
-.ss-w-gxi-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; }
+.ss-w-gxi-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ss-w-ink); line-height: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+/* Formation pill next to the title, e.g. "4-2-3-1". */
+.ss-w-gxi-form { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 26%, var(--ss-w-line)); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
 .ss-w-gxi-sub { font-size: 11px; color: var(--ss-w-faint); margin-top: 4px; }
 .ss-w-gxi-left { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 11%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 22%, var(--ss-w-line)); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
 /* Pitch: a flag per slot laid out in formation rows on a green field. A real min-height plus
@@ -7208,6 +7262,10 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .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; }
 /* A slot whose player has been revealed by a wrong guess. */
 .ss-w-gxi-flag--revealed { border-color: var(--ss-w-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-w-accent) 45%, transparent); }
+/* Position label shown under every flag (GK, CB, CM, ST\u2026) \u2014 reads the formation and marks the
+   keeper's end. Muted so it sits behind the flag, not competing with it. */
+.ss-w-gxi-pos { font-size: 8.5px; line-height: 1.05; font-weight: 800; letter-spacing: .04em; text-align: center; color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
+/* Player surname, shown under the position once a wrong guess reveals it \u2014 in the accent colour. */
 .ss-w-gxi-flag-lab { font-size: 8px; line-height: 1.05; font-weight: 700; text-align: center; color: var(--ss-w-accent); max-width: 46px; word-break: break-word; }
 .ss-w-gxi-revnote { font-size: 11px; color: var(--ss-w-faint); }
 /* Wrong-guess trail */