diff --git a/assets/ui/generated/final_rewards/cinematic_burst.png b/assets/ui/generated/final_rewards/cinematic_burst.png new file mode 100644 index 0000000..8176eaf Binary files /dev/null and b/assets/ui/generated/final_rewards/cinematic_burst.png differ diff --git a/assets/ui/generated/final_rewards/cinematic_burst_source_chroma.png b/assets/ui/generated/final_rewards/cinematic_burst_source_chroma.png new file mode 100644 index 0000000..0139fe9 Binary files /dev/null and b/assets/ui/generated/final_rewards/cinematic_burst_source_chroma.png differ diff --git a/assets/ui/generated/join_lobby/qr_frame.png b/assets/ui/generated/join_lobby/qr_frame.png new file mode 100644 index 0000000..f3f7812 Binary files /dev/null and b/assets/ui/generated/join_lobby/qr_frame.png differ diff --git a/assets/ui/generated/join_lobby/qr_frame_source_chroma.png b/assets/ui/generated/join_lobby/qr_frame_source_chroma.png new file mode 100644 index 0000000..58748a6 Binary files /dev/null and b/assets/ui/generated/join_lobby/qr_frame_source_chroma.png differ diff --git a/assets/ui/generated/join_lobby/signal_art.png b/assets/ui/generated/join_lobby/signal_art.png new file mode 100644 index 0000000..549f49e Binary files /dev/null and b/assets/ui/generated/join_lobby/signal_art.png differ diff --git a/assets/ui/generated/join_lobby/signal_art_source_chroma.png b/assets/ui/generated/join_lobby/signal_art_source_chroma.png new file mode 100644 index 0000000..13f0efb Binary files /dev/null and b/assets/ui/generated/join_lobby/signal_art_source_chroma.png differ diff --git a/docs/professional_generated_ui_art_plan.md b/docs/professional_generated_ui_art_plan.md index b03992b..4d40555 100644 --- a/docs/professional_generated_ui_art_plan.md +++ b/docs/professional_generated_ui_art_plan.md @@ -125,3 +125,18 @@ Assets rehechos con el flujo correcto del skill `imagegen` + `premium-game-ui`: - `assets/ui/generated/shared/glass_panel_frame.png` ? generado con `image_gen`, source chroma-key en `glass_panel_frame_source_chroma.png`, alpha removido localmente. Validaci?n: todos los PNG finales son RGBA y tienen alpha 0 en las cuatro esquinas. +## Phase 3 generated assets + +Assets creados con `image_gen` + chroma-key removido localmente; NO son assets program?ticos: + +- `assets/ui/generated/join_lobby/signal_art.png` ? hero transparente para unirse, discovery y lobby host. Source: `signal_art_source_chroma.png`. +- `assets/ui/generated/join_lobby/qr_frame.png` ? marco QR transparente para que Flutter renderice el QR real en el centro. Source: `qr_frame_source_chroma.png`. +- `assets/ui/generated/final_rewards/cinematic_burst.png` ? burst cinematogr?fico transparente para resultados/recompensas offline y online. Source: `cinematic_burst_source_chroma.png`. + +Validaci?n: los tres PNG finales son RGBA y tienen alpha 0 en las cuatro esquinas. + +Integraci?n: + +- `pantalla_unirse.dart`: usa `signal_art.png` como arte de conexi?n manteniendo formularios, discovery, QR scanner y estado en Flutter. +- `pantalla_lobby_host.dart`: usa `signal_art.png` como cabecera visual y `qr_frame.png` como overlay, manteniendo `QrImageView` real. +- `pantalla_fin_partida.dart` y `pantalla_fin_partida_online.dart`: usan `cinematic_burst.png` en el hero de resultados, manteniendo textos, progreso, historial y navegaci?n como widgets reales. diff --git a/lib/pantallas/pantalla_fin_partida.dart b/lib/pantallas/pantalla_fin_partida.dart index 73ef07f..732d3c9 100644 --- a/lib/pantallas/pantalla_fin_partida.dart +++ b/lib/pantallas/pantalla_fin_partida.dart @@ -266,10 +266,10 @@ class _HeroResultado extends StatelessWidget { alignment: Alignment.center, children: [ Image.asset( - 'assets/rewards/medal_unlock_burst.png', - width: 210, - height: 210, - fit: BoxFit.cover, + 'assets/ui/generated/final_rewards/cinematic_burst.png', + width: 260, + height: 260, + fit: BoxFit.contain, ), Container( width: 154, diff --git a/lib/pantallas/pantalla_fin_partida_online.dart b/lib/pantallas/pantalla_fin_partida_online.dart index d723ec2..7ad4c99 100644 --- a/lib/pantallas/pantalla_fin_partida_online.dart +++ b/lib/pantallas/pantalla_fin_partida_online.dart @@ -102,48 +102,9 @@ class _PantallaFinPartidaOnlineState extends State { padding: const EdgeInsets.all(24), child: Column( children: [ - Container( - width: double.infinity, - padding: const EdgeInsets.all(32), - decoration: BoxDecoration( - gradient: LinearGradient( - colors: ganaronJugadores - ? [ - TemaApp.colorVerde.withValues(alpha: 0.3), - TemaApp.colorVerde.withValues(alpha: 0.1), - ] - : [ - TemaApp.colorAcento.withValues(alpha: 0.3), - TemaApp.colorAcento.withValues(alpha: 0.1), - ], - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - ), - borderRadius: BorderRadius.circular(20), - border: Border.all( - color: ganaronJugadores - ? TemaApp.colorVerde - : TemaApp.colorAcento, - ), - ), - child: Column( - children: [ - Text( - ganaronJugadores ? '🎉' : '🎭', - style: const TextStyle(fontSize: 64), - ), - const SizedBox(height: 16), - Text( - ganaronJugadores ? l10n.playersWin : l10n.impostorsWin, - style: Theme.of(context).textTheme.headlineMedium?.copyWith( - color: ganaronJugadores - ? TemaApp.colorVerde - : TemaApp.colorAcento, - ), - textAlign: TextAlign.center, - ), - ], - ), + _ResultadoOnlineHero( + ganaronJugadores: ganaronJugadores, + titulo: ganaronJugadores ? l10n.playersWin : l10n.impostorsWin, ), const SizedBox(height: 24), if (_progreso != null) ...[ @@ -286,6 +247,59 @@ class _PantallaFinPartidaOnlineState extends State { } } +class _ResultadoOnlineHero extends StatelessWidget { + final bool ganaronJugadores; + final String titulo; + + const _ResultadoOnlineHero({ + required this.ganaronJugadores, + required this.titulo, + }); + + @override + Widget build(BuildContext context) { + final color = ganaronJugadores ? TemaApp.colorVerde : TemaApp.colorAcento; + return Container( + width: double.infinity, + padding: const EdgeInsets.fromLTRB(20, 18, 20, 24), + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + color.withValues(alpha: 0.20), + const Color(0xFF101827).withValues(alpha: 0.68), + ], + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + ), + borderRadius: BorderRadius.circular(28), + border: Border.all(color: color.withValues(alpha: 0.65)), + ), + child: Column( + children: [ + Image.asset( + 'assets/ui/generated/final_rewards/cinematic_burst.png', + height: 250, + fit: BoxFit.contain, + opacity: const AlwaysStoppedAnimation(0.95), + ), + const SizedBox(height: 8), + Text( + titulo, + style: Theme.of(context).textTheme.headlineMedium?.copyWith( + color: color, + fontWeight: FontWeight.w900, + shadows: [ + Shadow(color: color.withValues(alpha: 0.75), blurRadius: 18), + ], + ), + textAlign: TextAlign.center, + ), + ], + ), + ).animate().fadeIn(duration: 320.ms).slideY(begin: -0.08); + } +} + class _TarjetaProgresoGamificacion extends StatelessWidget { final ProgresoGamificacionUsuario progreso; diff --git a/lib/pantallas/pantalla_lobby_host.dart b/lib/pantallas/pantalla_lobby_host.dart index 85b9ddb..22711bf 100644 --- a/lib/pantallas/pantalla_lobby_host.dart +++ b/lib/pantallas/pantalla_lobby_host.dart @@ -53,6 +53,8 @@ class _PantallaLobbyHostState extends State { padding: const EdgeInsets.all(24), child: Column( children: [ + const _LobbySignalArt(), + const SizedBox(height: 12), EncabezadoFarolero( icono: Icons.wifi_tethering, titulo: widget.nombreSala, @@ -91,7 +93,7 @@ class _PantallaLobbyHostState extends State { Positioned.fill( child: IgnorePointer( child: Image.asset( - 'assets/ui/premium/qr_frame_overlay.png', + 'assets/ui/generated/join_lobby/qr_frame.png', fit: BoxFit.cover, ), ), @@ -365,3 +367,20 @@ class _PantallaLobbyHostState extends State { } } } + +class _LobbySignalArt extends StatelessWidget { + const _LobbySignalArt(); + + @override + Widget build(BuildContext context) { + return SizedBox( + height: 104, + width: double.infinity, + child: Image.asset( + 'assets/ui/generated/join_lobby/signal_art.png', + fit: BoxFit.contain, + opacity: const AlwaysStoppedAnimation(0.90), + ), + ); + } +} diff --git a/lib/pantallas/pantalla_unirse.dart b/lib/pantallas/pantalla_unirse.dart index c85f5f6..1a162bc 100644 --- a/lib/pantallas/pantalla_unirse.dart +++ b/lib/pantallas/pantalla_unirse.dart @@ -173,6 +173,7 @@ class _PantallaUnirseState extends State { }, ), ), + ), ); } @@ -444,13 +445,16 @@ class _PantallaUnirseState extends State { appBar: AppBar(title: Text(l10n.joinGameTitle)), body: FondoFarolero( intenso: true, - child: Padding( - padding: const EdgeInsets.all(32), - child: Form( - key: _formKey, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ + child: SafeArea( + child: SingleChildScrollView( + padding: const EdgeInsets.all(32), + child: Form( + key: _formKey, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const _JoinLobbySignalArt(height: 190), + const SizedBox(height: 14), EncabezadoFarolero( icono: Icons.bluetooth_searching, titulo: l10n.joinGameTitle, @@ -481,11 +485,11 @@ class _PantallaUnirseState extends State { const SizedBox(height: 16), _buildError(_error!), ], - ], + ], + ), ), ), ), - ), ); } @@ -518,6 +522,8 @@ class _PantallaUnirseState extends State { padding: const EdgeInsets.all(24), child: Column( children: [ + const _JoinLobbySignalArt(height: 150), + const SizedBox(height: 12), EncabezadoFarolero( icono: _conectando ? Icons.sync : Icons.radar, titulo: _conectando @@ -718,6 +724,8 @@ class _PantallaUnirseState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ + const _JoinLobbySignalArt(height: 160), + const SizedBox(height: 12), EncabezadoFarolero( icono: Icons.check_circle, titulo: l10n.connectedWaiting, @@ -910,3 +918,22 @@ class _PantallaUnirseState extends State { ); } } + +class _JoinLobbySignalArt extends StatelessWidget { + final double height; + + const _JoinLobbySignalArt({required this.height}); + + @override + Widget build(BuildContext context) { + return SizedBox( + height: height, + width: double.infinity, + child: Image.asset( + 'assets/ui/generated/join_lobby/signal_art.png', + fit: BoxFit.contain, + opacity: const AlwaysStoppedAnimation(0.94), + ), + ); + } +}