refactorización de pantallas
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:farolero/l10n/generated/app_localizations.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../estado/estado_juego.dart';
|
||||
@@ -24,8 +24,7 @@ class _PantallaVerPalabraState extends State<PantallaVerPalabra> {
|
||||
final partida = estado.partida;
|
||||
if (partida == null) return const SizedBox.shrink();
|
||||
|
||||
final todosHanVisto =
|
||||
partida.jugadores.every((j) => _hanVisto.contains(j.id));
|
||||
final todosHanVisto = partida.jugadores.every((j) => _hanVisto.contains(j.id));
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
@@ -34,79 +33,55 @@ class _PantallaVerPalabraState extends State<PantallaVerPalabra> {
|
||||
),
|
||||
body: FondoFarolero(
|
||||
intenso: true,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
children: [
|
||||
const ArteGameplayFarolero.fase(height: 110),
|
||||
const SizedBox(height: 10),
|
||||
EncabezadoFarolero(
|
||||
icono: Icons.visibility,
|
||||
titulo: l10n.roundNumber(partida.rondaActual),
|
||||
subtitulo: l10n.eachPlayerMustSee,
|
||||
child: SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
children: [
|
||||
const ArteGameplayFarolero.fase(height: 110),
|
||||
const SizedBox(height: 10),
|
||||
TarjetaFaseFarolero(
|
||||
icono: Icons.visibility,
|
||||
titulo: l10n.roundNumber(partida.rondaActual),
|
||||
subtitulo: l10n.eachPlayerMustSee,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Expanded(
|
||||
child: ListView.separated(
|
||||
itemCount: partida.jugadores.length,
|
||||
separatorBuilder: (context, index) => const SizedBox(height: 10),
|
||||
itemBuilder: (context, index) {
|
||||
final jugador = partida.jugadores[index];
|
||||
final haVisto = _hanVisto.contains(jugador.id);
|
||||
return EstadoJugadorFarolero(
|
||||
nombre: '${index + 1}. ${jugador.nombre}',
|
||||
subtitulo: haVisto ? l10n.alreadySeen : l10n.tapToSee,
|
||||
icono: haVisto ? Icons.check_circle : Icons.visibility,
|
||||
destacado: haVisto,
|
||||
completado: haVisto,
|
||||
onTap: haVisto ? null : () => _mostrarPalabra(context, jugador.id),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
BotonFarolero(
|
||||
texto: todosHanVisto
|
||||
? l10n.allSeenStartDebate
|
||||
: l10n.playersRemaining(partida.jugadores.length - _hanVisto.length),
|
||||
icono: Icons.forum,
|
||||
onPressed: todosHanVisto
|
||||
? () {
|
||||
estado.iniciarDebate();
|
||||
Navigator.pushReplacement(
|
||||
context,
|
||||
MaterialPageRoute(builder: (_) => const PantallaDebate()),
|
||||
);
|
||||
}
|
||||
: null,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
itemCount: partida.jugadores.length,
|
||||
itemBuilder: (context, index) {
|
||||
final jugador = partida.jugadores[index];
|
||||
final haVisto = _hanVisto.contains(jugador.id);
|
||||
return Card(
|
||||
color: haVisto
|
||||
? TemaApp.colorVerde.withValues(alpha: 0.2)
|
||||
: TemaApp.colorTarjeta,
|
||||
child: ListTile(
|
||||
leading: CircleAvatar(
|
||||
backgroundColor: haVisto
|
||||
? TemaApp.colorVerde
|
||||
: TemaApp.colorAcento,
|
||||
child: Text(
|
||||
haVisto ? '✓' : '${index + 1}',
|
||||
style:
|
||||
const TextStyle(color: Colors.white),
|
||||
),
|
||||
),
|
||||
title: Text(jugador.nombre),
|
||||
subtitle: Text(
|
||||
haVisto ? l10n.alreadySeen : l10n.tapToSee,
|
||||
),
|
||||
trailing: haVisto
|
||||
? const Icon(Icons.check_circle,
|
||||
color: TemaApp.colorVerde)
|
||||
: const Icon(Icons.visibility,
|
||||
color: TemaApp.colorTextoSecundario),
|
||||
onTap: haVisto
|
||||
? null
|
||||
: () => _mostrarPalabra(context, jugador.id),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 56,
|
||||
child: ElevatedButton.icon(
|
||||
onPressed: todosHanVisto
|
||||
? () {
|
||||
estado.iniciarDebate();
|
||||
Navigator.pushReplacement(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (_) => const PantallaDebate(),
|
||||
),
|
||||
);
|
||||
}
|
||||
: null,
|
||||
icon: const Icon(Icons.forum),
|
||||
label: Text(todosHanVisto
|
||||
? l10n.allSeenStartDebate
|
||||
: l10n.playersRemaining(partida.jugadores.length - _hanVisto.length)),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -154,8 +129,7 @@ class _PantallaRevelarPalabra extends StatefulWidget {
|
||||
});
|
||||
|
||||
@override
|
||||
State<_PantallaRevelarPalabra> createState() =>
|
||||
_PantallaRevelarPalabraState();
|
||||
State<_PantallaRevelarPalabra> createState() => _PantallaRevelarPalabraState();
|
||||
}
|
||||
|
||||
class _PantallaRevelarPalabraState extends State<_PantallaRevelarPalabra> {
|
||||
@@ -165,159 +139,128 @@ class _PantallaRevelarPalabraState extends State<_PantallaRevelarPalabra> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final colorEstado = widget.esImpostor ? TemaApp.colorAcento : TemaApp.colorVerde;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: Text(widget.nombre)),
|
||||
body: FondoFarolero(
|
||||
intenso: true,
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: SafeArea(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const ArteGameplayFarolero.fase(height: 128),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
widget.nombre,
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
|
||||
// Zona de revelación
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(32),
|
||||
decoration: BoxDecoration(
|
||||
color: _manteniendo
|
||||
? (widget.esImpostor
|
||||
? TemaApp.colorAcento.withValues(alpha: 0.3)
|
||||
: TemaApp.colorVerde.withValues(alpha: 0.3))
|
||||
: TemaApp.colorTarjeta,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(
|
||||
color: _manteniendo
|
||||
? (widget.esImpostor
|
||||
? TemaApp.colorAcento
|
||||
: TemaApp.colorVerde)
|
||||
: Colors.transparent,
|
||||
width: 2,
|
||||
),
|
||||
children: [
|
||||
const ArteGameplayFarolero.fase(height: 128),
|
||||
const SizedBox(height: 12),
|
||||
TarjetaFaseFarolero(
|
||||
icono: widget.esImpostor ? Icons.theater_comedy : Icons.search,
|
||||
titulo: widget.nombre,
|
||||
subtitulo: l10n.holdToSeeWord,
|
||||
color: colorEstado,
|
||||
),
|
||||
child: _manteniendo
|
||||
? Column(
|
||||
children: [
|
||||
Text(
|
||||
widget.esImpostor ? '🎭' : '🔍',
|
||||
style: const TextStyle(fontSize: 48),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
widget.esImpostor
|
||||
? l10n.youAreImpostor
|
||||
: l10n.yourWordIs,
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.titleLarge
|
||||
?.copyWith(
|
||||
color: widget.esImpostor
|
||||
? TemaApp.colorAcento
|
||||
: TemaApp.colorVerde,
|
||||
),
|
||||
),
|
||||
if (!widget.esImpostor) ...[
|
||||
const SizedBox(height: 12),
|
||||
TarjetaPalabraFarolero(palabra: widget.palabra),
|
||||
],
|
||||
if (widget.esImpostor && widget.pistaActiva) ...[
|
||||
const SizedBox(height: 12),
|
||||
const SizedBox(height: 18),
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(24),
|
||||
decoration: TemaApp.decoracionPanel(
|
||||
color: (_manteniendo ? colorEstado : TemaApp.colorTarjeta).withValues(alpha: _manteniendo ? 0.22 : 0.92),
|
||||
borderColor: _manteniendo ? colorEstado : TemaApp.colorBorde,
|
||||
radius: 24,
|
||||
),
|
||||
child: _manteniendo
|
||||
? Column(
|
||||
children: [
|
||||
Icon(
|
||||
widget.esImpostor ? Icons.theater_comedy : Icons.search,
|
||||
color: colorEstado,
|
||||
size: 52,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
l10n.clueCategory(BancoPalabras.nombreBonitoCategoria(widget.categoria, l10n)),
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyLarge
|
||||
?.copyWith(
|
||||
color: TemaApp.colorNaranja,
|
||||
),
|
||||
widget.esImpostor ? l10n.youAreImpostor : l10n.yourWordIs,
|
||||
textAlign: TextAlign.center,
|
||||
style: Theme.of(context).textTheme.titleLarge?.copyWith(color: colorEstado),
|
||||
),
|
||||
if (!widget.esImpostor) ...[
|
||||
const SizedBox(height: 12),
|
||||
TarjetaPalabraFarolero(palabra: widget.palabra),
|
||||
],
|
||||
if (widget.esImpostor && widget.pistaActiva) ...[
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
l10n.clueCategory(BancoPalabras.nombreBonitoCategoria(widget.categoria, l10n)),
|
||||
textAlign: TextAlign.center,
|
||||
style: Theme.of(context).textTheme.bodyLarge?.copyWith(color: TemaApp.colorNaranja),
|
||||
),
|
||||
],
|
||||
],
|
||||
)
|
||||
: Column(
|
||||
children: [
|
||||
const Icon(Icons.lock, color: TemaApp.colorDorado, size: 52),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
l10n.holdToSeeWord,
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
l10n.makeSureNoOneLooks,
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
],
|
||||
)
|
||||
: Column(
|
||||
children: [
|
||||
const Text('🔒', style: TextStyle(fontSize: 48)),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
l10n.holdToSeeWord,
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
l10n.makeSureNoOneLooks,
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
GestureDetector(
|
||||
onLongPressStart: (details) {
|
||||
setState(() {
|
||||
_manteniendo = true;
|
||||
_visto = true;
|
||||
});
|
||||
},
|
||||
onLongPressEnd: (details) => setState(() => _manteniendo = false),
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
height: 64,
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: _manteniendo
|
||||
? [TemaApp.colorNaranja, TemaApp.colorAcento]
|
||||
: [TemaApp.colorAcento, TemaApp.colorAcento],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Botón mantener pulsado
|
||||
GestureDetector(
|
||||
onLongPressStart: (_) {
|
||||
setState(() {
|
||||
_manteniendo = true;
|
||||
_visto = true;
|
||||
});
|
||||
},
|
||||
onLongPressEnd: (_) {
|
||||
setState(() => _manteniendo = false);
|
||||
},
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
height: 64,
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: _manteniendo
|
||||
? [TemaApp.colorNaranja, TemaApp.colorAcento]
|
||||
: [TemaApp.colorAcento, TemaApp.colorAcento],
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
_manteniendo
|
||||
? l10n.showingWord
|
||||
: l10n.holdToSee,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
child: Center(
|
||||
child: Text(
|
||||
_manteniendo ? l10n.showingWord : l10n.holdToSee,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
if (_visto)
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: OutlinedButton.icon(
|
||||
const SizedBox(height: 24),
|
||||
if (_visto)
|
||||
BotonFarolero.secundario(
|
||||
texto: l10n.seenMyWord,
|
||||
icono: Icons.check,
|
||||
onPressed: () {
|
||||
widget.onVisto();
|
||||
Navigator.pop(context);
|
||||
},
|
||||
icon: const Icon(Icons.check),
|
||||
label: Text(l10n.seenMyWord),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user