Piedra, Papel o Tijera ✊📄✂️

Aplicación web desarrollada con React, TypeScript y Zustand que implementa el clásico juego de Piedra, Papel o Tijera contra la CPU.

El proyecto fue creado con el objetivo de practicar conceptos modernos de React, gestión de estado global con Zustand, tipado estricto con TypeScript y organización modular de componentes.

---

🚀 Tecnologías utilizadas

• React
• TypeScript
• Zustand
• Vite
• Tailwind CSS

---

✨ Características

• Selección de jugada mediante interfaz visual.
• Generación aleatoria de la jugada de la CPU.
• Determinación automática del resultado de cada ronda.
• Sistema de puntuación acumulativa.
• Persistencia de la puntuación máxima utilizando Local Storage.
• Gestión de estado global con Zustand.
• Arquitectura modular y reutilizable.
• Tipado estricto con TypeScript.

---

🏗️ Arquitectura del proyecto

src/ 
  components/ 
    Button.tsx 
    Choice.tsx 
    Result.tsx 
    Score.tsx 
  constants/ 
    answers.ts 
    status.ts 
    steps.ts 
  hooks/ 
    usePlayGame.ts 
  modules/ 
    SelectionModule.tsx 
    PlayModule.tsx 
    GameOverModule.tsx 
  store/ 
    GameStore.ts 
    ScoreStore.ts 
  types/ 
    answer.ts 
    status.ts 
  App.tsx 
  main.tsx

---

🎮 Flujo del juego

El jugador selecciona Piedra, Papel o Tijera.
La aplicación genera una elección aleatoria para la CPU.
Se muestra una cuenta regresiva antes de revelar el resultado.
Se determina el ganador de la ronda.

Si el jugador gana:

• Aumenta la puntuación
• Puede continuar jugando

Si hay empate:

• Puede jugar nuevamente

Si la CPU gana:

• Finaliza la partida
• Se muestra la pantalla de Game Over

---

📚 Conceptos aplicados

React

• Componentes funcionales
• Hooks personalizados
• useState
• useEffect
• useCallback
• useMemo
• Renderizado condicional

TypeScript

• Interfaces
• Union Types
• Literal Types
• Inferencia de tipos
• Tipado de Props

Zustand

• Estado global desacoplado
• Selectores de estado
• Actualización de stores
• Persistencia de datos mediante Local Storage

---

🔮 Mejoras futuras

• Agregar tests unitarios con Vitest.
• Implementar animaciones con Framer Motion.
• Incorporar estadísticas de partidas.
• Agregar niveles de dificultad para la CPU.
• Implementar modo multijugador.
• Persistir el estado utilizando middleware de Zustand.

---

👨‍💻 Autor Jorge Vargas

Desarrollador Full Stack con experiencia en:

• React
• TypeScript
• .NET
• SQL Server
• APIs REST
• Azure

Proyecto desarrollado con fines de aprendizaje y fortalecimiento de habilidades en desarrollo Frontend moderno.