Mercury/dth-pingpong-mobileapp
1
0
Fork 0
Code Issues 4 Pull requests Actions Packages Projects 1 Releases 6 Wiki Activity

Added 2 player mode

Browse source 
- Refactored join and create match UI
- Added OSK and UNC display in profile page
- Code cleanup and bug fixes. API version Bump
This commit is contained in:
Mercurio 2025-01-25 18:17:04 +01:00
parent ce1a54c58b
commit 1481c5b292
6 changed files with 454 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
analysis_options.yaml
View file

@ -3,6 +3,7 @@ analyzer:
errors: errors:
library_private_types_in_public_api: ignore library_private_types_in_public_api: ignore
prefer_const_constructors: ignore prefer_const_constructors: ignore
prefer_final_fields: ignore
use_build_context_synchronously: ignore use_build_context_synchronously: ignore
use_key_in_widget_constructors: ignore use_key_in_widget_constructors: ignore
use_super_parameters: ignore use_super_parameters: ignore

4
lib/globals.dart
View file

@ -1,3 +1,3 @@
// lib/globals.dart // lib/globals.dart
const String apiurl = "https://api.dthpp.mercurio.moe"; //const String apiurl = "https://api.dthpp.mercurio.moe";
//const String apiurl = "http://192.168.1.120:9134"; const String apiurl = "http://192.168.1.120:9134";

17
lib/pages/views/creatematch.dart
View file

@ -12,9 +12,10 @@ class CreateMatchPage extends StatefulWidget {
class _CreateMatchPageState extends State<CreateMatchPage> { class _CreateMatchPageState extends State<CreateMatchPage> {
String? _matchId; String? _matchId;
bool _isLoading = false; bool _isLoading = false;
bool _isTwoPlayerModeEnabled = false; // Track the toggle state bool _isTwoPlayerModeEnabled = false;
final String _createMatchApiUrl = '$apiurl/creatematch'; final String _createMatchApiUrl = '$apiurl/creatematch';
final String _createDoubleMatchUrl = '$apiurl/creatematch_2v2';
Future<void> _createMatch() async { Future<void> _createMatch() async {
setState(() { setState(() {
@ -33,8 +34,10 @@ class _CreateMatchPageState extends State<CreateMatchPage> {
} }
try { try {
final String apiUrl =
_isTwoPlayerModeEnabled ? _createDoubleMatchUrl : _createMatchApiUrl;
final response = await http.post( final response = await http.post(
Uri.parse(_createMatchApiUrl), Uri.parse(apiUrl),
headers: {'Content-Type': 'application/json'}, headers: {'Content-Type': 'application/json'},
body: json.encode({'token': token}), body: json.encode({'token': token}),
); );
@ -42,7 +45,10 @@ class _CreateMatchPageState extends State<CreateMatchPage> {
if (response.statusCode == 200) { if (response.statusCode == 200) {
final data = json.decode(response.body); final data = json.decode(response.body);
setState(() { setState(() {
_matchId = data['match_id'].toString(); _matchId = _isTwoPlayerModeEnabled
? data['match_id'].toString() +
'D' // Append "D" for two-player mode
: data['match_id'].toString();
}); });
_showToast('Match created successfully!'); _showToast('Match created successfully!');
} else { } else {
@ -57,7 +63,6 @@ class _CreateMatchPageState extends State<CreateMatchPage> {
} }
} }
// Show a Toast message (SnackBar in Flutter)
void _showToast(String message) { void _showToast(String message) {
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(message)), SnackBar(content: Text(message)),
@ -106,10 +111,6 @@ class _CreateMatchPageState extends State<CreateMatchPage> {
setState(() { setState(() {
_isTwoPlayerModeEnabled = value; _isTwoPlayerModeEnabled = value;
}); });
if (_isTwoPlayerModeEnabled) {
_showToast(
'We\'re sorry, this feature isn\'t available yet');
}
}, },
), ),
SizedBox(height: 16), SizedBox(height: 16),

479
lib/pages/views/joinmatch.dart
View file

@ -13,14 +13,22 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
TextEditingController _matchIdController = TextEditingController(); TextEditingController _matchIdController = TextEditingController();
bool _isJoined = false; bool _isJoined = false;
bool _isLoading = false; bool _isLoading = false;
bool _is2v2Mode = false;
int _selectedSlot = 2;
int _player1Score = 0; int _player1Score = 0;
int _player2Score = 0; int _player2Score = 0;
int _player3Score = 0;
int _player4Score = 0;
String? _matchId;
String? _player1name; String? _player1name;
String? _player2name; String? _player2name;
String? _matchId; List<String> _players = [];
bool _canEdit = false;
final String _joinMatchApiUrl = '$apiurl/joinmatch'; final String _joinMatchApiUrl = '$apiurl/joinmatch';
final String _joinMatch2v2ApiUrl = '$apiurl/joinmatch_2v2';
final String _endMatchApiUrl = '$apiurl/endmatch'; final String _endMatchApiUrl = '$apiurl/endmatch';
final String _endFourApiUrl = '$apiurl/endfour';
Future<void> _joinMatch() async { Future<void> _joinMatch() async {
setState(() { setState(() {
@ -40,25 +48,60 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
} }
try { try {
final response = await http.post( if (_is2v2Mode) {
Uri.parse(_joinMatchApiUrl), // Joining a 2v2 match
headers: {'Content-Type': 'application/json'}, final response = await http.post(
body: json.encode({'token': token, 'match_id': int.parse(matchId)}), Uri.parse(_joinMatch2v2ApiUrl),
); headers: {'Content-Type': 'application/json'},
body: json.encode({
'token': token,
'match_id': int.parse(matchId),
'slot': _selectedSlot,
}),
);
if (response.statusCode == 200) { if (response.statusCode == 200) {
final responseData = json.decode(response.body); final responseData = json.decode(response.body);
setState(() { setState(() {
_isJoined = true; _isJoined = true;
_player1name = responseData['player1_name']; _matchId = matchId;
_player2name = responseData['player2_name']; _players = List<String>.from(
_player1Score = 0; responseData['players'].map((p) => p['name']));
_player2Score = 0; _canEdit = responseData['canEdit'];
_matchId = matchId; _player1Score = 0;
}); _player2Score = 0;
_showToast('Joined match successfully!'); _player3Score = 0;
_player4Score = 0;
});
_showToast('Joined match successfully!');
} else {
_showToast('Failed to join 2v2 match.');
}
} else { } else {
_showToast('Failed to join match.'); // Joining a 1v1 match
final response = await http.post(
Uri.parse(_joinMatchApiUrl),
headers: {'Content-Type': 'application/json'},
body: json.encode({
'token': token,
'match_id': int.parse(matchId),
}),
);
if (response.statusCode == 200) {
final responseData = json.decode(response.body);
setState(() {
_isJoined = true;
_player1name = responseData['player1_name'];
_player2name = responseData['player2_name'];
_player1Score = 0;
_player2Score = 0;
_matchId = matchId;
});
_showToast('Joined match successfully!');
} else {
_showToast('Failed to join match.');
}
} }
} catch (e) { } catch (e) {
_showToast('Error: $e'); _showToast('Error: $e');
@ -69,16 +112,6 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
} }
} }
void _updateScore(int player, int delta) {
setState(() {
if (player == 1) {
_player1Score += delta;
} else if (player == 2) {
_player2Score += delta;
}
});
}
Future<void> _endMatch() async { Future<void> _endMatch() async {
setState(() { setState(() {
_isLoading = true; _isLoading = true;
@ -96,20 +129,42 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
} }
try { try {
final response = await http.post( if (_is2v2Mode) {
Uri.parse(_endMatchApiUrl), // End the 2v2 match using the /endfour API
headers: {'Content-Type': 'application/json'}, final response = await http.post(
body: json.encode({ Uri.parse(_endFourApiUrl),
'match_id': int.parse(_matchId!), headers: {'Content-Type': 'application/json'},
'player1_score': _player1Score, body: json.encode({
'player2_score': _player2Score, 'match_id': int.parse(_matchId!),
}), 'player1_team1_score': _player1Score,
); 'player2_team1_score': _player2Score,
'player1_team2_score': _player3Score,
'player2_team2_score': _player4Score,
}),
);
if (response.statusCode == 200) { if (response.statusCode == 200) {
_showToast('Match ended successfully!'); _showToast('2v2 match ended successfully!');
} else {
_showToast('Failed to end 2v2 match.');
}
} else { } else {
_showToast('Failed to end match.'); // End the 1v1 match
final response = await http.post(
Uri.parse(_endMatchApiUrl),
headers: {'Content-Type': 'application/json'},
body: json.encode({
'match_id': int.parse(_matchId!),
'player1_score': _player1Score,
'player2_score': _player2Score,
}),
);
if (response.statusCode == 200) {
_showToast('Match ended successfully!');
} else {
_showToast('Failed to end match.');
}
} }
} catch (e) { } catch (e) {
_showToast('Error: $e'); _showToast('Error: $e');
@ -138,96 +193,228 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
// Player 1 // Display for 2v2 match
Text( if (_is2v2Mode && _canEdit) ...[
_player1name ?? 'Player 1', Text('2v2 Match',
style: TextStyle( style:
fontSize: 18, TextStyle(color: Colors.white, fontSize: 24)),
color: Colors.white, SizedBox(height: 16),
), // First Team
), Row(
SizedBox(height: 8), mainAxisAlignment: MainAxisAlignment.center,
Row( children: [
mainAxisAlignment: MainAxisAlignment.center, Column(
children: [ children: [
IconButton( Text(_players[0],
icon: Icon(Icons.remove, color: Colors.white), style: TextStyle(color: Colors.white)),
onPressed: () => _updateScore(1, -1), Row(
), children: [
Container( IconButton(
width: 100, icon: Icon(Icons.remove,
height: 50, color: Colors.white),
decoration: BoxDecoration( onPressed: () => _updateScore(1, -1)),
border: Container(
Border.all(color: Colors.white, width: 2), width: 100,
borderRadius: BorderRadius.circular(8), height: 50,
), decoration: BoxDecoration(
child: Center( border: Border.all(
child: Text( color: Colors.white,
'$_player1Score', width: 2),
style: TextStyle( borderRadius:
fontSize: 24, BorderRadius.circular(8)),
color: Colors.white, child: Center(
fontWeight: FontWeight.bold, child: Text('$_player1Score',
style: TextStyle(
color: Colors.white,
fontWeight:
FontWeight.bold,
fontSize: 24)))),
IconButton(
icon: Icon(Icons.add,
color: Colors.white),
onPressed: () => _updateScore(1, 1)),
],
), ),
), ],
), ),
), SizedBox(width: 32),
IconButton( Column(
icon: Icon(Icons.add, color: Colors.white), children: [
onPressed: () => _updateScore(1, 1), Text(_players[1],
), style: TextStyle(color: Colors.white)),
], Row(
), children: [
SizedBox(height: 8), IconButton(
Divider( icon: Icon(Icons.remove,
color: Colors.white, color: Colors.white),
thickness: 2, onPressed: () => _updateScore(2, -1)),
indent: 80, Container(
endIndent: 80, width: 100,
), height: 50,
SizedBox(height: 8), decoration: BoxDecoration(
// Player 2 border: Border.all(
Row( color: Colors.white,
mainAxisAlignment: MainAxisAlignment.center, width: 2),
children: [ borderRadius:
IconButton( BorderRadius.circular(8)),
icon: Icon(Icons.remove, color: Colors.white), child: Center(
onPressed: () => _updateScore(2, -1), child: Text('$_player2Score',
), style: TextStyle(
Container( color: Colors.white,
width: 100, fontWeight:
height: 50, FontWeight.bold,
decoration: BoxDecoration( fontSize: 24)))),
border: IconButton(
Border.all(color: Colors.white, width: 2), icon: Icon(Icons.add,
borderRadius: BorderRadius.circular(8), color: Colors.white),
), onPressed: () => _updateScore(2, 1)),
child: Center( ],
child: Text(
'$_player2Score',
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
), ),
), ],
), ),
), ],
IconButton(
icon: Icon(Icons.add, color: Colors.white),
onPressed: () => _updateScore(2, 1),
),
],
),
SizedBox(height: 8),
Text(
_player2name ?? 'Player 2',
style: TextStyle(
fontSize: 18,
color: Colors.white,
), ),
), SizedBox(height: 32),
// Second Team
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
Text(_players[2],
style: TextStyle(color: Colors.white)),
Row(
children: [
IconButton(
icon: Icon(Icons.remove,
color: Colors.white),
onPressed: () => _updateScore(3, -1)),
Container(
width: 100,
height: 50,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 2),
borderRadius:
BorderRadius.circular(8)),
child: Center(
child: Text('$_player3Score',
style: TextStyle(
color: Colors.white,
fontWeight:
FontWeight.bold,
fontSize: 24)))),
IconButton(
icon: Icon(Icons.add,
color: Colors.white),
onPressed: () => _updateScore(3, 1)),
],
),
],
),
SizedBox(width: 32),
Column(
children: [
Text(_players[3],
style: TextStyle(color: Colors.white)),
Row(
children: [
IconButton(
icon: Icon(Icons.remove,
color: Colors.white),
onPressed: () => _updateScore(4, -1)),
Container(
width: 100,
height: 50,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 2),
borderRadius:
BorderRadius.circular(8)),
child: Center(
child: Text('$_player4Score',
style: TextStyle(
color: Colors.white,
fontWeight:
FontWeight.bold,
fontSize: 24)))),
IconButton(
icon: Icon(Icons.add,
color: Colors.white),
onPressed: () => _updateScore(4, 1)),
],
),
],
),
],
),
],
// 1v1 Match UI
if (!_is2v2Mode) ...[
Text(_player1name ?? 'Player 1',
style: TextStyle(color: Colors.white)),
SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: Icon(Icons.remove, color: Colors.white),
onPressed: () => _updateScore(1, -1)),
Container(
width: 100,
height: 50,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white, width: 2),
borderRadius: BorderRadius.circular(8)),
child: Center(
child: Text('$_player1Score',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24)))),
IconButton(
icon: Icon(Icons.add, color: Colors.white),
onPressed: () => _updateScore(1, 1)),
],
),
SizedBox(height: 8),
Divider(
color: Colors.white,
thickness: 2,
indent: 80,
endIndent: 80),
SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: Icon(Icons.remove, color: Colors.white),
onPressed: () => _updateScore(2, -1)),
Container(
width: 100,
height: 50,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white, width: 2),
borderRadius: BorderRadius.circular(8)),
child: Center(
child: Text('$_player2Score',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24)))),
IconButton(
icon: Icon(Icons.add, color: Colors.white),
onPressed: () => _updateScore(2, 1)),
],
),
SizedBox(height: 8),
Text(_player2name ?? 'Player 2',
style: TextStyle(color: Colors.white)),
],
SizedBox(height: 32), SizedBox(height: 32),
ElevatedButton( ElevatedButton(
onPressed: _endMatch, onPressed: _endMatch,
@ -249,6 +436,34 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
), ),
), ),
SizedBox(height: 16), SizedBox(height: 16),
// Toggle for 2v2 Mode
SwitchListTile(
title: Text('Enable 2v2 Mode'),
value: _is2v2Mode,
onChanged: (value) {
setState(() {
_is2v2Mode = value;
});
},
),
// If 2v2 is selected, display slot selection
if (_is2v2Mode) ...[
DropdownButton<int>(
value: _selectedSlot,
items: [2, 3, 4].map((int value) {
return DropdownMenuItem<int>(
value: value,
child: Text('Slot $value'),
);
}).toList(),
onChanged: (int? newValue) {
setState(() {
_selectedSlot = newValue!;
});
},
),
],
SizedBox(height: 16),
ElevatedButton( ElevatedButton(
onPressed: () { onPressed: () {
if (_matchIdController.text.isNotEmpty) { if (_matchIdController.text.isNotEmpty) {
@ -264,4 +479,18 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
), ),
); );
} }
void _updateScore(int playerIndex, int increment) {
setState(() {
if (playerIndex == 1) {
_player1Score += increment;
} else if (playerIndex == 2) {
_player2Score += increment;
} else if (playerIndex == 3) {
_player3Score += increment;
} else if (playerIndex == 4) {
_player4Score += increment;
}
});
}
} }

5
lib/pages/views/leaderboard.dart
View file

@ -85,8 +85,9 @@ class _LeaderboardPageState extends State<LeaderboardPage> {
child: Text(player['player_name'][0].toUpperCase()), child: Text(player['player_name'][0].toUpperCase()),
), ),
title: Text(player['player_name']), title: Text(player['player_name']),
subtitle: Text('Elo Rating: ${player['elo_rating']}'), subtitle: Text(
trailing: Text('Friend Code: ${player['friend_code']}'), 'Elo: ${player['elo_rating']} | TSC: ${player['osk_mu']}'),
trailing: Text('UID: ${player['friend_code']}'),
), ),
); );
}, },

87
lib/pages/views/myprofile.dart
View file

@ -15,6 +15,8 @@ class _ProfilePageState extends State<ProfilePage> {
String? _name; String? _name;
int? _uid; int? _uid;
int? _elo; int? _elo;
double? _mu;
double? _unc;
List<dynamic> _matches = []; List<dynamic> _matches = [];
final String _getProfileApiUrl = '$apiurl/getprofile'; final String _getProfileApiUrl = '$apiurl/getprofile';
@ -47,6 +49,8 @@ class _ProfilePageState extends State<ProfilePage> {
_name = data['name']; _name = data['name'];
_uid = data['uid']; _uid = data['uid'];
_elo = data['elo']; _elo = data['elo'];
_mu = data['osk_mu'];
_unc = data['osk_sig'];
_matches = data['matches']; _matches = data['matches'];
_isLoading = false; _isLoading = false;
}); });
@ -85,6 +89,75 @@ class _ProfilePageState extends State<ProfilePage> {
return '$apiurl/assets/none.png'; return '$apiurl/assets/none.png';
} }
void _showExplanationDialog() {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('ELO, OSK, and UNC Explanation'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
// ELO Section
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"ELO (Elo Rating):",
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 4.0),
Text(
"ELO is a widely-used rating system designed to measure the relative skill levels of players in two-player games. It was my initial pick for a testing environment since I only really thought about 1v1 matches, and because it had a readily available Python implementation. I'm lazy.",
),
SizedBox(height: 8.0),
],
),
// OSK Section
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"OSK (OpenSkill Mu):",
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 4.0),
Text(
"OSKmu is a skill rating system based on the OpenSkill model, which is a probabilistic framework for estimating a player's skill. Unlike ELO, which is purely a point-based system, OpenSkill Mu takes into account not just the outcome of matches but also the degree of uncertainty in a player's skill estimation. Since I set up the system to have a 0-base-elo, I had to adapt the OpenSkill implementation to a standard 25 OSK and 8.33 uncertainty.",
),
SizedBox(height: 8.0),
],
),
// UNC Section
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Uncertainty (UNC):",
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 4.0),
Text(
"This is a measure of how confident the system is about a player's skill rating. A higher uncertainty value means the system is less confident about the accuracy of the player's skill estimation, while a lower uncertainty indicates more confidence in the player's rating.",
),
],
),
],
),
),
actions: <Widget>[
TextButton(
child: Text('Close'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
@ -122,9 +195,19 @@ class _ProfilePageState extends State<ProfilePage> {
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
SizedBox(height: 8), SizedBox(height: 6),
Text('UID: ${_uid ?? 'N/A'}'), Text('UID: ${_uid ?? 'N/A'}'),
Text('ELO: ${_elo ?? 'N/A'}'), Row(
children: [
Text(
'ELO: ${_elo ?? 'N/A'} | OSK: ${_mu != null ? _mu?.toStringAsFixed(3) : 'N/A'} | UNC: ${_unc != null ? _unc?.toStringAsFixed(3) : 'N/A'}'),
IconButton(
icon: Icon(Icons.help_outline),
onPressed: _showExplanationDialog,
tooltip: 'What are ELO, OSK, and UNC?',
),
],
),
], ],
), ),
SizedBox(width: 25), SizedBox(width: 25),