@sensiblestats/widget-react 0.61.1 → 0.61.3

package/dist/index.js

@@ -4951,13 +4951,16 @@ function initialsOf(name) {
   if (parts.length === 1 || !last) return first.slice(0, 2).toUpperCase();
   return ((first[0] ?? "") + (last[0] ?? "")).toUpperCase();
 }
+function isPlaceholderImage(url) {
+  return !!url && /\/placeholder\.(png|jpe?g|svg|webp)(\?|$)/i.test(url);
+}
 function PlayerAvatar({
   name,
   imagePath,
   className
 }) {
   const [failed, setFailed] = useState24(false);
-  const showImage = Boolean(imagePath) && !failed;
+  const showImage = Boolean(imagePath) && !isPlaceholderImage(imagePath) && !failed;
   return /* @__PURE__ */ jsx58("div", { className, "aria-hidden": "true", children: showImage ? /* @__PURE__ */ jsx58("img", { src: imagePath, alt: "", loading: "lazy", onError: () => setFailed(true) }) : /* @__PURE__ */ jsx58("span", { className: "ss-w-av-initials", children: initialsOf(name) }) });
 }
 
@@ -5454,7 +5457,7 @@ import { useState as useState26 } from "react";
 import { jsx as jsx69 } from "react/jsx-runtime";
 function CrestShield({ src, name, size = 28 }) {
   const [failed, setFailed] = useState26(false);
-  if (src && !failed) {
+  if (src && !isPlaceholderImage(src) && !failed) {
     return /* @__PURE__ */ jsx69("img", { className: "ss-g-crest", src, alt: name, width: size, height: size, loading: "lazy", onError: () => setFailed(true) });
   }
   return /* @__PURE__ */ jsx69("svg", { className: "ss-g-crest ss-g-crest--ph", width: size, height: size * 32 / 28, viewBox: "0 0 28 32", role: "img", "aria-label": name, children: /* @__PURE__ */ jsx69("path", { d: "M2 3h24v12c0 9-6 14-12 17C8 29 2 24 2 15z", fill: "currentColor" }) });
@@ -5521,7 +5524,7 @@ function CareerPathGame({
     /* @__PURE__ */ jsx70(GameHeader, { title, eyebrow: s.eyebrow, right, onBack, backLabel: ui.back }),
     /* @__PURE__ */ jsxs58("div", { className: "ss-g-body", children: [
       /* @__PURE__ */ jsxs58("div", { className: "ss-g-cp-card", children: [
-        /* @__PURE__ */ jsx70(Silhouette, { size: 64, variant: isOver ? "default" : "mystery" }),
+        isOver && clientState?.revealedPlayerName ? /* @__PURE__ */ jsx70(PlayerAvatar, { className: "ss-g-cp-photo", name: clientState.revealedPlayerName, imagePath: clientState.revealedPlayerImagePath }) : /* @__PURE__ */ jsx70(Silhouette, { size: 64, variant: isOver ? "default" : "mystery" }),
         /* @__PURE__ */ jsxs58("div", { className: "ss-g-cp-card-text", children: [
           /* @__PURE__ */ jsx70("span", { className: "ss-g-cp-card-title", children: isOver && clientState?.revealedPlayerName ? clientState.revealedPlayerName : s.mysteryPlayer }),
           clientState?.hintLine ? /* @__PURE__ */ jsx70("span", { className: "ss-g-cp-hint", children: clientState.hintLine }) : !isOver ? /* @__PURE__ */ jsxs58("span", { className: "ss-g-cp-locks", children: [
@@ -5937,7 +5940,8 @@ function toRows(positions) {
     bucket.push(p);
     byRow.set(rowKey, bucket);
   });
-  return [...byRow.keys()].sort((a, b) => b - a).map((k) => byRow.get(k));
+  const col = (p) => Number(p.slot?.split(":")[1]) || 0;
+  return [...byRow.keys()].sort((a, b) => b - a).map((k) => [...byRow.get(k)].sort((a, b) => col(b) - col(a)));
 }
 function formationLabel(rowsAttackFirst) {
   if (rowsAttackFirst.length < 2) return "";
@@ -8493,6 +8497,8 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-g-mt-portrait .ss-g-sil { font-size: 46px; }
 .ss-g-mt-photo { width: 132px; height: 132px; margin-bottom: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font: 800 40px var(--ss-g-font-display); }
 .ss-g-mt-photo img { width: 100%; height: 100%; object-fit: cover; }
+.ss-g-cp-photo { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ss-g-accent-tint); color: var(--ss-w-accent); font: 800 22px var(--ss-g-font-display); }
+.ss-g-cp-photo img { width: 100%; height: 100%; object-fit: cover; }
 .ss-g-mt-reveal-name { position: absolute; bottom: 6px; left: 12px; right: 12px; text-align: center; font: 800 20px var(--ss-g-font-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-g-mt-known { display: grid; gap: 6px; padding: 12px; }
 .ss-g-mt-known-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }