nueva pantalla molona

2026-05-10 21:59:38 +02:00
parent 8359d54000
commit 79a66c2e82
11 changed files with 131 additions and 56 deletions
@@ -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.
@@ -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,
@@ -102,48 +102,9 @@ class _PantallaFinPartidaOnlineState extends State<PantallaFinPartidaOnline> {
          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<PantallaFinPartidaOnline> {
  }
 }

+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;

@@ -53,6 +53,8 @@ class _PantallaLobbyHostState extends State<PantallaLobbyHost> {
          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<PantallaLobbyHost> {
                        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<PantallaLobbyHost> {
    }
  }
 }
+
+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),
+      ),
+    );
+  }
+}
@@ -173,6 +173,7 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
          },
        ),
      ),
+      ),
    );
  }

@@ -444,13 +445,16 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
      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<PantallaUnirse> {
                const SizedBox(height: 16),
                _buildError(_error!),
              ],
-            ],
+              ],
+            ),
          ),
        ),
      ),
-      ),
    );
  }

@@ -518,6 +522,8 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
          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<PantallaUnirse> {
          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<PantallaUnirse> {
    );
  }
 }
+
+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),
+      ),
+    );
+  }
+}