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,66 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { speak } from "@/lib/speech"
+import { GatoMascota } from "@/components/child/gato-mascota"
+import TrazoLetra from "@/components/child/trazo-letra"
+import type { Exercise } from "@/curriculum/types"
+
+interface Props {
+  exercise: Exercise
+  onComplete: (correct: boolean) => void
+}
+
+export default function EjercicioTrazo({ exercise, onComplete }: Props) {
+  const { content } = exercise
+  const charToTrace = content.text && content.text.length === 1
+    ? content.text.toUpperCase()
+    : null
+
+  const handleAudio = async () => {
+    if (content.audioText) await speak(content.audioText)
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <GatoMascota mood="coach" message={content.instruction} size="sm" />
+
+      {charToTrace ? (
+        <>
+          <TrazoLetra
+            letra={charToTrace}
+            color={content.color || '#8CB8A0'}
+            onComplete={() => onComplete(true)}
+            promptLevel={0}
+          />
+          {content.audioText && (
+            <button
+              onClick={handleAudio}
+              className="text-sm text-primary underline"
+            >
+              Escuchar instrucción
+            </button>
+          )}
+        </>
+      ) : (
+        <>
+          {content.emoji && (
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              className="text-6xl"
+            >
+              {content.emoji}
+            </motion.div>
+          )}
+          <button
+            onClick={() => onComplete(true)}
+            className="bg-primary text-primary-foreground touch-target-lg rounded-2xl px-8 py-4 text-xl font-display font-bold"
+          >
+            ¡Lo hice!
+          </button>
+        </>
+      )}
+    </div>
+  )
+}