Cambios visuales completos

This commit is contained in:
2026-05-10 17:28:35 +02:00
parent 8b4ca132aa
commit 42f01949c4
33 changed files with 887 additions and 397 deletions
+58
View File
@@ -0,0 +1,58 @@
# Maquetas premium por pantalla
Estas maquetas son la guía de implementación. No son screenshots finales: definen composición, jerarquía y assets por pantalla para mantener coherencia sin romper Flutter/localización/estado.
## Sistema común
- Fondo: noche azul-negro + glow de farol + chispas.
- Paneles: cristal oscuro, borde dorado fino, sheen transparente.
- CTAs: primario dorado/naranja, secundarios cristal oscuro.
- Iconografía: farol/fuego/máscara/voto/QR según fase.
- Assets base: `assets/ui/premium/lantern_radial_glow.png`, `card_sheen_overlay.png`, `sparks_overlay.png`, `corner_orange_glow.png`.
- Assets específicos ya creados: `word_reveal_glow.png`, `vote_danger_glow.png`, `qr_frame_overlay.png`, `timer_ring_glow.png`.
## Entrada y lobby
| Pantalla | Maqueta objetivo | Assets |
| --- | --- | --- |
| Principal | Perfil glass arriba, hero FAROLERO, CTA JUGAR dominante, secundarios debajo. | base |
| Selección modo | Hero “¿Cómo querés jugar?”, dos cards grandes con iconos y glow diferenciado. | base |
| Crear partida | Cabecera de configuración, cards por sección: modo, categoría, jugadores, reglas. CTA fijo visual al final. | base |
| Unirse | Paso guiado: nombre → búsqueda → sala → espera. Estados con cards amplias y feedback luminoso. | base + futuro scan frame |
| Lobby host | QR como pieza hero en marco dorado, stats compactos, lista de usuarios en panel alto, CTA iniciar fuerte. | base + futuro qr frame |
## Palabra y debate
| Pantalla | Maqueta objetivo | Assets |
| --- | --- | --- |
| Ver palabra | Card secreta teatral, gesto de “tap/reveal”, aviso de privacidad. | base + word glow |
| Palabra cliente | Igual que ver palabra, adaptado a remoto. | base + word glow |
| Palabras cliente | Carrusel/lista de jugadores controlados con estado “visto/no visto”. | base |
| Debate host/cliente | Timer o estado central como módulo hero, lista de jugadores activa, accesos a notas/palabra. | base + timer ring futuro |
| Revisión palabra | Bottom sheet oscuro, cards de roles/palabra con glow discreto. | base |
| Notas host/online | Selector de jugador arriba, editor en panel cristal, guardado visible. | base |
## Votación y resultados
| Pantalla | Maqueta objetivo | Assets |
| --- | --- | --- |
| Votación host/cliente | Header “Votación”, candidatos como cards con avatar, peligro rojo y CTA votar. | base + vote glow |
| Resultado host/online | Eliminado como hero card, barras/votos en paneles, decisión clara de siguiente fase. | base |
| Adivinanza | Máscara impostor grande, input protagonista, dos CTAs con tensión visual. | base + danger glow |
| Fin partida host/online | Cinemática de resultado, recompensas, palabra, impostor y votos como cards premium. | rewards + base |
## Soporte
| Pantalla | Maqueta objetivo | Assets |
| --- | --- | --- |
| Gestor host | Dashboard de fase: estado arriba, jugadores, acciones de host, controles claros. | base |
| Historial | Timeline/cards de partidas con resultado y medallas/fuego. | base |
| Reglas | Secciones tipo manual premium con iconos y numeración. | base |
| Ajustes | Perfil, idioma, avatar y opciones en secciones glass. | base |
## Assets específicos
- `assets/ui/premium/word_reveal_glow.png` — usado por `TarjetaPalabraFarolero`.
- `assets/ui/premium/vote_danger_glow.png` — usado en votación cliente.
- `assets/ui/premium/qr_frame_overlay.png` — usado en lobby host.
- `assets/ui/premium/timer_ring_glow.png` — usado en debate cliente.
+78
View File
@@ -0,0 +1,78 @@
# Rediseño premium global de pantallas
Objetivo: que todas las pantallas de Farolero compartan una misma dirección visual premium: noche, farol, cristal oscuro, dorado/naranja, impostores, fuego, partículas y jerarquía clara.
## Regla de implementación
- Las pantallas siguen siendo Flutter real: textos, botones, listas, progreso, formularios y navegación.
- Los assets generados se usan como capas transparentes: glows, chispas, sheens, rayos y overlays.
- Los fondos full-screen pueden ser opacos, pero los overlays deben tener alpha real.
- Primero se aplica un sistema visual común; después se retoca cada pantalla por grupos.
## Asset kit base
| Asset | Uso | Transparencia |
| --- | --- | --- |
| `assets/ui/premium/lantern_radial_glow.png` | Glow hero/farol global | Alpha real, esquinas transparentes |
| `assets/ui/premium/card_sheen_overlay.png` | Brillo sutil para panels/botones | Alpha real, esquinas transparentes |
| `assets/ui/premium/sparks_overlay.png` | Partículas/chispas atmosféricas | Alpha real |
| `assets/ui/premium/corner_orange_glow.png` | Glow decorativo de esquina | Alpha real, visible en una esquina por diseño |
| `assets/ui/premium/word_reveal_glow.png` | Glow para revelar palabra | Alpha real, esquinas transparentes |
| `assets/ui/premium/vote_danger_glow.png` | Glow rojo de votación/peligro | Alpha real, esquinas transparentes |
| `assets/ui/premium/qr_frame_overlay.png` | Marco transparente para QR | Alpha real, esquinas transparentes |
| `assets/ui/premium/timer_ring_glow.png` | Aro de temporizador | Alpha real, esquinas transparentes |
## Pantallas por lote
### Lote 1 — Core shell y entrada
- `pantalla_principal.dart`
- `pantalla_seleccion_modo_juego.dart`
- `pantalla_crear_partida.dart`
- `pantalla_unirse.dart`
- `pantalla_lobby_host.dart`
### Lote 2 — Flujo de palabra y partida
- `pantalla_ver_palabra.dart`
- `pantalla_palabra_cliente.dart`
- `pantalla_palabras_cliente.dart`
- `pantalla_debate.dart`
- `pantalla_debate_cliente.dart`
- `pantalla_revision_palabra.dart`
### Lote 3 — Votación y resultado
- `pantalla_votacion.dart`
- `pantalla_votacion_cliente.dart`
- `pantalla_resultado.dart`
- `pantalla_resultado_online.dart`
- `pantalla_adivinanza.dart`
- `pantalla_fin_partida.dart`
- `pantalla_fin_partida_online.dart`
### Lote 4 — Soporte y configuración
- `pantalla_gestor_host.dart`
- `pantalla_notas.dart`
- `pantalla_notas_online.dart`
- `pantalla_historial.dart`
- `pantalla_reglas.dart`
- `pantalla_ajustes.dart`
## Aplicación global ya iniciada
- `FondoFarolero` ahora usa assets transparentes de glow y sparks para elevar todas las pantallas que ya lo usan.
- `PanelFarolero` ahora incorpora sheen transparente para una base glassmorphism común.
- `BotonFarolero` se hizo más redondeado, con brillo y sombra premium.
- Todas las pantallas con `Scaffold` principal quedan bajo `FondoFarolero` para unificar atmósfera.
- `EncabezadoFarolero` y `EstadoVacioFarolero` centralizan headers/estados premium reutilizables.
## Siguiente paso recomendado
Implementar por lotes, no todo a ciegas en un único mega-cambio. Cada lote debe:
1. Tener maqueta/objetivo visual.
2. Reutilizar el asset kit base.
3. Crear assets nuevos solo si el lote lo necesita.
4. Verificarse visualmente antes de seguir al siguiente.