🕹 Tic Tac Toe o Juego del Tres en Raya

Este juego tic tac toe han sido inspirado por el Curso de React desde cero de MiduDev y ha sido desarrollado por Cristina Correa.

👀 Vista Previa

➡️ Demo desplegada en GitHub Pages: Haz click aquí

Vista del juego tic tac toe

Funcionalidades:

1️⃣ Gestión de turnos:

• Permite a los usuarios tomar turnos de manera ordenada y justa, asegurando que cada jugador tenga su oportunidad para participar.

2️⃣ Identificación del ganador:

• Proporciona una manera clara y visible de determinar quién ha ganado la partida.

3️⃣ Reset del juego:

• El juego se resetea al hacer click en el botón de Resetear
• Una vez habiendo ganado o empatado, aparecerá una modal con un botón de Iniciar un juego nuevo

4️⃣ Lanzar confetti cuando gane la partida:

• Una vez que se termine la partida con una victoria, se lanzará confetti de celebración

5️⃣ Persistir la partida en localStorage:

• Se guarda el estado de la partida en el localStorage

🌱 Características

• Interfaz: Presenta un diseño sencillo y minimalista para una experiencia de usuario sin complicaciones.
• Implementación de Hooks: Utiliza useState de manera extensiva en todas las etapas del juego, brindando una práctica exhaustiva de estos conceptos fundamentales de React.

🛠️ Tecnologías Utilizadas

• HTML
• CSS
• JavaScript
• React

🔎💡 Información

Important

• Este es un proyecto de nivel principiante. No se requieren conocimientos muy avanzados de React, pero sí que es necesario tener conocimientos de JavaScript y CSS.
• Está desarrollado utilizando React. Sin embargo, si prefieres utilizar otra biblioteca o framework, ¡siéntete libre de explorar la posibilidad de integrar lo que prefieras!
• Nivel de dificultad del proyecto: 🔴🔴🔴⭕⭕⭕⭕⭕⭕⭕ (2,5 sobre 10)

Tip

Para empezar:

• Vite Getting Started
• Cómo iniciar un proyecto React con Vite - Carlos Azaustre

Para desplegar en GitHub Pages:

• Deploying React apps to GitHub Pages
• Vite Documentation: Deploying a Static Site in GitHub Pages
• Video: How to deploy a Vite / React application to GitHub pages

A la hora de desarrollar el proyecto, te pueden venir bien los siguientes recursos:

• Curso de React desde cero - MiduDev
• Tutorial: Tres en línea
• How to build a Tic-Tac-Toe Game using React Hooks - GeeksForGeeks
• HTML:
  • MDN: WAI-ARIA basics
  • MDN: "aria-label" attribute
  • MDN: WAI-ARIA Roles
• CSS:
  • Manz.Dev Lenguaje CSS
• JavaScript:
  • Manz.Dev Lenguaje Javascript
  • JavaScript MDN Documentation
• React:
  • React Documentation
  • Preguntas típicas de React.js
• canvas-confetti
  • canvas-confetti npm
  • canvas-confetti github repo
  • canvas-confetti snippets
• VSCode
  • Automatización tareas con VSCode

Note

El comando que utilicé para instalar canvas-confetti fue npm install canvas-confetti -E

A la hora de hacer el deploy tuve varios problemas debido a que me faltaba una de las instrucciones más importantes, así que este es un resumen de cómo hacerlo para un proyecto de React con Vite desplegado en GitHub Pages:

• 1- Partimos de un proyecto ya subido al repositorio, que ya está acabado y solo queremos desplegarlo.
• 2- Abrimos la terminal en la raíz del proyecto y escribimos el comando npm install --save-dev gh-pages para instalar gh-pages
• 3- Vamos al archivo package.json y en la primera línea del json añadimos las líneas "homepage": "https://NOMBRE_USUARIO.github.io/NOMBRE_REPOSITORIO", "name": "NOMBRE_REPOSITORIO", en el caso de este proyecto sería "homepage": "https://criscorreas.github.io/tic-tac-toe/", "name": "tic-tac-toe",
• 4- Seguimos en el package.json, esta vez buscamos el apartado scripts y añadimos estas dos líneas "predeploy": "npm run build", "deploy": "gh-pages -d dist",
• 5- Ahora vamos al archivo vite.config.js y en export default defineConfig({}) tenemos que añadir base: "/NOMBRE_REPOSITORIO/", en el caso de este repo: base: "/tic-tac-toe/", ➡️ Aquí hay que tener cuidado porque en muchos manuales, blogs y vídeos de despliegue en React, no aparece este paso y sin esto, Vite interpreta la base como "/" y da un error de despliegue ya que no se verá la bien la web
• 6- Hacemos un add, commit y push de los cambios
• 7- Por último hacemos un npm run deploy lo cual creará la carpeta dist y la desplegará en Github Pages Aquí tienes un link para ver los archivos package.json y vite.config.js y tenerlos como referencia.

🖥 Instrucciones para Ejecutar el Proyecto

• Clona este repositorio en tu máquina local: git clone https://github.com/CrisCorreaS/tic-tac-toe.git
• Instala las dependencias:

    cd tic-tac-toe
  

    npm install
  

• Ejecuta la aplicación:

    npm start
  

Esto iniciará la aplicación en modo de desarrollo y podrás verla en tu navegador predeterminado. ¡Y eso es todo! Ahora cualquier persona puede usar el juego del tres en raya.

✨ Contribuciones

¡Las contribuciones son bienvenidas! Si deseas mejorar el juego tic tac toe existente, como agregar más contenido o mejorar el diseño, no dudes en enviar tus pull requests. También puedes sugerir nuevas funcionalidades o brindar retroalimentación para hacer que este proyecto sea aún mejor.

🎯 Propósito del Proyecto

Este proyecto tiene como objetivo principal facilitar mi aprendizaje en tecnologías clave para el desarrollo web.

➡️ Licencia

Este proyecto está licenciado bajo MIT License.