126 lines
3.0 KiB
TypeScript
126 lines
3.0 KiB
TypeScript
"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}
|
|
/>
|
|
)
|
|
}
|