// Album jacket "artwork" — SVG placeholders, each genre has its own visual vocabulary. // All placeholders are intentionally typographic/geometric so the user can swap in // real illustration later. No hand-drawn figurative illustration here. const { useMemo } = React; // ------------------------------------------------------------ // Striped placeholder used as "illustration to be dropped in" // ------------------------------------------------------------ function StripedPlaceholder({ label = 'ILLUSTRATION', tint = '#1a1410', accent = '#d8c9a3', note }) { const id = 'sp-' + Math.random().toString(36).slice(2, 7); return ( {label} {note && {note}} ); } // ============================================================ // Album jacket variants — each is typographic, brand-forward // ============================================================ // 1) Ink seal — Wuxia ink-wash vibe, big serif title + seal function Jacket_InkSeal({ album, title }) { return ( {/* subtle ink wash */} {/* thin frame */} {/* top label */} MUSIC—PENDRAMA VOL. 01 {/* title */} 12 ? 40 : 54} fill="#f0e5cc" letterSpacing="1"> {title.toUpperCase()} {album.kr} {/* red seal */} 劍 閣 {/* bottom line */} HYEOL·MAENG / OST 01 ); } // 2) Grid line — modern fantasy / returner, technical grid look function Jacket_GridLine({ album, title }) { return ( {/* cross */} {/* corner ticks */} {[[30,30],[370,30],[30,370],[370,370]].map(([x,y],i)=>( ))} MUSIC—PENDRAMA // LOOP_00 12 ? 42 : 56} fill="#e9f7f2" letterSpacing="-1">{title.toUpperCase()} {album.kr} RET.v01 · ITER 0000 ); } // 3) Strata — hunter, layered strata / tower vibe function Jacket_Strata({ album, title }) { return ( {/* stacked layers */} {Array.from({ length: 7 }).map((_, i) => ( ))} {/* vertical shaft */} MUSIC—PENDRAMA 12 ? 38 : 50} fill="#e9edff">{title.toUpperCase()} {album.kr} TOWER / FLOOR 07 ASCENT ); } // 4) Bloom — romance, soft vignette + filigree function Jacket_Bloom({ album, title }) { return ( {/* concentric dotted rings */} {[80,120,160].map((r,i)=>( ))} MUSIC · PENDRAMA 12 ? 42 : 56} fill="#f6e6cc">{title} {album.kr} DOLCE · VITA · 돌체비타 ); } // 5) Ticker — regressor / digital clock function Jacket_Ticker({ album, title }) { return ( {/* time strip */} 00:00:00 17:09:99 00:00:00 MUSIC—PENDRAMA · REGRESS 12 ? 32 : 44} fill="#f0f3ff">{title.toUpperCase()} {album.kr} ); } // 6) Ring — wuxia / blood lotus function Jacket_Ring({ album, title }) { return ( {/* lotus hint: 8 petals via rotated ellipses */} {Array.from({length:8}).map((_,i)=>( ))} MUSIC — PENDRAMA 12 ? 36 : 48} fill="#f5e6d2">{title.toUpperCase()} {album.kr} ); } // 7) Sigil — hunter rune diamond function Jacket_Sigil({ album, title }) { return ( GATE IX — AWAKENED 12 ? 34 : 46} fill="#e6fff6">{title.toUpperCase()} {album.kr} S-RANK · FLOOR SEAL ); } // 8) Monarch — alt history, crown tile function Jacket_Monarch({ album, title }) { return ( {/* crown silhouette (simple rectangles, no figurative art) */} {[-80,-40,0,40,80].map((x,i)=>( ))} 12 ? 34 : 44} fill="#f0e5cc">{title.toUpperCase()} {album.kr} ORDER V — 오더파이브 ); } // 9) Letter — old letter / envelope function Jacket_Letter({ album, title }) { return ( {/* envelope flap lines */} MUSIC · PENDRAMA 12 ? 30 : 40} fill="#f6e6cc">{title} {album.kr} ); } // 10) Crown-of-ash — noir function Jacket_Crown({ album, title }) { return ( {/* ashes as dots */} {Array.from({length:60}).map((_,i)=>{ const x = (i*37) % 400; const y = (i*53) % 400; return ; })} MUSIC—PENDRAMA · NOIR 12 ? 34 : 46} fill="#efe3e3" letterSpacing="1">{title.toUpperCase()} {album.kr} BLACK LEDGER · VOL. 05 ); } // Real cover jacket — novel illustration + MP band + typeset title function Jacket_Photo({ album, title }) { const g = GENRES[album.genre] || GENRES.wuxia; const accent = album.accent || g.color; return (
{title} {/* subtle bottom scrim for legibility */}
{/* top label band */}
MUSIC—PENDRAMA {g.en}
{/* bottom title */}
14 ? 18 : 22, lineHeight:1, letterSpacing:0, textShadow:'0 2px 8px rgba(0,0,0,.8)'}}> {(title || album.id).toUpperCase()}
{album.kr}
{/* hairline frame */}
); } const JACKETS = { 'photo': Jacket_Photo, 'ink-seal': Jacket_InkSeal, 'grid-line': Jacket_GridLine, 'strata': Jacket_Strata, 'bloom': Jacket_Bloom, 'ticker': Jacket_Ticker, 'ring': Jacket_Ring, 'sigil': Jacket_Sigil, 'monarch': Jacket_Monarch, 'letter': Jacket_Letter, 'crown': Jacket_Crown, }; function AlbumJacket({ album, title }) { const Comp = JACKETS[album.style] || Jacket_InkSeal; return ; } // Video thumbnail placeholder (16:9 with genre motif) function VideoThumbPlaceholder({ title, group, genre, variant = 'mv', cover }) { const g = GENRES[genre] || GENRES.wuxia; const accent = g.color; if (cover) { return (
{title}
MP {variant === 'lyric' ? 'LYRIC' : 'OFFICIAL'}
{(title.split(' — ')[0] || '').toUpperCase()}
{group} · {variant === 'lyric' ? 'LYRIC VIDEO' : 'M/V'}
); } return ( {/* genre-tinted corner */} {/* stripes */} {Array.from({length:18}).map((_,i)=>( ))} {variant === 'mv' && ( {title.split(' — ')[0].toUpperCase()} {group} )} {variant === 'lyric' && ( {title.replace(/ Lyric$/, '').toUpperCase()} LYRIC VIDEO · {group} )} {/* official watermark */} MP OFFICIAL ); } // Shorts placeholder (9:16) function ShortThumbPlaceholder({ title, group, genre, cover }) { const g = GENRES[genre] || GENRES.wuxia; const accent = g.color; if (cover) { return (
{title}
MP · SHORT
{(title||'').toUpperCase()}
{group}
); } return ( {Array.from({length:40}).map((_,i)=>( ))} {(title || '').split(' ').slice(0,2).join(' ').toUpperCase()} {group} MP · SHORT ); } // Group cover placeholder (square) function GroupCover({ group }) { const g = GENRES[group.genre] || GENRES.wuxia; const accent = g.color; if (group.portrait) { return (
{group.en}
MP · GROUP {group.tag.toUpperCase()}
10 ? 26 : 36, lineHeight:1, letterSpacing:2, textShadow:'0 2px 10px rgba(0,0,0,.9)'}}> {group.en}
{group.kr}
); } return ( {group.style === 'inked' && ( )} {group.style === 'digital' && ( 00 17 99 )} {group.style === 'rune' && ( )} {group.style === 'gilded' && ( {[60,120,180].map((r,i)=>( ))} )} {group.style === 'archive' && ( {[80,140,200,260].map((y,i)=>( ))} )} 10 ? 34 : 46} fill="#f1efe9" letterSpacing="2">{group.en} {group.kr} MP · GROUP {group.tag.toUpperCase()} ); } Object.assign(window, { AlbumJacket, StripedPlaceholder, VideoThumbPlaceholder, ShortThumbPlaceholder, GroupCover });