// Pull-City — main app: header, cart, quickview, tweaks panel, intersection reveals const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "violet", "holoSheen": true }/*EDITMODE-END*/; const TIKTOK_URL = "https://www.tiktok.com/@pullcitytcg?_r=1&_t=ZN-96r22qJM4EY"; const TWITCH_URL = "https://www.twitch.tv/pullcitytcg"; // TODO: confermare handle Twitch const WHATSAPP_URL = "https://chat.whatsapp.com/"; const HEADER_NAV = [ { href: "#ygo", label: "Yu-Gi-Oh!" }, { href: "#pkm", label: "Pokémon" }, { href: "#op", label: "One Piece" }, { href: "#dbfw", label: "Dragon Ball" }, { href: "#ua", label: "Union Arena" }, { href: "#ccg", label: "CCG" }, { href: "#mag", label: "Magazine" }, { href: "https://chat.whatsapp.com/", label: "Vault", ext: true }, ]; function Header({ onCart, onSearch, cartCount, scrolled }) { const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [menuOpen]); return (
setMenuOpen(false)}> Pull-City TCG Pull-City TCG
setMenuOpen(false)}>
); } function pcPriceNum(v) { if (typeof v === "number") return Number.isFinite(v) ? v : null; let s = String(v == null ? "" : v).replace(/[^0-9.,]/g, ""); if (!s) return null; s = s.replace(/\.(?=\d{3}(\D|$))/g, "").replace(",", "."); const n = parseFloat(s); return Number.isFinite(n) ? n : null; } function pcEur(n) { return "€ " + Number(n).toLocaleString("it-IT"); } function Cart({ open, items, onClose, onQty, onRm, onCheckout }) { const nums = items.map((it) => pcPriceNum(it.price)); const allNum = items.length > 0 && nums.every((n) => n != null); const total = allNum ? nums.reduce((s, n, i) => s + n * items[i].qty, 0) : null; return ( <>
); } function QuickView({ product, onClose, onAdd }) { const [shared, setShared] = React.useState(false); const [rOpen, setROpen] = React.useState(false); const [rEmail, setREmail] = React.useState(""); const [rState, setRState] = React.useState(""); if (!product) return null; const isPre = product.status === "preorder"; const soldOut = !!product.sold_out || product.stock === 0; async function submitRestock(e) { e.preventDefault(); setRState("busy"); const r = await fetch("/api/notify-restock", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ product_id: product.id, email: rEmail }) }).then((x) => x.json()).catch(() => ({ ok: false })); setRState(r.ok ? "ok" : "err"); } function share() { const url = location.origin + "/p/" + encodeURIComponent(product.id); if (navigator.share) { navigator.share({ title: "Pull-City · " + product.name, url }).catch(() => {}); return; } if (navigator.clipboard) { navigator.clipboard.writeText(url).then(() => { setShared(true); setTimeout(() => setShared(false), 1800); }); } else { window.prompt("Copia il link del prodotto:", url); } } return (
e.stopPropagation()}>
{product.image ? ( {product.name} { e.currentTarget.style.display = "none"; const ph = e.currentTarget.parentElement.querySelector('.photo-placeholder'); if (ph) ph.style.display = "flex"; }} /> ) : null}
{product.glyph || "✦"}
{product.franchise || product.label}
{product.name}
{product.label || "Sealed"}{isPre ? " · Pre-order" : " · Disponibile"}

{product.name}

Formato
{product.sub.split("·")[0]?.trim() || "Sealed"}
Confezione
{product.sub.split("·")[1]?.trim() || "Originale"}
Stato
{soldOut ? "Esaurito" : isPre ? "Pre-order" : "Disponibile in vault"}
{isPre ? "Uscita" : "Stock"}
{isPre ? (product.release || "TBA") : (product.stock != null ? `${product.stock} pezzi` : "—")}
Lingua
Inglese · Italiano
Spedizione
48h corazzata
€ {typeof product.price === "number" ? product.price.toLocaleString("it-IT") : product.price} {!isPre && typeof product.price === "number" && € {(Math.round(product.price * 1.18)).toLocaleString("it-IT")}}
{soldOut && (
{rState === "ok" ? (
✓ Ti avviseremo via email appena torna disponibile.
) : !rOpen ? ( ) : (
setREmail(e.target.value)} className="co-input" style={{ flex: 1, minWidth: 180 }} /> {rState === "err" &&
Errore, riprova.
}
)}
)}
✦ Sigillato originale ✦ Spedizione corazzata ✦ {isPre ? "Prezzo bloccato" : "Reso 14 giorni"}
); } function SubscribeModal({ open, onClose }) { const [email, setEmail] = React.useState(""); const [state, setState] = React.useState(""); React.useEffect(() => { if (open) { setEmail(""); setState(""); } }, [open]); async function submit(e) { e.preventDefault(); setState("busy"); const r = await fetch("/api/subscribe", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ email }) }).then((x) => x.json()).catch(() => ({ ok: false })); setState(r.ok ? "ok" : "err"); } if (!open) return null; return (
e.stopPropagation()} style={{ width: "min(440px, 100%)", background: "var(--bg-2)", border: "1px solid var(--line-2)", borderRadius: 18, padding: 28, position: "relative" }}>

Entra nel Vault

Drop settimanali, priorità sui pre-order e prezzi bloccati. Lascia la tua email.

{state === "ok" ? (
✓ Iscrizione registrata. A presto!
) : (
setEmail(e.target.value)} className="co-input" style={{ width: "100%" }} /> {state === "err" &&
Errore, riprova.
}
)}
); } function SearchOverlay({ open, onClose, onPick }) { const [q, setQ] = React.useState(""); const inputRef = React.useRef(null); React.useEffect(() => { if (open) { setQ(""); setTimeout(() => inputRef.current && inputRef.current.focus(), 60); } function onKey(e) { if (e.key === "Escape" && open) onClose(); } window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open]); const results = React.useMemo(() => { const s = q.trim().toLowerCase(); if (!s) return []; const d = window.PC_DATA || {}; const out = []; for (const k of Object.keys(d)) { for (const p of (d[k].products || [])) { const hay = (p.name + " " + (p.franchise || p.label || "") + " " + (p.sub || "")).toLowerCase(); if (hay.includes(s)) out.push(p); if (out.length >= 40) break; } } return out; }, [q, open]); if (!open) return null; return (
e.stopPropagation()}>
setQ(e.target.value)} />
{!q.trim() &&
Scrivi per cercare tra i prodotti del Vault.
} {q.trim() && results.length === 0 &&
Nessun prodotto per “{q}”.
} {results.map((p) => ( ))}
); } function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [cartOpen, setCartOpen] = React.useState(false); const [items, setItems] = React.useState([]); const [quick, setQuick] = React.useState(null); const [scrolled, setScrolled] = React.useState(false); const [checkoutOpen, setCheckoutOpen] = React.useState(false); const [searchOpen, setSearchOpen] = React.useState(false); const [subscribeOpen, setSubscribeOpen] = React.useState(false); // Apply tokens / flags to React.useEffect(() => { document.documentElement.setAttribute("data-palette", t.palette || "graphite"); }, [t.palette]); React.useEffect(() => { document.documentElement.toggleAttribute("data-no-holo", !t.holoSheen); }, [t.holoSheen]); // Reveal-on-scroll with stagger React.useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach(en => { if (en.isIntersecting) en.target.classList.add("in"); }); }, { rootMargin: "0px 0px -8% 0px", threshold: 0.08 }); document.querySelectorAll(".reveal").forEach((el, i) => { if (!el.style.getPropertyValue("--i")) { // assign stagger index based on the element's index within its parent const sibs = Array.from(el.parentElement.children).filter(c => c.classList.contains("reveal")); const idx = sibs.indexOf(el); if (idx >= 0) el.style.setProperty("--i", idx); } io.observe(el); }); return () => io.disconnect(); }); // Cursor spotlight — fixed glow that follows the mouse on hover-capable devices React.useEffect(() => { const spot = document.getElementById("cursor-spot"); if (!spot) return; let raf = 0, mx = window.innerWidth / 2, my = window.innerHeight / 2; let tx = mx, ty = my; function tick() { tx += (mx - tx) * 0.18; ty += (my - ty) * 0.18; spot.style.setProperty("--mx", tx + "px"); spot.style.setProperty("--my", ty + "px"); raf = requestAnimationFrame(tick); } function onMove(e) { mx = e.clientX; my = e.clientY; spot.classList.add("active"); } function onLeave() { spot.classList.remove("active"); } raf = requestAnimationFrame(tick); window.addEventListener("mousemove", onMove); window.addEventListener("mouseleave", onLeave); return () => { cancelAnimationFrame(raf); window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseleave", onLeave); }; }, []); // Header scrolled state + progress bar React.useEffect(() => { let raf = 0; function onScroll() { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; const sc = window.scrollY > 80; setScrolled(sc); const bar = document.getElementById("progress-bar"); if (bar) { const h = document.documentElement.scrollHeight - window.innerHeight; const p = h > 0 ? (window.scrollY / h) * 100 : 0; bar.style.width = p + "%"; } }); } onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // Deep-link: ?p= apre la QuickView del prodotto e scrolla alla sezione. React.useEffect(() => { const id = new URLSearchParams(window.location.search).get("p"); if (!id || !window.PC_DATA) return; let found = null, fk = null; for (const k of Object.keys(window.PC_DATA)) { const prod = (window.PC_DATA[k].products || []).find((p) => p.id === id); if (prod) { found = prod; fk = k; break; } } if (found) { setQuick(found); setTimeout(() => document.getElementById(fk)?.scrollIntoView({ behavior: "smooth", block: "start" }), 350); } }, []); function addToCart(p) { setItems(prev => { const found = prev.findIndex(it => it.id === p.id); if (found >= 0) { const next = prev.slice(); next[found] = { ...next[found], qty: next[found].qty + 1 }; return next; } return prev.concat([{ ...p, qty: 1 }]); }); // Pulse the cart icon const btn = document.getElementById("cart-btn"); if (btn) { btn.classList.remove("pulse"); void btn.offsetWidth; btn.classList.add("pulse"); } } function changeQty(idx, delta) { setItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Math.max(1, it.qty + delta) } : it)); } function removeItem(idx) { setItems(prev => prev.filter((_, i) => i !== idx)); } function onCta(which) { const map = { drops: "ygo", vault: "ygo", graded: "pkm", preorder: "pkm", ygo: "ygo", pkm: "pkm", op: "op" }; const target = map[which] || "ygo"; document.getElementById(target)?.scrollIntoView({ behavior: "smooth" }); } return ( <>
setCartOpen(true)} onSearch={() => setSearchOpen(true)} cartCount={items.reduce((s, i) => s + i.qty, 0)} scrolled={scrolled} /> setSubscribeOpen(true)} tiktok={TIKTOK_URL} twitch={TWITCH_URL} />