- 3 en raya
- Descripción
- Instalación
- Repositorios
- Cómo lanzar la aplicación
- Features
- Estructura en MongoDB
- Notas
El juego consiste en un tablero de 3x3 en el cual dos jugadores colocan fichas en los espacios vacíos. Quien consiga tener 3 fichas consecutivas en horizontal, vertical o diagonal, gana. Si el tablero se llena sin ningun ganador, es un empate.
Sólo hay que lanzar el comando npm i
en ambos repositorios:
- 3-en-raya-b
- 3-en-raya-f
https://github.com/Icaruk/3-en-raya-f
Tecnologías:
- react (con vite en lugar de CRA)
- mantine para la UI
- dame como cliente HTTP (en lugar de axios)
- react router
Comandos:
npm dev
npm build
https://github.com/Icaruk/3-en-raya-b
Tecnologías:
Comandos:
npm start
(apunta a producción)npm run start:mon
(apunta a producción con nodemon)npm run start:local
(apunta a local con nodemon)npm run jest
(para ejecutar los tests)
(Los archivos de entorno están pusheados para facilidad de la review, el usuario de mongo tiene acceso limitado el usuario ya no tiene permisos)
- En el front:
npm run dev
- En el back:
npm run start
Los puertos son:
- Front: http://localhost:6500
- Back: http://localhost:6600
📦También he hecho deploy a producción:
El jugador elige su username al empezar la partida.
El inicio del turno será aleatorio, si empieza la IA siempre colocará su ficha en el centro.
Mientras no se pierda la URL de la partida, da igual si se refresca la página.
Tendrá las siguientes prioridades en sus jugadas:
- Colocar ficha en una posición que le conceda la victoria.
- Colocar ficha en una posición que impida la victoria del jugador humano.
- Jugar aleatoriamente en una posición vacía.
Lamentablemente, la IA no intenta hacer la jugada de "el triángulo de la muerte"
⬜⬜⬜
⬜❌⬜
❌⬜❌
😭 ¿Quieres hacer trampas? ¿Estás perdiendo? Pulsa sobre el botón "Reset" y empieza de nuevo la partida. Como si no hubiera pasado nada 🪄.
Se listará el top 10 de jugadores con más victorias.
Podemos saber:
- El jugador que jugó
- Cómo quedó el tablero
- Cuándo empezó y cuándo terminó (y por lo tanto la duración)
- Quién ganó y cuál es el estado de la partida
-
En el front, se podría externalizar las funciones encargadas de hacer peticiones a la API, pero de momento como sólo se usan una vez, no lo he considerado necesario.
-
En el back se podría separar en 3 capas:
- Controladores (encargado de procesar la petición que viene del router)
- Servicios (encargado de la lógica de negocio)
- Acceso a datos (encargado del acceso a la base de datos)
Pero al ser algo tan sencillo he decidido unificar todo en el mismo archivo.
-
En el front, podría haber usado una librería como cajache para cachear las peticiones HTTP repetidas y reducir carga del back, pero como es algo sencillo no he querido complicarlo más.