feat: Puente Mayúscula-Minúscula + TTS SpeechSynthesis + E2E fixes
This commit is contained in:
renato97
@@ -0,0 +1,57 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { motion, AnimatePresence } 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 EjercicioConciencia({ exercise, onComplete }: Props) {
|
||||
const { content } = exercise
|
||||
const options = content.options || []
|
||||
|
||||
const handleChoose = async (opt: (typeof options)[0]) => {
|
||||
if (content.audioText) await speak(content.audioText)
|
||||
onComplete(opt.correct)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<GatoMascota mood="coach" message={content.instruction} size="sm" />
|
||||
|
||||
{content.text && (
|
||||
<p className="text-2xl font-display font-bold text-center">{content.text}</p>
|
||||
)}
|
||||
|
||||
{content.emoji && (
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
className="text-6xl"
|
||||
>
|
||||
{content.emoji}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-4 justify-center max-w-md">
|
||||
{options.map((opt, i) => (
|
||||
<motion.button
|
||||
key={`${opt.label}-${i}`}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.08 }}
|
||||
onClick={() => handleChoose(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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
"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 EjercicioEleccion({ exercise, onComplete }: Props) {
|
||||
const { content } = exercise
|
||||
const options = content.options || []
|
||||
|
||||
const handleChoose = async (opt: (typeof options)[0]) => {
|
||||
if (content.audioText) await speak(content.audioText)
|
||||
onComplete(opt.correct)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<GatoMascota mood="coach" message={content.instruction} size="sm" />
|
||||
|
||||
{content.text && (
|
||||
<p className="text-2xl font-display font-bold text-center">{content.text}</p>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-4 justify-center max-w-sm">
|
||||
{options.map((opt, i) => (
|
||||
<motion.button
|
||||
key={`${opt.label}-${i}`}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: i * 0.12 }}
|
||||
onClick={() => handleChoose(opt)}
|
||||
className="touch-target-lg rounded-2xl px-8 py-6 text-3xl font-display font-bold shadow-md active:scale-95 transition-transform bg-white"
|
||||
>
|
||||
{opt.label}
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
"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 EjercicioLectura({ exercise, onComplete }: Props) {
|
||||
const { content } = exercise
|
||||
const options = content.options || []
|
||||
|
||||
const handleChoose = async (opt: (typeof options)[0]) => {
|
||||
if (content.audioText) await speak(content.audioText)
|
||||
onComplete(opt.correct)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<GatoMascota mood="coach" message={content.instruction} size="sm" />
|
||||
|
||||
{content.text && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="bg-card border rounded-2xl p-6 max-w-md text-center"
|
||||
>
|
||||
<p className="text-xl font-display leading-relaxed">{content.text}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{content.imageEmoji && (
|
||||
<div className="text-6xl">{content.imageEmoji}</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-4 justify-center max-w-sm">
|
||||
{options.map((opt, i) => (
|
||||
<motion.button
|
||||
key={`${opt.label}-${i}`}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.12 }}
|
||||
onClick={() => handleChoose(opt)}
|
||||
className="touch-target-lg rounded-2xl px-8 py-5 text-lg font-display font-bold shadow-md active:scale-95 transition-transform bg-white"
|
||||
>
|
||||
{opt.label}
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { motion, AnimatePresence } 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 EjercicioPalabra({ exercise, onComplete }: Props) {
|
||||
const { content } = exercise
|
||||
const options = content.options || []
|
||||
|
||||
const handleChoose = async (opt: (typeof options)[0]) => {
|
||||
if (opt.id === "escuchar") {
|
||||
if (content.audioText) await speak(content.audioText)
|
||||
return
|
||||
}
|
||||
onComplete(opt.correct)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<GatoMascota mood="coach" message={content.instruction} size="sm" />
|
||||
|
||||
{content.imageEmoji && (
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
className="text-6xl"
|
||||
>
|
||||
{content.imageEmoji}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-4 justify-center max-w-md">
|
||||
{options.map((opt, i) => (
|
||||
<motion.button
|
||||
key={`${opt.label}-${i}`}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.08 }}
|
||||
onClick={() => handleChoose(opt)}
|
||||
className={`touch-target-lg rounded-2xl px-8 py-6 text-xl font-display font-bold shadow-md active:scale-95 transition-transform ${
|
||||
opt.id === "escuchar"
|
||||
? "bg-accent text-accent-foreground"
|
||||
: "bg-white"
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { motion, Reorder } 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 EjercicioSecuencia({ exercise, onComplete }: Props) {
|
||||
const { content } = exercise
|
||||
const sequence = content.sequence || []
|
||||
|
||||
const [items, setItems] = useState(() =>
|
||||
[...sequence].sort(() => Math.random() - 0.5),
|
||||
)
|
||||
|
||||
const handleReorder = (newOrder: string[]) => {
|
||||
setItems(newOrder)
|
||||
if (newOrder.every((item, i) => item === sequence[i])) {
|
||||
if (content.audioText) speak(content.audioText)
|
||||
onComplete(true)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<GatoMascota mood="coach" message={content.instruction} size="sm" />
|
||||
|
||||
<Reorder.Group
|
||||
axis="y"
|
||||
values={items}
|
||||
onReorder={handleReorder}
|
||||
className="flex flex-col gap-3 max-w-xs w-full"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<Reorder.Item
|
||||
key={item}
|
||||
value={item}
|
||||
className="touch-target-lg rounded-2xl px-6 py-4 text-xl font-display font-bold bg-white shadow-md cursor-grab active:cursor-grabbing text-center"
|
||||
>
|
||||
{item}
|
||||
</Reorder.Item>
|
||||
))}
|
||||
</Reorder.Group>
|
||||
|
||||
<p className="text-sm text-foreground/40">Arrastrá para ordenar</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
"use client"
|
||||
|
||||
import dynamic from "next/dynamic"
|
||||
import type { Exercise, ExerciseType } from "@/curriculum/types"
|
||||
|
||||
const EjercicioSensibilizacion = dynamic(() => import("./ejercicio-sensibilizacion"), { ssr: false })
|
||||
const EjercicioConciencia = dynamic(() => import("./ejercicio-conciencia"), { ssr: false })
|
||||
const EjercicioEleccion = dynamic(() => import("./ejercicio-eleccion"), { ssr: false })
|
||||
const EjercicioSecuencia = dynamic(() => import("./ejercicio-secuencia"), { ssr: false })
|
||||
const EjercicioPalabra = dynamic(() => import("./ejercicio-palabra"), { ssr: false })
|
||||
const EjercicioLectura = dynamic(() => import("./ejercicio-lectura"), { ssr: false })
|
||||
const EjercicioTrazo = dynamic(() => import("./ejercicio-trazo"), { ssr: false })
|
||||
|
||||
const componentMap: Record<ExerciseType, React.ComponentType<{ exercise: Exercise; onComplete: (correct: boolean) => void }>> = {
|
||||
sensibilizacion: EjercicioSensibilizacion,
|
||||
conciencia: EjercicioConciencia,
|
||||
trazo: EjercicioTrazo,
|
||||
eleccion: EjercicioEleccion,
|
||||
emparejar: EjercicioConciencia,
|
||||
secuencia: EjercicioSecuencia,
|
||||
palabra: EjercicioPalabra,
|
||||
problema: EjercicioLectura,
|
||||
lectura: EjercicioLectura,
|
||||
}
|
||||
|
||||
interface Props {
|
||||
exercise: Exercise
|
||||
onComplete: (correct: boolean) => void
|
||||
}
|
||||
|
||||
export default function ExerciseDispatcher({ exercise, onComplete }: Props) {
|
||||
const Component = componentMap[exercise.type] || EjercicioSensibilizacion
|
||||
return <Component exercise={exercise} onComplete={onComplete} />
|
||||
}
|
||||
Reference in New Issue
Block a user