PageSourceSearch

https://4gameslist.com/assets/AllCharacters-GsaYsPQG.js

js 4gameslist.com collected 2026-10-02 00:46:42 UTC 5,844 bytes, 1 lines download raw bytes

1import{r as l,j as t}from"./ui-lib-BwZZfEuU.js";import{L as C}from"./react-vendor-CahocTIn.js";import{s as k,V as _,v as L,w as A,b0 as S,I,ab as M,aQ as E}from"./index-B6FiC5h9.js";import{p as $,c as U}from"./characterImage-DQ0yiOi8.js";import{m as f}from"./animations-BNcyg-QM.js";import"./supabase-Bcbd4ikz.js";const Z=o=>o.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,""),z=o=>!!o&&o.startsWith("http")&&!o.toLowerCase().includes("example.com");let c=null;const j=10*60*1e3;function q(){const o=!!c&&Date.now()-c.at<j,[m,y]=l.useState(o?c.data:[]),[p,h]=l.useState(!o),[u,b]=l.useState(""),[d,v]=l.useState(null);l.useEffect(()=>{if(c&&Date.now()-c.at<j)return;let a=!1;return(async()=>{h(!0);try{const s=[];let e=0;const r=1e3;for(;;){const{data:n,error:i}=await k.from("charachters").select("id, name, slug, image_url, game_id, game_name, character_group_id").eq("is_complete",!0).order("name",{ascending:!0}).range(e,e+r-1);if(i)throw i;if(!(n!=null&&n.length)||(s.push(...n),n.length<r))break;e+=r}c={data:s,at:Date.now()},a||y(s)}catch(s){console.error(s)}finally{a||h(!1)}})(),()=>{a=!0}},[]);const g=l.useMemo(()=>{let a=m;if(u.trim()){const e=u.toLowerCase();a=a.filter(r=>r.name.toLowerCase().includes(e)||(r.game_name||"").toLowerCase().includes(e))}d&&(a=a.filter(e=>{var n;const r=(n=e.name[0])==null?void 0:n.toUpperCase();return d==="#"?!!r&&!/[A-Z]/.test(r):r===d}));const s=new Set;return a.filter(e=>{const r=e.character_group_id||e.id;return s.has(r)?!1:(s.add(r),!0)})},[m,u,d]),x=l.useMemo(()=>{var s;const a=new Map;for(const e of g){const r=((s=e.name[0])==null?void 0:s.toUpperCase())||"#",n=/[A-Z]/.test(r)?r:"#",i=a.get(n)||[];i.push(e),a.set(n,i)}return Array.from(a.entries()).sort(([e],[r])=>e==="#"?1:r==="#"?-1:e.localeCompare(r))},[g]),w=["#",..."ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")],N=l.useMemo(()=>{var s;const a=new Set;for(const e of m){const r=(s=e.name[0])==null?void 0:s.toUpperCase();a.add(r&&/[A-Z]/.test(r)?r:"#")}return a},[m]);return t.jsxs("div",{className:"min-h-screen bg-background",children:[t.jsxs(_,{children:[t.jsx("title",{children:"All Characters — Browse alphabetically | 4gameslist"}),t.jsx("meta",{name:"description",content:"Browse every video game character on 4gameslist alphabetically."})]}),t.jsx("section",{className:"border-b bg-gradient-to-b from-primary/5 via-background to-background",children:t.jsxs("div",{className:"container mx-auto px-4 py-10 max-w-6xl",children:[t.jsxs(f.div,{initial:{opacity:0,y:12},animate:{opacity:1,y:0},transition:{duration:.4},className:"space-y-3",children:[t.jsxs(L,{variant:"secondary",className:"gap-1",children:[t.jsx(A,{className:"h-3.5 w-3.5"})," Character index"]}),t.jsx("h1",{className:"text-3xl md:text-4xl font-bold tracking-tight",children:"All characters"}),t.jsx("p",{className:"text-muted-foreground",children:p?"Loading…":`${m.length.toLocaleString()} characters in our database, A → Z.`})]}),t.jsxs("div",{className:"mt-5 relative max-w-md",children:[t.jsx(S,{className:"h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"}),t.jsx(I,{value:u,onChange:a=>b(a.target.value),placeholder:"Search characters or games…",className:"pl-9"})]})]})}),t.jsx("section",{className:"sticky top-0 z-20 bg-background/85 backdrop-blur border-b",children:t.jsx("div",{className:"container mx-auto px-4 max-w-6xl py-2 flex flex-wrap gap-1 justify-center",children:w.map(a=>{const s=d===a,e=N.has(a);return t.jsx("button",{disabled:!e,onClick:()=>v(s?null:a),className:["h-7 min-w-7 px-1.5 text-xs font-semibold rounded transition-colors",s?"bg-primary text-primary-foreground":e?"hover:bg-muted text-foreground":"text-muted-foreground/40 cursor-not-allowed"].join(" "),children:a},a)})})}),t.jsx("section",{className:"container mx-auto px-4 max-w-6xl py-8",children:p?t.jsx("div",{className:"flex items-center justify-center py-24",children:t.jsx(M,{className:"h-6 w-6 animate-spin text-muted-foreground"})}):x.length===0?t.jsx("p",{className:"text-center text-sm text-muted-foreground py-24",children:"No characters match."}):t.jsx("div",{className:"space-y-8",children:x.map(([a,s])=>t.jsxs("div",{children:[t.jsx("div",{className:"sticky top-12 z-10 -mx-4 px-4 py-1.5 bg-background/85 backdrop-blur",children:t.jsx("h2",{className:"text-2xl font-bold text-primary",children:a})}),t.jsx("div",{className:"grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3 mt-3",children:s.map((e,r)=>{const n=`/character/${e.slug||Z(e.name)}`,i=z(e.image_url)?$(e.image_url):null;return t.jsx(f.div,{initial:o?!1:{opacity:0,scale:.94}
1,animate:{opacity:1,scale:1},transition:{delay:o?0:Math.min(r*.005,.2),duration:.25},children:t.jsxs(C,{to:n,title:`${e.name}${e.game_name?` — ${e.game_name}`:""}`,className:"group block",children:[t.jsxs("div",{className:"aspect-[3/4] relative overflow-hidden rounded-lg bg-muted ring-1 ring-border group-hover:ring-primary/50 group-hover:shadow-lg transition-all",children:[i?t.jsx("img",{src:i.src,alt:e.name,className:"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300",style:U(i),loading:"lazy"}):t.jsx("div",{className:"w-full h-full flex items-center justify-center",children:t.jsx(E,{className:"h-5 w-5 text-muted-foreground"})}),t.jsxs("div",{className:"absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-2",children:[t.jsx("p",{className:"text-white text-xs font-semibold leading-tight line-clamp-2",children:e.name}),e.game_name&&t.jsx("p",{className:"text-white/70 text-[10px] truncate",children:e.game_name})]})]}),t.jsx("p",{className:"text-[11px] text-center mt-1 truncate text-muted-foreground group-hover:text-foreground transition-colors",children:e.name})]})},e.id)})})]},a))})})]})}export{q as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.