484 lines
17 KiB
Dart
484 lines
17 KiB
Dart
import 'dart:convert';
|
|
import 'package:bonsoir/bonsoir.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:mobile_scanner/mobile_scanner.dart';
|
|
import 'package:playwith_core/playwith_core.dart'; // GameChatOverlay 포함됨
|
|
import 'package:playwith_game_quiz/quiz_game.dart';
|
|
import 'package:qr_flutter/qr_flutter.dart';
|
|
|
|
class LobbyScreen extends StatefulWidget {
|
|
const LobbyScreen({super.key});
|
|
|
|
@override
|
|
State<LobbyScreen> createState() => _LobbyScreenState();
|
|
}
|
|
|
|
class _LobbyScreenState extends State<LobbyScreen> {
|
|
final _net = NetworkManager();
|
|
final List<String> _logs = [];
|
|
final ScrollController _scrollController = ScrollController();
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
_net.logStream.listen((log) {
|
|
if (!mounted) return;
|
|
setState(() {
|
|
_logs.add(log);
|
|
if (_logs.length > 100) _logs.removeAt(0);
|
|
});
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
if (_scrollController.hasClients) {
|
|
_scrollController.animateTo(
|
|
_scrollController.position.maxScrollExtent,
|
|
duration: const Duration(milliseconds: 200),
|
|
curve: Curves.easeOut,
|
|
);
|
|
}
|
|
});
|
|
});
|
|
|
|
_net.messageStream.listen((data) {
|
|
if (data['type'] == 'GAME_START') {
|
|
final String gameId = data['gameId'];
|
|
if (gameId == 'quiz_ox') {
|
|
_startGameAndNavigate(QuizGame());
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// [핵심] 채팅 오버레이 적용
|
|
void _startGameAndNavigate(BaseGame game) {
|
|
if (!mounted) return;
|
|
|
|
game.onStart();
|
|
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(builder: (context) {
|
|
Widget gameView;
|
|
if (_net.role == NetworkRole.host) {
|
|
gameView = game.buildHostView(context);
|
|
} else {
|
|
gameView = game.buildGuestView(context);
|
|
}
|
|
|
|
// 플랫폼 구조: 게임 화면 위에 채팅창 오버레이
|
|
return Stack(
|
|
children: [
|
|
gameView, // 1. 게임 화면
|
|
const SafeArea(
|
|
child: GameChatOverlay(), // 2. 채팅창 (Core 제공)
|
|
),
|
|
],
|
|
);
|
|
}),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return ListenableBuilder(
|
|
listenable: _net,
|
|
builder: (context, child) {
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
title: Text('대기실: ${_net.me.nickname}'),
|
|
actions: [
|
|
if (_net.role == NetworkRole.host)
|
|
IconButton(
|
|
icon: const Icon(Icons.qr_code, size: 30),
|
|
onPressed: () => _showHostQRDialog(),
|
|
),
|
|
|
|
if (_net.role != NetworkRole.none)
|
|
IconButton(
|
|
icon: const Icon(Icons.exit_to_app),
|
|
onPressed: () => _net.stopNetwork(),
|
|
)
|
|
],
|
|
),
|
|
body: Column(
|
|
children: [
|
|
Expanded(flex: 3, child: _buildBody()),
|
|
const Divider(thickness: 2, color: Colors.grey),
|
|
_buildDebugConsole(),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildDebugConsole() {
|
|
return Column(
|
|
children: [
|
|
Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(8.0),
|
|
color: Colors.black87,
|
|
child: const Text("DEBUG LOGS", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
|
|
),
|
|
SizedBox(
|
|
height: 150,
|
|
child: Container(
|
|
color: Colors.black,
|
|
child: ListView.builder(
|
|
controller: _scrollController,
|
|
itemCount: _logs.length,
|
|
itemBuilder: (context, index) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0),
|
|
child: Text(
|
|
_logs[index],
|
|
style: const TextStyle(color: Colors.greenAccent, fontSize: 12, fontFamily: 'Courier'),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildBody() {
|
|
if (_net.role == NetworkRole.none) {
|
|
return Center(
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: [
|
|
_BigButton(
|
|
title: "방 만들기\n(Host)",
|
|
color: Colors.blue[100]!,
|
|
icon: Icons.add_home_work,
|
|
onTap: () {
|
|
_net.startHosting("${_net.me.nickname}의 방");
|
|
Future.delayed(const Duration(milliseconds: 500), () {
|
|
if (mounted && _net.role == NetworkRole.host) _showHostQRDialog();
|
|
});
|
|
},
|
|
),
|
|
_BigButton(
|
|
title: "방 찾기\n(Guest)",
|
|
color: Colors.green[100]!,
|
|
icon: Icons.search,
|
|
onTap: () => _showRoomListDialog(),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 30),
|
|
ElevatedButton.icon(
|
|
icon: const Icon(Icons.qr_code_scanner, size: 28),
|
|
label: const Text("QR 코드로 접속하기"),
|
|
style: ElevatedButton.styleFrom(
|
|
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
|
|
),
|
|
onPressed: () => _openQRScanner(),
|
|
),
|
|
const SizedBox(height: 10),
|
|
TextButton(
|
|
onPressed: () => _showManualJoinDialog(),
|
|
child: const Text("IP 주소 직접 입력 (비상용)", style: TextStyle(color: Colors.grey)),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return Column(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(20.0),
|
|
color: Colors.grey[100],
|
|
width: double.infinity,
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(_net.role == NetworkRole.host ? Icons.wifi_tethering : Icons.wifi, color: Colors.blue),
|
|
const SizedBox(width: 10),
|
|
Text(
|
|
_net.role == NetworkRole.host ? "👑 방장 (나)" : "참가자 (나)",
|
|
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
|
|
),
|
|
],
|
|
),
|
|
|
|
if (_net.role == NetworkRole.host) ...[
|
|
const SizedBox(height: 10),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
SelectableText(
|
|
"IP: ${_net.hostIp} / Port: ${_net.hostPort}",
|
|
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
|
|
),
|
|
const SizedBox(width: 10),
|
|
InkWell(
|
|
onTap: () => _showHostQRDialog(),
|
|
child: const Icon(Icons.qr_code, color: Colors.black87),
|
|
)
|
|
],
|
|
),
|
|
const SizedBox(height: 5),
|
|
const Text("QR 버튼을 눌러 친구들을 초대하세요!", style: TextStyle(fontSize: 12, color: Colors.grey)),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
|
|
const Divider(height: 1),
|
|
|
|
Expanded(
|
|
child: ListView(
|
|
padding: const EdgeInsets.all(16),
|
|
children: [
|
|
const Text("참가자 목록", style: TextStyle(color: Colors.grey)),
|
|
const SizedBox(height: 10),
|
|
_buildUserTile(_net.me),
|
|
..._net.guestList.map((guest) => _buildUserTile(guest)),
|
|
|
|
if (_net.guestList.isEmpty && _net.role == NetworkRole.host)
|
|
const Padding(
|
|
padding: EdgeInsets.all(40.0),
|
|
child: Center(child: Text("참가자를 기다리는 중...\nQR 코드를 보여주세요.", textAlign: TextAlign.center, style: TextStyle(color: Colors.grey))),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
_buildReadyButton(),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildUserTile(UserInfo user) {
|
|
bool isMe = user.id == _net.me.id;
|
|
return Card(
|
|
elevation: 2,
|
|
color: user.isReady ? Colors.green[50] : Colors.white,
|
|
margin: const EdgeInsets.symmetric(vertical: 6),
|
|
child: ListTile(
|
|
leading: CircleAvatar(
|
|
backgroundColor: Color(user.colorValue),
|
|
child: Text(user.nickname[0], style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
|
|
),
|
|
title: Text(
|
|
user.nickname + (isMe ? " (나)" : ""),
|
|
style: const TextStyle(fontWeight: FontWeight.bold),
|
|
),
|
|
trailing: user.isReady
|
|
? const Icon(Icons.check_circle, color: Colors.green, size: 32)
|
|
: const Icon(Icons.hourglass_empty, color: Colors.grey, size: 32),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildReadyButton() {
|
|
bool isReady = _net.me.isReady;
|
|
bool canReady = _net.role == NetworkRole.host
|
|
? _net.guestList.isNotEmpty
|
|
: true;
|
|
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 10, offset: const Offset(0, -5))],
|
|
),
|
|
child: ElevatedButton(
|
|
onPressed: canReady
|
|
? () => _net.toggleReady()
|
|
: () {
|
|
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("참가자가 들어와야 게임을 시작할 수 있습니다.")));
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: !canReady
|
|
? Colors.grey
|
|
: (isReady ? Colors.redAccent : Colors.blueAccent),
|
|
padding: const EdgeInsets.symmetric(vertical: 18),
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
|
elevation: canReady ? 5 : 0,
|
|
),
|
|
child: Text(
|
|
isReady ? "준비 취소 (WAIT)" : "준비 완료 (READY)",
|
|
style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _showHostQRDialog() {
|
|
if (_net.hostIp == null || _net.hostPort == null) return;
|
|
final qrData = jsonEncode({'ip': _net.hostIp, 'port': _net.hostPort});
|
|
showDialog(
|
|
context: context,
|
|
builder: (context) => Dialog(
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(24.0),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
const Text("초대 QR 코드", style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
|
|
const SizedBox(height: 20),
|
|
Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(border: Border.all(color: Colors.black12), borderRadius: BorderRadius.circular(10)),
|
|
child: QrImageView(data: qrData, version: QrVersions.auto, size: 220.0),
|
|
),
|
|
const SizedBox(height: 20),
|
|
Text("IP: ${_net.hostIp} / Port: ${_net.hostPort}", style: const TextStyle(color: Colors.grey)),
|
|
const SizedBox(height: 20),
|
|
ElevatedButton(onPressed: () => Navigator.pop(context), child: const Text("닫기"))
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _openQRScanner() {
|
|
bool isScanCompleted = false;
|
|
Navigator.of(context).push(MaterialPageRoute(
|
|
builder: (context) => Scaffold(
|
|
appBar: AppBar(title: const Text("QR 코드 스캔")),
|
|
body: MobileScanner(
|
|
onDetect: (capture) {
|
|
if (isScanCompleted) return;
|
|
final List<Barcode> barcodes = capture.barcodes;
|
|
for (final barcode in barcodes) {
|
|
final String? code = barcode.rawValue;
|
|
if (code != null) {
|
|
try {
|
|
final data = jsonDecode(code);
|
|
if (data['ip'] != null && data['port'] != null) {
|
|
isScanCompleted = true;
|
|
Navigator.pop(context);
|
|
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("QR 인식 성공! 접속 중...")));
|
|
_net.joinRoom(data['ip'], data['port']);
|
|
return;
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
}
|
|
},
|
|
),
|
|
),
|
|
));
|
|
}
|
|
|
|
void _showRoomListDialog() {
|
|
showDialog(
|
|
context: context,
|
|
builder: (context) => AlertDialog(
|
|
title: const Text("방 찾는 중..."),
|
|
content: SizedBox(
|
|
width: double.maxFinite,
|
|
height: 300,
|
|
child: StreamBuilder<List<BonsoirService>>(
|
|
stream: _net.discoverRooms(),
|
|
builder: (context, snapshot) {
|
|
if (!snapshot.hasData || snapshot.data!.isEmpty) {
|
|
return const Center(child: Text("검색 중... (로그를 확인하세요)"));
|
|
}
|
|
final services = snapshot.data!;
|
|
return ListView.builder(
|
|
itemCount: services.length,
|
|
itemBuilder: (context, index) {
|
|
final service = services[index];
|
|
final displayName = service.name.split('#').first;
|
|
final ip = service.attributes?['ip'] ?? '알 수 없음';
|
|
return ListTile(
|
|
leading: const Icon(Icons.meeting_room),
|
|
title: Text(displayName),
|
|
subtitle: Text("IP: $ip"),
|
|
onTap: () {
|
|
Navigator.pop(context);
|
|
if (service.attributes != null && service.attributes!['ip'] != null) {
|
|
_net.joinRoom(service.attributes!['ip']!, service.port);
|
|
}
|
|
},
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
actions: [TextButton(onPressed: () => Navigator.pop(context), child: const Text("닫기"))],
|
|
),
|
|
);
|
|
}
|
|
|
|
void _showManualJoinDialog() {
|
|
final ipController = TextEditingController(text: "192.168.");
|
|
final portController = TextEditingController();
|
|
showDialog(
|
|
context: context,
|
|
builder: (context) => AlertDialog(
|
|
title: const Text("수동 접속"),
|
|
content: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
const Text("방장 화면의 IP/Port를 입력하세요."),
|
|
TextField(controller: ipController, decoration: const InputDecoration(labelText: "IP")),
|
|
TextField(controller: portController, decoration: const InputDecoration(labelText: "Port")),
|
|
],
|
|
),
|
|
actions: [
|
|
TextButton(onPressed: () => Navigator.pop(context), child: const Text("취소")),
|
|
ElevatedButton(
|
|
onPressed: () {
|
|
final ip = ipController.text.trim();
|
|
final port = int.tryParse(portController.text.trim());
|
|
if (ip.isNotEmpty && port != null) {
|
|
Navigator.pop(context);
|
|
_net.joinRoom(ip, port);
|
|
}
|
|
},
|
|
child: const Text("접속"),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _BigButton extends StatelessWidget {
|
|
final String title;
|
|
final Color color;
|
|
final IconData icon;
|
|
final VoidCallback onTap;
|
|
const _BigButton({required this.title, required this.color, required this.icon, required this.onTap});
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: Container(
|
|
width: 140, height: 140,
|
|
decoration: BoxDecoration(
|
|
color: color, borderRadius: BorderRadius.circular(20),
|
|
boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 10, offset: const Offset(0, 5))],
|
|
),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(icon, size: 40, color: Colors.black54),
|
|
const SizedBox(height: 10),
|
|
Text(title, textAlign: TextAlign.center, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
} |