renato97/edueasy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: EduEasy checkpoint - plan, scaffolding, pedagogia modules, components child+parent, API routes, Prisma schema, Docker infra, Better Auth

Browse Source
This commit is contained in:
Renato
2026-07-20 17:58:49 +02:00
commit e69b18abaa
49 changed files with 9842 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/child/numeros/page.tsx
+217
View File
@@ -0,0 +1,217 @@
"use client"
import { useState, useCallback } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { GatoMascota } from "@/components/child/gato-mascota"
import { CuisenaireRod, rodColors } from "@/components/child/cuisenaire-rod"
import TemporizadorVisual from "@/components/child/temporizador-visual"
import { speak } from "@/lib/speech"
import { getRods } from "@/lib/pedagogia/cuisenaire"
import { createCPAState, advanceStage } from "@/lib/pedagogia/cpa-progression"
import { generateCPAItems, speakCPAInstruction } from "@/components/child/cpa-exercise"
type CPAStage = "concrete" | "pictoric" | "abstract"
export default function NumerosPage() {
const [currentValue, setCurrentValue] = useState(1)
const [stage, setStage] = useState<CPAStage>("concrete")
const [running, setRunning] = useState(true)
const [sessionComplete, setSessionComplete] = useState(false)
const [score, setScore] = useState(0)
const [tappedItems, setTappedItems] = useState<number[]>([])
const rods = getRods(10)
const cpaItems = generateCPAItems(currentValue, stage)
const startValue = useCallback(
(value: number) => {
setCurrentValue(value)
const newStage = value <= 3 ? "concrete" : value <= 6 ? "pictoric" : "abstract"
setStage(newStage)
setTappedItems([])
speakCPAInstruction(value, newStage)
},
[],
)
const handleItemTap = useCallback(
(id: number) => {
setTappedItems((prev) => {
const next = [...prev, id]
if (next.length === currentValue) {
setScore((s) => s + 1)
if (currentValue >= 5) {
setSessionComplete(true)
setRunning(false)
} else {
const nextValue = currentValue + 1
setCurrentValue(nextValue)
const newStage: CPAStage = nextValue <= 3 ? "concrete" : nextValue <= 6 ? "pictoric" : "abstract"
setStage(newStage)
setTappedItems([])
setTimeout(() => speakCPAInstruction(nextValue, newStage), 500)
}
}
return next
})
},
[currentValue],
)
if (sessionComplete) {
return (
<div className="flex-1 flex flex-col items-center justify-center p-8 gap-6">
<GatoMascota mood="celebrate" message="¡Muy bien con los números!" size="lg" />
<p className="text-lg font-display">Puntuación: {score}/5</p>
<button
onClick={() => {
setCurrentValue(1)
setStage("concrete")
setScore(0)
setTappedItems([])
setSessionComplete(false)
}}
className="bg-accent text-accent-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)
setSessionComplete(true)
}}
running={running}
/>
<GatoMascota
mood="coach"
message={
stage === "concrete"
? `Tocá ${currentValue} cosas`
: stage === "pictoric"
? "¿Cuántos hay?"
: "Señalá el número"
}
size="sm"
/>
<AnimatePresence mode="wait">
<motion.div
key={`${currentValue}-${stage}`}
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
className="flex flex-col items-center gap-4"
>
{/* Level indicator */}
<div className="flex gap-3 items-center">
{[1, 2, 3, 4, 5].map((n) => (
<button
key={n}
onClick={() => startValue(n)}
className={`w-12 h-12 rounded-full text-lg font-display font-bold ${
n <= currentValue ? "bg-primary text-white" : "bg-muted text-muted-foreground"
}`}
>
{n}
</button>
))}
</div>
{/* CPA area */}
<div className="w-full max-w-sm min-h-[200px] flex flex-wrap items-center justify-center gap-4 p-4 bg-white rounded-3xl shadow-md">
{stage === "concrete" &&
cpaItems.map((item) => (
<motion.button
key={item.id}
onClick={() => handleItemTap(item.id)}
className="text-4xl touch-target active:scale-110 transition-transform"
whileTap={{ scale: 1.2 }}
animate={
tappedItems.includes(item.id)
? { scale: 0.8, opacity: 0.5 }
: { scale: 1, opacity: 1 }
}
>
{item.emoji}
</motion.button>
))}
{stage === "pictoric" && (
<div className="flex flex-col items-center gap-2">
<div className="flex flex-wrap justify-center gap-2">
{cpaItems.map((item, i) => (
<motion.span
key={item.id}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.1 }}
className="text-3xl"
>
{item.emoji}
</motion.span>
))}
</div>
<div className="flex gap-3 mt-4">
{[1, 2, 3, 4, 5].map((n) => (
<button
key={n}
onClick={() => {
if (n === currentValue) {
handleItemTap(n)
}
}}
className="w-14 h-14 rounded-2xl bg-muted text-2xl font-display font-bold active:scale-90 transition-transform"
>
{n}
</button>
))}
</div>
</div>
)}
{stage === "abstract" && (
<div className="flex flex-col items-center gap-4">
<span className="text-6xl font-display font-bold">{currentValue}</span>
<p className="text-muted-foreground">Tocá el número que ves arriba</p>
<div className="flex flex-wrap gap-3 justify-center">
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => (
<button
key={n}
onClick={() => {
if (n === currentValue) {
handleItemTap(n)
}
}}
className="w-16 h-16 rounded-2xl bg-muted text-2xl font-display font-bold active:scale-90 transition-transform"
>
{n}
</button>
))}
</div>
</div>
)}
</div>
{/* Cuisenaire reference */}
<div className="flex flex-wrap justify-center gap-1 mt-2">
{rods.slice(0, currentValue).map((rod) => (
<CuisenaireRod
key={rod.value}
value={rod.value}
color={rod.color}
length={rod.lengthPx}
/>
))}
</div>
</motion.div>
</AnimatePresence>
</div>
)
}