super assets

This commit is contained in:
2026-05-10 21:32:28 +02:00
parent 852fbfa225
commit a5a4040daf
29 changed files with 464 additions and 319 deletions

View File

@@ -323,9 +323,8 @@ class _PantallaCrearPartidaState extends State<PantallaCrearPartida> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
EncabezadoFarolero(
icono: Icons.groups,
titulo: '¿Cómo quieres jugar?',
_CrearPartidaHeader(
titulo: '?C?mo quieres jugar?',
subtitulo: l10n.playersRange,
),
const SizedBox(height: 12),
@@ -610,3 +609,63 @@ class _PantallaCrearPartidaState extends State<PantallaCrearPartida> {
);
}
}
class _CrearPartidaHeader extends StatelessWidget {
final String titulo;
final String subtitulo;
const _CrearPartidaHeader({
required this.titulo,
required this.subtitulo,
});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
final ancho = constraints.maxWidth.clamp(320.0, 720.0).toDouble();
return Center(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ancho),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
AspectRatio(
aspectRatio: 2,
child: Image.asset(
'assets/ui/generated/create_game/create_game_header_art.png',
fit: BoxFit.contain,
opacity: const AlwaysStoppedAnimation(0.96),
),
),
const SizedBox(height: 8),
Text(
titulo,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
color: TemaApp.colorDorado,
fontWeight: FontWeight.w900,
shadows: [
Shadow(
color: TemaApp.colorNaranja.withValues(alpha: 0.55),
blurRadius: 16,
),
],
),
),
const SizedBox(height: 4),
Text(
subtitulo,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: TemaApp.colorTextoSecundario,
),
),
],
),
),
);
},
);
}
}

View File

@@ -1,5 +1,3 @@
import 'dart:math' as math;
import 'package:farolero/l10n/generated/app_localizations.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
@@ -31,8 +29,12 @@ class PantallaPrincipal extends StatelessWidget {
intenso: true,
child: Stack(
children: [
const Positioned.fill(
child: IgnorePointer(child: CustomPaint(painter: _InicioFondoPainter())),
Positioned.fill(
child: Image.asset(
'assets/ui/generated/main/main_atmosphere_bg.png',
fit: BoxFit.cover,
alignment: Alignment.center,
),
),
Positioned.fill(
child: IgnorePointer(
@@ -53,92 +55,108 @@ class PantallaPrincipal extends StatelessWidget {
),
),
SafeArea(
child: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(20, 18, 20, 24),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 430),
child: Column(
children: [
_PerfilInicioPremium(
nombre: perfil.nombre,
nick: perfil.nick,
avatarAsset: perfil.avatarAsset,
fuego: gamificacion.fuego,
medallas: gamificacion.medallas,
onAjustes: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const PantallaAjustes(),
),
);
},
ajustesTooltip: l10n.settings,
).animate().fadeIn(duration: 280.ms).slideY(begin: -0.12),
const SizedBox(height: 42),
_HeroInicioPremium(subtitulo: l10n.subtitle)
.animate()
.fadeIn(delay: 120.ms, duration: 420.ms)
.scale(begin: const Offset(0.92, 0.92)),
const SizedBox(height: 46),
_BotonInicioPremium.primario(
texto: 'Jugar',
icono: Icons.play_arrow_rounded,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const PantallaSeleccionModoJuego(),
),
);
},
).animate().fadeIn(delay: 240.ms).slideY(begin: 0.16),
const SizedBox(height: 14),
_BotonInicioPremium.secundario(
texto: l10n.joinGame,
icono: Icons.bolt_rounded,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const PantallaUnirse()),
);
},
).animate().fadeIn(delay: 320.ms).slideY(begin: 0.16),
const SizedBox(height: 12),
_BotonInicioPremium.oscuro(
texto: l10n.howToPlay,
icono: Icons.question_mark_rounded,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const PantallaReglas()),
);
},
).animate().fadeIn(delay: 390.ms).slideY(begin: 0.16),
const SizedBox(height: 14),
_AccesoHistorialPremium(
etiqueta: 'Historial',
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const PantallaHistorial()),
);
},
).animate().fadeIn(delay: 470.ms).slideY(begin: 0.14),
const SizedBox(height: 28),
Text(
l10n.playersRange,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: TemaApp.colorTextoSecundario.withValues(alpha: 0.82),
letterSpacing: 0.8,
),
child: LayoutBuilder(
builder: (context, constraints) {
final isWide = constraints.maxWidth >= 700;
final maxContentWidth = isWide ? 540.0 : 430.0;
final horizontalPadding = isWide ? 32.0 : 20.0;
return Center(
child: SingleChildScrollView(
padding: EdgeInsets.fromLTRB(
horizontalPadding,
18,
horizontalPadding,
24,
),
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: maxContentWidth),
child: Column(
children: [
_PerfilInicioPremium(
nombre: perfil.nombre,
nick: perfil.nick,
avatarAsset: perfil.avatarAsset,
fuego: gamificacion.fuego,
medallas: gamificacion.medallas,
onAjustes: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const PantallaAjustes(),
),
);
},
ajustesTooltip: l10n.settings,
).animate().fadeIn(duration: 280.ms).slideY(begin: -0.12),
SizedBox(height: isWide ? 48 : 34),
_HeroInicioPremium(
subtitulo: l10n.subtitle,
compact: constraints.maxHeight < 760,
)
.animate()
.fadeIn(delay: 120.ms, duration: 420.ms)
.scale(begin: const Offset(0.92, 0.92)),
SizedBox(height: isWide ? 46 : 34),
_BotonInicioPremium.primario(
texto: 'Jugar',
icono: Icons.play_arrow_rounded,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const PantallaSeleccionModoJuego(),
),
);
},
).animate().fadeIn(delay: 240.ms).slideY(begin: 0.16),
const SizedBox(height: 14),
_BotonInicioPremium.secundario(
texto: l10n.joinGame,
icono: Icons.bolt_rounded,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const PantallaUnirse()),
);
},
).animate().fadeIn(delay: 320.ms).slideY(begin: 0.16),
const SizedBox(height: 12),
_BotonInicioPremium.oscuro(
texto: l10n.howToPlay,
icono: Icons.question_mark_rounded,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const PantallaReglas()),
);
},
).animate().fadeIn(delay: 390.ms).slideY(begin: 0.16),
const SizedBox(height: 14),
_AccesoHistorialPremium(
etiqueta: 'Historial',
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const PantallaHistorial()),
);
},
).animate().fadeIn(delay: 470.ms).slideY(begin: 0.14),
const SizedBox(height: 28),
Text(
l10n.playersRange,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: TemaApp.colorTextoSecundario.withValues(alpha: 0.82),
letterSpacing: 0.8,
),
),
],
),
],
),
),
),
),
);
},
),
),
],
@@ -252,56 +270,45 @@ class _PerfilInicioPremium extends StatelessWidget {
class _HeroInicioPremium extends StatelessWidget {
final String subtitulo;
final bool compact;
const _HeroInicioPremium({required this.subtitulo});
const _HeroInicioPremium({
required this.subtitulo,
required this.compact,
});
@override
Widget build(BuildContext context) {
final heroSize = compact ? 148.0 : 188.0;
return SizedBox(
height: 230,
height: compact ? 260 : 320,
child: Stack(
alignment: Alignment.center,
children: [
const Positioned.fill(
child: IgnorePointer(child: CustomPaint(painter: _HeroInicioPainter())),
Positioned.fill(
child: Image.asset(
'assets/ui/premium/lantern_radial_glow.png',
fit: BoxFit.contain,
opacity: const AlwaysStoppedAnimation(0.48),
),
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 92,
height: 92,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
TemaApp.colorDorado.withValues(alpha: 0.92),
TemaApp.colorNaranja.withValues(alpha: 0.55),
Colors.black.withValues(alpha: 0.78),
],
),
border: Border.all(color: TemaApp.colorDorado, width: 3),
boxShadow: [
BoxShadow(
color: TemaApp.colorNaranja.withValues(alpha: 0.65),
blurRadius: 42,
spreadRadius: 7,
),
],
),
child: const Icon(
Icons.lightbulb_rounded,
color: Color(0xFF251304),
size: 54,
),
Image.asset(
'assets/ui/generated/main/main_lantern_hero.png',
width: heroSize,
height: heroSize,
fit: BoxFit.contain,
).animate(onPlay: (controller) => controller.repeat(reverse: true)).scale(
begin: const Offset(0.98, 0.98),
end: const Offset(1.04, 1.04),
duration: 1400.ms,
begin: const Offset(0.985, 0.985),
end: const Offset(1.035, 1.035),
duration: 1800.ms,
curve: Curves.easeInOut,
),
const SizedBox(height: 12),
const LogoFarolero(size: 64),
SizedBox(height: compact ? 8 : 12),
LogoFarolero(size: compact ? 58 : 72),
const SizedBox(height: 8),
Text(
subtitulo,
@@ -320,7 +327,7 @@ class _HeroInicioPremium extends StatelessWidget {
),
const SizedBox(height: 4),
Text(
'Descubr<EFBFBD> al impostor antes de que sea tarde',
'Descubrí al impostor antes de que sea tarde',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: TemaApp.colorTextoSecundario,
@@ -437,23 +444,44 @@ class _BotonInicioPremium extends StatelessWidget {
),
],
),
child: Row(
children: [
SizedBox(width: hero ? 70 : 62, child: Icon(icono, color: foreground, size: hero ? 38 : 27)),
Expanded(
child: Text(
texto.toUpperCase(),
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleLarge?.copyWith(
child: ClipRRect(
borderRadius: BorderRadius.circular(hero ? 26 : 22),
child: Stack(
children: [
if (hero)
Positioned.fill(
child: Image.asset(
'assets/ui/generated/main/main_cta_frame.png',
fit: BoxFit.fill,
),
),
Row(
children: [
SizedBox(
width: hero ? 70 : 62,
child: Icon(
icono,
color: foreground,
fontSize: hero ? 28 : 18,
fontWeight: FontWeight.w900,
letterSpacing: hero ? 1.6 : 1.0,
size: hero ? 38 : 27,
),
),
Expanded(
child: Text(
texto.toUpperCase(),
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleLarge?.copyWith(
color: foreground,
fontSize: hero ? 28 : 18,
fontWeight: FontWeight.w900,
letterSpacing: hero ? 1.6 : 1.0,
),
),
),
SizedBox(width: hero ? 70 : 62),
],
),
),
SizedBox(width: hero ? 70 : 62),
],
],
),
),
),
),
@@ -523,105 +551,3 @@ BoxDecoration _decoracionCristal({required double radius, required double alpha}
],
);
}
class _InicioFondoPainter extends CustomPainter {
const _InicioFondoPainter();
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()..isAntiAlias = true;
paint.shader = const LinearGradient(
colors: [Color(0xFF050A12), Color(0xFF0A1524), Color(0xFF15091D)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
).createShader(Offset.zero & size);
canvas.drawRect(Offset.zero & size, paint);
final farol = Offset(size.width * 0.5, size.height * 0.34);
paint.shader = RadialGradient(
colors: [
TemaApp.colorDorado.withValues(alpha: 0.28),
TemaApp.colorNaranja.withValues(alpha: 0.12),
Colors.transparent,
],
).createShader(Rect.fromCircle(center: farol, radius: size.width * 0.78));
canvas.drawCircle(farol, size.width * 0.78, paint);
paint.shader = null;
_drawSkyline(canvas, size, paint);
_drawSparks(canvas, size);
}
void _drawSkyline(Canvas canvas, Size size, Paint paint) {
paint.color = Colors.black.withValues(alpha: 0.38);
final base = size.height * 0.80;
final path = Path()
..moveTo(0, size.height)
..lineTo(0, base - 20)
..lineTo(size.width * 0.14, base - 58)
..lineTo(size.width * 0.26, base - 24)
..lineTo(size.width * 0.42, base - 78)
..lineTo(size.width * 0.58, base - 34)
..lineTo(size.width * 0.74, base - 74)
..lineTo(size.width * 0.90, base - 28)
..lineTo(size.width, base - 48)
..lineTo(size.width, size.height)
..close();
canvas.drawPath(path, paint);
paint.color = TemaApp.colorNaranja.withValues(alpha: 0.18);
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromCenter(center: Offset(size.width * 0.5, base - 108), width: 24, height: 150),
const Radius.circular(12),
),
paint,
);
}
void _drawSparks(Canvas canvas, Size size) {
final palette = [TemaApp.colorDorado, TemaApp.colorNaranja, const Color(0xFFFFF2C9)];
for (var i = 0; i < 64; i++) {
final x = (i * 67 % math.max(size.width, 1)).toDouble();
final y = (i * 113 % math.max(size.height, 1)).toDouble();
final paint = Paint()
..isAntiAlias = true
..color = palette[i % palette.length].withValues(alpha: 0.12 + (i % 4) * 0.06);
canvas.drawCircle(Offset(x, y), 1.2 + (i % 3), paint);
}
}
@override
bool shouldRepaint(covariant _InicioFondoPainter oldDelegate) => false;
}
class _HeroInicioPainter extends CustomPainter {
const _HeroInicioPainter();
@override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height * 0.45);
final paint = Paint()..isAntiAlias = true;
paint.shader = RadialGradient(
colors: [TemaApp.colorNaranja.withValues(alpha: 0.30), Colors.transparent],
).createShader(Rect.fromCircle(center: center, radius: size.width * 0.54));
canvas.drawCircle(center, size.width * 0.54, paint);
paint.shader = null;
for (var i = 0; i < 24; i++) {
final angle = math.pi * 2 * i / 24;
paint.color = (i.isEven ? TemaApp.colorDorado : TemaApp.colorNaranja).withValues(alpha: i.isEven ? 0.14 : 0.08);
canvas.drawPath(
Path()
..moveTo(center.dx + math.cos(angle - 0.035) * 45, center.dy + math.sin(angle - 0.035) * 45)
..lineTo(center.dx + math.cos(angle) * size.width * 0.44, center.dy + math.sin(angle) * size.width * 0.44)
..lineTo(center.dx + math.cos(angle + 0.035) * 45, center.dy + math.sin(angle + 0.035) * 45)
..close(),
paint,
);
}
}
@override
bool shouldRepaint(covariant _HeroInicioPainter oldDelegate) => false;
}

View File

@@ -28,6 +28,7 @@ class PantallaSeleccionModoJuego extends StatelessWidget {
const _ModoHero().animate().fadeIn(duration: 320.ms).slideY(begin: -0.12),
const SizedBox(height: 34),
_ModoCard(
marcoAsset: 'assets/ui/generated/mode/mode_single_card_frame.png',
icono: Icons.phone_android_rounded,
titulo: 'Un móvil',
subtitulo: 'Partida en este dispositivo',
@@ -44,6 +45,7 @@ class PantallaSeleccionModoJuego extends StatelessWidget {
).animate().fadeIn(delay: 120.ms).slideX(begin: -0.08),
const SizedBox(height: 16),
_ModoCard(
marcoAsset: 'assets/ui/generated/mode/mode_multi_card_frame.png',
icono: Icons.devices_rounded,
titulo: 'Multidispositivo',
subtitulo: 'Cada jugador en su móvil',
@@ -75,74 +77,45 @@ class _ModoHero extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
height: 230,
child: Stack(
alignment: Alignment.center,
children: [
Positioned.fill(
child: Image.asset(
'assets/ui/premium/lantern_radial_glow.png',
fit: BoxFit.contain,
opacity: const AlwaysStoppedAnimation(0.58),
),
return Column(
children: [
SizedBox(
height: 230,
child: Image.asset(
'assets/ui/generated/mode/mode_duel_hero.png',
fit: BoxFit.contain,
opacity: const AlwaysStoppedAnimation(0.95),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 90,
height: 90,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
TemaApp.colorDorado.withValues(alpha: 0.95),
TemaApp.colorNaranja.withValues(alpha: 0.58),
Colors.black.withValues(alpha: 0.76),
],
),
border: Border.all(color: TemaApp.colorDorado, width: 3),
boxShadow: [
BoxShadow(
color: TemaApp.colorNaranja.withValues(alpha: 0.55),
blurRadius: 42,
spreadRadius: 5,
),
],
),
child: const Icon(Icons.sports_esports_rounded, size: 48, color: Color(0xFF241103)),
),
const SizedBox(height: 10),
Text(
'?C?mo quer?s jugar?',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
color: TemaApp.colorDorado,
fontSize: 32,
fontWeight: FontWeight.w900,
shadows: [
Shadow(color: TemaApp.colorNaranja.withValues(alpha: 0.45), blurRadius: 16),
],
),
const SizedBox(height: 18),
Text(
'¿Cómo querés jugar?',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
color: TemaApp.colorDorado,
fontSize: 32,
fontWeight: FontWeight.w900,
shadows: [
Shadow(color: TemaApp.colorNaranja.withValues(alpha: 0.45), blurRadius: 16),
],
),
),
const SizedBox(height: 8),
Text(
'Eleg? el tipo de partida y arranc? sin fricci?n.',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: TemaApp.colorTextoSecundario,
),
const SizedBox(height: 8),
Text(
'Elegí el tipo de partida y arrancá sin fricción.',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: TemaApp.colorTextoSecundario,
),
),
],
),
],
),
),
],
);
}
}
class _ModoCard extends StatelessWidget {
final String marcoAsset;
final IconData icono;
final String titulo;
final String subtitulo;
@@ -151,6 +124,7 @@ class _ModoCard extends StatelessWidget {
final VoidCallback onTap;
const _ModoCard({
required this.marcoAsset,
required this.icono,
required this.titulo,
required this.subtitulo,
@@ -189,6 +163,16 @@ class _ModoCard extends StatelessWidget {
),
child: Stack(
children: [
Positioned.fill(
child: ClipRRect(
borderRadius: BorderRadius.circular(28),
child: Image.asset(
marcoAsset,
fit: BoxFit.fill,
opacity: const AlwaysStoppedAnimation(0.86),
),
),
),
Positioned.fill(
child: Image.asset(
'assets/ui/premium/card_sheen_overlay.png',