// ── Album Book v2 — Rare stickers · Evolution page · Modern areas ─
const { useState, useEffect, useRef, useCallback } = React;
const PW = 595;
const PH = 842;
const SMARG = 36;
const GMARG = 18;
const TMARG = 44;
const BMARG = 32;
const SC_W = 142;
const SC_H = 213; // proporção 1024×1536 (2:3)
const SC_G = 20;
const COLS = 3;
function chunkBy(arr, n) {
const out = [];
for (let i = 0; i < arr.length; i += n) out.push(arr.slice(i, i + n));
return out;
}
// ── Inject shimmer + glow CSS once ───────────────────────────────
(function injectStyles() {
if (document.getElementById('album-book-styles')) return;
const s = document.createElement('style');
s.id = 'album-book-styles';
s.textContent = `
@keyframes shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
@keyframes rareGlow {
0%, 100% { box-shadow: 0 0 12px 3px rgba(254,206,2,0.5), 0 4px 8px rgba(0,0,0,0.3); }
50% { box-shadow: 0 0 24px 8px rgba(254,206,2,0.8), 0 4px 8px rgba(0,0,0,0.3); }
}
@keyframes rareBadge {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.rare-sticker { animation: rareGlow 2.4s ease-in-out infinite; }
.rare-shimmer {
position: absolute; inset: 0; border-radius: 10px;
background: linear-gradient(105deg, transparent 30%, rgba(255,255,220,0.45) 50%, transparent 70%);
background-size: 800px 100%;
animation: shimmer 2.2s linear infinite;
pointer-events: none; z-index: 3;
}
.rare-badge { animation: rareBadge 2s ease-in-out infinite; }
`;
document.head.appendChild(s);
})();
// ── Sticker Card ──────────────────────────────────────────────────
function BookSticker({ sticker, unlocked, onClick }) {
// Pre-flip stickers that were already unlocked at mount — só anima se mudar agora.
const [flipped, setFlipped] = useState(unlocked);
// Estado local para a foto — começa com o que ALBUM_DATA tem; busca sob demanda quando desbloquear.
const [photoUrl, setPhotoUrl] = useState(sticker.photoUrl || '');
const [photoLoaded, setPhotoLoaded] = useState(!!sticker.photoUrl);
const wasUnlockedRef = useRef(unlocked);
const ac = AREA_COLORS[sticker.areaId] || { color: '#FECE02', text: '#1e1e1e' };
const isRare = sticker.areaId === 'hall';
// Pré-carrega a foto quando ela existir (garante que aparece sem flash).
useEffect(() => {
if (!photoUrl) { setPhotoLoaded(false); return; }
const img = new Image();
img.onload = () => setPhotoLoaded(true);
img.onerror = () => setPhotoLoaded(false);
img.src = photoUrl;
}, [photoUrl]);
useEffect(() => {
if (unlocked && !wasUnlockedRef.current) {
// Acabou de desbloquear — busca foto fresca do Firestore sob demanda.
let cancelled = false;
const fetchPhoto = async () => {
try {
const meta = await PACK_SYSTEM.getStickerMeta();
const m = meta[sticker.number];
if (m && m.photoUrl && !cancelled) {
sticker.photoUrl = m.photoUrl; // hidrata in-place
if (m.name) sticker.name = m.name;
if (m.role) sticker.role = m.role;
// Espera a imagem carregar antes de virar a carta.
const img = new Image();
img.onload = () => {
if (cancelled) return;
setPhotoUrl(m.photoUrl);
setPhotoLoaded(true);
setFlipped(true);
};
img.onerror = () => { if (!cancelled) setFlipped(true); };
img.src = m.photoUrl;
} else if (!cancelled) {
setFlipped(true);
}
} catch {
if (!cancelled) setFlipped(true);
}
};
fetchPhoto();
wasUnlockedRef.current = true;
return () => { cancelled = true; };
} else if (!unlocked) {
setFlipped(false);
wasUnlockedRef.current = false;
}
}, [unlocked]);
return (
{/* ── FRONT (locked) ── */}
{/* Shimmer overlay for rare */}
{isRare && !unlocked &&
}
{/* Placeholder image for locked stickers (inclui Hall da Fama) */}
{!unlocked &&
}
{/* Top accent */}
{/* Number badge */}
{sticker.number}
{/* RARA badge */}
{isRare &&
★ RARA
}
{/* Locked label */}
{!unlocked &&
BLOQUEADA
}
{/* ── BACK (unlocked) — só a imagem, sem texto ── */}
{(!photoUrl || !photoLoaded) &&
{sticker.name ? sticker.name.split(' ').map((w) => w[0]).slice(0, 2).join('') : '★'}
}
);
}
// ── Rotated section label ─────────────────────────────────────────
function RotatedSectionLabel({ text }) {
return (
{text}
);
}
// ── Cover ─────────────────────────────────────────────────────────
function CoverLeft() {
return (
);
}
function CoverRight() {
const totalStickers = ALBUM_DATA.areas.reduce((s, a) => s + a.times.reduce((ss, t) => ss + t.count, 0), 0);
const totalTeams = ALBUM_DATA.areas.reduce((s, a) => s + a.times.length, 0);
const totalAreas = ALBUM_DATA.areas.length;
return (
ÁLBUM DA COPA
CONQUER BUSINESS SCHOOL
{totalStickers} FIGURINHAS · {totalTeams} TIMES · {totalAreas} ÁREAS
);
}
// ── Index ─────────────────────────────────────────────────────────
function IndexPage({ side, teams, showTitle = true }) {
const isLeft = side === 'left';
return (
{showTitle &&
CONQUER BUSINESS SCHOOL
ÍNDICE DE TIMES
}
{teams.map((t, i) => {
const ac = AREA_COLORS[t.area.id] || { color: '#FECE02' };
return (
);
})}
);
}
// ── Escala da Glória ──────────────────────────────────────────────
const MILESTONES = [
{ min: 20, title: 'ESCALADO', subtitle: 'Entrou em campo', icon: '🏃', color: '#2d6a2d', accent: '#5cb85c', num: '020' },
{ min: 80, title: 'TITULAR', subtitle: 'No onze inicial', icon: '⚽', color: '#1a3f7a', accent: '#4a90d9', num: '080' },
{ min: 120, title: 'CAPITÃO', subtitle: 'Lidera o time', icon: '🦾', color: '#3b1a6e', accent: '#9b59b6', num: '120' },
{ min: 140, title: 'LENDA DO HEXA', subtitle: 'Conquistou tudo', icon: '🏆', color: '#7a5a00', accent: '#FECE02', num: '140' }];
function MilestoneCard({ milestone, achieved, isNext, unlockedCount }) {
const pct = Math.min(100, Math.round(unlockedCount / milestone.min * 100));
return (
{/* Background sticker image with tint */}
{/* Dark overlay */}
{/* Shimmer on achieved */}
{achieved &&
}
{/* Top accent bar */}
{/* Number badge */}
{milestone.min} fig.
{/* Icon / content area */}
{achieved ? milestone.icon : '🔒'}
{!achieved &&
}
{/* Footer */}
{milestone.title}
{achieved ? '★ ★ ★ ★ ★' : milestone.subtitle}
{/* Achieved glow ring */}
{achieved &&
}
CONQUISTAS
ESCALA
{/* Progress */}
{unlockedCount} de {ALBUM_DATA.areas.reduce((s, a) => s + a.times.reduce((ss, t) => ss + t.count, 0), 0)} figurinhas
{pct}%
{/* Status */}
{current ?
<>
SEU STATUS ATUAL
{current.icon} {current.title}
:
<>
AINDA NÃO INICIADO
Desbloqueie 20 figurinhas!
}
{next &&
Próximo: {next.title} — faltam {next.min - unlockedCount} fig.
}
);
}
function EvolutionRight({ unlockedCount }) {
return (
DESBLOQUEIO AUTOMÁTICO AO COLETAR
{/* 2×2 grid of milestone sticker cards */}
{MILESTONES.map((m, i) =>
= m.min}
isNext={!unlockedCount >= m.min && (i === 0 || unlockedCount >= MILESTONES[i - 1]?.min)}
unlockedCount={unlockedCount} />
)}
);
}
// ── Modern Area Intro ─────────────────────────────────────────────
function AreaIntroBookPage({ area }) {
const ac = AREA_COLORS[area.id] || { color: '#FECE02', text: '#1e1e1e' };
const totalStickers = area.times.reduce((s, t) => s + t.count, 0);
return (
{/* Bold color block — top half diagonal */}
{/* Big watermark number */}
{totalStickers}
{/* Area label in color block — text must contrast against ac.color */}
ÁREA DE ATUAÇÃO
{area.name}
{totalStickers} FIGURINHAS · {area.times.length} TIMES
{/* Bottom dark section — team list */}
{area.times.map((t, i) =>
)}
{isRareArea &&
}
{time.name}
{stickers.length} figurinhas{cont ? ' (cont.)' : ''}{isRareArea ? ' · ★ RARAS' : ''}
{isRareArea &&
EDIÇÃO ESPECIAL
}
{stickers.map((s) =>
!unlocked.includes(s.number) && onClickSticker(s)} />
)}
);
}
function EmptyPage({ side, areaId }) {
const ac = AREA_COLORS[areaId] || { color: '#FECE02' };
return (
);
}
function BackLeft() {
return (
ALBUM
{ALBUM_DATA.areas.reduce((s, a) => s + a.times.reduce((ss, t) => ss + t.count, 0), 0)} FIGURINHAS · {ALBUM_DATA.areas.reduce((s, a) => s + a.times.length, 0)} TIMES
);
}
function BackRight() {
return (
BUSINESS SCHOOL
);
}
function PageFoot({ side, dark = false }) {
const isLeft = side === 'left';
return Conquer Business School
;
}
function SpineShadow({ side, dark = false }) {
const isLeft = side === 'left';
const c = dark ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.10)';
return
;
}
// ── Build spreads ─────────────────────────────────────────────────
function buildBookSpreads(areas, unlocked, onClickSticker) {
const spreads = [];
const unlockedCount = unlocked.length;
spreads.push({ id: 'cover', label: 'Capa', left:
{anim?.dir === 'bwd' ? nextSp?.left : sp.left}
{anim?.dir === 'fwd' ? nextSp?.right : sp.right}
{anim &&
{anim.dir === 'fwd' ? sp.right : sp.left}
{anim.dir === 'fwd' ? nextSp?.left : nextSp?.right}
}
{current > 0 &&
goTo(current - 1, 'bwd')} disabled={flipping} style={arrowBtnStyle('left')}>‹ }
{current < total - 1 &&
goTo(current + 1, 'fwd')} disabled={flipping} style={arrowBtnStyle('right')}>› }
goTo(current - 1, 'bwd')} disabled={current === 0 || flipping} style={navBtn}>← ANTERIOR
{sp.label}
{current + 1} DE {total}
goTo(current + 1, 'fwd')} disabled={current === total - 1 || flipping} style={navBtn}>PRÓXIMO →
);
}
function arrowBtnStyle(side) {
return { position: 'absolute', top: '50%', [side]: -54, transform: 'translateY(-50%)', background: '#FECE02', border: 'none', borderRadius: '50%', width: 46, height: 46, fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 900, fontSize: 30, color: '#1e1e1e', cursor: 'pointer', zIndex: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 16px rgba(0,0,0,0.45)', lineHeight: 1 };
}
const navBtn = { background: 'none', border: '1.5px solid #2a2a2a', color: '#666', fontFamily: "'Barlow Condensed',sans-serif", fontWeight: 700, fontSize: 11, letterSpacing: '0.12em', padding: '8px 22px', borderRadius: 20, cursor: 'pointer' };
Object.assign(window, { BookAlbum }); 
}
{/* Top accent */}
{/* Number badge */}
