import React from 'react'; import { Button } from './ui/button'; import { Input } from './ui/input'; import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'; import { Trash2, RotateCcw } from 'lucide-react'; interface Cell { letter: string; isBlack: boolean; number?: number; } interface Clue { number: number; direction: 'horizontal' | 'vertical'; clue: string; answer: string; } interface CrosswordGeneratorProps { grid: Cell[][]; selectedCell: {row: number, col: number} | null; setSelectedCell: React.Dispatch>; isBlackMode: boolean; setIsBlackMode: React.Dispatch>; clues: Clue[]; currentClue: { number: number; direction: 'horizontal' | 'vertical'; clue: string; answer: string; }; setCurrentClue: React.Dispatch>; onCellClick: (row: number, col: number) => void; onCellKeyPress: (e: React.KeyboardEvent, row: number, col: number) => void; onNumberGrid: () => void; onClearGrid: () => void; onAddClue: () => void; onRemoveClue: (index: number) => void; onUpdateClueNumber: () => void; } const GRID_SIZE = 15; export function CrosswordGenerator({ grid, selectedCell, setSelectedCell, isBlackMode, setIsBlackMode, clues, currentClue, setCurrentClue, onCellClick, onCellKeyPress, onNumberGrid, onClearGrid, onAddClue, onRemoveClue, onUpdateClueNumber }: CrosswordGeneratorProps) { return (

Generador de Crucigramas

Crea tus propios crucigramas de forma interactiva

{/* Grid Area */}

{grid.map((row, rowIndex) => row.map((cell, colIndex) => (

onCellClick(rowIndex, colIndex)} tabIndex={cell.isBlack ? -1 : 0} onKeyDown={(e) => onCellKeyPress(e, rowIndex, colIndex)} > {cell.number && ( {cell.number} )} {!cell.isBlack && ( {cell.letter} )}

)) )}

{isBlackMode ? "Haz clic en las casillas para hacerlas negras/blancas" : "Haz clic en una casilla y escribe para agregar letras" }

{/* Controls Area */}

Agregar Pista

setCurrentClue(prev => ({ ...prev, number: parseInt(e.target.value) || 1 }))} className="w-20" min="1" /> { setCurrentClue(prev => ({ ...prev, direction: value as 'horizontal' | 'vertical' })); // Trigger update of clue number after direction change setTimeout(onUpdateClueNumber, 0); }} > Horizontal Vertical

setCurrentClue(prev => ({ ...prev, answer: e.target.value.toUpperCase() }))} onKeyDown={(e) => { if (e.key === 'Enter' && currentClue.answer.trim() && currentClue.clue.trim()) { onAddClue(); } }} /> setCurrentClue(prev => ({ ...prev, clue: e.target.value }))} onKeyDown={(e) => { if (e.key === 'Enter' && currentClue.answer.trim() && currentClue.clue.trim()) { onAddClue(); } }} /> {(!currentClue.answer.trim() || !currentClue.clue.trim()) && (

Completa tanto la respuesta como la pista para agregar

)} {clues.length > 0 && ( Pistas ({clues.length})

{clues.map((clue, index) => (

{clue.number} {clue.direction === 'horizontal' ? 'H' : 'V'} {clue.answer}

{clue.clue}

))}

)}

); }