/* ARKHAM — shared components: icons, poster, card, hover preview, row */ const { useState, useRef, useEffect, useCallback, useContext, createContext } = React; const AppCtx = createContext({}); /* ----------------------------- icons ----------------------------- */ const Icon = { Play: (p) => (), Pause: (p) => (), Info: (p) => (), Plus: (p) => (), Check: (p) => (), Like: (p) => (), VolOn: (p) => (), VolOff: (p) => (), Search: (p) => (), Bell: (p) => (), Chev: (p) => (), ChevR: (p) => (), ChevL: (p) => (), Close: (p) => (), Replay: (p) => (), Back: (p) => (), Quote: (p) => (), Mic: (p) => (), Pin: (p) => (), Trophy: (p) => (), Download: (p) => (), Mail: (p) => (), Shuffle: (p) => (), Dice: (p) => (), IG: (p) => (), YT: (p) => (), FB: (p) => (), TikTok: (p) => () }; /* ARKHAM "A" isotype (real brand asset) */ function ArkhamMark({ size = 26 }) { return ( ARKHAM ); } /* poster background — foto de portada real si existe, si no el degradado placeholder */ function posterStyle(p) { const cover = p.media && p.media.cover; if (cover && cover.src) { const fx = cover.focal ? Math.round(cover.focal.x * 100) : 50; const fy = cover.focal ? Math.round(cover.focal.y * 100) : 50; return { backgroundImage: `url("${cover.src}")`, backgroundSize: "cover", backgroundPosition: `${fx}% ${fy}%`, backgroundRepeat: "no-repeat" }; } const h = p.hue, s = p.sat; return { background: `linear-gradient(145deg, hsl(${h} ${s}% ${p.dark1}%) 0%, hsl(${h} ${Math.max(s-6,4)}% ${p.dark2}%) 100%)` }; } function Poster({ p, showTitle = true, showBadges = true, showLogo = true }) { const hasCover = !!(p.media && p.media.cover && p.media.cover.src); return (
{showLogo && !hasCover &&
} {showTitle && (
{p.title} {p.sub && {p.sub}}
)} {showBadges && p.top10 && (
TOP10
)} {showBadges && p.nuevo &&
Proyecto Nuevo
} {showBadges && p.progress != null && (
)}
); } /* ------------------------- hover preview ------------------------- */ function HoverPreview({ p, rect, onClose }) { const ctx = useContext(AppCtx); const inList = ctx.myList.includes(p.id); const pw = 360; let left = rect.left + rect.width / 2 - pw / 2; left = Math.max(16, Math.min(left, window.innerWidth - pw - 16)); let top = rect.top - 36; top = Math.max(80, top); return (
{ onClose(); ctx.openDetail(p.id); }}>
e.stopPropagation()}>
{p.match}% para ti {p.rating} {p.year} {p.progress != null && WIP {p.progress}%}
{p.genres.slice(0, 3).map((g) => {g})}
); } /* ----------------------------- card ----------------------------- */ function Card({ p, tall = false }) { const ctx = useContext(AppCtx); const ref = useRef(null); const timer = useRef(null); const [hover, setHover] = useState(false); const [rect, setRect] = useState(null); const enter = () => { clearTimeout(timer.current); timer.current = setTimeout(() => { if (ref.current) { setRect(ref.current.getBoundingClientRect()); setHover(true); } }, 380); }; const leave = () => { clearTimeout(timer.current); }; useEffect(() => () => clearTimeout(timer.current), []); return ( <>
ctx.openDetail(p.id)}>
{hover && rect && setHover(false)} />} ); } /* ----------------------------- row ----------------------------- */ function Row({ title, ids, explore }) { const trackRef = useRef(null); const data = window.ARKHAM.byId; const scrollBy = (dir) => { const el = trackRef.current; if (el) el.scrollBy({ left: dir * (el.clientWidth * 0.82), behavior: "smooth" }); }; return (

{title}{explore && Explorar todo ›}

{ids.map((id) => data[id] ? : null)}
); } Object.assign(window, { AppCtx, Icon, ArkhamMark, Poster, HoverPreview, Card, Row, posterStyle });