@closerclick/closer-click-profile 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@closerclick/closer-click-profile",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Web Component (custom element) <closer-click-profile> reutilizable por cualquier app del ecosistema Closer Click: tarjeta de perfil + reputación (confianza/afinidad, web-of-trust, reputación de la red). Autohosteado, Shadow DOM, temable por CSS vars.",
   "type": "module",
   "main": "src/index.js",

package/src/index.js

@@ -245,6 +245,8 @@ const STYLE = `
     width: fit-content;
   }
   .since { font-size: 12px; color: var(--_muted); }
+  .ind-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+  .ind-badge { font-size: 12px; font-weight: 700; color: var(--_accent); border: 1px solid var(--_accent); border-radius: 8px; padding: 2px 8px; white-space: nowrap; }
 
   /* ----- Sections ----- */
   .section { display: flex; flex-direction: column; gap: 6px; position: relative; }
@@ -321,7 +323,7 @@ const STYLE = `
 
 class CloserClickProfile extends HTMLElement {
   static get observedAttributes() {
-    return ['pubkey', 'name', 'since', 'online', 'mode', 'modal', 'heading', 'lang']
+    return ['pubkey', 'name', 'since', 'online', 'mode', 'modal', 'heading', 'lang', 'indicators']
   }
 
   constructor() {
@@ -331,6 +333,7 @@ class CloserClickProfile extends HTMLElement {
     this._my = { confianza: 0, afinidad: 0, notes: '' }
     this._endorsements = []
     this._derived = null
+    this._indicators = [] // indicadores derivados a mostrar (p. ej. ELO por juego)
     this._cloud = null
     this._cloudLoading = true
     this._hover = 0
@@ -360,9 +363,17 @@ class CloserClickProfile extends HTMLElement {
   attributeChangedCallback(name, oldV, newV) {
     if (oldV === newV) return
     if (name === 'pubkey') { this._resetState(); this.reload(); return }
+    if (name === 'indicators') { this._indicators = []; this.reload(); return }
     if (this.shadowRoot.childElementCount) this._render()
   }
 
+  // Indicadores derivados a mostrar (atributo `indicators`), p. ej.
+  // "elo:cuarenta" o "elo:chess,elo:cuarenta". Formato: nombre[:scope], coma.
+  get _indicatorSpecs() {
+    return (this.getAttribute('indicators') || '').split(',').map(s => s.trim()).filter(Boolean)
+      .map(s => { const [iName, scope] = s.split(':'); return { name: iName, scope: scope || undefined } })
+  }
+
   _onKeydown(e) {
     if (e.key === 'Escape' && this.hasAttribute('modal')) this._close()
   }
@@ -388,6 +399,7 @@ class CloserClickProfile extends HTMLElement {
     this._my = { confianza: 0, afinidad: 0, notes: '' }
     this._endorsements = []
     this._derived = null
+    this._indicators = []
     this._cloud = null
     this._cloudLoading = true
     this._hover = 0
@@ -422,6 +434,17 @@ class CloserClickProfile extends HTMLElement {
         this._derived = e ? e.derived : null
       }
     } catch (_) { /* best-effort */ }
+    // Indicadores derivados (p. ej. ELO por juego), vía provider.getDerived.
+    try {
+      const specs = this._indicatorSpecs
+      if (specs.length && typeof p.getDerived === 'function') {
+        const vals = await Promise.all(specs.map(async s => {
+          try { const d = await p.getDerived(pk, s.name, s.scope); return d ? { ...s, value: (d.value != null ? d.value : d.elo), count: (d.count != null ? d.count : d.games) } : null } catch (_) { return null }
+        }))
+        if (token !== this._loadToken) return
+        this._indicators = vals.filter(v => v && v.value != null)
+      }
+    } catch (_) { /* best-effort */ }
     if (token === this._loadToken) this._render()
 
     try {
@@ -559,6 +582,11 @@ class CloserClickProfile extends HTMLElement {
           </label>` : `<div class="name">${this._esc(name)}</div>`}
           <code class="pubkey">${this._esc(this._shortKey(pk))}</code>
           ${since ? `<div class="since">${this._esc(t.knownSince)} ${this._esc(this._fmtDate(since))}</div>` : ''}
+          ${this._indicators.length ? `<div class="ind-badges">${this._indicators.map(i => {
+            const label = this._esc((i.name || '').toUpperCase())
+            const tip = label + (i.scope ? ' · ' + this._esc(i.scope) : '') + (i.count != null ? ' · ' + i.count : '')
+            return `<span class="ind-badge" title="${tip}">${label} ${this._esc(String(i.value))}</span>`
+          }).join('')}</div>` : ''}
         </div>
       </div>`