feat: modo multidispositivo con Nearby Connections
- ServicioNearby completo: P2P_STAR, auto-accept, protocolo mensajes - PantallaLobbyHost: QR code + lista jugadores tiempo real - PantallaUnirse: escaneo QR + conexión + sala espera - Protocolo MensajeP2P: salaInfo, partidaInicio, fase, voto, resultado, fin - Manejo desconexiones jugador/host - l10n: nuevas keys es/en - Version bump 1.1.0+5
This commit is contained in:
ShanaiaBot
209
lib/pantallas/pantalla_lobby_host.dart
Normal file
209
lib/pantallas/pantalla_lobby_host.dart
Normal file
@@ -0,0 +1,209 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:qr_flutter/qr_flutter.dart';
|
||||
import 'package:farolero/l10n/generated/app_localizations.dart';
|
||||
import '../servicios/servicio_nearby.dart';
|
||||
import '../tema/tema_app.dart';
|
||||
|
||||
/// Pantalla de lobby del host: muestra QR y lista de jugadores conectados
|
||||
class PantallaLobbyHost extends StatefulWidget {
|
||||
final String nombreSala;
|
||||
final VoidCallback onIniciar;
|
||||
|
||||
const PantallaLobbyHost({
|
||||
super.key,
|
||||
required this.nombreSala,
|
||||
required this.onIniciar,
|
||||
});
|
||||
|
||||
@override
|
||||
State<PantallaLobbyHost> createState() => _PantallaLobbyHostState();
|
||||
}
|
||||
|
||||
class _PantallaLobbyHostState extends State<PantallaLobbyHost> {
|
||||
bool _iniciando = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final nearby = context.watch<ServicioNearby>();
|
||||
final jugadores = nearby.jugadores;
|
||||
final totalJugadores = jugadores.length + 1; // +1 host
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(widget.nombreSala),
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.close),
|
||||
onPressed: () async {
|
||||
await nearby.desconectar();
|
||||
if (context.mounted) Navigator.pop(context);
|
||||
},
|
||||
),
|
||||
),
|
||||
body: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
children: [
|
||||
// QR Code
|
||||
Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: QrImageView(
|
||||
data: nearby.generarDatosQR(widget.nombreSala),
|
||||
version: QrVersions.auto,
|
||||
size: 180,
|
||||
backgroundColor: Colors.white,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
l10n.scanToJoin,
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Lista de jugadores
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
l10n.connectedPlayers,
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
const Spacer(),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: totalJugadores >= 3
|
||||
? TemaApp.colorVerde.withValues(alpha: 0.2)
|
||||
: TemaApp.colorNaranja.withValues(alpha: 0.2),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
'$totalJugadores',
|
||||
style: TextStyle(
|
||||
color: totalJugadores >= 3
|
||||
? TemaApp.colorVerde
|
||||
: TemaApp.colorNaranja,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
// Host (yo)
|
||||
_buildJugadorTile(
|
||||
nombre: nearby.miNombre ?? 'Host',
|
||||
esHost: true,
|
||||
),
|
||||
|
||||
// Jugadores conectados
|
||||
Expanded(
|
||||
child: jugadores.isEmpty
|
||||
? Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Text('📱', style: TextStyle(fontSize: 48)),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
l10n.waitingForPlayers,
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
: ListView.builder(
|
||||
itemCount: jugadores.length,
|
||||
itemBuilder: (context, index) {
|
||||
final j = jugadores[index];
|
||||
return _buildJugadorTile(nombre: j.nombre);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Botón iniciar
|
||||
if (totalJugadores < 3)
|
||||
Text(
|
||||
l10n.needMorePlayers(3 - totalJugadores),
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: TemaApp.colorNaranja,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: ElevatedButton.icon(
|
||||
onPressed: totalJugadores >= 3 && !_iniciando
|
||||
? () {
|
||||
setState(() => _iniciando = true);
|
||||
widget.onIniciar();
|
||||
}
|
||||
: null,
|
||||
icon: const Icon(Icons.play_arrow),
|
||||
label: Text(_iniciando ? l10n.starting : l10n.startGame),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildJugadorTile({required String nombre, bool esHost = false}) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(bottom: 8),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: TemaApp.colorTarjeta,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: esHost
|
||||
? Border.all(color: TemaApp.colorAcento.withValues(alpha: 0.5))
|
||||
: null,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Text(esHost ? '👑' : '🎭', style: const TextStyle(fontSize: 20)),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
nombre,
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
),
|
||||
if (esHost)
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: TemaApp.colorAcento.withValues(alpha: 0.2),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: const Text(
|
||||
'HOST',
|
||||
style: TextStyle(
|
||||
color: TemaApp.colorAcento,
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,70 +1,265 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:mobile_scanner/mobile_scanner.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:farolero/l10n/generated/app_localizations.dart';
|
||||
import '../servicios/servicio_nearby.dart';
|
||||
import '../tema/tema_app.dart';
|
||||
|
||||
class PantallaUnirse extends StatelessWidget {
|
||||
/// Pantalla para unirse a una partida multidispositivo
|
||||
class PantallaUnirse extends StatefulWidget {
|
||||
const PantallaUnirse({super.key});
|
||||
|
||||
@override
|
||||
State<PantallaUnirse> createState() => _PantallaUnirseState();
|
||||
}
|
||||
|
||||
class _PantallaUnirseState extends State<PantallaUnirse> {
|
||||
final _nombreController = TextEditingController();
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
bool _escaneando = false;
|
||||
bool _conectando = false;
|
||||
String? _error;
|
||||
String? _salaEncontrada;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_nombreController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _iniciarEscaneo() async {
|
||||
if (!_formKey.currentState!.validate()) return;
|
||||
setState(() {
|
||||
_escaneando = true;
|
||||
_error = null;
|
||||
});
|
||||
}
|
||||
|
||||
Future<void> _onQRDetectado(BarcodeCapture capture) async {
|
||||
if (_conectando) return;
|
||||
|
||||
for (final barcode in capture.barcodes) {
|
||||
final valor = barcode.rawValue;
|
||||
if (valor == null) continue;
|
||||
|
||||
final datos = ServicioNearby.parsearQR(valor);
|
||||
if (datos != null) {
|
||||
setState(() {
|
||||
_escaneando = false;
|
||||
_conectando = true;
|
||||
_salaEncontrada = datos['sala'] as String? ?? 'Sala';
|
||||
});
|
||||
|
||||
// Iniciar búsqueda de hosts via Nearby
|
||||
final nearby = context.read<ServicioNearby>();
|
||||
final ok = await nearby.buscarHosts(_nombreController.text.trim());
|
||||
|
||||
if (!ok && mounted) {
|
||||
setState(() {
|
||||
_conectando = false;
|
||||
_error = 'No se pudo iniciar la búsqueda. Verifica Bluetooth y ubicación.';
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final nearby = context.watch<ServicioNearby>();
|
||||
|
||||
// Si estamos conectados, mostrar pantalla de espera
|
||||
if (nearby.conectado && !nearby.esHost) {
|
||||
return _buildPantallaEspera(context, l10n, nearby);
|
||||
}
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: Text(l10n.joinGameTitle)),
|
||||
appBar: AppBar(
|
||||
title: Text(l10n.joinGameTitle),
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.close),
|
||||
onPressed: () async {
|
||||
await nearby.desconectar();
|
||||
if (context.mounted) Navigator.pop(context);
|
||||
},
|
||||
),
|
||||
),
|
||||
body: _escaneando
|
||||
? _buildEscaner(context, l10n)
|
||||
: _buildFormulario(context, l10n),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFormulario(BuildContext context, AppLocalizations l10n) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Text('📱', style: TextStyle(fontSize: 64)),
|
||||
const SizedBox(height: 24),
|
||||
Text(
|
||||
l10n.joinGameTitle,
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
l10n.enterNameAndScan,
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
|
||||
// Campo nombre
|
||||
TextFormField(
|
||||
controller: _nombreController,
|
||||
decoration: InputDecoration(
|
||||
labelText: l10n.yourName,
|
||||
prefixIcon: const Icon(Icons.person),
|
||||
),
|
||||
validator: (v) {
|
||||
if (v == null || v.trim().isEmpty) {
|
||||
return l10n.nameRequired;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
textCapitalization: TextCapitalization.words,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
if (_conectando) ...[
|
||||
const CircularProgressIndicator(color: TemaApp.colorAcento),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'${l10n.connectingTo} ${_salaEncontrada ?? ""}...',
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
] else ...[
|
||||
// Botón escanear QR
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: ElevatedButton.icon(
|
||||
onPressed: _iniciarEscaneo,
|
||||
icon: const Icon(Icons.qr_code_scanner),
|
||||
label: Text(l10n.scanQR),
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
if (_error != null) ...[
|
||||
const SizedBox(height: 16),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: TemaApp.colorAcento.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
_error!,
|
||||
style: const TextStyle(color: TemaApp.colorAcento),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEscaner(BuildContext context, AppLocalizations l10n) {
|
||||
return Stack(
|
||||
children: [
|
||||
MobileScanner(
|
||||
onDetect: _onQRDetectado,
|
||||
),
|
||||
// Overlay
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(24),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [
|
||||
Colors.transparent,
|
||||
Colors.black.withValues(alpha: 0.8),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
l10n.scanHostQR,
|
||||
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
OutlinedButton(
|
||||
onPressed: () => setState(() => _escaneando = false),
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: Colors.white,
|
||||
side: const BorderSide(color: Colors.white),
|
||||
),
|
||||
child: Text(l10n.cancel),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPantallaEspera(
|
||||
BuildContext context,
|
||||
AppLocalizations l10n,
|
||||
ServicioNearby nearby,
|
||||
) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(_salaEncontrada ?? l10n.joinGameTitle),
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.close),
|
||||
onPressed: () async {
|
||||
await nearby.desconectar();
|
||||
if (context.mounted) Navigator.pop(context);
|
||||
},
|
||||
),
|
||||
),
|
||||
body: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Text('📱', style: TextStyle(fontSize: 64)),
|
||||
const Text('✅', style: TextStyle(fontSize: 64)),
|
||||
const SizedBox(height: 24),
|
||||
Text(
|
||||
l10n.multiDeviceMode,
|
||||
l10n.connectedWaiting,
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
l10n.scanQrDescription,
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: TemaApp.colorNaranja.withValues(alpha: 0.15),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: TemaApp.colorNaranja.withValues(alpha: 0.5)),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
const Text('🚧', style: TextStyle(fontSize: 32)),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
l10n.comingSoon,
|
||||
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
||||
color: TemaApp.colorNaranja,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
l10n.nearbyNotAvailable,
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'${l10n.yourName}: ${_nombreController.text}',
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: OutlinedButton.icon(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
icon: const Icon(Icons.arrow_back),
|
||||
label: Text(l10n.back),
|
||||
),
|
||||
const CircularProgressIndicator(color: TemaApp.colorNaranja),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
l10n.waitingForHost,
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user