79 lines
3.2 KiB
Markdown
79 lines
3.2 KiB
Markdown
# 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.
|