Files
farolero/docs/premium_screen_redesign_plan.md
T
2026-05-10 17:28:35 +02:00

3.2 KiB

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.