playWith/apps/app/lib/lobby_screen.dart

615 lines
22 KiB
Dart
Raw Normal View History

2025-11-24 17:53:00 +09:00
import 'dart:convert';
2025-11-21 18:04:15 +09:00
import 'package:bonsoir/bonsoir.dart';
import 'package:flutter/material.dart';
2025-11-24 17:53:00 +09:00
import 'package:mobile_scanner/mobile_scanner.dart';
2025-11-26 18:10:10 +09:00
import 'package:playwith_core/playwith_core.dart';
2025-11-24 17:53:00 +09:00
import 'package:qr_flutter/qr_flutter.dart';
2025-11-21 18:04:15 +09:00
2025-11-26 18:10:10 +09:00
2025-11-21 18:04:15 +09:00
class LobbyScreen extends StatefulWidget {
const LobbyScreen({super.key});
@override
State<LobbyScreen> createState() => _LobbyScreenState();
}
class _LobbyScreenState extends State<LobbyScreen> {
2025-11-24 17:53:00 +09:00
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);
});
2025-11-26 18:10:10 +09:00
if (SettingsNotifier().isShowDebugLog) {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (_scrollController.hasClients) {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 200),
curve: Curves.easeOut,
);
}
});
}
2025-11-24 17:53:00 +09:00
});
_net.messageStream.listen((data) {
if (data['type'] == 'GAME_START') {
final String gameId = data['gameId'];
2025-11-26 18:10:10 +09:00
if (gameId == 'quiz_ox' || gameId == 'quiz_mix') {
2025-11-24 17:53:00 +09:00
_startGameAndNavigate(QuizGame());
2025-11-26 18:10:10 +09:00
}
else if (gameId == 'sudoku_battle') {
_startGameAndNavigate(SudokuMultiGame());
}
else if (gameId == 'spider_battle') {
_startGameAndNavigate(SpiderMultiGame());
}
// [추가] 오목 & 장기 연결
else if (gameId == 'omok') {
_startGameAndNavigate(OmokGame());
}
else if (gameId == 'janggi') {
_startGameAndNavigate(JanggiGame());
}
else if (gameId == 'yutnori') {
_startGameAndNavigate(YutnoriGame());
}
else if (gameId == 'memory_battle') {
_startGameAndNavigate(MemoryGame());
}
// [추가] 밸런스 & 터치 배틀 연결
else if (gameId == 'balance_game') {
_startGameAndNavigate(BalanceGame());
}
else if (gameId == 'tap_battle') {
_startGameAndNavigate(TapBattleGame());
2025-11-24 17:53:00 +09:00
}
}
});
}
2025-11-26 18:10:10 +09:00
Future<void> _startGameAndNavigate(BaseGame game) async {
2025-11-24 17:53:00 +09:00
if (!mounted) return;
game.onStart();
2025-11-26 18:10:10 +09:00
await Navigator.push(
2025-11-24 17:53:00 +09:00
context,
MaterialPageRoute(builder: (context) {
Widget gameView;
if (_net.role == NetworkRole.host) {
gameView = game.buildHostView(context);
} else {
gameView = game.buildGuestView(context);
}
return Stack(
children: [
2025-11-25 17:25:16 +09:00
gameView,
2025-11-26 18:10:10 +09:00
const SafeArea(
// 배너 광고 높이만큼 띄워서 채팅창 표시
child: GameChatOverlay(bottomOffset: 60.0),
),
2025-11-24 17:53:00 +09:00
],
);
}),
);
2025-11-26 18:10:10 +09:00
// [수정] 게임 종료 후 복귀 시 로직
// 솔로 모드였다면 네트워크를 종료하고 초기 화면으로 돌아감
if (_net.hostIp == "Solo Mode") {
_net.stopNetwork();
}
}
void _navigateToGameSelection({required bool isSolo}) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => GameSelectionScreen(
onGameSelected: (gameId) async {
// 스도쿠 선택 시 난이도 팝업
Map<String, dynamic> config = {};
if (gameId == 'sudoku_battle') {
final difficulty = await _showDifficultyDialog();
if (difficulty == null) return; // 취소함
config['difficulty'] = difficulty;
}
if (!mounted) return;
Navigator.pop(context); // 선택 화면 닫기
if (isSolo) {
_net.startSoloMode(gameId, config: config);
} else {
_net.selectGame(gameId, config: config);
_net.startHosting("${_net.me.nickname}의 방");
Future.delayed(const Duration(milliseconds: 500), () {
if (mounted && _net.role == NetworkRole.host) _showHostQRDialog();
});
}
},
),
),
);
}
// [추가] 난이도 선택 다이얼로그
Future<int?> _showDifficultyDialog() {
return showDialog<int>(
context: context,
barrierDismissible: false,
builder: (context) => AlertDialog(
title: const Text("난이도 선택"),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
title: const Text("쉬움"),
leading: const Icon(Icons.filter_1, color: Colors.green),
onTap: () => Navigator.pop(context, 4),
),
ListTile(
title: const Text("보통"),
leading: const Icon(Icons.filter_2, color: Colors.blue),
onTap: () => Navigator.pop(context, 5), // 4~5 레벨이 보통 9x9
),
ListTile(
title: const Text("약간 어려움"),
leading: const Icon(Icons.filter_3, color: Colors.red),
onTap: () => Navigator.pop(context, 6), // 7 레벨이 어려움
),
ListTile(
title: const Text("약간 어려움"),
leading: const Icon(Icons.filter_4, color: Colors.red),
onTap: () => Navigator.pop(context, 7), // 7 레벨이 어려움
),
ListTile(
title: const Text("개 어려움"),
leading: const Icon(Icons.filter_5, color: Colors.red),
onTap: () => Navigator.pop(context, 8), // 7 레벨이 어려움
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, null),
child: const Text("취소"),
)
],
),
);
2025-11-24 17:53:00 +09:00
}
2025-11-21 18:04:15 +09:00
@override
Widget build(BuildContext context) {
return ListenableBuilder(
listenable: _net,
builder: (context, child) {
2025-11-26 18:10:10 +09:00
return ListenableBuilder(
listenable: SettingsNotifier(),
builder: (context, _) {
return Scaffold(
appBar: AppBar(
title: Text('대기실: ${_net.me.nickname}'),
actions: [
if (_net.role == NetworkRole.host)
IconButton(
icon: const Icon(Icons.qr_code),
tooltip: "초대 QR 보기",
onPressed: () => _showHostQRDialog(),
),
if (_net.role != NetworkRole.none)
IconButton(
icon: const Icon(Icons.exit_to_app),
tooltip: "나가기",
onPressed: () => _net.stopNetwork(),
)
],
),
bottomNavigationBar: const SafeArea(child: AdBannerWidget()),
body: Column(
children: [
Expanded(
flex: 3,
child: _net.role == NetworkRole.none
? _buildInitView()
: _buildLobbyView()
),
const Divider(thickness: 1, height: 1),
if (SettingsNotifier().isShowDebugLog)
_buildDebugConsole(),
],
),
);
},
2025-11-21 18:04:15 +09:00
);
},
);
}
2025-11-25 17:25:16 +09:00
Widget _buildInitView() {
return Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("게임을 시작해볼까요?", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
const SizedBox(height: 40),
2025-11-26 18:10:10 +09:00
_BigButton(
title: "혼자 연습하기\n(Single)",
color: Colors.orange[100]!,
icon: Icons.person,
onTap: () => _navigateToGameSelection(isSolo: true),
),
const SizedBox(height: 30),
2025-11-25 17:25:16 +09:00
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_BigButton(
title: "방 만들기\n(Host)",
color: Colors.blue[100]!,
icon: Icons.add_home_work,
2025-11-26 18:10:10 +09:00
onTap: () => _navigateToGameSelection(isSolo: false),
2025-11-24 17:53:00 +09:00
),
2025-11-25 17:25:16 +09:00
_BigButton(
title: "방 찾기\n(Guest)",
color: Colors.green[100]!,
icon: Icons.search,
onTap: () => _showRoomListDialog(),
),
],
),
2025-11-26 18:10:10 +09:00
2025-11-25 17:25:16 +09:00
const SizedBox(height: 30),
ElevatedButton.icon(
icon: const Icon(Icons.qr_code_scanner),
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)),
),
],
2025-11-21 18:04:15 +09:00
),
2025-11-25 17:25:16 +09:00
),
);
}
2025-11-21 18:04:15 +09:00
2025-11-25 17:25:16 +09:00
Widget _buildLobbyView() {
2025-11-26 18:10:10 +09:00
final currentGame = AppGames.getById(_net.selectedGameId);
2025-11-24 17:53:00 +09:00
return Column(
children: [
Container(
width: double.infinity,
2025-11-26 18:10:10 +09:00
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 20),
color: Colors.indigo.withOpacity(0.1),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(currentGame.icon, size: 20, color: Colors.indigo),
const SizedBox(width: 8),
Text(
"선택된 게임: ${currentGame.name}",
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.indigo),
),
],
2025-11-25 17:25:16 +09:00
),
2025-11-26 18:10:10 +09:00
),
Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
color: Colors.grey[100],
2025-11-24 17:53:00 +09:00
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) ...[
2025-11-26 18:10:10 +09:00
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),
)
],
2025-11-24 17:53:00 +09:00
),
const SizedBox(height: 5),
2025-11-25 17:25:16 +09:00
const Text("QR 코드를 눌러 친구를 초대하세요!", style: TextStyle(fontSize: 12, color: Colors.grey)),
] else ...[
const SizedBox(height: 10),
Text("방장 IP: ${_net.hostIp ?? '...'}", style: const TextStyle(color: Colors.grey)),
]
2025-11-24 17:53:00 +09:00
],
),
2025-11-21 18:04:15 +09:00
),
2025-11-26 18:10:10 +09:00
const Divider(height: 1),
2025-11-24 17:53:00 +09:00
Expanded(
child: ListView(
padding: const EdgeInsets.all(16),
children: [
2025-11-26 18:10:10 +09:00
const Text("참가자 목록", style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold)),
2025-11-24 17:53:00 +09:00
const SizedBox(height: 10),
2025-11-25 17:25:16 +09:00
_buildUserTile(_net.me, isMe: true),
..._net.guestList.map((guest) => _buildUserTile(guest, isMe: false)),
2025-11-24 17:53:00 +09:00
if (_net.guestList.isEmpty && _net.role == NetworkRole.host)
2025-11-26 18:10:10 +09:00
const Padding(
padding: EdgeInsets.all(40.0),
child: Center(child: Text("참가자를 기다리는 중...\nQR 코드를 보여주세요.", textAlign: TextAlign.center, style: TextStyle(color: Colors.grey))),
2025-11-24 17:53:00 +09:00
),
],
),
2025-11-21 18:04:15 +09:00
),
2025-11-26 18:10:10 +09:00
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: _buildReadyButton(),
),
2025-11-24 17:53:00 +09:00
],
);
}
2025-11-25 17:25:16 +09:00
Widget _buildUserTile(UserInfo user, {required bool isMe}) {
2025-11-24 17:53:00 +09:00
return Card(
2025-11-25 17:25:16 +09:00
elevation: user.isReady ? 4 : 1,
2025-11-24 17:53:00 +09:00
color: user.isReady ? Colors.green[50] : Colors.white,
2025-11-25 17:25:16 +09:00
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: user.isReady ? const BorderSide(color: Colors.green, width: 2) : BorderSide.none,
),
2025-11-24 17:53:00 +09:00
margin: const EdgeInsets.symmetric(vertical: 6),
child: ListTile(
2025-11-25 17:25:16 +09:00
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
2025-11-26 18:10:10 +09:00
leading: AvatarWidget(user: user, size: 50),
2025-11-24 17:53:00 +09:00
title: Text(
user.nickname + (isMe ? " (나)" : ""),
2025-11-25 17:25:16 +09:00
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
2025-11-24 17:53:00 +09:00
),
2025-11-25 17:25:16 +09:00
subtitle: Text(isMe ? "준비 버튼을 눌러주세요" : (user.isReady ? "준비 완료!" : "준비 중..."), style: TextStyle(color: Colors.grey[600], fontSize: 12)),
2025-11-24 17:53:00 +09:00
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;
2025-11-26 18:10:10 +09:00
bool canReady = _net.role == NetworkRole.host ? _net.guestList.isNotEmpty : true;
2025-11-24 17:53:00 +09:00
return Container(
width: double.infinity,
2025-11-26 18:10:10 +09:00
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
2025-11-24 17:53:00 +09:00
child: ElevatedButton(
onPressed: canReady
? () => _net.toggleReady()
2025-11-26 18:10:10 +09:00
: () => ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("친구를 초대해야 시작할 수 있습니다!"))),
2025-11-24 17:53:00 +09:00
style: ElevatedButton.styleFrom(
2025-11-26 18:10:10 +09:00
backgroundColor: !canReady ? Colors.grey[300] : (isReady ? Colors.redAccent : Colors.blueAccent),
2025-11-24 17:53:00 +09:00
padding: const EdgeInsets.symmetric(vertical: 18),
2025-11-26 18:10:10 +09:00
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
2025-11-24 17:53:00 +09:00
elevation: canReady ? 5 : 0,
),
child: Text(
isReady ? "준비 취소 (WAIT)" : "준비 완료 (READY)",
2025-11-26 18:10:10 +09:00
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: !canReady ? Colors.grey : Colors.white),
2025-11-24 17:53:00 +09:00
),
),
);
}
2025-11-25 17:25:16 +09:00
Widget _buildDebugConsole() {
return Column(
children: [
2025-11-26 18:10:10 +09:00
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)),
2025-11-25 17:25:16 +09:00
),
SizedBox(
2025-11-26 18:10:10 +09:00
height: 150,
2025-11-25 17:25:16 +09:00
child: Container(
color: Colors.black,
child: ListView.builder(
controller: _scrollController,
itemCount: _logs.length,
itemBuilder: (context, index) {
return Padding(
2025-11-26 18:10:10 +09:00
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0),
2025-11-25 17:25:16 +09:00
child: Text(
_logs[index],
2025-11-26 18:10:10 +09:00
style: const TextStyle(color: Colors.greenAccent, fontSize: 12, fontFamily: 'Courier'),
2025-11-25 17:25:16 +09:00
),
);
},
),
),
),
],
);
}
2025-11-24 17:53:00 +09:00
void _showHostQRDialog() {
if (_net.hostIp == null || _net.hostPort == null) return;
final qrData = jsonEncode({'ip': _net.hostIp, 'port': _net.hostPort});
2025-11-25 17:25:16 +09:00
2025-11-24 17:53:00 +09:00
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: [
2025-11-26 18:10:10 +09:00
const Text("초대 QR 코드", style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
2025-11-24 17:53:00 +09:00
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),
2025-11-25 17:25:16 +09:00
SelectableText("IP: ${_net.hostIp}\nPort: ${_net.hostPort}", textAlign: TextAlign.center, style: const TextStyle(color: Colors.grey)),
2025-11-24 17:53:00 +09:00
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(
2025-11-25 17:25:16 +09:00
appBar: AppBar(title: const Text("QR 스캔")),
2025-11-24 17:53:00 +09:00
body: MobileScanner(
onDetect: (capture) {
if (isScanCompleted) return;
2025-11-25 17:25:16 +09:00
for (final barcode in capture.barcodes) {
if (barcode.rawValue != null) {
2025-11-24 17:53:00 +09:00
try {
2025-11-25 17:25:16 +09:00
final data = jsonDecode(barcode.rawValue!);
2025-11-24 17:53:00 +09:00
if (data['ip'] != null && data['port'] != null) {
isScanCompleted = true;
Navigator.pop(context);
2025-11-25 17:25:16 +09:00
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("접속 중...")));
2025-11-24 17:53:00 +09:00
_net.joinRoom(data['ip'], data['port']);
return;
}
} catch (e) {}
}
}
},
),
),
));
2025-11-21 18:04:15 +09:00
}
void _showRoomListDialog() {
showDialog(
context: context,
2025-11-24 17:53:00 +09:00
builder: (context) => AlertDialog(
2025-11-26 18:10:10 +09:00
title: const Text("방 찾는 중..."),
2025-11-24 17:53:00 +09:00
content: SizedBox(
width: double.maxFinite,
height: 300,
child: StreamBuilder<List<BonsoirService>>(
stream: _net.discoverRooms(),
builder: (context, snapshot) {
if (!snapshot.hasData || snapshot.data!.isEmpty) {
2025-11-25 17:25:16 +09:00
return const Center(child: Text("검색 중...\n같은 와이파이인지 확인하세요."));
2025-11-24 17:53:00 +09:00
}
return ListView.builder(
2025-11-25 17:25:16 +09:00
itemCount: snapshot.data!.length,
2025-11-24 17:53:00 +09:00
itemBuilder: (context, index) {
2025-11-25 17:25:16 +09:00
final service = snapshot.data![index];
2025-11-24 17:53:00 +09:00
final ip = service.attributes?['ip'] ?? '알 수 없음';
return ListTile(
leading: const Icon(Icons.meeting_room),
2025-11-25 17:25:16 +09:00
title: Text(service.name.split('#').first),
subtitle: Text(ip),
2025-11-24 17:53:00 +09:00
onTap: () {
Navigator.pop(context);
if (service.attributes != null && service.attributes!['ip'] != null) {
_net.joinRoom(service.attributes!['ip']!, service.port);
}
},
);
},
);
},
2025-11-21 18:04:15 +09:00
),
2025-11-24 17:53:00 +09:00
),
actions: [TextButton(onPressed: () => Navigator.pop(context), child: const Text("닫기"))],
),
2025-11-21 18:04:15 +09:00
);
}
2025-11-24 17:53:00 +09:00
void _showManualJoinDialog() {
2025-11-25 17:25:16 +09:00
final ipCtrl = TextEditingController(text: "192.168.");
final portCtrl = TextEditingController();
2025-11-24 17:53:00 +09:00
showDialog(
context: context,
builder: (context) => AlertDialog(
2025-11-25 17:25:16 +09:00
title: const Text("직접 입력"),
2025-11-24 17:53:00 +09:00
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
2025-11-25 17:25:16 +09:00
TextField(controller: ipCtrl, decoration: const InputDecoration(labelText: "IP Address")),
TextField(controller: portCtrl, decoration: const InputDecoration(labelText: "Port")),
2025-11-24 17:53:00 +09:00
],
),
actions: [
TextButton(onPressed: () => Navigator.pop(context), child: const Text("취소")),
ElevatedButton(
onPressed: () {
2025-11-25 17:25:16 +09:00
final ip = ipCtrl.text.trim();
final port = int.tryParse(portCtrl.text.trim());
2025-11-24 17:53:00 +09:00
if (ip.isNotEmpty && port != null) {
Navigator.pop(context);
_net.joinRoom(ip, port);
}
},
child: const Text("접속"),
),
],
),
);
2025-11-21 18:04:15 +09:00
}
}
class _BigButton extends StatelessWidget {
2025-11-25 17:25:16 +09:00
final String title; final Color color; final IconData icon; final VoidCallback onTap;
2025-11-24 17:53:00 +09:00
const _BigButton({required this.title, required this.color, required this.icon, required this.onTap});
2025-11-21 18:04:15 +09:00
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
2025-11-25 17:25:16 +09:00
width: 130, height: 130,
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: 16, fontWeight: FontWeight.bold))]),
2025-11-21 18:04:15 +09:00
),
);
}
}