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

2026-07-20 17:58:49 +02:00
commit e69b18abaa
49 changed files with 9842 additions and 0 deletions
@@ -0,0 +1,125 @@
+"use client"
+
+import { useState, useRef, useCallback, useEffect } from "react"
+import { getStroke } from "perfect-freehand"
+import { speak } from "@/lib/speech"
+
+interface TrazoLetraProps {
+  letra: string
+  fonema: string
+  color?: string
+  onComplete?: () => void
+  promptLevel?: number
+}
+
+export default function TrazoLetra({
+  letra,
+  fonema,
+  color = "#8CB8A0",
+  onComplete,
+  promptLevel = 0,
+}: TrazoLetraProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const [isDrawing, setIsDrawing] = useState(false)
+  const points = useRef<number[][]>([])
+  const [showLetter, setShowLetter] = useState(promptLevel < 2)
+
+  useEffect(() => {
+    if (promptLevel < 2) {
+      drawLetterGuide(letra)
+    }
+  }, [letra, promptLevel])
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    canvas.style.touchAction = "none"
+  }, [])
+
+  const drawLetterGuide = (l: string) => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+    const w = canvas.width
+    const h = canvas.height
+    ctx.clearRect(0, 0, w, h)
+
+    ctx.font = `${h * 0.6}px "Fredoka", sans-serif`
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+    ctx.globalAlpha = 0.15
+    ctx.fillStyle = "#2D3436"
+    ctx.fillText(l.toUpperCase(), w / 2, h / 2)
+    ctx.globalAlpha = 1
+  }
+
+  const startDrawing = useCallback((e: React.PointerEvent) => {
+    setIsDrawing(true)
+    points.current = [[e.clientX, e.clientY, e.pressure || 0.5]]
+    const canvas = canvasRef.current
+    if (canvas) canvas.setPointerCapture(e.pointerId)
+  }, [])
+
+  const draw = useCallback((e: React.PointerEvent) => {
+    if (!isDrawing) return
+    points.current.push([e.clientX, e.clientY, e.pressure || 0.5])
+    renderStroke()
+  }, [isDrawing])
+
+  const endDrawing = useCallback(() => {
+    setIsDrawing(false)
+    if (points.current.length > 5 && onComplete) {
+      onComplete()
+    }
+    points.current = []
+  }, [onComplete])
+
+  const renderStroke = () => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    const stroke = getStroke(points.current, {
+      size: 12,
+      thinning: 0.5,
+      smoothing: 0.5,
+      streamline: 0.5,
+    })
+
+    if (stroke.length < 2) return
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    if (showLetter) drawLetterGuide(letra)
+
+    ctx.beginPath()
+    ctx.moveTo(stroke[0][0], stroke[0][1])
+    for (let i = 1; i < stroke.length; i++) {
+      ctx.lineTo(stroke[i][0], stroke[i][1])
+    }
+    ctx.strokeStyle = color
+    ctx.lineWidth = 3
+    ctx.lineCap = "round"
+    ctx.lineJoin = "round"
+    ctx.fillStyle = color
+    ctx.fill()
+
+    if (promptLevel < 3) {
+      // draw direction arrow if early prompt level
+    }
+  }
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={300}
+      height={300}
+      className="w-[250px] h-[250px] touch-none rounded-2xl bg-white shadow-md"
+      onPointerDown={startDrawing}
+      onPointerMove={draw}
+      onPointerUp={endDrawing}
+      onPointerCancel={endDrawing}
+    />
+  )
+}