Ejercicio: Word Search

Se pide desarrollar un generador de Sopas de letras (Word Search) utilizando HTML, CSS y Javascript. La idea es proporcionar palabras y que el sistema genere una sopa de letras que sea interactiva y funcional. Aunque no es obligatorio, se sugiere utilizar OOP para este ejercicio.

• 1️⃣ El sistema debe generar una sopa de letras con el tamaño y las palabras proporcionadas.
• 2️⃣ La sopa de letras debe ser cuadrada. El tamaño de columnas es el mismo que el de filas.
• 3️⃣ Las palabras de la sopa de letra se proporcionan en un array de palabras (strings).
• 4️⃣ Las palabras se colocarán en direcciones horizontales, verticales o diagonales.
• 5️⃣ Una vez colocadas las palabras, se rellena las casillas vacías con letras al azar.
• 6️⃣ Se genera una sopa de letras en el DOM, utilizando HTML, CSS y Javascript.
• 7️⃣ Escuchamos eventos en la sopa de letras para poder buscar las palabras.
• 8️⃣ El usuario pulsará en la primera letra, moverse por el resto y soltar en la última.
• 9️⃣ Si se ha pasado por todas las letras de la palabra, se añade clase resolved para mostrarlas en verde.

Recomendaciones y sugerencias para desarrollar:

• Crea al menos 3 clases: WordSearch, WordPlacer y WordSelection.
• La clase WordSearch se ocupa de generar la sopa de letras.
• La clase WordPlacer se encarga de buscar la posición en la que colocar las palabras.
• La clase WordSelection se encarga de detectar cuando el usuario pulsa en palabras.
• Con un new WordSearch(12, words) se crea nuestra sopa de letras de 12x12.

class WordSearch {
  constructor(size, words) {}    // Tareas de inicialización
  generate() {}                  // Genera palabras y llama a fillRandom()
  fillRandom() {}                // Rellena huecos vacios con letras al azar
  getRandomLetter() {}           // Devuelve una letra al azar
  toString() {}                  // Devuelve la sopa en string
  toElement() {}                 // Devuelve la sopa en DOM
  appendTo(container) {}         // Añade la sopa al DOM container
  getStats() {}                  // Opcional: Estadísticas
}

class WordPlacer {
  constructor(grid) {}              // Crea sistema de colocación de palabras
  placeWord(word) {}                // Reintenta colocar palabras
  canPlace(word, x, y, dx, dy) {}   // Comprueba si es posible colocar
  doPlace(word, x, y, dx, dy) {}    // Coloca la palabra en el grid
}

class WordSelection {
  constructor(ws) {}             // Escucha eventos pointer down/up/move
  toIndex({ x, y }) {}           // Pasa celda {x,y} a index (array 2d->1d)
  toCell(index) {}               // Pasa index a celda {x,y} (array 1d->2d)
  expandSelection(start, end) {} // Pasa celda 1 y última, devuelve todas
}