Minijuego de fonética — mecánica de drag & drop con Framer Motion, feedback visual/sonoro, registro de progreso y lógica de puntuación.
Implementar un minijuego interactivo donde los niños arrastren letras para completar palabras o sílabas, proveyendo feedback inmediato sonoro y visual por cada acción, registrando el resultado final.
PhonicsLesson: Estructura base de una lección (objetivo, nivel, pistas disponibles).GameScore: Estado temporal del nivel en curso (aciertos a la primera, tiempo invertido).→ Ver referencia: game-types.ts
Usar para que cada letra tenga propiedades , , etc.
framer-motiondragdragSnapToOrigin→ Ver referencia: draggable-letter.tsx
Componente que cambia su color de fondo a success (verde) si recibe la letra correcta, o a error (rojo momentáneo) si es incorrecta.
→ Ver referencia: letter-slot.tsx
getBoundingClientRect) del slot frente al pointer del dragEnd.success y play de sonido de acierto.slot en error, la letra regresa (dragSnapToOrigin) y play de sonido de rebote.function calculateStars(score: GameScore): 1 | 2 | 3 {
const accuracy = score.correctOnFirstTry / score.totalSlots;
// Perfecto y rápido (<30s) -> 3 estrellas
// Bueno (>70% certidumbre) -> 2 estrellas
// Pasó el nivel (a prueba de fallos) -> 1 estrella
}
PhonicsLesson.saveProgress() en background (ver api-contracts).rewardUnlocked: true, trigger de RewardUnlockAnimation (ver skill rewards-system).framer-motion lo suele prevenir en drag elements, pero revisar el bloqueo en body o layout general.