Palabra-Color | GemRush

En esta sección se resolverán dudas relacionadas con la creación de aplicaciones híbridas, haciendo énfasis en temas relacionados con Javascript y frameworks de Javascript como Angular y Jquery.

Moderator: julianmartinez16

Post Reply
User avatar
migpalg
Posts: 5
Joined: Fri Feb 07, 2020 9:07 am

Palabra-Color | GemRush

Post by migpalg » Fri Feb 14, 2020 9:11 am

Integrantes
Juan Pablo García Díez
Maria Isabel Perez Davila
Miguel Angel Palacio Gonzalez

¿Qué hemos hecho?
Hemos realizado los wireframes del proyecto y a raíz de esto realizamos la estructura en HTML con un CSS base y la navegación con Javascript. Realizamos también una implementación de gestor de estados.

¿Qué vamos hacer?
El mockup y con este, realizar los estilos en CSS que se ajusten el diseño. Además de la lógica del juego, mostrar los puntajes y el historial de juegos.

¿Qué dudas tenemos?
¿Se puede utilizar css flex, grid para hacer que se adapte el diseño a diferentes pantallas?

Repositorio: https://github.com/migpalg/colors
NOTA: Para ver los últimos avances del proyecto, revisar la rama "develop", no la rama "master", ya que en master solamente tendremos las versiones estables.

Wireframe
Image

REPOSITORIO GRUNT
Juan Pablo García Díez: https://github.com/juang0617/WebCSS
Miguel Ángel Palacio González: https://github.com/migpalg/grunt-basics
Last edited by migpalg on Sun Mar 01, 2020 9:56 pm, edited 2 times in total.
Miguel Ángel Palacio González
Ingeniería en Sistemas
5to semestre

User avatar
JuanG0617
Posts: 20
Joined: Mon Jan 28, 2019 3:22 pm
Location: Medellín, Colombia

Post by JuanG0617 » Fri Feb 21, 2020 9:26 am

Alcance técnico:
1. Definir 3 niveles de dificultad (fácil, medio y difícil), en cada nivel se cuenta con menos tiempo inicial para jugar. Igualmente, se da menos tiempo por cada respuesta correcta.
2. La cantidad de opciones varia de un nivel de dificultad al otro.
3. Al final se mostrarán las estadísticas de la partida, y otra opción con las estadísticas globales (historial).
4. El tutorial tendrá la opción de realizar scroll horizontal que le indique al usuario por medio de imágenes y texto como jugar correctamente

Avance Proyecto
Last edited by JuanG0617 on Sun Feb 23, 2020 6:10 pm, edited 2 times in total.
Juan Pablo García Díez :D
Ing. Sistemas
7° Semestre

User avatar
migpalg
Posts: 5
Joined: Fri Feb 07, 2020 9:07 am

Re: Palabra-Color | GemRush

Post by migpalg » Fri Feb 21, 2020 9:44 am

NOTA: Para poder ver los últimos avances del juego, revisar la rama "develop", no la "master". Ya que en master tendremos solamente la versión estable.

¿Qué hemos hecho?
Hemos hecho la navegación, el alcance ténico, hemos implementado flex como display por defecto para que el diseño se adapte a varias pantallas:

Code: Select all

.screen {
  ...
  display: flex;
  flex-direction: column;
}
Y también tenemos la base de la lógica de juego, utilizando prototypes.

¿Qué vamos hacer?
El mockup y con este, realizar los estilos en CSS que se ajusten el diseño. Probar manualmente el juego, y completar funcionalidades.

¿Qué dudas tenemos?
Ninguna :)
Miguel Ángel Palacio González
Ingeniería en Sistemas
5to semestre

User avatar
migpalg
Posts: 5
Joined: Fri Feb 07, 2020 9:07 am

Re: Palabra-Color | GemRush

Post by migpalg » Fri Feb 28, 2020 9:32 am

¿Qué hemos hecho?
Implementamos una base del diseño con el logo y el font principal. También adelantamos en la lógica del juego, sólo nos falta una funcionalidad.

¿Qué vamos hacer?
Terminar de diseñar e implementar el mockup, para realizar pruebas manuales. Y mejorar el sistema de random. Mejorar transiciones entre pantallas

¿Qué dudas tenemos?
Ninguna :)

Evidencias de avance:
1.
Image

2.
Image
Miguel Ángel Palacio González
Ingeniería en Sistemas
5to semestre

User avatar
migpalg
Posts: 5
Joined: Fri Feb 07, 2020 9:07 am

Re: Palabra-Color | GemRush

Post by migpalg » Fri Mar 13, 2020 11:29 am

¿Qué hemos hecho?
Implementamos todo el mockup. Se logró adaptar el aplicativo a varias pantallas. La lógica del juego fue implementada en un prototype aparte del estado global, para mejor rendimiento. Heroku está configurado para correr la aplicación, todos los cambios en la rama master se montan a heroku en el siguiente link: https://colors-game-test.herokuapp.com/ Porfavor acceder desde un dispositivo móvil a esta página web.

¿Qué vamos hacer?
Realizar las correciones hechas por el profesor, añadir sonidos y utilizar el API de Apache Cordova para para hacer vibrar el celular cuando el usuario se equivoque en una respuesta. Montaremos el aplicativo en Apache Cordova y modificaremos el AndroidManifest.xml para cambiar el display name y el ícono de la aplicación.

¿Qué dudas tenemos?
Tuvimos problemas con la tarea "uglify" de grunt, ya que este no acepta sintaxis es6+. Por error de costumbre de utilzar las nuevas versiones de JavaScript tuvimos este error, pero lo solucionamos con algunas lineas de código.

Ejecución en el celular de Juan Pablo, en la página de heroku: El "undefined" de estadísticas es porque no borramos cache de una versión anterior
Image

:D
Miguel Ángel Palacio González
Ingeniería en Sistemas
5to semestre

Post Reply