// CyberX Battle Pass — Brand assets: logo, season cover, badges, icons, merch, promo
// ─────────────────────────────────────────────────────────────
// Big Logo: CYBERX BATTLE PASS
// ─────────────────────────────────────────────────────────────
function BPLogo({ width = 360, dark = true, accent = CX.red }) {
const fg = dark ? CX.white : CX.black;
return (
);
}
// ─────────────────────────────────────────────────────────────
// Tier Badge (4 variants)
// ─────────────────────────────────────────────────────────────
function TierBadge({ tier = 'recruit', size = 180, label = true }) {
const t = TIERS[tier];
const gid = `tb-${tier}-${size}`;
const symbols = {
recruit: (
// Minimalist chevron
),
knight: (
// Shield
),
champion: (
// Crown
),
legend: (
// Star burst
),
};
return (
{label && (
{t.name}
)}
);
}
// ─────────────────────────────────────────────────────────────
// Task icons (12) — both outline + filled
// ─────────────────────────────────────────────────────────────
function TaskIcon({ kind = 'time', size = 24, active = false, color }) {
const c = active ? (color || CX.amber) : CX.textSec;
const w = active ? 2.2 : 1.8;
const fill = active ? c : 'none';
const glow = active ? `drop-shadow(0 0 4px ${c}66)` : 'none';
const ICONS = {
time: (
),
challenge: (
),
referral: (
),
bar: (
),
tournament: (
),
steam: (
),
night: (
),
morning: (
),
social: (
),
review: (
),
birthday: (
),
topup: (
),
};
return (
);
}
// ─────────────────────────────────────────────────────────────
// Reward icon (placeholder gaming items)
// ─────────────────────────────────────────────────────────────
function RewardIcon({ kind, size = 48, tier = CX.bronze }) {
const ICONS = {
hoodie: (
CYBERX
),
coins: (
X
X
),
mousepad: (
CYBERX
),
sticker: (
CX
),
cup: (
CX
),
hours: (
HOURS
),
avatar: (
),
boost: (
),
tshirt: (
),
cake: (
),
key: (
),
title: (
LEGEND
),
};
return (
);
}
Object.assign(window, { BPLogo, TierBadge, TaskIcon, RewardIcon });