5×
{meta.price}
{meta.name.split(' ').map((w, i) =>
{w}
)}
{ids.slice(0, 5).map((id, i) => {
const m = MASCOT_BY_ID[id];
return
{({ spectr: '◆', lumen: '✦', orion: '○', balbot: '▢', zhar: '▲', mimi: '♥', vortex: '➤', magnat: '$', noir: '◯', champion: '★', widow: '♛', demon: '☉', spark: '⚡' })[id]}
;
})}
5
коллекционных карт
{owned > 0 &&
У тебя: {owned}
}
);
}
// ─────────────────────────────────────────────────────────────
// Pack opening modal — full reveal animation
// ─────────────────────────────────────────────────────────────
function PackOpeningModal({ packId, contentIds, onClose, onUnlock, onClaim }) {
const meta = PACK_META[packId];
const cards = contentIds.map(id => MASCOT_BY_ID[id]).filter(Boolean);
const [phase, setPhase] = React.useState('intro'); // intro → shaking → bursting → reveal → done
const [flipped, setFlipped] = React.useState({}); // id -> bool
const [allFlipped, setAllFlipped] = React.useState(false);
// confetti on legendary
React.useEffect(() => {
if (phase === 'reveal' && typeof confetti === 'function') {
const hasLegendary = cards.some(c => c.rarity === 'legendary');
const hasEpic = cards.some(c => c.rarity === 'epic');
if (hasLegendary) {
confetti({ particleCount: 220, spread: 130, colors: ['#FBBF24', '#F472B6', '#A78BFA', '#fff'], origin: { y: 0.5 } });
} else if (hasEpic) {
confetti({ particleCount: 140, spread: 90, colors: ['#A78BFA', '#F472B6'], origin: { y: 0.5 } });
}
}
}, [phase, cards]);
const onPackClick = () => {
if (phase !== 'intro') return;
setPhase('shaking');
setTimeout(() => setPhase('bursting'), 600);
setTimeout(() => setPhase('reveal'), 1100);
};
const flipOne = (id) => {
setFlipped(f => {
const next = { ...f, [id]: true };
const all = cards.every(c => next[c.id]);
if (all) {
setAllFlipped(true);
// notify parent about unlocks
onUnlock?.(contentIds);
// extra confetti on full reveal
if (typeof confetti === 'function') {
confetti({ particleCount: 80, spread: 70, colors: ['#22D3A3', '#FBBF24'], origin: { y: 0.45 } });
}
}
return next;
});
};
const flipAll = () => {
const next = {};
cards.forEach(c => { next[c.id] = true; });
setFlipped(next);
setAllFlipped(true);
onUnlock?.(contentIds);
if (typeof confetti === 'function') {
const hasLeg = cards.some(c => c.rarity === 'legendary');
confetti({
particleCount: hasLeg ? 200 : 120,
spread: 120,
colors: hasLeg ? ['#FBBF24', '#F472B6', '#fff'] : ['#A78BFA', '#22D3A3', '#fff'],
origin: { y: 0.5 },
});
}
};
return (
{/* Prompt */}
{phase === 'intro' && (
Открой свой пак
{meta.name}
Тапни по упаковке. Внутри — 5 героев.
)}
{phase === 'reveal' && !allFlipped && (
Переверни карты
Что выпало?
)}
{allFlipped && (
5 героев разблокировано
Готово!
)}
{/* Close button always */}
{/* Pack card or fanned reveal cards */}
{(phase === 'intro' || phase === 'shaking' || phase === 'bursting') && (
5×
{meta.price}
{meta.name.split(' ').map((w, i) =>
{w}
)}
{cards.slice(0, 5).map((c, i) => (
{({ spectr: '◆', lumen: '✦', orion: '○', balbot: '▢', zhar: '▲', mimi: '♥', vortex: '➤', magnat: '$', noir: '◯', champion: '★', widow: '♛', demon: '☉', spark: '⚡' })[c.id]}
))}
5карт внутри
{phase === 'shaking' &&
}
)}
{phase === 'reveal' && (
{cards.map((c, i) => {
const rar = RARITY_META[c.rarity];
const isFlipped = !!flipped[c.id];
return (
flipOne(c.id)}>
{i + 1}
{rar.label}
{c.name}
Ability: {c.power}
);
})}
{!allFlipped && }
{allFlipped && }
)}
{/* Hero */}
Коллекция
Твои компаньоны
{unlockedIds.length} из {MASCOTS.length} героев · каждый меняет тему всего приложения
🔥 23 дн.
LVL {ME.level}
{/* Tabs */}
{/* Mascots tab */}
{tab === 'mascots' && (
{MASCOTS.map(m => {
const locked = !unlockedIds.includes(m.id);
const rar = RARITY_META[m.rarity];
return (
{ if (!locked) onSelectMascot(m.id); }}>
{rar.label}
{activeMascotId === m.id && !locked &&
Активен}
{m.name}
«{m.type}»
{m.power}
{!locked && (
)}
{locked && (
🔒 Заблокирован
{m.unlock?.label || 'В Премиум-паке'}
)}
);
})}
)}
{/* Packs tab */}
{tab === 'packs' && (
{Object.keys(PACK_META).map(pid => (
onOpenPack(pid)} />
))}
Как работают паки
Получай паки бесплатно за достижения
Стрик 7 дней — стартер. Стрик 30 — премиум. Уровень 5 — баттл-пак. Можно также купить премиум-паки за накопленные XP.
)}
{/* Achievements tab */}
{tab === 'achievements' && (
{achievements.map(a => {
const pmeta = PACK_META[a.reward];
return (
{a.icon}
{a.label}
награда: {pmeta.name}
{a.done ? '✓ Получено' : `Прогресс: ${a.progress}`}
{a.done ? (
) : (
заблокировано
)}
);
})}
)}
);
}
Object.assign(window, { PackVisual, PackOpeningModal, CollectionScreen });