[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68ba45312fe48191994b0d173e48e7b1","versionInt","title","3","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Bell, Clock, Heart, Laugh, ThumbsUp, X, LogOut, Gift, ArrowRight, AlertCircle, RotateCcw, ChevronDown } from \"lucide-react\";\n\n// --- Utilidades ---\nconst fmtTime = (s) => {\n const total = Math.floor(s);\n const hh = String(Math.floor(total / 3600)).padStart(2, \"0\");\n const mm = String(Math.floor((total % 3600) / 60)).padStart(2, \"0\");\n const ss = String(total % 60).padStart(2, \"0\");\n return `${hh}:${mm}:${ss}`;\n};\n\nconst rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst EMOJIS = [\n \"😂\",\"👍\",\"❤️\",\"🔥\",\"⭐️\",\"🎁\",\"🎉\",\"😮\",\"🐶\",\"🍔\",\"💃\",\"🧠\",\"🥇\",\"⚡️\",\"😻\",\"🪙\"\n];\n\nconst FEED_SNIPPETS = [\n \"10 hacks para ser más productivo (el #7 te sorprenderá)\",\n \"Video corto: gato hace parkour en la cocina\",\n \"¿Deberíamos temer a la IA Generativa? Debate en 30 segundos\",\n \"Memes del día: colección curada\",\n \"Reto de baile: aprende 3 pasos en 15s\",\n \"Top 5 apps para dormir mejor — hilo 🧵\",\n \"Noticia urgente: algo pasó en algún lugar\",\n \"Tutorial relámpago: organiza tu vida en 60s\",\n \"Encuesta: ¿Qué prefieres ver ahora?\",\n \"Directo: reacciona a reacciones de reacciones\"\n];\n\nconst NOTIF_POOL = [\n { title: \"Nuevo Me Gusta\", body: \"A 12 personas les encantó tu último giro\" },\n { title: \"Tendencia\", body: \"Tu racha sube un 15% si haces otro scroll\" },\n { title: \"Recompensa sorpresa\", body: \"Desbloquea un sticker si giras ahora\" },\n { title: \"No te lo pierdas\", body: \"Quedan 45s para entrar al evento en vivo\" },\n { title: \"Alerta de streak\", body: \"Mantén tu racha activa con un toque\" }\n];\n\nexport default function AttentionCasino() {\n // Estado principal\n const [seconds, setSeconds] = useState(0); // tiempo de vida gastado\n const [multiplier, setMultiplier] = useState(1); // aceleración del cronómetro\n const [dopamine, setDopamine] = useState(0); // micro-recompensas acumuladas\n const [streak, setStreak] = useState(0); // racha de interacciones\n const [reels, setReels] = useState([\"💤\",\"💤\",\"💤\"]);\n const [spinning, setSpinning] = useState(false);\n const [bursts, setBursts] = useState([]); // partículas efímeras\n const [notifs, setNotifs] = useState([]); // notificaciones push internas\n const [showExit, setShowExit] = useState(false); // modal de salida (fricción)\n const [showOpportunity, setShowOpportunity] = useState(false); // modal costo oportunidad\n const [feedItems, setFeedItems] = useState(() => Array.from({ length: 18 }, () => FEED_SNIPPETS[rand(0, FEED_SNIPPETS.length - 1)]));\n const feedRef = useRef(null);\n\n const captureLevel = Math.min(100, Math.round((multiplier - 1) * 25)); // 0..100\n\n // Cronómetro con aceleración variable\n useEffect(() => {\n const iv = setInterval(() => {\n setSeconds((s) => s + (0.2 * multiplier));\n // ligera relajación del multiplicador hacia 1\n setMultiplier((m) => (m > 1 ? Math.max(1, m * 0.9985) : 1));\n }, 200);\n return () => clearInterval(iv);\n }, [multiplier]);\n\n // Generador de notificaciones persuasivas\n useEffect(() => {\n const iv = setInterval(() => {\n // probabilidad aumenta con el nivel de captura\n const p = 0.2 + captureLevel / 200; // 0.2..0.7 aprox\n if (Math.random() < p) {\n const n = { id: crypto.randomUUID(), ...NOTIF_POOL[rand(0, NOTIF_POOL.length - 1)] };\n setNotifs((ns) => [...ns, n]);\n }\n }, 4000);\n return () => clearInterval(iv);\n }, [captureLevel]);\n\n // Manejo de scroll infinito en el feed\n useEffect(() => {\n const el = feedRef.current;\n if (!el) return;\n const onScroll = () => {\n const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 40;\n if (nearBottom) {\n setFeedItems((items) => [\n ...items,\n ...Array.from({ length: 10 }, () => FEED_SNIPPETS[rand(0, FEED_SNIPPETS.length - 1)])\n ]);\n // cada “carga” refuerza la captura\n setMultiplier((m) => Math.min(8, m + 0.12));\n setStreak((s) => s + 1);\n }\n };\n el.addEventListener(\"scroll\", onScroll);\n return () => el.removeEventListener(\"scroll\", onScroll);\n }, []);\n\n const handleSpin = () => {\n if (spinning) return;\n setSpinning(true);\n setStreak((s) => s + 1);\n setMultiplier((m) => Math.min(8, m + 0.25));\n\n let t = 0;\n const spinIv = setInterval(() => {\n setReels([EMOJIS[rand(0, EMOJIS.length - 1)], EMOJIS[rand(0, EMOJIS.length - 1)], EMOJIS[rand(0, EMOJIS.length - 1)]]);\n t += 100;\n if (t > 1200 + rand(0, 500)) {\n clearInterval(spinIv);\n setSpinning(false);\n // recompensa efímera\n const rewardBoost = Math.random() < 0.8 ? 1 : 2;\n setDopamine((d) => d + rewardBoost);\n setBursts((bs) => [\n ...bs,\n { id: crypto.randomUUID(), x: rand(10, 90), y: rand(30, 60), emoji: Math.random() < 0.5 ? \"❤️\" : \"😂\" }\n ]);\n // limpiar burst luego\n setTimeout(() => setBursts((bs) => bs.slice(1)), 1200);\n }\n }, 100);\n };\n\n const handleNotifClick = (id) => {\n setNotifs((ns) => ns.filter((n) => n.id !== id));\n setMultiplier((m) => Math.min(8, m + 0.1));\n setStreak((s) => s + 1);\n setDopamine((d) => d + 1);\n };\n\n const resetAll = () => {\n setSeconds(0);\n setMultiplier(1);\n setDopamine(0);\n setStreak(0);\n setReels([\"💤\",\"💤\",\"💤\"]);\n setBursts([]);\n setNotifs([]);\n setShowExit(false);\n setShowOpportunity(false);\n setFeedItems(Array.from({ length: 18 }, () => FEED_SNIPPETS[rand(0, FEED_SNIPPETS.length - 1)]));\n if (feedRef.current) feedRef.current.scrollTop = 0;\n };\n\n // Cálculo del costo de oportunidad\n const opp = useMemo(() => {\n const mins = seconds / 60;\n const pages = Math.floor(mins * 0.8); // ~0.8 pág/min a ritmo tranquilo\n const steps = Math.floor(mins * 100); // ~100 pasos/min\n const pomodoros = (mins / 25).toFixed(1);\n const chats = Math.floor(mins / 15);\n const breaths = Math.floor(mins * 6);\n return { mins: Math.floor(mins), pages, steps, pomodoros, chats, breaths };\n }, [seconds]);\n\n return (\n

\n {/* Barra superior */}\n

\n \n

El Casino de la Atención

\n (No se puede ganar)\n

\n \n {fmtTime(seconds)}\n

\n Captura\n

\n \n

\n\n {/* Contenido principal */}\n

\n {/* Slot machine */}\n

\n \n Máquina de micro-recompensas\n

\n \n {dopamine}\n

\n \n {streak}\n

\n \n ×{multiplier.toFixed(2)}\n

\n\n {/* Reels */}\n

\n {reels.map((r, i) => (\n

\n {r}\n

\n ))}\n

\n\n {/* Controles */}\n

\n \n \n

\n \n La máquina no tiene premio final. Solo gasta tiempo.\n

\n\n {/* Bursts (partículas) */}\n

\n {bursts.map((b) => (\n

\n {b.emoji}\n

\n ))}\n

\n\n {/* Feed infinito (scroll) */}\n

Feed infinito

\n Desliza para cargar más\n

\n {feedItems.map((txt, idx) => (\n

{txt}

\n \n \n \n

\n ))}\n

Cargando más… sigue bajando

\n\n {/* Notificaciones tipo push */}\n

\n {notifs.slice(-4).map((n) => (\n

\n \n

{n.title}

{n.body}

\n \n \n

\n \n

\n ))}\n

\n\n {/* Modal de fricción para salir */}\n {showExit && (\n

\n \n

¿Seguro que quieres salir?

Antes de irte, hay una última sorpresa esperándote. También estás a un paso de batir tu racha. (Este tipo de fricciones son comunes para retener tu atención).

\n \n \n

\n )}\n\n {/* Modal de costo de oportunidad (Giro crítico) */}\n {showOpportunity && (\n

Giro crítico: el costo de oportunidad

El juego no tiene fin ni premio. Esto es lo que podrías haber hecho en el mundo real con {opp.mins} minutos:

\n \n

\n\n

\n \n \n \n \n \n \n

\n\n

\n Propuesta de acción: activa un minuto de respiración, escribe una idea en tu cuaderno o envía un mensaje afectuoso a alguien. La atención es un recurso finito: decide dónde la inviertes.\n

\n\n

\n \n \n

\n )}\n\n {/* Estilos auxiliares */}\n \n\n {/* Pie de página didáctico */}\n \n

\n );\n}\n\nfunction OppCard({ title, value, subtitle, emoji }) {\n return (\n

{emoji}

{title}

{value}

\n {subtitle &&

{subtitle}

}\n

\n );\n}\n\nfunction TrendingIcon() {\n // icono simple con CSS para evitar dependencia si faltara Lucide específico\n return (\n \n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","2255444804607773768","traceTime",1776442960420]