opppo/huacu_mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implemented normal game mod with winning and losing

Browse source
This commit is contained in:
Andrew 2023-03-04 03:45:05 +07:00
parent 2956901c6b
commit 9eb1c8e59a
5 changed files with 1106 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

737
lib/main.dart
View file

@ -1,6 +1,10 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:huacu_mobile/color_plate.dart';
import 'package:huacu_mobile/game_pallete.dart';
import 'package:huacu_mobile/socket_connection_indicator.dart';
import 'package:huacu_mobile/static_color_plate.dart';
import 'package:socket_io_client/socket_io_client.dart' as io;
final darkTheme = ThemeData(
@ -20,10 +24,304 @@ void main() {
GetPage(name: '/auth', page: () => const AuthPage()),
GetPage(name: '/home', page: () => const HomePage()),
GetPage(name: '/game', page: () => const GamePage()),
GetPage(name: '/testing', page: () => const TestingGroundsPage()),
],
));
}
class TestingGroundsPage extends StatefulWidget {
const TestingGroundsPage({super.key});
@override
State<TestingGroundsPage> createState() => _TestingGroundsPageState();
}
class _TestingGroundsPageState extends State<TestingGroundsPage> {
final testInt = 5.obs;
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return 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.4,
child: _generateGameField(),
),
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,
),
),
),
),
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,
decoration: const BoxDecoration(
color: Colors.black,
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(25)),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Obx(() => Text(
"${10 - testInt.value}/10",
)),
),
),
),
],
),
),
);
}
Widget _generateGameField() {
const alphabet = "ABCDEFGHIJKLMNOPQRST";
return Container(
width: (alphabet.length + 1) * 100,
height: 1100,
padding: const EdgeInsets.all(10),
child: Stack(
children: [
for (int i = 0; i < alphabet.length; i++)
for (int j = 0; j < 10; j++)
Positioned(
left: (i + 1) * 100.0,
top: (j + 1) * 100.0,
child: ColorPlate(
plateName: "${alphabet[i]}$j",
size: 90,
onSelected: _onPlateSelected,
),
),
// Now I need to generate letters and numbers around field
for (int i = 0; i < alphabet.length; i++)
Positioned(
left: (i + 1) * 100.0,
top: 0,
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text(alphabet[i], style: const TextStyle(fontSize: 40)),
),
),
for (int j = 0; j < 10; j++)
Positioned(
left: 0,
top: (j + 1) * 100.0,
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text("$j", style: const TextStyle(fontSize: 40)),
),
),
],
),
);
}
void _onPlateSelected(String name) {
Get.defaultDialog(
title: "Plate selected",
middleText: "Plate $name was selected",
barrierDismissible: false,
textConfirm: "OK",
onConfirm: () => Get.back(),
);
}
void _openChat() {
Get.bottomSheet(BottomSheet(
onClosing: () {},
clipBehavior: Clip.antiAliasWithSaveLayer,
builder: (context) => Container(
height: 300,
child: _buildBottomSheetChatContent(),
),
));
}
void _leaveGame() {
Get.defaultDialog(
title: "Leave game",
middleText: "Are you sure you want to leave the game?",
barrierDismissible: false,
textConfirm: "Yes",
textCancel: "No",
onConfirm: () => Get.offAllNamed('/home'),
onCancel: () => Get.back(),
);
}
void _openColorsCard() {
final randomColors = pallete.keys.toList(growable: false);
randomColors.shuffle();
Get.dialog(AlertDialog(
title: const Text("Colors card"),
content: SizedBox(
width: 300,
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: 6,
itemBuilder: (context, index) {
final randomColor = randomColors[index];
return Padding(
padding: const EdgeInsets.all(2),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
StaticColorPlate(
plateName: randomColor,
marked: false,
size: 90,
),
const SizedBox(height: 10),
Text(
randomColor,
style: const TextStyle(
fontSize: 12,
fontStyle: FontStyle.italic,
),
),
],
),
);
},
),
),
actions: [
TextButton(
onPressed: () => Get.back(),
child: const Text("OK"),
),
],
));
}
Widget _buildBottomSheetChatContent() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return const Card(
child: ListTile(
title: Text("asdasdasdasd"),
subtitle: Text("from someone"),
subtitleTextStyle:
TextStyle(fontStyle: FontStyle.italic, fontSize: 12),
),
);
},
),
),
Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Expanded(
child: TextField(
decoration: 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: () {},
icon: const Icon(Icons.send),
),
],
),
),
],
);
}
}
class AuthData {
final String login;
final String password;
@ -50,7 +348,7 @@ class _AuthPageState extends State<AuthPage> {
const serverUrl =
kDebugMode ? "http://localhost:9800" : "https://huacu.nuark.xyz";
socket = io.io("https://huacu.nuark.xyz", <String, dynamic>{
socket = io.io(serverUrl, <String, dynamic>{
"transports": ["websocket"],
});
}
@ -75,7 +373,18 @@ class _AuthPageState extends State<AuthPage> {
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text("HUACU", style: Theme.of(context).textTheme.headline1),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"HUACU",
style: Theme.of(context).textTheme.displayLarge,
),
SocketConnectionIndicator(socket: socket),
],
),
const SizedBox(height: 32),
TextField(
controller: loginController,
@ -173,8 +482,9 @@ class Game {
final String id;
final String player1;
final String player2;
final Set<String> colors;
Game(this.id, this.player1, this.player2);
Game(this.id, this.player1, this.player2, this.colors);
}
class HomePage extends StatefulWidget {
@ -236,7 +546,12 @@ class _HomePageState extends State<HomePage> {
socket.off("requestResponseResult");
Get.put(authData);
Get.put(socket);
Get.put(Game(data[1]["id"], data[1]["player1"], data[1]["player2"]));
Get.put(Game(
data[1]["id"],
data[1]["player1"],
data[1]["player2"],
(data[2] as List<dynamic>).map((e) => e.toString()).toSet(),
));
Get.offNamed("/game");
} else {
Get.snackbar("Request response", data[1]);
@ -275,7 +590,15 @@ class _HomePageState extends State<HomePage> {
return Scaffold(
appBar: AppBar(
title: const Text("HUACU"),
title: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text("HUACU"),
SocketConnectionIndicator(socket: socket, size: 8),
],
),
),
body: useMobileLayout
? Column(
@ -304,30 +627,32 @@ class _HomePageState extends State<HomePage> {
(data) => ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) {
final username = data[index];
final hasRequest = incommingRequests.contains(username);
final you = authData.login == username;
return Card(
child: ListTile(
title: Text(
"${data[index]} ${authData.login == data[index] ? "(you)" : ""}"
.trim(),
"$username ${you ? "(you)" : ""}".trim(),
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (incommingRequests.contains(data[index]))
if (hasRequest)
InkResponse(
onTap: () =>
_handleRequestResponseAction(data[index], true),
_handleRequestResponseAction(username, true),
child: const Icon(Icons.check),
),
if (incommingRequests.contains(data[index]))
if (hasRequest)
InkResponse(
onTap: () => _handleRequestResponseAction(
data[index], false),
onTap: () =>
_handleRequestResponseAction(username, false),
child: const Icon(Icons.close),
),
if (authData.login != data[index])
if (!you && !hasRequest)
InkResponse(
onTap: () => _handleSendRequestClick(data[index]),
onTap: () => _handleSendRequestClick(username),
child: const Icon(Icons.connect_without_contact),
),
],
@ -433,9 +758,13 @@ class _GamePageState extends State<GamePage> {
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() {
@ -446,47 +775,387 @@ class _GamePageState extends State<GamePage> {
Get.offAllNamed("/auth");
});
socket.on("gameStatus", (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");
},
);
});
socket.on("leaveGameResponse", (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");
}
});
socket.on("chatResponse", (data) {
bool ok = data[0];
if (ok) {
chat.add(ChatEntry(data[1]["from"], data[1]["message"]));
} else {
int statusCode = data[1];
Get.put(socket);
Get.put(authData);
switch (statusCode) {
case 404:
Get.snackbar("Error", "Other player not found");
Get.offAllNamed("/home");
break;
case 410:
Get.snackbar("Error", "Other player left game");
Get.offAllNamed("/home");
break;
}
}
});
if (isGuesser) {
socket.on("guessResponse", _onGuessResponse);
} else {
socket.on("guess", (data) {
setState(() {
guessedColors.add(data);
});
});
}
chat.listen((data) {
_scrollToEnd();
_showMessageNotification(data.last);
});
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: const Text("HUACU"),
),
body: Center(
child: _buildGame(chat),
body: SizedBox(
width: size.width,
height: size.height,
child: Stack(
children: [
InteractiveViewer(
constrained: false,
boundaryMargin: const EdgeInsets.all(800),
maxScale: 0.8,
minScale: 0.4,
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,
decoration: const BoxDecoration(
color: Colors.black,
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(25)),
),
child: Obx(() => Text("${10 - guessedColors.length}/10")),
),
),
],
),
),
);
}
Widget _buildGame(RxList<ChatEntry> chat) {
Widget _generateGameField() {
const alphabet = "ABCDEFGHIJKLMNOPQRST";
return Container(
width: (alphabet.length + 1) * 100,
height: 1100,
padding: const EdgeInsets.all(10),
child: Stack(
children: [
for (int i = 0; i < alphabet.length; i++)
for (int j = 0; j < 10; j++)
Positioned(
left: (i + 1) * 100.0,
top: (j + 1) * 100.0,
child: ColorPlate(
plateName: "${alphabet[i]}$j",
size: 90,
onSelected: _onPlateSelected,
),
),
// Now I need to generate letters and numbers around field
for (int i = 0; i < alphabet.length; i++)
Positioned(
left: (i + 1) * 100.0,
top: 0,
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text(alphabet[i], style: const TextStyle(fontSize: 40)),
),
),
for (int j = 0; j < 10; j++)
Positioned(
left: 0,
top: (j + 1) * 100.0,
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text("$j", style: const TextStyle(fontSize: 40)),
),
),
],
),
);
}
Widget _generateStaticField() {
const alphabet = "ABCDEFGHIJKLMNOPQRST";
return Container(
width: (alphabet.length + 1) * 100,
height: 1100,
padding: const EdgeInsets.all(10),
child: Stack(
children: [
for (int i = 0; i < alphabet.length; i++)
for (int j = 0; j < 10; j++)
Positioned(
left: (i + 1) * 100.0,
top: (j + 1) * 100.0,
child: StaticColorPlate(
plateName: "${alphabet[i]}$j",
size: 90,
marked: guessedColors.contains("${alphabet[i]}$j"),
),
),
// Now I need to generate letters and numbers around field
for (int i = 0; i < alphabet.length; i++)
Positioned(
left: (i + 1) * 100.0,
top: 0,
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text(alphabet[i], style: const TextStyle(fontSize: 40)),
),
),
for (int j = 0; j < 10; j++)
Positioned(
left: 0,
top: (j + 1) * 100.0,
child: Container(
width: 100,
height: 100,
alignment: Alignment.center,
child: Text("$j", style: const TextStyle(fontSize: 40)),
),
),
],
),
);
}
void _onPlateSelected(String name) {
guessedColors.add(name);
socket.emit("guess", [gameInfo.id, name]);
}
void _onGuessResponse(dynamic data) {
bool ok = data[0];
if (ok) {
Get.snackbar("Success", "Guess sent successfully");
} else {
Get.snackbar("Error", "Guess failed to send");
}
}
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(