@hadoku/prefs-client 1.1.17 → 1.1.19

package/dist/cosmetics.d.ts

@@ -1,6 +1,36 @@
 import { A as AvatarCosmetics, P as Placement } from './cosmetics-contract-CWnMmEjr.js';
 export { B as Box, c as COSMETICS, d as COSMETICS_BY_ID, e as COSMETIC_ID_PATTERN, f as COSMETIC_SLOTS, g as CosmeticGrantList, h as CosmeticGrantRequest, i as CosmeticItem, j as CosmeticPeople, a as CosmeticSlot, C as CosmeticsView, E as EARNED_COSMETICS, b as Loadout, L as LoadoutUpdate, O as OverlayArt, k as PLACEMENT_DEFAULT, l as PLACEMENT_LIMITS, m as PLACEMENT_ZONE, n as cleanLoadout, o as cleanWorn, p as emptyLoadout, q as fitPlacement, r as overlayBounds, s as ownedFrom, w as wornCosmetics } from './cosmetics-contract-CWnMmEjr.js';
 
+/**
+ * A person's colour from their avatar picture: the picture's alpha-weighted
+ * average, lightness clamped so a black or white picture still reads as a name
+ * on a card. Their name cosmetics derive from it (`--hc-base`), so every app
+ * that draws a person (watchparty's chat, the avatar dialog's preview) reads it
+ * here and they agree. With no picture, or one that cannot be read, the app
+ * uses the person's character colour.
+ *
+ * The picture is read through a canvas, so it is loaded once more with
+ * `crossOrigin="anonymous"`. Discord and Steam both answer
+ * `Access-Control-Allow-Origin: *`; a host that does not taints the canvas and
+ * reads as null. One read per URL per page, cached, failures included.
+ *
+ * Browser only; outside one every read is null.
+ */
+/**
+ * The alpha-weighted mean of RGBA pixels as `#rrggbb`, lightness clamped to
+ * the readable band. Null when no pixel is opaque enough to count.
+ */
+declare function averagePictureColour(pixels: ArrayLike<number>): string | null;
+/**
+ * The picture's colour if it has been read: a colour, null (unreadable), or
+ * undefined (not read yet; {@link readPictureColour} starts the read).
+ */
+declare function pictureColour(url: string): string | null | undefined;
+/** Be told whenever a read settles. Returns the unsubscribe. */
+declare function onPictureColour(listener: () => void): () => void;
+/** Read the picture's colour (once per URL); null when it cannot be read. */
+declare function readPictureColour(url: string): Promise<string | null>;
+
 /**
  * Avatar cosmetics — the renderer every app uses, so a name, an avatar and a
  * chat line look the same in watchparty, the games and the settings dialog.
@@ -67,4 +97,4 @@ declare function cosmeticsCss(assetBase?: string): string;
 /** Add the stylesheet and the reveal clean-up to a document, once. */
 declare function ensureCosmeticsStyles(doc?: Document, assetBase?: string): void;
 
-export { AvatarCosmetics, COSMETICS_ASSET_BASE, Placement, avatarHtml, colourStyle, cosmeticsCss, decorHtml, ensureCosmeticsStyles, finishReveal, messageHtml, nameHtml, placementTransform };
+export { AvatarCosmetics, COSMETICS_ASSET_BASE, Placement, avatarHtml, averagePictureColour, colourStyle, cosmeticsCss, decorHtml, ensureCosmeticsStyles, finishReveal, messageHtml, nameHtml, onPictureColour, pictureColour, placementTransform, readPictureColour };

package/dist/cosmetics.js

@@ -226,6 +226,116 @@ function wornCosmetics(loadout) {
   return Object.keys(worn).length ? worn : void 0;
 }
 
+// src/picture-colour.ts
+var MIN_LIGHTNESS = 0.3;
+var MAX_LIGHTNESS = 0.82;
+var SAMPLE_SIZE = 24;
+var MIN_ALPHA = 32;
+function averagePictureColour(pixels) {
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let weight = 0;
+  for (let i = 0; i + 3 < pixels.length; i += 4) {
+    const a = pixels[i + 3];
+    if (a < MIN_ALPHA) continue;
+    r += pixels[i] * a;
+    g += pixels[i + 1] * a;
+    b += pixels[i + 2] * a;
+    weight += a;
+  }
+  if (weight === 0) return null;
+  return clampLightness(r / weight, g / weight, b / weight);
+}
+function clampLightness(r, g, b) {
+  const [h, s, l] = rgbToHsl(r / 255, g / 255, b / 255);
+  const clamped = Math.min(MAX_LIGHTNESS, Math.max(MIN_LIGHTNESS, l));
+  const [r2, g2, b2] = hslToRgb(h, s, clamped);
+  const hex = (v) => Math.round(v * 255).toString(16).padStart(2, "0");
+  return `#${hex(r2)}${hex(g2)}${hex(b2)}`;
+}
+function rgbToHsl(r, g, b) {
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h;
+  if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
+  else if (max === g) h = (b - r) / d + 2;
+  else h = (r - g) / d + 4;
+  return [h / 6, s, l];
+}
+function hslToRgb(h, s, l) {
+  if (s === 0) return [l, l, l];
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const channel = (t) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  return [channel(h + 1 / 3), channel(h), channel(h - 1 / 3)];
+}
+var colours = /* @__PURE__ */ new Map();
+var pending = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+function pictureColour(url) {
+  return colours.get(url);
+}
+function onPictureColour(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function readPictureColour(url) {
+  if (colours.has(url)) return Promise.resolve(colours.get(url) ?? null);
+  const inFlight = pending.get(url);
+  if (inFlight) return inFlight;
+  const read = sample(url).then((colour) => {
+    pending.delete(url);
+    colours.set(url, colour);
+    for (const l of listeners) l();
+    return colour;
+  });
+  pending.set(url, read);
+  return read;
+}
+function sample(url) {
+  if (typeof Image === "undefined" || typeof document === "undefined") {
+    return Promise.resolve(null);
+  }
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.referrerPolicy = "no-referrer";
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = SAMPLE_SIZE;
+      canvas.height = SAMPLE_SIZE;
+      const ctx = canvas.getContext("2d", { willReadFrequently: true });
+      if (!ctx) {
+        resolve(null);
+        return;
+      }
+      ctx.drawImage(img, 0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+      try {
+        resolve(averagePictureColour(ctx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE).data));
+      } catch (err) {
+        console.debug("[prefs-client] picture colour unreadable", url, err);
+        resolve(null);
+      }
+    };
+    img.onerror = () => resolve(null);
+    img.src = url;
+  });
+}
+
 // src/cosmetics.ts
 var COSMETICS_ASSET_BASE = "/cosmetics";
 var STYLE_ID = "hadoku-cosmetics";
@@ -524,6 +634,7 @@ export {
   PLACEMENT_LIMITS,
   PLACEMENT_ZONE,
   avatarHtml,
+  averagePictureColour,
   cleanLoadout,
   cleanWorn,
   colourStyle,
@@ -535,8 +646,11 @@ export {
   fitPlacement,
   messageHtml,
   nameHtml,
+  onPictureColour,
   overlayBounds,
   ownedFrom,
+  pictureColour,
   placementTransform,
+  readPictureColour,
   wornCosmetics
 };

package/dist/games.d.ts

@@ -126,6 +126,8 @@ interface LeaderboardRow {
 }
 interface BreakdownRow extends OutcomeTotals {
     value: string;
+    /** The newest `endedAt` among the group's matches in the read's scope, ms since epoch. Absent only from a prefs-api older than the field. */
+    lastPlayedAt?: number;
     /** The seat attrs a read asked to carry (`with`), off the group's most recent seat. Absent when it asked for none. */
     attrs?: StatAttrs;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hadoku/prefs-client",
-  "version": "1.1.17",
-  "gitHead": "3b7c6d55990095e078f86a404df472a06a12b65c",
+  "version": "1.1.19",
+  "gitHead": "7a6d244048846eb0251c27c223d732aae2abde61",
   "description": "Client SDK for the hadoku unified preferences store. Wraps /prefs/api/v1/* with localStorage caching, debounced writes, Zod-validated reads, and a usePrefs() React hook, plus match history, ratings and leaderboards for every game (./games), the one resolved avatar per user (./avatar), and the avatar cosmetics renderer (./cosmetics).",
   "type": "module",
   "main": "./dist/index.js",