Índice

• 3 en raya
• Descripción
• Instalación
• Repositorios
  • Front
  • Back
• Cómo lanzar la aplicación
• Features
  • Multiusuario
  • Turno inicial aleatorio
  • Partidas reanudables
  • IA
  • Reiniciable
  • Ranking
• Estructura en MongoDB
• Notas

3 en raya

Descripción

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.

Instalación

Sólo hay que lanzar el comando npm i en ambos repositorios:

• 3-en-raya-b
• 3-en-raya-f

Repositorios

Front

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

Back

https://github.com/Icaruk/3-en-raya-b

Tecnologías:

• fastify (en lugar de express)
• entor (en lugar de dotenv)
• mongodb
• jest

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)

Cómo lanzar la aplicación

(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:

• Front: https://tresenraya.icaruk.dev
• Back https://api.tresenraya.icaruk.dev

Features

Multiusuario

El jugador elige su username al empezar la partida.

Turno inicial aleatorio

El inicio del turno será aleatorio, si empieza la IA siempre colocará su ficha en el centro.

Partidas reanudables

Mientras no se pierda la URL de la partida, da igual si se refresca la página.

IA

Tendrá las siguientes prioridades en sus jugadas:

1. Colocar ficha en una posición que le conceda la victoria.
2. Colocar ficha en una posición que impida la victoria del jugador humano.
3. Jugar aleatoriamente en una posición vacía.

Lamentablemente, la IA no intenta hacer la jugada de "el triángulo de la muerte"

⬜⬜⬜
⬜❌⬜
❌⬜❌

Reiniciable

😭 ¿Quieres hacer trampas? ¿Estás perdiendo? Pulsa sobre el botón "Reset" y empieza de nuevo la partida. Como si no hubiera pasado nada 🪄.

Ranking

Se listará el top 10 de jugadores con más victorias.

---

Estructura en MongoDB

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

Notas

• 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.