549 lines
17 KiB
Dart
549 lines
17 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:huacu_mobile/game_pallete.dart';
|
|
import 'package:huacu_mobile/models/auth_data.dart';
|
|
import 'package:huacu_mobile/models/chat_entry.dart';
|
|
import 'package:huacu_mobile/models/game.dart';
|
|
import 'package:huacu_mobile/ui/widgets/color_plate.dart';
|
|
import 'package:huacu_mobile/ui/widgets/static_color_plate.dart';
|
|
import 'package:socket_io_client/socket_io_client.dart' as io;
|
|
|
|
class GamePage extends StatefulWidget {
|
|
const GamePage({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
State<GamePage> createState() => _GamePageState();
|
|
}
|
|
|
|
class _GamePageState extends State<GamePage> {
|
|
final io.Socket socket = Get.find();
|
|
final AuthData authData = Get.find();
|
|
final Game gameInfo = Get.find();
|
|
|
|
bool get isGuesser => gameInfo.colors.isEmpty;
|
|
|
|
var chat = <ChatEntry>[].obs;
|
|
var guessedColors = <String>{}.obs;
|
|
|
|
final _chatController = TextEditingController();
|
|
final _scrollController = ScrollController();
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
socket.on("hello", _onHelloEvent);
|
|
socket.on("gameStatus", _onGameStatusEvent);
|
|
socket.on("leaveGameResponse", _onLeaveGameResponseEvent);
|
|
socket.on("chatResponse", _onChatResponseEvent);
|
|
if (isGuesser) {
|
|
socket.on("guessResponse", _onGuessResponseEvent);
|
|
} else {
|
|
socket.on("guess", _onGuessEvent);
|
|
}
|
|
|
|
chat.listen((data) {
|
|
_scrollToEnd();
|
|
_showMessageNotification(data.last);
|
|
});
|
|
}
|
|
|
|
void _onHelloEvent(dynamic idky) {
|
|
socket.dispose();
|
|
Get.offAllNamed("/auth");
|
|
}
|
|
|
|
void _onGameStatusEvent(dynamic data) {
|
|
bool won = data[0];
|
|
Get.defaultDialog(
|
|
title: "Game ended",
|
|
middleText: won ? "You won!" : "You lost!",
|
|
barrierDismissible: false,
|
|
onConfirm: () {
|
|
Get.put(authData);
|
|
Get.put(socket);
|
|
Get.offAllNamed("/home");
|
|
},
|
|
);
|
|
}
|
|
|
|
void _onLeaveGameResponseEvent(dynamic data) {
|
|
if (data[0] == true && data[1] == 410) {
|
|
Get.defaultDialog(
|
|
title: "Game ended",
|
|
middleText: "Your opponent left the game",
|
|
barrierDismissible: false,
|
|
onConfirm: () {
|
|
Get.put(authData);
|
|
Get.put(socket);
|
|
Get.offAllNamed("/home");
|
|
},
|
|
);
|
|
} else {
|
|
Get.put(authData);
|
|
Get.put(socket);
|
|
Get.offAllNamed("/home");
|
|
}
|
|
}
|
|
|
|
void _onChatResponseEvent(dynamic data) {
|
|
bool ok = data[0];
|
|
if (ok) {
|
|
chat.add(ChatEntry(data[1]["from"], data[1]["message"]));
|
|
}
|
|
}
|
|
|
|
void _onGuessEvent(dynamic data) {
|
|
setState(() {
|
|
guessedColors.add(data);
|
|
});
|
|
}
|
|
|
|
void _onGuessResponseEvent(dynamic data) {
|
|
bool ok = data[0];
|
|
if (ok) {
|
|
Get.snackbar("Success", "Guess sent successfully");
|
|
} else {
|
|
Get.snackbar("Error", "Guess failed to send");
|
|
}
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
socket.off("hello", _onHelloEvent);
|
|
socket.off("gameStatus", _onGameStatusEvent);
|
|
socket.off("leaveGameResponse", _onLeaveGameResponseEvent);
|
|
socket.off("chatResponse", _onChatResponseEvent);
|
|
socket.off("guessResponse", _onGuessResponseEvent);
|
|
socket.off("guess", _onGuessEvent);
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final size = MediaQuery.of(context).size;
|
|
|
|
return SafeArea(
|
|
child: Scaffold(
|
|
body: SizedBox(
|
|
width: size.width,
|
|
height: size.height,
|
|
child: Stack(
|
|
children: [
|
|
InteractiveViewer(
|
|
constrained: false,
|
|
boundaryMargin: const EdgeInsets.all(800),
|
|
maxScale: 0.8,
|
|
minScale: 0.3,
|
|
child:
|
|
isGuesser ? _generateGameField() : _generateStaticField(),
|
|
),
|
|
Positioned(
|
|
bottom: 0,
|
|
right: 0,
|
|
child: InkResponse(
|
|
onTap: _openChat,
|
|
child: Container(
|
|
width: 50,
|
|
height: 50,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.amberAccent,
|
|
borderRadius:
|
|
BorderRadius.only(topLeft: Radius.circular(25)),
|
|
),
|
|
child: const Icon(
|
|
Icons.message,
|
|
color: Colors.black,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 0,
|
|
right: 0,
|
|
child: InkResponse(
|
|
onTap: _leaveGame,
|
|
child: Container(
|
|
width: 50,
|
|
height: 50,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.redAccent,
|
|
borderRadius:
|
|
BorderRadius.only(bottomLeft: Radius.circular(25)),
|
|
),
|
|
child: const Icon(
|
|
Icons.close,
|
|
color: Colors.black,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
if (!isGuesser)
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
child: InkResponse(
|
|
onTap: _openColorsCard,
|
|
child: Container(
|
|
width: 50,
|
|
height: 50,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.greenAccent,
|
|
borderRadius:
|
|
BorderRadius.only(topRight: Radius.circular(25)),
|
|
),
|
|
child: const Icon(
|
|
Icons.content_copy_rounded,
|
|
color: Colors.black,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 0,
|
|
left: 0,
|
|
child: Container(
|
|
height: 50,
|
|
width: 50,
|
|
alignment: Alignment.center,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.black,
|
|
borderRadius:
|
|
BorderRadius.only(bottomRight: Radius.circular(25)),
|
|
),
|
|
child: Obx(
|
|
() => Text("${guessedColors.length}/${gameInfo.tries}")),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _generateGameField() {
|
|
return Container(
|
|
width: (palletteWidth + 2) * 100,
|
|
height: (palletteAlphabet.length + 2) * 100,
|
|
padding: const EdgeInsets.all(10),
|
|
child: Stack(
|
|
children: [
|
|
for (int i = 0; i < palletteAlphabet.length; i++)
|
|
for (int j = 0; j < palletteWidth; j++)
|
|
Positioned(
|
|
left: (j + 1) * 100.0,
|
|
top: (i + 1) * 100.0,
|
|
child: ColorPlate(
|
|
plateName: "${palletteAlphabet[i]}${j + 1}",
|
|
size: 90,
|
|
onSelected: _onPlateSelected,
|
|
),
|
|
),
|
|
// Now I need to generate letters and numbers around field
|
|
for (int i = 1; i <= palletteWidth; i++)
|
|
Positioned(
|
|
left: i * 100.0,
|
|
top: 0,
|
|
child: Container(
|
|
width: 90,
|
|
height: 90,
|
|
alignment: Alignment.center,
|
|
child: Text("$i", style: const TextStyle(fontSize: 40)),
|
|
),
|
|
),
|
|
for (int i = 1; i <= palletteWidth; i++)
|
|
Positioned(
|
|
left: i * 100.0,
|
|
top: (palletteAlphabet.length + 1) * 100,
|
|
child: Container(
|
|
width: 90,
|
|
height: 90,
|
|
alignment: Alignment.center,
|
|
child: Text("$i", style: const TextStyle(fontSize: 40)),
|
|
),
|
|
),
|
|
for (int i = 0; i < palletteAlphabet.length; i++)
|
|
Positioned(
|
|
left: 0,
|
|
top: (i + 1) * 100,
|
|
child: Container(
|
|
width: 90,
|
|
height: 90,
|
|
alignment: Alignment.center,
|
|
child: Text(palletteAlphabet[i],
|
|
style: const TextStyle(fontSize: 40)),
|
|
),
|
|
),
|
|
for (int i = 0; i < palletteAlphabet.length; i++)
|
|
Positioned(
|
|
left: (palletteWidth + 1) * 100,
|
|
top: (i + 1) * 100,
|
|
child: Container(
|
|
width: 90,
|
|
height: 90,
|
|
alignment: Alignment.center,
|
|
child: Text(palletteAlphabet[i],
|
|
style: const TextStyle(fontSize: 40)),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _generateStaticField() {
|
|
return Container(
|
|
width: (palletteWidth + 2) * 100,
|
|
height: (palletteAlphabet.length + 2) * 100,
|
|
padding: const EdgeInsets.all(10),
|
|
child: Stack(
|
|
children: [
|
|
for (int i = 0; i < palletteAlphabet.length; i++)
|
|
for (int j = 0; j < palletteWidth; j++)
|
|
Positioned(
|
|
left: (j + 1) * 100.0,
|
|
top: (i + 1) * 100.0,
|
|
child: StaticColorPlate(
|
|
plateName: "${palletteAlphabet[i]}${j + 1}",
|
|
size: 90,
|
|
marked:
|
|
guessedColors.contains("${palletteAlphabet[i]}${j + 1}"),
|
|
),
|
|
),
|
|
for (int i = 1; i <= palletteWidth; i++)
|
|
Positioned(
|
|
left: i * 100.0,
|
|
top: 0,
|
|
child: Container(
|
|
width: 90,
|
|
height: 90,
|
|
alignment: Alignment.center,
|
|
child: Text("$i", style: const TextStyle(fontSize: 40)),
|
|
),
|
|
),
|
|
for (int i = 1; i <= palletteWidth; i++)
|
|
Positioned(
|
|
left: i * 100.0,
|
|
top: (palletteAlphabet.length + 1) * 100,
|
|
child: Container(
|
|
width: 90,
|
|
height: 90,
|
|
alignment: Alignment.center,
|
|
child: Text("$i", style: const TextStyle(fontSize: 40)),
|
|
),
|
|
),
|
|
for (int i = 0; i < palletteAlphabet.length; i++)
|
|
Positioned(
|
|
left: 0,
|
|
top: (i + 1) * 100,
|
|
child: Container(
|
|
width: 90,
|
|
height: 90,
|
|
alignment: Alignment.center,
|
|
child: Text(palletteAlphabet[i],
|
|
style: const TextStyle(fontSize: 40)),
|
|
),
|
|
),
|
|
for (int i = 0; i < palletteAlphabet.length; i++)
|
|
Positioned(
|
|
left: (palletteWidth + 1) * 100,
|
|
top: (i + 1) * 100,
|
|
child: Container(
|
|
width: 90,
|
|
height: 90,
|
|
alignment: Alignment.center,
|
|
child: Text(palletteAlphabet[i],
|
|
style: const TextStyle(fontSize: 40)),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
void _onPlateSelected(String name) {
|
|
guessedColors.add(name);
|
|
socket.emit("guess", [gameInfo.id, name]);
|
|
}
|
|
|
|
void _openChat() {
|
|
Get.bottomSheet(BottomSheet(
|
|
onClosing: () {},
|
|
clipBehavior: Clip.antiAliasWithSaveLayer,
|
|
builder: (context) => SizedBox(
|
|
height: 300,
|
|
child: _buildBottomSheetChatContent(),
|
|
),
|
|
));
|
|
|
|
_scrollToEnd();
|
|
}
|
|
|
|
void _leaveGame() {
|
|
Get.defaultDialog(
|
|
title: "Leave game",
|
|
middleText: "Are you sure you want to leave the game?",
|
|
barrierDismissible: false,
|
|
textConfirm: "Yes",
|
|
textCancel: "No",
|
|
onConfirm: () {
|
|
socket.emit("leaveGame", [gameInfo.id]);
|
|
},
|
|
onCancel: () => Get.back(),
|
|
);
|
|
}
|
|
|
|
void _openColorsCard() {
|
|
Get.dialog(AlertDialog(
|
|
title: const Text("Colors card"),
|
|
content: SizedBox(
|
|
width: 300,
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
GridView.builder(
|
|
shrinkWrap: true,
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 2,
|
|
),
|
|
itemCount: 6,
|
|
itemBuilder: (context, index) {
|
|
final color = gameInfo.colors.elementAt(index);
|
|
return Padding(
|
|
padding: const EdgeInsets.all(2),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Obx(
|
|
() => StaticColorPlate(
|
|
plateName: color,
|
|
marked: guessedColors.contains(color),
|
|
size: 90,
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Text(
|
|
gameInfo.colors.elementAt(index),
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
fontStyle: FontStyle.italic,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Get.back(),
|
|
child: const Text("OK"),
|
|
),
|
|
],
|
|
));
|
|
}
|
|
|
|
void _scrollToEnd() {
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
if (_scrollController.hasClients) {
|
|
_scrollController.animateTo(
|
|
_scrollController.position.maxScrollExtent,
|
|
duration: const Duration(milliseconds: 300),
|
|
curve: Curves.easeOut,
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
void _showMessageNotification(ChatEntry entry) async {
|
|
if (Get.isBottomSheetOpen == true) return;
|
|
await Get.closeCurrentSnackbar();
|
|
Get.snackbar(
|
|
entry.message,
|
|
"says ${entry.from}",
|
|
backgroundColor: Colors.black,
|
|
borderColor: Colors.amber,
|
|
borderWidth: 2,
|
|
margin: const EdgeInsets.all(16),
|
|
duration: const Duration(seconds: 5),
|
|
animationDuration: const Duration(milliseconds: 300),
|
|
);
|
|
}
|
|
|
|
Widget _buildBottomSheetChatContent() {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: ObxValue(
|
|
(data) => ListView.builder(
|
|
controller: _scrollController,
|
|
itemCount: data.length,
|
|
itemBuilder: (context, index) {
|
|
return Card(
|
|
child: ListTile(
|
|
title: Text(data[index].message),
|
|
subtitle: Text("from ${data[index].from}"),
|
|
subtitleTextStyle: const TextStyle(
|
|
fontStyle: FontStyle.italic, fontSize: 12),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
chat,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.max,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Expanded(
|
|
child: TextField(
|
|
controller: _chatController,
|
|
onSubmitted: (value) {
|
|
final text = _chatController.text;
|
|
if (text.isNotEmpty) {
|
|
socket.emit("chat", [gameInfo.id, text.trim()]);
|
|
}
|
|
_chatController.clear();
|
|
},
|
|
decoration: const InputDecoration(
|
|
enabledBorder: OutlineInputBorder(
|
|
borderSide: BorderSide(color: Colors.grey, width: 0.5),
|
|
borderRadius: BorderRadius.all(Radius.circular(32)),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderSide: BorderSide(color: Colors.amber, width: 2.0),
|
|
borderRadius: BorderRadius.all(Radius.circular(32)),
|
|
),
|
|
hintText: "Your message",
|
|
),
|
|
),
|
|
),
|
|
IconButton(
|
|
onPressed: () {
|
|
final text = _chatController.text;
|
|
if (text.isNotEmpty) {
|
|
socket.emit("chat", [gameInfo.id, text.trim()]);
|
|
}
|
|
_chatController.clear();
|
|
},
|
|
icon: const Icon(Icons.send),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|