/** @jsxImportSource https://esm.sh/react */ import confetti from "https://esm.sh/canvas-confetti@1.6.0"; import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const taskIcons = { "Alimentar a los peces": "🐠", "Desempacar mochilas": "🎒", "Hacer la tarea": "📚", "Pedir a mamá o papá que revisen la tarea": "👨‍👩‍👧", "Devolver la carpeta de tareas a la mochila": "📁", "Limpiar la mesa de los artículos de tarea": "🧹", "Mover tus cosas de la sala a tu habitación": "🏠", "Limpiar la habitación": "🧼", "Tomar una ducha": "🚿", "Limpiar la ducha": "🧽", "Cenar": "🍽️", "Cepillarse los dientes": "🦷", "Preparar la ropa para mañana": "👚", "Pedir a mamá o papá que revisen mi lista": "✅", }; const tareasRutinarias = [ { nombre: "Alimentar a los peces", cronometrado: false }, { nombre: "Desempacar mochilas", cronometrado: false }, { nombre: "Hacer la tarea", cronometrado: false }, { nombre: "Pedir a mamá o papá que revisen la tarea", cronometrado: false, requierePadre: true }, { nombre: "Devolver la carpeta de tareas a la mochila", cronometrado: false }, { nombre: "Limpiar la mesa de los artículos de tarea", cronometrado: false }, { nombre: "Mover tus cosas de la sala a tu habitación", cronometrado: false }, { nombre: "Limpiar la habitación", cronometrado: true, duracion: 10 * 60 }, { nombre: "Tomar una ducha", cronometrado: false }, { nombre: "Limpiar la ducha", cronometrado: false }, { nombre: "Cenar", cronometrado: false }, { nombre: "Cepillarse los dientes", cronometrado: true, duracion: 2 * 60 }, { nombre: "Preparar la ropa para mañana", cronometrado: false }, { nombre: "Pedir a mamá o papá que revisen mi lista", cronometrado: false, requierePadre: true }, ]; const hashSimple = (str) => { let hash = 0; for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; } return hash; }; const HASH_CONTRASENA_PADRE = hashSimple("1234"); const ComponenteTemporizador = ({ duracion, alCompletar, estaEnMarcha, alternarTemporizador }) => { const [tiempoRestante, setTiempoRestante] = useState(duracion); const refTiempoInicio = useRef(null); const refFrameAnimacion = useRef(null); const actualizarTemporizador = (timestamp) => { if (estaEnMarcha) { const tiempoTranscurrido = (timestamp - refTiempoInicio.current) / 1000; const nuevoTiempoRestante = Math.max(duracion - tiempoTranscurrido, 0); setTiempoRestante(nuevoTiempoRestante); if (nuevoTiempoRestante <= 0) { alCompletar(); } else { refFrameAnimacion.current = requestAnimationFrame(actualizarTemporizador); } } }; useEffect(() => { if (estaEnMarcha) { if (refTiempoInicio.current === null) { refTiempoInicio.current = performance.now(); } refFrameAnimacion.current = requestAnimationFrame(actualizarTemporizador); } else { cancelAnimationFrame(refFrameAnimacion.current); } return () => { cancelAnimationFrame(refFrameAnimacion.current); }; }, [estaEnMarcha, duracion, alCompletar]); useEffect(() => { const manejarCambioVisibilidad = () => { if (document.hidden) { cancelAnimationFrame(refFrameAnimacion.current); } else if (estaEnMarcha) { const ahora = performance.now(); const tiempoOcultoTranscurrido = ahora - (refTiempoInicio.current + (duracion - tiempoRestante) * 1000); refTiempoInicio.current = ahora - (duracion - tiempoRestante) * 1000 - tiempoOcultoTranscurrido; refFrameAnimacion.current = requestAnimationFrame(actualizarTemporizador); } }; document.addEventListener("visibilitychange", manejarCambioVisibilidad); return () => document.removeEventListener("visibilitychange", manejarCambioVisibilidad); }, [estaEnMarcha, duracion, tiempoRestante]); useEffect(() => { setTiempoRestante(duracion); refTiempoInicio.current = null; }, [duracion]); const minutos = Math.floor(tiempoRestante / 60); const segundos = Math.floor(tiempoRestante % 60); return (

{`${minutos}:${segundos.toString().padStart(2, "0")}`}

); }; const TecladoNumerico = ({ alHacerClicEnNumero, alEnviar, alLimpiar }) => { return (

{[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => ( ))}

); }; function App() { const [tareasCompletadas, setTareasCompletadas] = useState([]); const [estadosTemporizador, setEstadosTemporizador] = useState(tareasRutinarias.map(tarea => ({ estaEnMarcha: false, estaCompleta: false, }))); const [contrasenapadre, setContrasenaPadre] = useState(""); const [mostrarPromptContrasena, setMostrarPromptContrasena] = useState(false); const [indiceTareaActual, setIndiceTareaActual] = useState(null); const [errorContrasena, setErrorContrasena] = useState(false); const lanzarConfeti = () => { const cantidad = 500; const configuracionPredeterminada = { origin: { y: 0.7 }, shapes: ["star"], ticks: 300, }; function disparar(proporcionParticulas, opciones) { confetti({ ...configuracionPredeterminada, ...opciones, particleCount: Math.floor(cantidad * proporcionParticulas), }); } disparar(0.25, { spread: 26, startVelocity: 55, }); disparar(0.2, { spread: 60, }); disparar(0.35, { spread: 100, decay: 0.91, scalar: 0.8, }); disparar(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2, }); disparar(0.1, { spread: 120, startVelocity: 45, }); }; useEffect(() => { if (tareasCompletadas.length === tareasRutinarias.length) { lanzarConfeti(); } }, [tareasCompletadas]); const alternarTarea = (indice) => { const tarea = tareasRutinarias[indice]; const estadoTemporizador = estadosTemporizador[indice]; if (tarea.cronometrado && !estadoTemporizador.estaCompleta) { setIndiceTareaActual(indice); setMostrarPromptContrasena(true); return; } if (tarea.requierePadre) { setIndiceTareaActual(indice); setMostrarPromptContrasena(true); return; } setTareasCompletadas(prev => prev.includes(indice) ? prev.filter(indiceTarea => indiceTarea !== indice) : [...prev, indice] ); }; const manejarClicEnNumero = (numero) => { setContrasenaPadre(prev => prev + numero.toString()); }; const manejarEnvioContrasena = () => { if (hashSimple(contrasenapadre) === HASH_CONTRASENA_PADRE) { const tarea = tareasRutinarias[indiceTareaActual]; if (tarea.cronometrado) { setEstadosTemporizador(prev => { const nuevosEstados = [...prev]; nuevosEstados[indiceTareaActual].estaCompleta = true; nuevosEstados[indiceTareaActual].estaEnMarcha = false; return nuevosEstados; }); } setTareasCompletadas(prev => prev.includes(indiceTareaActual) ? prev.filter(indiceTarea => indiceTarea !== indiceTareaActual) : [...prev, indiceTareaActual] ); cerrarPromptContrasena(); } else { setErrorContrasena(true); } }; const manejarLimpiarContrasena = () => { setContrasenaPadre(""); }; const cerrarPromptContrasena = () => { setMostrarPromptContrasena(false); setContrasenaPadre(""); setErrorContrasena(false); setIndiceTareaActual(null); }; const alCompletarTemporizador = (indice) => { setEstadosTemporizador(prev => { const nuevosEstados = [...prev]; nuevosEstados[indice].estaCompleta = true; nuevosEstados[indice].estaEnMarcha = false; return nuevosEstados; }); }; const alternarTemporizador = (indice) => { setEstadosTemporizador(prev => { const nuevosEstados = [...prev]; nuevosEstados[indice].estaEnMarcha = !nuevosEstados[indice].estaEnMarcha; return nuevosEstados; }); }; const reiniciarTareas = () => { setTareasCompletadas([]); setEstadosTemporizador(tareasRutinarias.map(tarea => ({ estaEnMarcha: false, estaCompleta: false, }))); }; return (

Kaya's After School Routine

alternarTarea(indice)} > {tareasCompletadas.includes(indice) ? ✅ : (tarea.requierePadre || (tarea.cronometrado && !estadosTemporizador[indice].estaCompleta)) ? 🔒 : ( ⚪ )} {taskIcons[tarea.nombre]}
{tarea.cronometrado && ( alCompletarTemporizador(indice)} estaEnMarcha={estadosTemporizador[indice].estaEnMarcha} alternarTemporizador={() => alternarTemporizador(indice)} /> )}

{mostrarPromptContrasena && (

e.stopPropagation()}>

👨‍👩‍👧 Parent Verification Required

{contrasenapadre.replace(/./g, "•") || "\u00A0"}

{errorContrasena && (

❌ Incorrect password. Please try again.

)}

)} View source code

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response( ` Kaya's After School Routine

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: system-ui, sans-serif; background-color: #f0f0f0; } `; export default server;

jmt_es