@closerclick/closer-click-profile 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@closerclick/closer-click-profile",
-  "version": "0.2.0",
+  "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

@@ -151,6 +151,9 @@ const STYLE = `
     --_muted:     var(--ccp-muted, var(--muted, #8a7a66));
     --_accent:    var(--ccp-accent, var(--accent, #c0392b));
     --_accent-2:  var(--ccp-accent-2, var(--accent-2, #a93226));
+    /* Texto sobre el acento (botón primario). Default blanco; las apps con un
+       acento claro (p. ej. lima) lo ponen oscuro vía --ccp-accent-text. */
+    --_accent-text: var(--ccp-accent-text, #fff);
     --_gold:      var(--ccp-gold, var(--gold, #d4a72c));
     --_derived:   var(--ccp-derived, var(--derived, #a37a45));
     --_online:    var(--ccp-online, var(--online, #5a8a3a));
@@ -242,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; }
@@ -309,7 +314,7 @@ const STYLE = `
   /* ----- Footer ----- */
   .foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px; background: var(--_bg-2); border-top: 1px solid var(--_border); }
   .btn { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
-  .btn.primary { background: var(--_accent); color: #fff; }
+  .btn.primary { background: var(--_accent); color: var(--_accent-text); }
   .btn.primary:hover:not(:disabled) { background: var(--_accent-2); }
   .btn.primary:disabled { opacity: 0.6; cursor: default; }
   .btn.secondary { background: transparent; color: var(--_text); border-color: var(--_border); }
@@ -318,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() {
@@ -328,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
@@ -357,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()
   }
@@ -385,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
@@ -419,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 {
@@ -556,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>`