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,61 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { speak } from "@/lib/speech"
+import { GatoMascota } from "@/components/child/gato-mascota"
+import type { Exercise } from "@/curriculum/types"
+
+interface Props {
+  exercise: Exercise
+  onComplete: (correct: boolean) => void
+}
+
+export default function EjercicioSensibilizacion({ exercise, onComplete }: Props) {
+  const { content } = exercise
+  const hasOptions = content.options && content.options.length > 0
+
+  const handleClick = async (option: { label: string; correct: boolean }) => {
+    if (content.audioText) await speak(content.audioText)
+    onComplete(option.correct)
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <GatoMascota mood="coach" message={content.instruction} size="sm" />
+
+      <motion.div
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="text-6xl text-center"
+      >
+        {content.emoji && <span>{content.emoji}</span>}
+      </motion.div>
+
+      {hasOptions && (
+        <div className="flex flex-wrap gap-4 justify-center max-w-sm">
+          {content.options!.map((opt, i) => (
+            <motion.button
+              key={opt.label}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: i * 0.1 }}
+              onClick={() => handleClick(opt)}
+              className="touch-target-lg rounded-2xl px-8 py-6 text-xl font-display font-bold shadow-md active:scale-95 transition-transform bg-white"
+            >
+              {opt.label}
+            </motion.button>
+          ))}
+        </div>
+      )}
+
+      {!hasOptions && (
+        <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>
+  )
+}