más mejoras

This commit is contained in:
2026-05-10 23:54:09 +02:00
parent 873a5b7f4a
commit a93bab290a
42 changed files with 1365 additions and 784 deletions

View File

@@ -19,6 +19,10 @@ class _PantallaAjustesState extends State<PantallaAjustes> {
final l10n = AppLocalizations.of(context)!;
final servicioIdioma = context.watch<ServicioIdioma>();
final perfil = context.watch<ServicioPerfilUsuario>().perfil;
final nombrePerfil = perfil.nombre.trim().isEmpty
? l10n.defaultPlayerName
: perfil.nombre.trim();
final inicialPerfil = nombrePerfil.substring(0, 1).toUpperCase();
return Scaffold(
appBar: AppBar(title: Text(l10n.settingsTitle)),
@@ -27,62 +31,85 @@ class _PantallaAjustesState extends State<PantallaAjustes> {
child: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Card(
child: ListTile(
leading: AvatarFarolero(
texto: perfil.nombre.substring(0, 1).toUpperCase(),
assetPath: perfil.avatarAsset,
size: 128,
),
title: Text(perfil.nombre),
subtitle: Text('@${perfil.nick}'),
trailing: const Icon(Icons.edit),
onTap: () => _editarPerfil(context),
),
),
const SizedBox(height: 12),
// Selector de idioma
Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(l10n.language,
style: Theme.of(context).textTheme.titleLarge),
const SizedBox(height: 12),
// Opción automática (sistema)
_opcionIdioma(
context,
bandera: '🌐',
nombre: 'Auto (${_nombreIdiomaDelSistema()})',
codigo: 'sistema',
seleccionado: servicioIdioma.codigoActual == 'sistema',
onTap: () => servicioIdioma.cambiarIdioma('sistema'),
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Card(
child: InkWell(
borderRadius: BorderRadius.circular(12),
onTap: () => _editarPerfil(context),
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
AvatarFarolero(
texto: inicialPerfil,
assetPath: perfil.avatarAsset,
size: 96,
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
nombrePerfil,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.titleLarge,
),
Text(
'@${perfil.nick}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
),
const SizedBox(width: 12),
const Icon(Icons.edit),
],
),
const Divider(height: 1),
// Lista de idiomas
...ServicioIdioma.idiomasSoportados.entries.map((entrada) {
return _opcionIdioma(
context,
bandera: entrada.value.bandera,
nombre: entrada.value.nombre,
codigo: entrada.key,
seleccionado:
servicioIdioma.codigoActual == entrada.key,
onTap: () =>
servicioIdioma.cambiarIdioma(entrada.key),
);
}),
],
),
),
),
),
const SizedBox(height: 12),
],
const SizedBox(height: 12),
Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.language,
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 12),
_opcionIdioma(
context,
bandera: '\u{1F310}',
nombre: '${l10n.automaticLanguage} (${_nombreIdiomaDelSistema()})',
codigo: 'sistema',
seleccionado: servicioIdioma.codigoActual == 'sistema',
onTap: () => servicioIdioma.cambiarIdioma('sistema'),
),
const Divider(height: 1),
...ServicioIdioma.idiomasSoportados.entries.map((entrada) {
return _opcionIdioma(
context,
bandera: entrada.value.bandera,
nombre: entrada.value.nombre,
codigo: entrada.key,
seleccionado: servicioIdioma.codigoActual == entrada.key,
onTap: () => servicioIdioma.cambiarIdioma(entrada.key),
);
}),
],
),
),
),
const SizedBox(height: 12),
],
),
),
),
@@ -112,6 +139,7 @@ class _PantallaAjustesState extends State<PantallaAjustes> {
}
Future<void> _editarPerfil(BuildContext context) async {
final l10n = AppLocalizations.of(context)!;
final servicioPerfil = context.read<ServicioPerfilUsuario>();
final actual = servicioPerfil.perfil;
final nombreController = TextEditingController(text: actual.nombre);
@@ -122,7 +150,7 @@ class _PantallaAjustesState extends State<PantallaAjustes> {
context: context,
builder: (ctx) => StatefulBuilder(
builder: (ctx, setDialogState) => AlertDialog(
title: const Text('Perfil del dispositivo'),
title: Text(l10n.deviceProfile),
content: SizedBox(
width: 520,
child: SingleChildScrollView(
@@ -133,17 +161,17 @@ class _PantallaAjustesState extends State<PantallaAjustes> {
controller: nombreController,
textCapitalization: TextCapitalization.words,
onChanged: (_) => setDialogState(() {}),
decoration: const InputDecoration(
labelText: 'Nombre',
prefixIcon: Icon(Icons.person),
decoration: InputDecoration(
labelText: l10n.profileName,
prefixIcon: const Icon(Icons.person),
),
),
const SizedBox(height: 12),
TextField(
controller: nickController,
decoration: const InputDecoration(
labelText: 'Nick',
prefixIcon: Icon(Icons.alternate_email),
decoration: InputDecoration(
labelText: l10n.profileNick,
prefixIcon: const Icon(Icons.alternate_email),
),
),
const SizedBox(height: 18),
@@ -152,43 +180,49 @@ class _PantallaAjustesState extends State<PantallaAjustes> {
? '?'
: nombreController.text.substring(0, 1).toUpperCase(),
assetPath: avatarSeleccionado,
size: 90,
size: 112,
),
const SizedBox(height: 18),
GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
),
itemCount: ServicioPerfilUsuario.avatares.length,
itemBuilder: (context, index) {
final avatar = ServicioPerfilUsuario.avatares[index];
final seleccionado = avatar == avatarSeleccionado;
return InkWell(
borderRadius: BorderRadius.circular(999),
onTap: () => setDialogState(
() => avatarSeleccionado = avatar,
LayoutBuilder(
builder: (context, constraints) {
final columnas = constraints.maxWidth >= 420 ? 4 : 3;
return GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columnas,
mainAxisSpacing: 14,
crossAxisSpacing: 14,
),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: seleccionado
? TemaApp.colorNaranja
: Colors.transparent,
width: 3,
itemCount: ServicioPerfilUsuario.avatares.length,
itemBuilder: (context, index) {
final avatar = ServicioPerfilUsuario.avatares[index];
final seleccionado = avatar == avatarSeleccionado;
return InkWell(
borderRadius: BorderRadius.circular(999),
onTap: () => setDialogState(
() => avatarSeleccionado = avatar,
),
),
child: AvatarFarolero(
texto: '',
assetPath: avatar,
size: 72,
),
),
child: DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: seleccionado
? TemaApp.colorNaranja
: Colors.transparent,
width: 3,
),
),
child: Center(
child: AvatarFarolero(
texto: '',
assetPath: avatar,
size: 86,
),
),
),
);
},
);
},
),
@@ -199,7 +233,7 @@ class _PantallaAjustesState extends State<PantallaAjustes> {
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx),
child: const Text('Cancelar'),
child: Text(l10n.cancel),
),
TextButton(
onPressed: () async {
@@ -210,7 +244,7 @@ class _PantallaAjustesState extends State<PantallaAjustes> {
);
if (ctx.mounted) Navigator.pop(ctx);
},
child: const Text('Guardar'),
child: Text(l10n.save),
),
],
),

View File

@@ -490,11 +490,16 @@ class _PantallaCrearPartidaState extends State<PantallaCrearPartida> {
final esPerfilLocal =
e.key == 0 && e.value == nombrePerfil;
return ListTile(
minLeadingWidth: 62,
leading: esPerfilLocal
? AvatarFarolero(
texto: inicialPerfil,
assetPath: perfil.avatarAsset,
size: 54,
? SizedBox(
width: 62,
height: 62,
child: AvatarFarolero(
texto: inicialPerfil,
assetPath: perfil.avatarAsset,
size: 52,
),
)
: CircleAvatar(
backgroundColor: TemaApp.colorTarjeta,
@@ -516,7 +521,6 @@ class _PantallaCrearPartidaState extends State<PantallaCrearPartida> {
),
onPressed: () => _eliminarJugador(e.key),
),
dense: true,
);
}),
],

View File

@@ -49,142 +49,154 @@ class _PantallaLobbyHostState extends State<PantallaLobbyHost> {
),
body: FondoFarolero(
intenso: true,
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
children: [
const _LobbySignalArt(),
const SizedBox(height: 12),
EncabezadoFarolero(
icono: Icons.wifi_tethering,
titulo: widget.nombreSala,
subtitulo: l10n.scanToJoin,
),
const SizedBox(height: 14),
PanelFarolero(
padding: const EdgeInsets.fromLTRB(16, 18, 16, 16),
child: Column(
children: [
SizedBox(
width: 236,
height: 236,
child: Stack(
alignment: Alignment.center,
child: SafeArea(
top: false,
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 24),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 480),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const _LobbySignalArt(),
const SizedBox(height: 12),
EncabezadoFarolero(
icono: Icons.wifi_tethering,
titulo: widget.nombreSala,
subtitulo: l10n.scanToJoin,
),
const SizedBox(height: 14),
PanelFarolero(
padding: const EdgeInsets.fromLTRB(18, 20, 18, 18),
child: Column(
children: [
Positioned.fill(
child: IgnorePointer(
child: Image.asset(
'assets/ui/generated/join_lobby/qr_frame.png',
fit: BoxFit.contain,
),
),
),
Container(
width: 178,
height: 178,
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: TemaApp.colorNaranja.withValues(alpha: 0.18),
blurRadius: 24,
SizedBox(
width: 268,
height: 268,
child: Stack(
alignment: Alignment.center,
children: [
Positioned.fill(
child: IgnorePointer(
child: Image.asset(
'assets/ui/generated/join_lobby/qr_frame.png',
fit: BoxFit.contain,
),
),
),
Container(
width: 210,
height: 210,
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: TemaApp.colorDorado.withValues(alpha: 0.42),
width: 2,
),
boxShadow: [
BoxShadow(
color: TemaApp.colorNaranja.withValues(alpha: 0.20),
blurRadius: 24,
),
],
),
child: QrImageView(
data: nearby.generarDatosQR(widget.nombreSala),
version: QrVersions.auto,
size: 182,
backgroundColor: Colors.white,
),
),
],
),
child: QrImageView(
data: nearby.generarDatosQR(widget.nombreSala),
version: QrVersions.auto,
size: 162,
backgroundColor: Colors.white,
),
),
const SizedBox(height: 10),
Text(
l10n.scanThisCodeFromAnotherPhone,
style: Theme.of(context).textTheme.bodyMedium,
textAlign: TextAlign.center,
),
],
),
),
const SizedBox(height: 10),
Text(
l10n.scanThisCodeFromAnotherPhone,
style: Theme.of(context).textTheme.bodyMedium,
textAlign: TextAlign.center,
const SizedBox(height: 16),
_buildResumenSala(
context,
l10n,
seleccionados,
nearby.jugadores.length,
),
const SizedBox(height: 12),
Card(
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Expanded(
child: Text(
l10n.gameUsers,
style: Theme.of(context).textTheme.titleLarge,
),
),
IconButton.filledTonal(
onPressed: () => _crearNuevoUsuario(context),
icon: const Icon(Icons.person_add),
),
],
),
const SizedBox(height: 8),
if (usuarios.isEmpty)
SizedBox(
height: 96,
child: Center(child: Text(l10n.waitingForPlayers)),
)
else
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: usuarios.length,
itemBuilder: (context, index) => _buildUsuarioTile(
context,
l10n,
usuarios[index],
),
),
],
),
),
),
const SizedBox(height: 12),
if (!puedeIniciar)
Text(
_mensajeValidacion(validacionInicio?.codigo, l10n),
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(color: TemaApp.colorNaranja),
textAlign: TextAlign.center,
),
const SizedBox(height: 12),
BotonFarolero(
texto: _iniciando ? l10n.starting : l10n.startGame,
icono: Icons.play_arrow,
onPressed: puedeIniciar && !_iniciando
? () {
setState(() => _iniciando = true);
widget.onIniciar();
}
: null,
),
],
),
),
const SizedBox(height: 16),
_buildResumenSala(
context,
l10n,
seleccionados,
nearby.jugadores.length,
),
const SizedBox(height: 12),
Expanded(
child: Card(
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
l10n.gameUsers,
style: Theme.of(context).textTheme.titleLarge,
),
),
IconButton.filledTonal(
onPressed: () => _crearNuevoUsuario(context),
icon: const Icon(Icons.person_add),
),
],
),
const SizedBox(height: 8),
Expanded(
child: usuarios.isEmpty
? Center(child: Text(l10n.waitingForPlayers))
: ListView.builder(
itemCount: usuarios.length,
itemBuilder: (context, index) =>
_buildUsuarioTile(
context,
l10n,
usuarios[index],
),
),
),
],
),
),
),
),
const SizedBox(height: 12),
if (!puedeIniciar)
Text(
_mensajeValidacion(validacionInicio?.codigo, l10n),
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(color: TemaApp.colorNaranja),
textAlign: TextAlign.center,
),
const SizedBox(height: 12),
SizedBox(
width: double.infinity,
child: BotonFarolero(
texto: _iniciando ? l10n.starting : l10n.startGame,
icono: Icons.play_arrow,
onPressed: puedeIniciar && !_iniciando
? () {
setState(() => _iniciando = true);
widget.onIniciar();
}
: null,
),
),
],
),
),
),
),
@@ -276,8 +288,10 @@ class _PantallaLobbyHostState extends State<PantallaLobbyHost> {
usuario.estaSeleccionado && usuario.clienteIdSeleccionado != miClientId;
return ListTile(
leading: CircleAvatar(
backgroundColor: Colors.transparent,
minLeadingWidth: 58,
leading: SizedBox(
width: 58,
height: 58,
child: AvatarFarolero(
texto: usuario.nombre.isEmpty ? '?' : usuario.nombre[0],
assetPath: usuario.avatar,
@@ -286,7 +300,7 @@ class _PantallaLobbyHostState extends State<PantallaLobbyHost> {
: seleccionadoPorOtro
? TemaApp.colorNaranja
: TemaApp.colorAzul,
size: 38,
size: 48,
fuego: usuario.fuego,
medallas: usuario.medallas,
),

View File

@@ -866,12 +866,17 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
usuario.estaSeleccionado && usuario.clienteIdSeleccionado != miClientId;
return ListTile(
leading: AvatarFarolero(
texto: usuario.nombre.isEmpty ? '?' : usuario.nombre[0],
assetPath: usuario.avatar,
size: 38,
fuego: usuario.fuego,
medallas: usuario.medallas,
minLeadingWidth: 58,
leading: SizedBox(
width: 58,
height: 58,
child: AvatarFarolero(
texto: usuario.nombre.isEmpty ? '?' : usuario.nombre[0],
assetPath: usuario.avatar,
size: 48,
fuego: usuario.fuego,
medallas: usuario.medallas,
),
),
title: Text(usuario.nombre),
subtitle: Column(