Face global settings, team colors in Dashboard Face, and prefer player Face over blank-face.png

src/ui/components/NewsBlock.tsx

@@ -98,6 +98,11 @@ const NewsBlock = ({
 		});
 	}
 
+	let colors: [string, string, string] | undefined;
+	if (event.p && event.p.face) {
+		colors = event.p.face.teamColors as [string, string, string];
+	}
+
 	return (
 		<div className="card">
 			<div
@@ -113,7 +118,8 @@ const NewsBlock = ({
 				<Badge type={event.type} />
 			</div>
 			<div className="d-flex">
-				{event.p && event.p.imgURL !== "/img/blank-face.png" ? (
+				{event.p &&
+				(event.p.imgURL !== "/img/blank-face.png" || event.p.face) ? (
 					<div
 						style={{
 							maxHeight: 90,
@@ -122,7 +128,11 @@ const NewsBlock = ({
 						}}
 						className="flex-shrink-0"
 					>
-						<PlayerPicture face={event.p.face} imgURL={event.p.imgURL} />
+						<PlayerPicture
+							face={event.p.face}
+							imgURL={event.p.imgURL}
+							colors={colors}
+						/>
 					</div>
 				) : null}
 				<div className="p-2">

src/ui/components/PlayerPicture.tsx

@@ -20,7 +20,7 @@ const PlayerPicture = ({
 }) => {
 	const [wrapper, setWrapper] = useState<HTMLDivElement | null>(null);
 	useEffect(() => {
-		if (face && !imgURL && wrapper) {
+		if (face && (!imgURL || imgURL == "/img/blank-face.png") && wrapper) {
 			displayFace({
 				colors,
 				face,
@@ -30,14 +30,19 @@ const PlayerPicture = ({
 		}
 	}, [face, imgURL, colors, jersey, wrapper]);
 
-	if (imgURL) {
+	// Order of player picture preference: (1) non-blank image > (2) Face JS > (3) blank face
+	if (imgURL && imgURL !== "/img/blank-face.png") {
 		return <img alt="Player" src={imgURL} style={imgStyle} />;
 	}
 
 	if (face) {
 		return <div ref={setWrapper} />;
 	}
 
+	if (imgURL) {
+		return <img alt="Player" src={imgURL} style={imgStyle} />;
+	}
+
 	return null;
 };
 

src/ui/views/GlobalSettings/RealData.tsx

@@ -53,8 +53,17 @@ const RealData = ({
 						rows={10}
 					/>
 					<div className="text-body-secondary mt-1">
-						These photos will be used in any new "Real Players" or "Legends"
-						league you create. Existing leagues will not be affected.
+						<p>
+							These photos will be used in any new "Real Players" or "Legends"
+							league you create. Existing leagues will not be affected.
+						</p>
+						<p>
+							Value can be either URL to player image, or Face object, similar
+							to what can be generated at{" "}
+							<a href="https://zengm.com/facesjs/">
+								https://zengm.com/facesjs/
+							</a>
+						</p>
 					</div>
 				</div>
 			</div>

src/worker/api/index.ts

@@ -3517,9 +3517,9 @@ const updateOptions = async (
 			);
 		}
 		for (const [key, value] of Object.entries(realPlayerPhotos)) {
-			if (typeof value !== "string") {
+			if (typeof value !== "string" && typeof value !== "object") {
 				throw new Error(
-					`Invalid data format in real player photos - value for "${key}" is not a string`,
+					`Invalid data format in real player photos - value for "${key}" is not a string or Face object`,
 				);
 			}
 		}

src/worker/core/league/processPlayerNewLeague.ts

@@ -27,7 +27,11 @@ const processPlayerNewLeague = async ({
 		// Do this before augment so it doesn't need to create a face
 		if (p.srID) {
 			if (realPlayerPhotos[p.srID] !== undefined) {
-				p.imgURL = realPlayerPhotos[p.srID];
+				if (typeof realPlayerPhotos[p.srID] === "string") {
+					p.imgURL = realPlayerPhotos[p.srID];
+				} else if (typeof realPlayerPhotos[p.srID] === "object") {
+					p.face = realPlayerPhotos[p.srID];
+				}
 			} else {
 				const name = p.name ?? `${p.firstName} ${p.lastName}`;
 
@@ -36,7 +40,11 @@ const processPlayerNewLeague = async ({
 					.replace(/ /g, "_")
 					.toLowerCase()}`;
 				if (realPlayerPhotos[key] !== undefined) {
-					p.imgURL = realPlayerPhotos[key];
+					if (typeof realPlayerPhotos[key] === "string") {
+						p.imgURL = realPlayerPhotos[p.srID];
+					} else if (typeof realPlayerPhotos[key] === "object") {
+						p.face = realPlayerPhotos[p.srID];
+					}
 				}
 			}
 		}

src/worker/views/news.ts

@@ -127,10 +127,28 @@ export const processEvents = async (
 				{ pid: event.pids[0] },
 				"noCopyCache",
 			);
+			let team;
+			if (event.tid) {
+				team = await idb.getCopy.teamsPlus(
+					{
+						attrs: ["colors"],
+						tid: event.tid,
+						// season: event.season,
+					},
+					"noCopyCache",
+				);
+			}
+
 			if (player) {
+				if (player.face && team && "colors" in team) {
+					player.face.teamColors = team.colors as string[];
+				}
 				event.p = {
 					imgURL: player.imgURL,
-					face: player.imgURL ? undefined : player.face,
+					face:
+						player.imgURL && player.imgURL != "/img/blank-face.png"
+							? undefined
+							: player.face,
 				};
 				numImagesRemaining -= 1;
 			}