// Badges — friendly laurel-medallion progression badges.
// Replaces the hex / "black ops" treatment with a warm, growth-oriented system:
// • Each family has THREE tiers that visually evolve (sprig → wreath → wreath + sunburst)
// • Tier palette: Bronze → Sage → Gold (warm, not metallic)
// • Hidden badges are "Surprises" — playful question-mark medallion with a friendly hint
// • Standalone "Moment" badges for one-off achievements (no tier)
const { useState: useBadgeState, useMemo: useBadgeMemo } = React;
// ---------- Catalog ----------
// Families produce 3 tiers each (I, II, III). Standalone moments + secrets sit alongside.
const FAMILIES = [
{ id: "calls", icon: "phone", group: "Outreach",
tiers: [
{ name: "First Hello", criteria: "Make your first 10 calls.", progressMax: 10 },
{ name: "Good Listener", criteria: "Reach 500 lifetime calls.", progressMax: 500 },
{ name: "Conversationalist", criteria: "Reach 2,500 lifetime calls.", progressMax: 2500 },
]},
{ id: "mail", icon: "envelope", group: "Outreach",
tiers: [
{ name: "First Note", criteria: "Send your first 10 mailings.", progressMax: 10 },
{ name: "Steady Writer", criteria: "Send 100 mailings.", progressMax: 100 },
{ name: "Mail Carrier", criteria: "Send 500 mailings.", progressMax: 500 },
]},
{ id: "leads", icon: "lead", group: "Pipeline",
tiers: [
{ name: "Curious Eye", criteria: "Surface your first lead.", progressMax: 1 },
{ name: "Lead Spotter", criteria: "Surface 25 lifetime leads.", progressMax: 25 },
{ name: "Pathfinder", criteria: "Surface 100 lifetime leads.", progressMax: 100 },
]},
{ id: "visits", icon: "visit", group: "Pipeline",
tiers: [
{ name: "First Footsteps", criteria: "Complete your first site visit.", progressMax: 1 },
{ name: "Wayfarer", criteria: "Visit 25 sites.", progressMax: 25 },
{ name: "Globetrotter", criteria: "Visit 75 sites.", progressMax: 75 },
]},
{ id: "lois", icon: "loi", group: "Pipeline",
tiers: [
{ name: "First Signature", criteria: "Sign your first LOI.", progressMax: 1 },
{ name: "Pen in Hand", criteria: "Sign 5 LOIs.", progressMax: 5 },
{ name: "Trusted Counsel", criteria: "Sign 15 LOIs.", progressMax: 15 },
]},
{ id: "closes", icon: "trophy", group: "Closing",
tiers: [
{ name: "First Win", criteria: "Close your first deal.", progressMax: 1 },
{ name: "Steady Hand", criteria: "Close 5 deals.", progressMax: 5 },
{ name: "Rainmaker", criteria: "Close 15 deals.", progressMax: 15 },
]},
{ id: "consist", icon: "fire", group: "Habit",
tiers: [
{ name: "Bright Spark", criteria: "Log activity 5 days in a row.", progressMax: 5 },
{ name: "Hot Streak", criteria: "30+ calls every week, 4 wks.", progressMax: 4 },
{ name: "Constant Star", criteria: "12 perfect weeks of logging.", progressMax: 12 },
]},
{ id: "team", icon: "team", group: "Team",
tiers: [
{ name: "Helping Hand", criteria: "Refer one deal across teams.", progressMax: 1 },
{ name: "Good Neighbor", criteria: "Refer 5 deals across teams.", progressMax: 5 },
{ name: "Mentor", criteria: "Mentor a teammate to close.", progressMax: 1 },
]},
];
const MOMENTS = [
{ id: "welcome", icon: "sun", name: "Welcome Aboard", group: "Moments", criteria: "Joined the firm." },
{ id: "the_whale", icon: "whale", name: "The Whale", group: "Moments", criteria: "Single deal over $20M TEV." },
{ id: "comeback", icon: "phoenix", name: "The Comeback", group: "Moments", criteria: "Re-engaged a lost prospect to close." },
{ id: "first_lead", icon: "lead", name: "Lucky Day", group: "Moments", criteria: "Sourced a deal in your first 30 days." },
];
const SECRETS = [
{ id: "early_bird", icon: "sunrise", name: "Early Bird", hint: "Up before the rooster.", criteria: "Log activity before 7am, 10 times." },
{ id: "night_owl", icon: "moon", name: "Night Owl", hint: "Some hours are quieter.", criteria: "Log activity after 9pm, 10 times." },
{ id: "explorer", icon: "compass", name: "Explorer", hint: "Click around, find things.", criteria: "Discover 5 hidden screens." },
{ id: "anniversary", icon: "cake", name: "Year One", hint: "A trip around the sun.", criteria: "One full year at the firm." },
];
// Build flat catalog
const BADGE_CATALOG = (() => {
const out = [];
FAMILIES.forEach(fam => {
fam.tiers.forEach((t, i) => {
out.push({
id: `${fam.id}_${i+1}`,
family: fam.id, familyIcon: fam.icon, familyGroup: fam.group,
tier: i + 1, // 1, 2, 3
name: t.name,
criteria: t.criteria,
progressMax: t.progressMax,
kind: "tier",
});
});
});
MOMENTS.forEach(m => out.push({ ...m, kind: "moment", tier: 0 }));
SECRETS.forEach(s => out.push({ ...s, kind: "secret", tier: 0 }));
return out;
})();
// Tier palette — warm, friendly, growth metaphor
const TIER_PALETTE = {
1: { name: "Bronze", ring: "#C8854E", fill1: "#F5C28B", fill2: "#C8854E", ribbon: "#8C5526", glyph: "#5C3415", text: "#FFE7CB" },
2: { name: "Sage", ring: "#7FA68D", fill1: "#C7DCC8", fill2: "#7FA68D", ribbon: "#4F7762", glyph: "#2A4232", text: "#EAF5EC" },
3: { name: "Gold", ring: "#C99528", fill1: "#F8DA78", fill2: "#C99528", ribbon: "#8D6712", glyph: "#5A3F0A", text: "#FFF4D2" },
};
const SECRET_PALETTE = { ring: "#9C8AB9", fill1: "#E0D6F0", fill2: "#9C8AB9", ribbon: "#6E5A92", glyph: "#3E2D5D", text: "#F3ECFF" };
const MOMENT_PALETTE = { ring: "#D8896D", fill1: "#F6D2C2", fill2: "#D8896D", ribbon: "#9B5639", glyph: "#5B2D1A", text: "#FBE7DD" };
// ---------- Glyph icons (centered, small) ----------
const Glyph = {
phone: ,
envelope: <>,
lead: <>,
visit: <>,
loi: <>,
trophy: <>,
fire: ,
team: <>,
sun: <>,
whale: <>,
phoenix: <>,
sunrise: <>,
moon: ,
compass: <>,
cake: <>,
};
// ---------- Laurel medallion ----------
//
// Tier 1 → single laurel sprig on each side
// Tier 2 → fuller laurel wreath
// Tier 3 → wreath + outer sunburst rays
// Secret → laurel sprig + "?" centered
// Moment → laurel wreath, peach palette, ribbon = "MOMENT"
function LaurelMedallion({ badge, locked, size = 96 }) {
const isSecret = badge.kind === "secret";
const isMoment = badge.kind === "moment";
const tier = badge.tier; // 0 for non-tier, 1/2/3 for tier
const palette = isSecret ? SECRET_PALETTE
: isMoment ? MOMENT_PALETTE
: (TIER_PALETTE[tier] || TIER_PALETTE[1]);
const ribbonLabel = isSecret ? (locked ? "SECRET" : "FOUND")
: isMoment ? "MOMENT"
: (palette.name.toUpperCase());
const showRays = !locked && tier === 3;
const wreathLevel = isSecret ? 1 : isMoment ? 2 : tier;
const Icon = Glyph[badge.familyIcon || badge.icon] || Glyph.trophy;
const gradId = `lm-${badge.id}-${locked ? "l" : "u"}`;
const grayed = locked;
return (
);
}
// Laurel branch — drawn as a curving stem with paired leaves.
// `level` controls leaf count: 1=sprig (3 leaves), 2=branch (5), 3=full (7).
function Laurel({ side, level, color, dimmed }) {
const flip = side === "left" ? -1 : 1;
const leaves = level >= 3 ? 7 : level >= 2 ? 5 : 3;
// Stem path: curves from bottom-center outward and up around the medallion
const stemD = side === "left"
? "M 56 96 Q 30 92, 22 70 Q 18 46, 36 28"
: "M 64 96 Q 90 92, 98 70 Q 102 46, 84 28";
return (
{Array.from({ length: leaves }).map((_, i) => {
// Place leaves along the stem; manually positioned for visual balance
const positions = [
{ x: 30, y: 84, a: -45 },
{ x: 23, y: 68, a: -25 },
{ x: 22, y: 52, a: -5 },
{ x: 26, y: 38, a: 15 },
{ x: 34, y: 28, a: 35 },
{ x: 28, y: 60, a: -15 }, // extra (level 3)
{ x: 32, y: 44, a: 5 }, // extra (level 3)
];
const p = positions[i] || positions[0];
const x = side === "left" ? p.x : 120 - p.x;
const y = p.y;
const ang = p.a * flip;
return (
);
})}
);
}
// ---------- State helpers ----------
function bHash(s) { let h = 2166136261; for (let i = 0; i < s.length; i++) h = Math.imul(h ^ s.charCodeAt(i), 16777619); return Math.abs(h); }
// Pinned earned set for the demo user
const PINNED_USER = "scott_b";
const PINNED_EARNED = new Set([
"calls_1", "calls_2", // family progress through II
"mail_1",
"leads_1", "leads_2",
"visits_1",
"lois_1",
"closes_1",
"consist_1", "consist_2",
"team_1",
"welcome", "first_lead",
"early_bird", // one secret found
]);
function userEarnedBadge(badgeId, userId) {
if (userId === PINNED_USER) return PINNED_EARNED.has(badgeId);
return (bHash(userId + badgeId) % 100) < 35;
}
function userBadgeProgress(badge, userId) {
if (!badge.progressMax) return null;
if (userEarnedBadge(badge.id, userId)) return { cur: badge.progressMax, max: badge.progressMax };
const r = (bHash(userId + badge.id) % 90) / 100;
return { cur: Math.round(badge.progressMax * r), max: badge.progressMax };
}
function badgeOwners(badgeId) {
const F = window.VAULT_FIRM;
return F.PEOPLE.map(p => p.id).filter(pid => userEarnedBadge(badgeId, pid));
}
// ---------- Family card (shows the 3-tier evolution row) ----------
function FamilyRow({ family, userId, onSelect }) {
const badges = BADGE_CATALOG.filter(b => b.family === family.id);
const earnedCount = badges.filter(b => userEarnedBadge(b.id, userId)).length;
return (
{family.group}
{earnedCount} of 3
{badges.map((b, i) => {
const earned = userEarnedBadge(b.id, userId);
const prevEarned = i === 0 || userEarnedBadge(badges[i - 1].id, userId);
return (
onSelect(b)}
style={{
cursor: "pointer", padding: "10px 8px",
borderRadius: 10,
background: earned ? "var(--surface)" : "transparent",
border: "1px solid " + (earned ? "var(--line)" : "transparent"),
display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
transition: "background .12s, border-color .12s, transform .12s",
}}
onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-1px)"; }}
onMouseLeave={e => { e.currentTarget.style.transform = "none"; }}
>
{b.name}
{!earned && prevEarned && b.progressMax ? (
) : (
{earned ? "Earned" : prevEarned ? "Up next" : "Locked"}
)}
);
})}
);
}
function ProgressLine({ badge, userId }) {
const p = userBadgeProgress(badge, userId);
if (!p) return null;
return (
{p.cur.toLocaleString()} / {p.max.toLocaleString()}
);
}
// ---------- Compact card (for moments + secrets) ----------
function MomentCard({ badge, userId, onSelect }) {
const earned = userEarnedBadge(badge.id, userId);
return (
onSelect(badge)}
className="card"
style={{
padding: 14,
display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
cursor: "pointer",
transition: "transform .12s, box-shadow .12s",
}}
onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 8px 20px -10px rgba(0,0,0,0.12)"; }}
onMouseLeave={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}
>
{badge.kind === "secret" && !earned ? "Secret Badge" : badge.name}
{badge.kind === "secret" && !earned ? badge.hint : badge.criteria}
e.stopPropagation()} className="card" style={{ width: 460, maxWidth: "92vw", padding: 26 }}>
{(badge.familyGroup || (badge.kind === "secret" ? "Secret" : "Moment")).toUpperCase()}
{badge.kind === "tier" && (
TIER {badge.tier} of 3
)}
{showName ? badge.name : "A secret badge"}
{showName ? badge.criteria : badge.hint}
{prog && !isSecret && (
Your progress
{prog.cur.toLocaleString()} / {prog.max.toLocaleString()}
)}
{isSecret && !earned ? "Discovered by" : `Earned by ${owners.length} of ${total}`}
{isSecret && !earned ? "?? %" : `${rarity}% firm-wide`}
{isSecret && !earned ? (
Keep exploring. You'll find it.
) : (
{owners.slice(0, 18).map(pid => )}
{owners.length > 18 && +{owners.length - 18}}
{owners.length === 0 && Be the first.}
)}
);
}
// ---------- Main view ----------
function BadgesView({ userId = "scott_b" }) {
const [tab, setTab] = useBadgeState("families"); // families | moments | secrets
const [selected, setSelected] = useBadgeState(null);
const me = window.VAULT_FIRM.PEOPLE_BY_ID[userId];
const totalEarned = BADGE_CATALOG.filter(b => userEarnedBadge(b.id, userId)).length;
const familiesEarned = BADGE_CATALOG.filter(b => b.kind === "tier" && userEarnedBadge(b.id, userId)).length;
const familiesTotal = BADGE_CATALOG.filter(b => b.kind === "tier").length;
const momentsEarned = BADGE_CATALOG.filter(b => b.kind === "moment" && userEarnedBadge(b.id, userId)).length;
const momentsTotal = MOMENTS.length;
const secretsEarned = BADGE_CATALOG.filter(b => b.kind === "secret" && userEarnedBadge(b.id, userId)).length;
const secretsTotal = SECRETS.length;
// For the highlight medallion: show their highest-tier earned badge family
const showcase = useBadgeMemo(() => {
const tierEarned = BADGE_CATALOG.filter(b => b.kind === "tier" && userEarnedBadge(b.id, userId));
if (tierEarned.length === 0) return null;
return tierEarned.sort((a, b) => b.tier - a.tier)[0];
}, [userId]);
const Tab = ({ id, label, count }) => (
);
return (
{/* Summary header */}
{showcase ? (
) : (
b.id === "calls_1")} locked size={72}/>
)}
{me ? me.name : "You"}
{totalEarned} / {BADGE_CATALOG.length} earned
{/* Tabs */}
{/* Content */}
{tab === "families" && (
{FAMILIES.map(fam => (
))}
)}
{tab === "moments" && (
{BADGE_CATALOG.filter(b => b.kind === "moment").map(b => (
))}
)}
{tab === "secrets" && (
{BADGE_CATALOG.filter(b => b.kind === "secret").map(b => (
))}
)}
setSelected(null)}/>
{label}
{custom != null ? custom : <>{cur} / {total}}
);
}
function countTier(tier, userId) {
return BADGE_CATALOG.filter(b => b.kind === "tier" && b.tier === tier && userEarnedBadge(b.id, userId)).length;
}
window.BadgesView = BadgesView;
window.BADGE_CATALOG = BADGE_CATALOG;