foodlinkk-command-center/cockpit/static/js/agent-avatars.js

/** 3D-style agent poppetjes met headset — consistent team look */
window.AgentAvatars = (function () {
  var CFG = {
    herman:      { hoodie: '#1e3a5f', hair: '#4a3728', skin: '#e8b896', style: 'exec',   accent: '#ffd700' },
    marketing:   { hoodie: '#9d174d', hair: '#1f2937', skin: '#f5c9a8', style: 'bob',    accent: '#ff6b9d' },
    bizdev:      { hoodie: '#0e4d6e', hair: '#2d1810', skin: '#ddb896', style: 'short',  accent: '#00e5ff' },
    finance:     { hoodie: '#14532d', hair: '#3d2314', skin: '#e8b896', style: 'glasses', accent: '#22c55e' },
    sourcing:    { hoodie: '#9a3412', hair: '#1a1a1a', skin: '#c9a07a', style: 'short',  accent: '#f97316' },
    product:     { hoodie: '#581c87', hair: '#4a3728', skin: '#f5c9a8', style: 'curl',   accent: '#a855f7' },
    halal:       { hoodie: '#065f46', hair: '#1f2937', skin: '#d4a574', style: 'short',  accent: '#34d399' },
    design:      { hoodie: '#831843', hair: '#111827', skin: '#f5c9a8', style: 'long',   accent: '#ec4899' },
    knowledge:   { hoodie: '#312e81', hair: '#374151', skin: '#e8b896', style: 'glasses', accent: '#6366f1' },
    retail:      { hoodie: '#365314', hair: '#2d1810', skin: '#ddb896', style: 'short',  accent: '#b8ff3c' },
    browser:     { hoodie: '#0c4a6e', hair: '#1f2937', skin: '#c9a07a', style: 'short',  accent: '#38bdf8' },
    hermes:      { hoodie: '#1e40af', hair: '#3d2314', skin: '#e8b896', style: 'short',  accent: '#2aabee' },
    email:       { hoodie: '#334155', hair: '#4a3728', skin: '#ddb896', style: 'short',  accent: '#94a3b8' },
    research:    { hoodie: '#115e59', hair: '#1a1a1a', skin: '#f5c9a8', style: 'glasses', accent: '#14b8a6' },
    sysops:      { hoodie: '#1e3a5f', hair: '#4a3728', skin: '#e8b896', style: 'short',  accent: '#38bdf8', hat: 'cap' },
    packaging:   { hoodie: '#7c2d12', hair: '#2d1810', skin: '#c9a07a', style: 'short',  accent: '#fb923c' },
  };

  function cfg(key, fallbackColor) {
    var k = (key || 'agent').toLowerCase();
    var c = CFG[k] || { hoodie: fallbackColor || '#1e3a5f', hair: '#3d2314', skin: '#e8b896', style: 'short', accent: '#38bdf8' };
    return c;
  }

  function capSvg(hid, c) {
    return (
      '<path d="M22,44 Q50,30 78,44 L82,48 Q50,54 18,48Z" fill="#0f172a" opacity="0.35"/>' +
      '<ellipse cx="50" cy="36" rx="26" ry="12" fill="' + c.hoodie + '"/>' +
      '<path d="M24,40 Q50,26 76,40 L88,46 Q50,52 14,46Z" fill="#1e40af"/>' +
      '<path d="M26,38 Q50,28 74,38" fill="none" stroke="#38bdf8" stroke-width="1.2" opacity="0.5"/>' +
      '<rect x="46" y="28" width="8" height="5" rx="1" fill="#38bdf8" opacity="0.85"/>'
    );
  }

  function hairPath(style) {
    if (style === 'long') return 'M28,38 Q20,18 40,14 Q60,10 72,22 Q78,32 74,48 Q70,56 62,52 Q58,38 50,36 Q42,36 38,48 Q32,52 28,38Z';
    if (style === 'bob') return 'M26,40 Q24,22 42,16 Q62,14 74,28 Q76,42 70,50 Q50,54 30,48 Q24,44 26,40Z';
    if (style === 'curl') return 'M28,42 Q22,24 38,16 Q52,12 68,20 Q76,30 72,44 Q66,52 54,48 Q44,52 34,46 Q26,44 28,42Z';
    return 'M30,40 Q28,24 44,18 Q58,16 70,26 Q74,36 70,44 Q54,48 38,44 Q30,42 30,40Z';
  }

  function svgAvatar(key, color) {
    var c = cfg(key, color);
    var hid = 'av-' + key;
    return (
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120" class="agent-char-svg" aria-hidden="true">' +
      '<defs>' +
      '<linearGradient id="' + hid + '-bg" x1="0%" y1="0%" x2="100%" y2="100%">' +
      '<stop offset="0%" stop-color="#0c1929"/><stop offset="50%" stop-color="#152238"/><stop offset="100%" stop-color="#0a1020"/>' +
      '</linearGradient>' +
      '<linearGradient id="' + hid + '-hood" x1="30%" y1="0%" x2="70%" y2="100%">' +
      '<stop offset="0%" stop-color="' + c.hoodie + '"/><stop offset="100%" stop-color="#0a0f18"/>' +
      '</linearGradient>' +
      '<linearGradient id="' + hid + '-skin" x1="40%" y1="0%" x2="60%" y2="100%">' +
      '<stop offset="0%" stop-color="' + c.skin + '"/><stop offset="100%" stop-color="#c9956e"/>' +
      '</linearGradient>' +
      '<radialGradient id="' + hid + '-glow" cx="75%" cy="25%" r="45%">' +
      '<stop offset="0%" stop-color="' + c.accent + '" stop-opacity="0.35"/><stop offset="100%" stop-opacity="0"/>' +
      '</radialGradient>' +
      '<filter id="' + hid + '-sh"><feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.45"/></filter>' +
      '</defs>' +
      '<rect width="100" height="120" fill="url(#' + hid + '-bg)"/>' +
      '<ellipse cx="78" cy="28" rx="35" ry="30" fill="url(#' + hid + '-glow)"/>' +
      '<ellipse cx="50" cy="100" rx="30" ry="14" fill="rgba(0,0,0,0.4)"/>' +
      '<path d="M18,118 Q18,74 50,68 Q82,74 82,118Z" fill="url(#' + hid + '-hood)" filter="url(#' + hid + '-sh)"/>' +
      '<path d="M20,70 Q50,58 80,70 L76,82 Q50,76 24,82Z" fill="' + c.hoodie + '" opacity="0.9"/>' +
      '<path d="M28,68 Q50,48 72,68 L68,78 Q50,72 32,78Z" fill="' + c.hoodie + '"/>' +
      '<ellipse cx="50" cy="54" rx="23" ry="25" fill="url(#' + hid + '-skin)" filter="url(#' + hid + '-sh)"/>' +
      '<ellipse cx="56" cy="56" rx="10" ry="14" fill="rgba(0,0,0,0.08)"/>' +
      (c.hat === 'cap' ? '' : '<path d="' + hairPath(c.style) + '" fill="' + c.hair + '"/>') +
      (c.style === 'glasses'
        ? '<ellipse cx="42" cy="52" rx="8" ry="6" fill="none" stroke="#334155" stroke-width="1.5"/>' +
          '<ellipse cx="58" cy="52" rx="8" ry="6" fill="none" stroke="#334155" stroke-width="1.5"/>' +
          '<line x1="50" y1="52" x2="50" y2="52" stroke="#334155" stroke-width="1.5"/>'
        : '') +
      '<ellipse cx="42" cy="52" rx="3" ry="3.5" fill="#1e293b"/><ellipse cx="58" cy="52" rx="3" ry="3.5" fill="#1e293b"/>' +
      '<ellipse cx="43" cy="51" rx="1" ry="1.2" fill="#fff" opacity="0.7"/><ellipse cx="59" cy="51" rx="1" ry="1.2" fill="#fff" opacity="0.7"/>' +
      '<path d="M44,62 Q50,66 56,62" fill="none" stroke="#b45309" stroke-width="1.5" stroke-linecap="round"/>' +
      '<path d="M16,50 Q50,26 84,50" fill="none" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round"/>' +
      '<rect x="10" y="44" width="14" height="18" rx="5" fill="#1e293b" stroke="#94a3b8" stroke-width="1.8"/>' +
      '<rect x="12" y="47" width="10" height="12" rx="3" fill="#334155"/>' +
      '<rect x="76" y="44" width="14" height="18" rx="5" fill="#1e293b" stroke="#94a3b8" stroke-width="1.8"/>' +
      '<rect x="78" y="47" width="10" height="12" rx="3" fill="#334155"/>' +
      '<path d="M78,60 Q86,72 82,82" fill="none" stroke="#94a3b8" stroke-width="2.8" stroke-linecap="round"/>' +
      '<circle cx="82" cy="84" r="3.5" fill="#64748b" stroke="#94a3b8" stroke-width="1"/>' +
      '<circle cx="88" cy="32" r="2.5" fill="' + c.accent + '" opacity="0.9"/>' +
      '<circle cx="12" cy="40" r="1.5" fill="' + c.accent + '" opacity="0.5"/>' +
      (c.hat === 'cap' ? capSvg(hid, c) : '') +
      '</svg>'
    );
  }

  function paint(el, key, color) {
    if (!el) return;
    el.innerHTML = svgAvatar((key || '').toLowerCase(), color);
  }

  function paintAll(root) {
    root = root || document;
    root.querySelectorAll('[data-agent-avatar]').forEach(function (el) {
      paint(el, el.getAttribute('data-agent-avatar'), el.getAttribute('data-agent-color'));
    });
  }

  return { paint: paint, paintAll: paintAll, svgAvatar: svgAvatar };
})();