Home CV Portfolio Comunidad Recursos

¿De qué va el proyecto?

<aside> 🌊 Crossword HA! es un crucigrama digital que diseñé y programé en JavaScript para Historia Arte (HA!), una enciclopedia online de bellas artes creada por Miguel Calvo y Óscar Otero.

</aside>

<aside> 🌊 Conocí a Óscar en la #Tarugo20 y así surgió la colaboración 🤝  Mi rol fue diseñar la funcionalidad y programar una primera versión en JS vanilla, que él posteriormente adaptaría a Web Components.

</aside>

<aside> 🌊 El proyecto cuenta con funcionalidades para facilitar la experiencia de juego en versión digital, un sistema de puntuación y la opción de compartir tu resultado en redes. Lo cuento en detalle más abajo.

</aside>

¿Qué he aprendido?

• Trabajar con **tablas HTML a nivel pro**
• Implementar recursos nativos eficazmente, como modales nativas con dialog
• **Mejorar la experiencia** de usuario ideando y programando diversas funcionalidades.

Funcionalidades del producto

• Caja de pistas 🔍
  • Cada pista se pinta individualmente, siempre en relación a la casilla destacada y su dirección. Si permanecemos en una misma casilla y cambiamos de dirección, también cambiará la pista.
  • La experiencia es diferente al crucigrama tradicional, ya que no se pueden conocer de antemano todas las pistas, pero simplifica la interfaz en dispositivos móviles y reduce la carga cognitiva de quien esté jugando.
• Destacado de casillas ⚠️
  • Esta funcionalidad ayuda a concentrar la atención en la palabra que estamos resolviendo. Al seleccionar una celda, esta resaltará visualmente junto con las celdas adyacentes que conforman la palabra en cuestión. Esto permite una mayor claridad visual y facilita la resolución de las pistas.
• Cambio de dirección 🔃
  • Si una celda tiene dos posibles direcciones, pulsando "ENTER" o clicando/pulsando sobre la celda cambiaremos la orientación, pasando de vertical a horizontal y viceversa.
• Escritura y borrado fluidos ✍️
  • Esta funcionalidad facilita la escritura y el borrado, tanto en dispositivos móviles como a través de teclado.
  • El foco fluye de una casilla a la siguiente mientras escribimos o borramos, sin necesidad de pulsar tabs o flechas.
  • El foco saltará las casillas completadas, buscando la siguiente casilla vacía.
  • Si estamos resolviendo una palabra horizontal, una vez la completemos, el foco viajará a la siguiente palabra horizontal. Por supuesto, también funciona en vertical.
  • Si completamos la casilla final del crucigrama, el foco regresará a la primera casilla.
• Temporizador ⏳
  • Un temporizador calcula el tiempo empleado por la persona en completar el juego, permitiendo al usuario poner a prueba sus habilidades de resolución de crucigramas en el menor tiempo posible.
  • El temporizador se activa cuando se escribe la primera letra.
  • Si cerramos la ventana o esta se refresca en medio de la partida, el tiempo se parará y se guardará, activándose de nuevo cuando retomemos el juego.
• Almacenamiento de progreso 📋
  • La página utiliza el localStorage para guardar avances en el crucigrama. De esta forma, al recargar la página, la información estará de nuevo disponible.
  • La puntuación, el tiempo transcurrido y todas nuestras respuestas son los elementos que se guardan.
• Resolver todo ✅
  • Un botón revela el resultado del crucigrama.