https://cartoonguesser.com/assets/characters.index-BATts3tk.js

1import{t as e}from"./jsx-runtime-bzQ4Vb5N.js";import{t}from"./link-CvMuGa0m.js";import{v as n}from"./index-D0MNgkfH.js";import{i as r}from"./game-DBfGB-us.js";import{n as i,t as a}from"./character-image-ChnrMAJz.js";var o=e();function s(){let{model:e}=n.useLoaderData(),{seriesGroups:s,characterCount:c,seriesCount:l,promptCount:u}=e;return(0,o.jsxs)(`div`,{className:`space-y-10`,children:[(0,o.jsxs)(`section`,{className:`grid gap-6 border-2 border-eastward-ink bg-eastward-gold p-5 text-eastward-ink sm:p-7 lg:grid-cols-[minmax(0,1.2fr)_minmax(280px,0.8fr)]`,children:[(0,o.jsxs)(`div`,{className:`space-y-4`,children:[(0,o.jsx)(`h1`,{className:`display-title text-4xl font-black leading-tight sm:text-6xl`,children:`Character Color Library`}),(0,o.jsx)(`p`,{className:`max-w-3xl text-lg font-bold leading-relaxed`,children:`Browse every Toon Tone prompt by character, series, target part, and answer color before jumping into a color memory round.`})]}),(0,o.jsxs)(`dl`,{className:`grid grid-cols-3 gap-2 text-center sm:gap-3`,children:[(0,o.jsxs)(`div`,{className:`border-2 border-eastward-ink bg-eastward-cream p-3`,children:[(0,o.jsx)(`dt`,{className:`text-xs font-black uppercase`,children:`Characters`}),(0,o.jsx)(`dd`,{className:`display-title text-3xl font-black`,children:c})]}),(0,o.jsxs)(`div`,{className:`border-2 border-eastward-ink bg-eastward-cream p-3`,children:[(0,o.jsx)(`dt`,{className:`text-xs font-black uppercase`,children:`Series`}),(0,o.jsx)(`dd`,{className:`display-title text-3xl font-black`,children:l})]}),(0,o.jsxs)(`div`,{className:`border-2 border-eastward-ink bg-eastward-cream p-3`,children:[(0,o.jsx)(`dt`,{className:`text-xs font-black uppercase`,children:`Prompts`}),(0,o.jsx)(`dd`,{className:`display-title text-3xl font-black`,children:u})]})]})]}),s.map(e=>(0,o.jsxs)(`section`,{className:`space-y-4`,children:[(0,o.jsxs)(`div`,{className:`flex flex-wrap items-end justify-between gap-3 border-b-2 border-eastward-ink pb-3`,children:[(0,o.jsx)(`h2`,{className:`display-title text-3xl font-black leading-tight text-eastward-cream`,children:e.series}),(0,o.jsxs)(`p`,{className:`font-bold text-eastward-cream`,children:[e.characters.length,` characters ·`,` `,e.promptCount,` prompts`]})]}),(0,o.jsx)(`div`,{className:`grid gap-5 sm:grid-cols-2 lg:grid-cols-3`,children:e.characters.map(n=>(0,o.jsxs)(t,{to:`/characters/$slug`,params:{slug:n.slug},className:`block overflow-hidden rounded-[3px] border-2 bg-eastward-cream text-eastward-ink no-underline transition-transform hover:-translate-y-1`,style:{borderColor:n.imageBackground},children:[(0,o.jsx)(`div`,{className:`aspect-video`,style:{backgroundColor:n.imageBackground},children:(0,o.jsx)(`img`,{src:n.image,srcSet:i(n.image),sizes:`(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw`,alt:a(n),className:`h-full w-full object-cover`,loading:`lazy`})}),(0,o.jsxs)(`div`,{className:`space-y-4 p-4`,children:[(0,o.jsxs)(`div`,{children:[(0,o.jsx)(`h3`,{className:`display-title text-2xl font-black leading-tight`,children:n.name}),(0,o.jsx)(`p`,{className:`text-sm font-bold`,children:e.series})]}),(0,o.jsx)(`div`,{className:`space-y-2`,children:n.prompts.map(e=>(0,o.jsxs)(`div`,{className:`flex items-center justify-between gap-3 border-2 border-eastward-ink bg-white/55 p-2`,children:[(0,o.jsxs)(`div`,{className:`min-w-0`,children:[(0,o.jsx)(`p`,{className:`truncate text-sm font-black`,children:e.part}),(0,o.jsx)(`p`,{className:`font-mono text-xs`,children:r(e.target)})]}),(0,o.jsx)(`span`,{className:`h-9 w-9 shrink-0 border-2 border-eastward-ink`,style:{backgroundColor:r(e.target)},"aria-hidden":!0})]},e.id))})]})]},n.slug))})]},e.series))]})}export{s as component};