Diseñar interfaz de combate y explorador de batallas

[jgm847]

📄 Descripción

Se debe diseñar la interfaz de usuario para el sistema de combate entre mazos y el explorador de batallas en MagicVS.

Por un lado, se diseñará la experiencia visual del combate (tablero, cartas, jugadores, interacción).
Por otro, se diseñará una vista previa donde los usuarios puedan buscar, explorar y seleccionar batallas disponibles o históricas.

Este issue está centrado únicamente en el diseño funcional y visual, sin incluir implementación en código.

---

🎯 Objetivos

• Diseñar la interfaz del combate entre mazos
• Diseñar el explorador de batallas (match browser)
• Definir flujo completo: exploración → selección → combate
• Crear una experiencia clara, intuitiva y atractiva
• Preparar base visual para futura implementación

---

🛠️ Alcance

Incluye:

• Diseño de pantalla de combate
• Diseño de explorador/listado de batallas
• Diseño de búsqueda y filtros
• Flujo de navegación entre vistas

No incluye:

• Implementación de lógica de combate
• Backend o sincronización en tiempo real
• Matchmaking real

---

🛠️ Tareas

🔎 Explorador de batallas

• Diseñar pantalla de listado de batallas
• Definir filtros de búsqueda
• Diseñar item de batalla (card/list)
• Definir acciones disponibles (ver, unirse, simular)
• Diseñar estados (vacío, carga)

---

⚔️ Combate

• Diseñar estructura del tablero
• Definir zonas de juego
• Diseñar cartas en mesa y mano
• Diseñar interacción visual
• Definir flujo de partida

---

🔄 Navegación

• Definir flujo entre explorador → combate
• Definir estados intermedios (cargando partida, esperando oponente)

---

📂 Elementos a definir en el diseño

---

🔎 Explorador de batallas

📋 Listado de batallas

Cada item debe mostrar:

• Nombre o ID de la batalla
• Jugadores (o mazos enfrentados)
• Formato (Standard, Modern…)
• Estado:
  • En curso
  • Finalizada
  • Disponible
• Fecha o duración
• Popularidad o visualizaciones (opcional)

---

🔍 Filtros y búsqueda

• Buscar por nombre de mazo o jugador
• Filtrar por formato
• Filtrar por estado
• Ordenar por:
  • más recientes
  • más populares

---

🎮 Acciones

• Ver batalla (modo espectador)
• Iniciar combate (si es simulación)
• Unirse (futuro)

---

🧩 Componentes

• Barra de búsqueda
• Panel de filtros
• Lista/grid de batallas
• Card de batalla
• Botones de acción

---

⚔️ Pantalla de combate

🧑‍🤝‍🧑 Jugadores

• Nombre
• Vida
• Mazo seleccionado
• Indicador de turno

Posiciones:

• Usuario → abajo
• Oponente → arriba

---

🃏 Zonas de juego

• Mano
• Campo de batalla
• Cementerio
• Biblioteca
• Exilio (opcional)

---

⚔️ Campo de batalla

• Cartas en juego visibles
• Organización clara por zonas
• Estado de cartas:
  • giradas/enderezadas

---

✋ Mano

• Cartas en abanico
• Interacción:
  • hover / click
  • selección

---

🎮 Interacciones

• Selección de cartas
• Indicadores visuales
• Posible drag & drop (opcional)
• Feedback visual claro

---

🔄 Estado de partida

• Indicador de turno
• Fase o estado
• Botón de pasar turno

---

🏁 Fin de partida

• Modal o pantalla final:
  • victoria / derrota
  • resumen básico

---

🔄 Flujo de usuario

1. Usuario entra en explorador
2. Busca o filtra batallas
3. Selecciona una batalla
4. Accede a pantalla de combate
5. Visualiza o interactúa

---

📐 Consideraciones de diseño

• Interfaz clara y no saturada
• Separación visual de zonas
• Feedback inmediato en acciones
• Escalabilidad para futuras mecánicas
• Diseño responsive

---

🎨 Inspiración

• MTG Arena
• Hearthstone
• Plataformas de replay de partidas

---

✅ Criterios de aceptación

• Existe diseño del explorador de batallas
• Existe diseño del combate
• El flujo explorador → combate está definido
• La UI es clara y comprensible
• El diseño es escalable y reutilizable
• Puede servir como base directa para implementación

---

📌 Notas

• Priorizar simplicidad en primera versión
• No es necesario cubrir todas las reglas de Magic
• Diseñar pensando en futuras funcionalidades:
  • multijugador
  • espectador en tiempo real
  • ranking de partidas