Implemented player panel

This commit is contained in:
Andrew 2023-03-05 17:30:34 +07:00
parent a0896d99eb
commit e7e052e3a1
12 changed files with 396 additions and 24 deletions

View file

@ -1,10 +1,17 @@
import 'package:flutter/material.dart';
import 'package:flutter_boring_avatars/flutter_boring_avatars.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/available_game.dart';
import 'package:huacu_mobile/models/game.dart';
import 'package:huacu_mobile/models/settings_item_model.dart';
import 'package:huacu_mobile/models/user_data.dart';
import 'package:huacu_mobile/ui/widgets/settings.dart';
import 'package:huacu_mobile/ui/widgets/socket_connection_indicator.dart';
import 'package:huacu_mobile/ui/widgets/user_card.dart';
import 'package:socket_io_client/socket_io_client.dart' as io;
import 'package:styled_widget/styled_widget.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@ -16,6 +23,7 @@ class HomePage extends StatefulWidget {
class _HomePageState extends State<HomePage> {
final io.Socket socket = Get.find();
final AuthData authData = Get.find();
UserData userData = const UserData(0, 0);
final availableGames = <AvailableGame>[].obs;
@ -52,6 +60,19 @@ class _HomePageState extends State<HomePage> {
socket.on("removeGameResponse", (data) => null);
socket.on("createGameResponse", (data) => null);
socket.on("getUserDataResponse", (data) {
bool ok = data[0];
if (ok) {
userData = UserData(
data[1]["client"]["wins"],
data[1]["client"]["losses"],
);
} else {
Get.snackbar("Error", "Failed to get user data:\n ${data[1]}");
}
});
socket.emit("getUserData");
socket.on("joinGameResponse", (data) {
bool ok = data[0];
if (ok) {
@ -83,7 +104,36 @@ class _HomePageState extends State<HomePage> {
return Scaffold(
appBar: AppBar(
title: Obx(() => Text("Available ${availableGames.length} game(s)")),
title: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
const Text("HUACU"),
SocketConnectionIndicator(socket: socket, size: 8),
],
),
Obx(
() => Text(
"Available ${availableGames.length} game(s)",
style: const TextStyle(fontSize: 12),
),
),
],
),
actions: [
InkResponse(
onTap: _openProfile,
child: BoringAvatars(
name: authData.id,
colors: avatarColors,
type: BoringAvatarsType.beam,
).paddingAll(8),
),
],
),
body: SizedBox(
width: size.width,
@ -133,26 +183,29 @@ class _HomePageState extends State<HomePage> {
availableGames,
),
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: ObxValue(
(data) {
return ElevatedButton(
onPressed: data.firstWhereOrNull(
(g) => g.opponentName == authData.login) ==
null
? _createGame
: null,
child: const Text("Create"),
);
},
availableGames,
Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: ObxValue(
(data) {
return ElevatedButton(
onPressed: data.firstWhereOrNull((g) =>
g.opponentName == authData.login) ==
null
? _createGame
: null,
child: const Text("Create"),
);
},
availableGames,
),
),
),
],
],
),
),
],
),
@ -250,8 +303,8 @@ class _HomePageState extends State<HomePage> {
content: const Text("Are you sure you want to delete this game?"),
textConfirm: "Delete",
onConfirm: () {
socket.emit("removeGame", gameId);
Get.back();
socket.emit("removeGame", gameId);
},
textCancel: "Cancel",
onCancel: () {
@ -259,4 +312,89 @@ class _HomePageState extends State<HomePage> {
},
);
}
void _onLogoutTap() {
socket.emit("logout");
}
void _onAccountDeletedHandler(dynamic data) {
if (data[0]) {
Get.back();
Get.offAllNamed("/auth");
} else {
Get.snackbar("Error", "Failed to delete account:\n${data[1]}");
}
socket.off("deleteAccountResponse", _onAccountDeletedHandler);
}
void _onDeleteAccountTap() async {
final textEditingController = TextEditingController();
bool ok = await Get.defaultDialog(
title: "Delete game",
content: [
const Text(
"Are you sure you want to delete your account? This action is irreversible.",
),
const Text("Enter your password to confirm:"),
TextField(
controller: textEditingController,
obscureText: true,
),
].toColumn(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
),
textConfirm: "Delete",
onConfirm: () {
Get.back(result: true);
},
textCancel: "Cancel",
onCancel: () {
Get.back(result: false);
},
);
final password = textEditingController.text;
if (!ok || password.isEmpty) return;
socket.on("deleteAccountResponse", _onAccountDeletedHandler);
socket.emit("deleteAccount", password);
}
void _openProfile() {
Get.bottomSheet(BottomSheet(
onClosing: () {},
clipBehavior: Clip.antiAliasWithSaveLayer,
builder: (context) => _buildBottomSheetProfileContent(),
));
}
Widget _buildBottomSheetProfileContent() {
page({required Widget child}) => Styled.widget(child: child)
.padding(vertical: 30, horizontal: 20)
.scrollable();
return [
const Text(
'Your account',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32),
).alignment(Alignment.center).padding(bottom: 20),
UserCard(authData: authData, userData: userData),
Settings(settingsItems: [
SettingsItemModel(
icon: Icons.logout,
color: Colors.purpleAccent.shade200,
title: "Logout",
description: "We will miss you",
onTap: _onLogoutTap,
),
SettingsItemModel(
icon: Icons.dangerous,
color: Colors.redAccent,
title: "Delete my account",
description: "Beware - this action is irreversible",
onTap: _onDeleteAccountTap,
),
]),
].toColumn(mainAxisSize: MainAxisSize.min).parent(page);
}
}