// Reusable atoms // Escudo artwork — abstract shield shape with country color function EscudoArt({ countryColor = '#1E3A5F', state = 'have' }) { const c = state === 'missing' ? SK.textDim : countryColor; return ( ); } // Equipo artwork — abstract team group silhouette function EquipoArt({ countryColor = '#1E3A5F', state = 'have', variant = 0 }) { const c = state === 'missing' ? SK.textDim : countryColor; const positions = variant === 0 ? [[12,38],[20,30],[28,26],[36,26],[44,30],[52,38],[16,50],[32,44],[48,50],[24,50],[40,50]] : [[10,42],[18,32],[26,24],[32,20],[38,24],[46,32],[54,42],[14,52],[32,52],[50,52],[32,36]]; return ( {positions.map(([x, y], i) => ( ))} ); } // Especial artwork — trophy / stadium / event icons function EspecialArt({ subtype = 'trophy', state = 'have' }) { const c = state === 'missing' ? SK.textDim : SK.gold; if (subtype === 'trophy') return ( ); if (subtype === 'stadium') return ( ); return ( ); } // Abstract sticker artwork — geometric silhouette, NOT a real player function StickerArt({ seed = 0, countryColor = '#1E3A5F', state = 'have' }) { // Pseudo-random pose based on seed const poses = [ // Running , // Kicking , // Header , ]; const pose = poses[seed % poses.length]; const silColor = state === 'missing' ? SK.textDim : countryColor; return ( {/* Field band */} {pose} ); } // Sticker card — the central visual element function StickerCard({ num, country, player, state, count = 1, size = 'md', type = 'jugador', subtype, position, onClick }) { const [hov, setHov] = React.useState(false); const sizes = { sm: { p: 6, fNum: 15, fName: 8, fBanner: 7 }, md: { p: 8, fNum: 20, fName: 9, fBanner: 8 }, lg: { p: 10, fNum: 26, fName: 11, fBanner: 10 }, }; const s = sizes[size]; // Per-type accent colours — each type has a distinct identity const typeAccent = { jugador: SK.gold, escudo: SK.gold, equipo: '#6EE7F9', especial: '#C084FC', // purple for special/event stickers foil: SK.gold, // foil uses gold + glow }; const accentColor = state === 'missing' ? SK.border : (typeAccent[type] || SK.gold); const getBorder = () => { if (state === 'missing') return `1px solid ${SK.border}`; if (type === 'equipo') return `2px solid #6EE7F9`; if (type === 'especial') return `2px solid #C084FC`; return `2px solid ${SK.gold}`; // jugador, escudo, foil }; const bg = state === 'missing' ? SK.bgSoft : SK.surface; const numColor = state === 'missing' ? SK.textDim : accentColor; const renderArt = () => { if (type === 'escudo') return ; if (type === 'equipo') return ; if (type === 'especial' || type === 'foil') return ; return ; }; const typeLabel = { jugador: null, escudo: 'ESC', equipo: 'EQP', especial: 'ESP', foil: 'FOIL' }; // Foil stickers get a persistent ambient glow const foilGlow = (type === 'foil' && state !== 'missing') ? `0 0 14px 3px ${SK.gold}35, inset 0 0 10px ${SK.gold}12` : ''; const cardShadow = state === 'missing' ? '0 6px 16px -10px rgba(0,0,0,0.5)' : '0 10px 24px -12px rgba(0,0,0,0.65)'; const hovShadow = (hov && state !== 'missing') ? `0 10px 26px -10px rgba(0,0,0,0.7), 0 0 0 1px ${accentColor}35` : ''; const boxShadow = [cardShadow, foilGlow, hovShadow].filter(Boolean).join(', ') || 'none'; // Country banner background uses country team colour at low opacity const bannerBg = (country?.color && state !== 'missing') ? `${country.color}28` : `${SK.surfaceHi}80`; return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{ position: 'relative', aspectRatio: '0.72', borderRadius: 10, border: getBorder(), background: bg, display: 'flex', flexDirection: 'column', cursor: onClick ? 'pointer' : 'default', opacity: state === 'missing' ? 0.85 : 1, transform: hov && state !== 'missing' ? 'translateY(-3px) scale(1.03)' : 'none', boxShadow, transition: 'transform 0.15s ease-out, box-shadow 0.15s ease-out, opacity 0.15s ease-out', overflow: 'hidden', }} >
{/* Repetida badge */} {state === 'duplicate' && (
+{count - 1}
)} {/* Top bar — prominent number (left) + type badge (right) */}
{String(num).padStart(3, '0')}
{(typeLabel[type] || position) && (
{typeLabel[type] || position}
)}
{/* Player name — below number, above artwork */}
{player}
{/* Artwork */}
{renderArt()}
{/* Country banner — full-width strip at the bottom */}
{country ? ( <> {country.name} ) : ( {type === 'especial' ? 'ESPECIAL' : type === 'foil' ? 'FOIL' : 'GLOBAL'} )}
); } // Logo mark function LogoMark({ size = 28 }) { return ( {/* Sticker shape with folded corner */} {/* Check */} ); } function Logo({ size = 28, color }) { return (
stickio
); } function LoadingSpinner({ size = 24 }) { return (
); } function EmptyState({ icon = '📭', title, sub }) { return (
{icon}
{title}
{sub &&
{sub}
}
); } // Progress bar function ProgressBar({ value, max, color = SK.gold, height = 4 }) { const pct = Math.min(100, (value / max) * 100); return (
); } // Donut progress — big circular progress ring function DonutProgress({ value, max, size = 180, stroke = 10 }) { const r = (size - stroke) / 2; const c = 2 * Math.PI * r; const pct = value / max; const offset = c * (1 - pct); return ( ); } // Icons — simple geometric only const Icon = { Bell: ({ s = 20, c = SK.text }) => ( ), Check: ({ s = 16, c = SK.gold }) => ( ), Clock: ({ s = 16, c = SK.textMute }) => ( ), Copy: ({ s = 16, c = SK.coral }) => ( ), ChevronRight: ({ s = 16, c = SK.textMute }) => ( ), Plus: ({ s = 24, c = SK.bg }) => ( ), Minus: ({ s = 16, c = SK.textMute }) => ( ), Home: ({ s = 22, c = SK.textMute, filled }) => ( ), Grid: ({ s = 22, c = SK.textMute, filled }) => ( ), Swap: ({ s = 22, c = SK.textMute, filled }) => ( ), User: ({ s = 22, c = SK.textMute, filled }) => ( ), Search: ({ s = 18, c = SK.textMute }) => ( ), Trophy: ({ s = 20, c = SK.gold }) => ( ), Share: ({ s = 18, c = SK.gold }) => ( ), QrCamera: ({ s = 22, c = SK.gold }) => ( ), Google: ({ s = 18 }) => ( ), Store: ({ s = 22, c = SK.textMute, filled }) => ( ), Tag: ({ s = 16, c = SK.textMute }) => ( ), X: ({ s = 16, c = SK.textMute }) => ( ), }; function flagIso(code) { if (code === 'SCO') return 'gb-sct'; if (code === 'ENG') return 'gb-eng'; if (code === 'WAL') return 'gb-wls'; return code.toLowerCase(); } function FlagImg({ code, size = 20 }) { return ( ); } // Flag "chip" — rounded rectangle with flag image function FlagChip({ country, size = 28 }) { return (
{country.name}
); } function AvatarBubble({ userData, size = 40 }) { const safeName = ((userData?.name || userData?.display_name || userData?.username || '?')).trim(); const initials = safeName.split(' ').filter(Boolean).map(w => w[0]).join('').slice(0, 2).toUpperCase() || '?'; const src = userData?.avatar; const isImg = src && src.startsWith('img/'); return (
{isImg ? : initials }
); } Object.assign(window, { StickerArt, EscudoArt, EquipoArt, EspecialArt, StickerCard, LogoMark, Logo, ProgressBar, DonutProgress, Icon, FlagChip, FlagImg, AvatarBubble, LoadingSpinner, EmptyState, });