feat: Puente Mayúscula-Minúscula + TTS SpeechSynthesis + E2E fixes

2026-07-21 15:31:46 -03:00
commit fa8e0c58ce
120 changed files with 16013 additions and 0 deletions
@@ -0,0 +1,167 @@
+"use client"
+
+import { useState, useCallback, useEffect, useRef } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { GatoMascota } from "@/components/child/gato-mascota"
+import NoChildError from "@/components/child/no-child-error"
+import TemporizadorVisual from "@/components/child/temporizador-visual"
+import ExerciseDispatcher from "@/components/exercises/exercise-dispatcher"
+import { speak, stopSpeaking } from "@/lib/speech"
+
+const CHILD_ID_KEY = "edueasy_child_id"
+const META_KEY = "edueasy_child_meta"
+
+type PageState = "loading" | "ready" | "complete" | "error"
+
+export default function NumerosSesion() {
+  const [pageState, setPageState] = useState<PageState>("loading")
+  const [exercise, setExercise] = useState<any | null>(null)
+  const [running, setRunning] = useState(true)
+  const [score, setScore] = useState(0)
+  const [totalAttempts, setTotalAttempts] = useState(0)
+  const childIdRef = useRef<string>("")
+  const startedAtRef = useRef(new Date().toISOString())
+
+  const getChildId = useCallback(() => {
+    const id = localStorage.getItem(CHILD_ID_KEY) || ""
+    childIdRef.current = id
+    return id
+  }, [])
+
+  const fetchNext = useCallback(async () => {
+    const childId = getChildId()
+    if (!childId) {
+      setPageState("error")
+      return null
+    }
+
+    try {
+      const res = await fetch(`/api/curriculum/next?childId=${childId}&topic=numeros`)
+      const data = await res.json()
+      if (data.done || !data.id) {
+        setPageState("complete")
+        return null
+      }
+      setExercise(data)
+      setPageState("ready")
+      return data
+    } catch {
+      setPageState("error")
+      return null
+    }
+  }, [getChildId])
+
+  useEffect(() => {
+    fetchNext()
+  }, [fetchNext])
+
+  const gradeAttempt = useCallback(async (ex: any, correct: boolean) => {
+    const childId = childIdRef.current
+    if (!childId || !ex) return
+
+    setTotalAttempts((t) => t + 1)
+    if (correct) setScore((s) => s + 1)
+
+    const errorType = !correct
+      ? ex.errorType || "discriminacion-auditiva"
+      : null
+
+    try {
+      await fetch("/api/curriculum/grade", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          childId,
+          exerciseId: ex.id,
+          skillCode: ex.skillCode,
+          correct,
+          promptLevel: 0,
+          responseMs: 3000,
+          errorType,
+          stage: ex.stage,
+        }),
+      })
+    } catch {
+      // silent
+    }
+  }, [])
+
+  const handleComplete = useCallback(
+    async (correct: boolean) => {
+      if (!exercise) return
+      await gradeAttempt(exercise, correct)
+      stopSpeaking()
+      if (correct) {
+        await speak("¡Muy bien!")
+        await new Promise((r) => setTimeout(r, 800))
+      }
+      fetchNext()
+    },
+    [exercise, gradeAttempt, fetchNext],
+  )
+
+  const resetSession = useCallback(() => {
+    setScore(0)
+    setTotalAttempts(0)
+    setRunning(true)
+    startedAtRef.current = new Date().toISOString()
+    fetchNext()
+  }, [fetchNext])
+
+  if (pageState === "loading") {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <GatoMascota mood="coach" message="Preparando ejercicios de números..." size="sm" />
+      </div>
+    )
+  }
+
+  if (pageState === "error") {
+    return <NoChildError onRetry={resetSession} />
+  }
+
+  if (pageState === "complete") {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center p-8 gap-6">
+        <GatoMascota mood="celebrate" message="¡Terminaste todos los ejercicios de números por ahora!" size="lg" />
+        <p className="text-lg font-display">
+          Aciertos: {score}/{totalAttempts}
+        </p>
+        <button
+          onClick={resetSession}
+          className="bg-primary text-primary-foreground touch-target-lg rounded-2xl px-8 py-4 text-xl font-display font-bold"
+        >
+          Jugar de nuevo
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center p-6 gap-6">
+      <TemporizadorVisual
+        durationMinutes={10}
+        onComplete={() => {
+          setRunning(false)
+          setPageState("complete")
+        }}
+        running={running}
+      />
+
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={exercise?.id || "empty"}
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -50 }}
+          transition={{ duration: 0.25 }}
+          className="w-full max-w-md"
+        >
+          {exercise && (
+            <ExerciseDispatcher exercise={exercise} onComplete={handleComplete} />
+          )}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  )
+}