- A través de JSX para poder utilizarlo junto con JavaScript en un mismo archivo.
- Usamos React para la User Interface
- Para las páginas de estilo de cada ruta.
Basamos nuestra paleta en el mockup de la entrega 0
(#CAEEEB) Para el background.
(#06A196) Para los títulos, el fondo de los botones y para resaltar textos en general.
(#000000) Para el header, y algunos textos.
(#FFFFFF) Para el título del juego, el texto en los botones y algunos otros textos.
Las fonts también las basamos en el mockup de la entrega 0. Usamos 2:
- Usamos Muro para los títulos, subtitulos y botones. Esta fue la tipografía más parecida al mockup que pudimos encontrar.
- Usamos Segoe UI para los textos descriptivos, esta venía ya instalada.
Se deben seguir los siguientes pasos una vez ya ejecutado el servidor del Backend:
nvm install 18.18.0
rm -rf node_modules
yarn install- Ejecutar
yarn dev
Asegúrate de configurar las variables de entorno con la información de la base de datos en un archivo .env:
VITE_BACKEND_URL="http://localhost:3000"La lógica del juego sigue manteniendo en esencia pero ahora funciona como un Clue con las siguientes reglas:
- Los jugadores intentan resolver un asesinato al descubrir tres cosas:
- Quién es el asesino.
- Con qué arma se cometió el asesinato.
- En qué habitación ocurrió el asesinato.
-
Inicialmente, se colocan cartas de sospechosos, armas y habitaciones en sus respectivas categorías. Una carta de cada categoría se selecciona al azar y se coloca en el sobre confidencial, que contiene la solución del caso. El resto de las cartas se baraja y reparte entre los jugadores y las habitaciones.
-
Para los turnos, los jugadores lanzan un dado para moverse por el tablero hacia las habitaciones que contienen cartas y poder recogerlas.
-
En cuanto a la acusación, cuando un jugador cree que sabe la solución, puede hacerla. Si la acusación es correcta, el jugador gana. Si es incorrecta el jugador queda fuera de la partida, y no puede seguir jugando y no puede volver a acusar.
-
Se gana cuando un jugador hace una acusación correcta, es decir, adivinar correctamente el sospechoso, el arma y la habitación.
-
Mecánica de eliminación de sospechas: Cada carta vista o descartada ayuda a deducir qué cartas están en el sobre confidencial.
Existen detalles en el juego que no logramos trabajar al 100% en el frontend pero que en cuanto al backend sí funcionan. Por ejemplo:
- Para recoger las cartas se debe parar sobre ellas para recogerlas. Ya que, si bien existe toda la lógica de identificar si es que un usuario está dentro de una habitación al llegar a su respectiva puerta o no y de repartir aleatoriamente las cartas en el tablero, no se concretó el hecho de "mover" la imagen del jugador dentro de la habitación respectiva.
Este proyecto incluye un sistema con panel de administración (/admin). Para acceder a la sección de administración, necesitarás las siguientes credenciales:
- Email: [email protected]
- Username: admin
- Contraseña: Admin123