Minor version bump, add rank icons and leaderboard sorting

- Refactored join and create match UI
- Added OSK and UNC display in profile page
- Code cleanup and bug fixes. API version Bump

analysis_options.yaml

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

lib/globals.dart

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

lib/pages/home.dart

@@ -7,6 +7,9 @@ import 'views/joinmatch.dart';
 import 'views/creatematch.dart';
 import 'views/friendlist.dart';
 import 'views/myprofile.dart';
+import 'package:http/http.dart' as http;
+import 'dart:convert';
+import '../globals.dart';
 
 class HomePage extends StatefulWidget {
   @override
@@ -16,7 +19,6 @@ class HomePage extends StatefulWidget {
 class _HomePageState extends State<HomePage> {
   int _selectedIndex = 0;
 
-  // Define the pages for each section
   final List<Widget> _pages = [
     LeaderboardPage(),
     JoinMatchPage(),
@@ -40,14 +42,46 @@ class _HomePageState extends State<HomePage> {
     );
   }
 
+  Future<Map<String, String>> fetchCommitHashes() async {
+    const apiUrl = '$apiurl/version';
+
+    try {
+      final response = await http.get(Uri.parse(apiUrl));
+
+      if (response.statusCode == 200) {
+        final data = jsonDecode(response.body);
+
+        String formatHash(String? hash) {
+          if (hash == null) return 'Unknown';
+          return '#${hash.substring(0, 8).toUpperCase()}';
+        }
+
+        return {
+          'backend': formatHash(data['backend']),
+          'frontend': formatHash(data['frontend']),
+        };
+      } else {
+        throw Exception('Failed to fetch commit hashes');
+      }
+    } catch (e) {
+      return {
+        'backend': 'Error fetching hash',
+        'frontend': 'Error fetching hash',
+      };
+    }
+  }
+
   Future<void> _showOpenSourceLicenses() async {
+    final commitHashes = await fetchCommitHashes();
+
     showDialog(
       context: context,
       builder: (BuildContext context) => AboutDialog(
         applicationIcon: const Icon(Icons.code),
         applicationLegalese: '© 2024 Thomas Bassi @ Defence Tech.',
         applicationName: 'DTHPP',
-        applicationVersion: '#B22AF349A1',
+        applicationVersion:
+            'API: ${commitHashes['backend']} - UI: ${commitHashes['frontend']}',
         children: [
           Padding(
             padding: const EdgeInsets.only(top: 16.0),

lib/pages/login.dart

@@ -4,6 +4,8 @@ import 'package:http/http.dart' as http;
 import 'dart:convert';
 import 'home.dart';
 import '../globals.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:url_launcher/url_launcher.dart';
 
 class LoginPage extends StatefulWidget {
   @override
@@ -21,6 +23,17 @@ class _LoginPageState extends State<LoginPage> {
   Future<void> _handleAuth() async {
     final email = _emailController.text.trim();
     final password = _passwordController.text.trim();
+    final displayName = _displayNameController.text.trim();
+
+    // Input validation
+    if (email.isEmpty ||
+        password.isEmpty ||
+        (!_isLogin && displayName.isEmpty)) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text('Please fill in all required fields.')),
+      );
+      return;
+    }
 
     setState(() {
       _isLoading = true;
@@ -36,8 +49,7 @@ class _LoginPageState extends State<LoginPage> {
               context, MaterialPageRoute(builder: (context) => HomePage()));
         }
       } else {
-        final uid = await _register(
+        final uid = await _register(email, password, displayName);
-            email, password, _displayNameController.text.trim());
         if (uid != null) {
           setState(() {
             _isLogin = true;
@@ -118,21 +130,61 @@ class _LoginPageState extends State<LoginPage> {
                 decoration: InputDecoration(labelText: 'Display Name'),
               ),
             const SizedBox(height: 20),
-            _isLoading
+            if (_isLoading)
-                ? CircularProgressIndicator()
+              CircularProgressIndicator()
-                : ElevatedButton(
+            else
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: [
+                  ElevatedButton(
                     onPressed: _handleAuth,
                     child: Text(_isLogin ? 'Login' : 'Register'),
                   ),
-            TextButton(
+                  ElevatedButton(
-              onPressed: () {
+                    onPressed: () {
-                setState(() {
+                      setState(() {
-                  _isLogin = !_isLogin;
+                        _isLogin = !_isLogin;
-                });
+                      });
-              },
+                    },
-              child: Text(_isLogin
+                    child: Text(_isLogin ? 'Register' : 'Back to Login'),
-                  ? 'Don\'t have an account? Register'
+                  ),
-                  : 'Already have an account? Login'),
+                ],
+              ),
+            const Spacer(),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                IconButton(
+                    icon: Icon(FontAwesomeIcons.github),
+                    onPressed: () async {
+                      final url = Uri.parse(
+                          'https://git.mercurio.moe/Mercury/dth-pingpong-mobileapp');
+                      if (await canLaunchUrl(url)) {
+                        await launchUrl(
+                          url,
+                          mode: LaunchMode
+                              .externalApplication, // Ensures it opens in the browser
+                        );
+                      } else {
+                        throw 'Could not launch $url';
+                      }
+                    }),
+                IconButton(
+                    icon: Icon(FontAwesomeIcons.chartSimple),
+                    onPressed: () async {
+                      final url =
+                          Uri.parse('https://kuma.mercurio.moe/status/dthpp');
+                      if (await canLaunchUrl(url)) {
+                        await launchUrl(
+                          url,
+                          mode: LaunchMode
+                              .externalApplication, // Ensures it opens in the browser
+                        );
+                      } else {
+                        throw 'Could not launch $url';
+                      }
+                    }),
+              ],
             ),
           ],
         ),

lib/pages/views/creatematch.dart

@@ -12,11 +12,11 @@ class CreateMatchPage extends StatefulWidget {
 class _CreateMatchPageState extends State<CreateMatchPage> {
   String? _matchId;
   bool _isLoading = false;
+  bool _isTwoPlayerModeEnabled = false;
 
-  final String _createMatchApiUrl =
+  final String _createMatchApiUrl = '$apiurl/creatematch';
-      '$apiurl/creatematch'; // Replace with your API endpoint
+  final String _createDoubleMatchUrl = '$apiurl/creatematch_2v2';
 
-  // Method to create a match
   Future<void> _createMatch() async {
     setState(() {
       _isLoading = true;
@@ -34,8 +34,10 @@ class _CreateMatchPageState extends State<CreateMatchPage> {
     }
 
     try {
+      final String apiUrl =
+          _isTwoPlayerModeEnabled ? _createDoubleMatchUrl : _createMatchApiUrl;
       final response = await http.post(
-        Uri.parse(_createMatchApiUrl),
+        Uri.parse(apiUrl),
         headers: {'Content-Type': 'application/json'},
         body: json.encode({'token': token}),
       );
@@ -43,7 +45,10 @@ class _CreateMatchPageState extends State<CreateMatchPage> {
       if (response.statusCode == 200) {
         final data = json.decode(response.body);
         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!');
       } else {
@@ -58,7 +63,6 @@ class _CreateMatchPageState extends State<CreateMatchPage> {
     }
   }
 
-  // Show a Toast message (SnackBar in Flutter)
   void _showToast(String message) {
     ScaffoldMessenger.of(context).showSnackBar(
       SnackBar(content: Text(message)),
@@ -68,9 +72,6 @@ class _CreateMatchPageState extends State<CreateMatchPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: Text('Create Match'),
-      ),
       body: Center(
         child: Padding(
           padding: const EdgeInsets.all(16.0),
@@ -90,6 +91,12 @@ class _CreateMatchPageState extends State<CreateMatchPage> {
                 textAlign: TextAlign.center,
               ),
               SizedBox(height: 16),
+              Text(
+                'Due to current limitations in how we handle matchmaking, only the joining player can control the match. This is only a temporary solution to a problem we are actively fixing.',
+                style: TextStyle(fontSize: 14),
+                textAlign: TextAlign.center,
+              ),
+              SizedBox(height: 16),
               _isLoading
                   ? CircularProgressIndicator() // Show loading spinner
                   : ElevatedButton(
@@ -97,6 +104,16 @@ class _CreateMatchPageState extends State<CreateMatchPage> {
                       child: Text('Create Match'),
                     ),
               SizedBox(height: 16),
+              SwitchListTile(
+                title: Text('Enable 2 player mode'),
+                value: _isTwoPlayerModeEnabled,
+                onChanged: (bool value) {
+                  setState(() {
+                    _isTwoPlayerModeEnabled = value;
+                  });
+                },
+              ),
+              SizedBox(height: 16),
               if (_matchId != null)
                 Text(
                   'Your Match ID: $_matchId',

lib/pages/views/joinmatch.dart

@@ -13,12 +13,22 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
   TextEditingController _matchIdController = TextEditingController();
   bool _isJoined = false;
   bool _isLoading = false;
+  bool _is2v2Mode = false;
+  int _selectedSlot = 2;
   int _player1Score = 0;
   int _player2Score = 0;
+  int _player3Score = 0;
+  int _player4Score = 0;
   String? _matchId;
+  String? _player1name;
+  String? _player2name;
+  List<String> _players = [];
+  bool _canEdit = false;
 
   final String _joinMatchApiUrl = '$apiurl/joinmatch';
+  final String _joinMatch2v2ApiUrl = '$apiurl/joinmatch_2v2';
   final String _endMatchApiUrl = '$apiurl/endmatch';
+  final String _endFourApiUrl = '$apiurl/endfour';
 
   Future<void> _joinMatch() async {
     setState(() {
@@ -38,22 +48,60 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
     }
 
     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) {
-        setState(() {
+          final responseData = json.decode(response.body);
-          _isJoined = true;
+          setState(() {
-          _player1Score = 0;
+            _isJoined = true;
-          _player2Score = 0;
+            _matchId = matchId;
-          _matchId = matchId;
+            _players = List<String>.from(
-        });
+                responseData['players'].map((p) => p['name']));
-        _showToast('Joined match successfully!');
+            _canEdit = responseData['canEdit'];
+            _player1Score = 0;
+            _player2Score = 0;
+            _player3Score = 0;
+            _player4Score = 0;
+          });
+          _showToast('Joined match successfully!');
+        } else {
+          _showToast('Failed to join 2v2 match.');
+        }
       } 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) {
       _showToast('Error: $e');
@@ -64,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 {
     setState(() {
       _isLoading = true;
@@ -91,21 +129,42 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
     }
 
     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!');
-        Navigator.pop(context);
+        } else {
+          _showToast('Failed to end 2v2 match.');
+        }
       } 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) {
       _showToast('Error: $e');
@@ -125,61 +184,244 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: Text('Join Match'),
-      ),
       body: Padding(
         padding: const EdgeInsets.all(16.0),
         child: _isLoading
             ? Center(child: CircularProgressIndicator())
             : _isJoined
-                ? Column(
+                ? Center(
-                    mainAxisAlignment: MainAxisAlignment.center,
+                    child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.center,
+                      mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
+                      children: [
-                      Row(
+                        // Display for 2v2 match
-                        mainAxisAlignment: MainAxisAlignment.center,
+                        if (_is2v2Mode && _canEdit) ...[
-                        children: [
+                          Text('2v2 Match',
-                          IconButton(
+                              style:
-                            icon: Icon(Icons.remove),
+                                  TextStyle(color: Colors.white, fontSize: 24)),
-                            onPressed: () => _updateScore(1, -1),
+                          SizedBox(height: 16),
+                          // First Team
+                          Row(
+                            mainAxisAlignment: MainAxisAlignment.center,
+                            children: [
+                              Column(
+                                children: [
+                                  Text(_players[0],
+                                      style: TextStyle(color: Colors.white)),
+                                  Row(
+                                    children: [
+                                      IconButton(
+                                          icon: Icon(Icons.remove,
+                                              color: Colors.white),
+                                          onPressed: () => _updateScore(1, -1)),
+                                      Container(
+                                          width: 70,
+                                          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(width: 20),
+                              Column(
+                                children: [
+                                  Text(_players[1],
+                                      style: TextStyle(color: Colors.white)),
+                                  Row(
+                                    children: [
+                                      IconButton(
+                                          icon: Icon(Icons.remove,
+                                              color: Colors.white),
+                                          onPressed: () => _updateScore(2, -1)),
+                                      Container(
+                                          width: 70,
+                                          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)),
+                                    ],
+                                  ),
+                                ],
+                              ),
+                            ],
                           ),
-                          Text(
+                          SizedBox(height: 32),
-                            'Player 1 Score: $_player1Score',
+                          // Second Team
-                            style: TextStyle(fontSize: 20),
+                          Row(
-                          ),
+                            mainAxisAlignment: MainAxisAlignment.center,
-                          IconButton(
+                            children: [
-                            icon: Icon(Icons.add),
+                              Column(
-                            onPressed: () => _updateScore(1, 1),
+                                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: 70,
+                                          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: 20),
+                              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: 75,
+                                          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
-                      SizedBox(height: 16),
+                        if (!_is2v2Mode) ...[
-                      // Player 2 Score Controls
+                          Text(_player1name ?? 'Player 1',
-                      Row(
+                              style: TextStyle(color: Colors.white)),
-                        mainAxisAlignment: MainAxisAlignment.center,
+                          SizedBox(height: 8),
-                        children: [
+                          Row(
-                          IconButton(
+                            mainAxisAlignment: MainAxisAlignment.center,
-                            icon: Icon(Icons.remove),
+                            children: [
-                            onPressed: () => _updateScore(2, -1),
+                              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)),
+                            ],
                           ),
-                          Text(
+                          SizedBox(height: 8),
-                            'Player 2 Score: $_player2Score',
+                          Divider(
-                            style: TextStyle(fontSize: 20),
+                              color: Colors.white,
-                          ),
+                              thickness: 2,
-                          IconButton(
+                              indent: 80,
-                            icon: Icon(Icons.add),
+                              endIndent: 80),
-                            onPressed: () => _updateScore(2, 1),
+                          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(
-                      // End Match Button
+                          onPressed: _endMatch,
-                      ElevatedButton(
+                          child: Text('End Match'),
-                        onPressed: _endMatch,
+                        ),
-                        child: Text('End Match'),
+                      ],
-                      ),
+                    ),
-                    ],
                   )
                 : Column(
                     mainAxisAlignment: MainAxisAlignment.center,
@@ -194,7 +436,34 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
                         ),
                       ),
                       SizedBox(height: 16),
-                      // Join Match Button
+                      // 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(
                         onPressed: () {
                           if (_matchIdController.text.isNotEmpty) {
@@ -210,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;
+      }
+    });
+  }
 }

lib/pages/views/leaderboard.dart

@@ -11,6 +11,7 @@ class LeaderboardPage extends StatefulWidget {
 class _LeaderboardPageState extends State<LeaderboardPage> {
   List<dynamic> _leaderboard = [];
   bool _isLoading = true;
+  bool _sortByOskMu = false;
 
   final String _leaderboardApi = '$apiurl/leaderboards';
 
@@ -26,6 +27,7 @@ class _LeaderboardPageState extends State<LeaderboardPage> {
         List<dynamic> data = json.decode(response.body);
         setState(() {
           _leaderboard = data;
+          _sortLeaderboard();
           _isLoading = false;
         });
       } else {
@@ -42,6 +44,23 @@ class _LeaderboardPageState extends State<LeaderboardPage> {
     }
   }
 
+  void _sortLeaderboard() {
+    setState(() {
+      if (_sortByOskMu) {
+        _leaderboard.sort((a, b) => b['osk_mu'].compareTo(a['osk_mu']));
+      } else {
+        _leaderboard.sort((a, b) => b['elo_rating'].compareTo(a['elo_rating']));
+      }
+    });
+  }
+
+  void _toggleSort() {
+    setState(() {
+      _sortByOskMu = !_sortByOskMu;
+      _sortLeaderboard();
+    });
+  }
+
   void _showError(String message) {
     showDialog(
       context: context,
@@ -69,6 +88,16 @@ class _LeaderboardPageState extends State<LeaderboardPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      appBar: AppBar(
+        title: Text('Leaderboard'),
+        actions: [
+          IconButton(
+            icon: Icon(Icons.sort),
+            onPressed: _toggleSort,
+            tooltip: _sortByOskMu ? 'Sort by Elo' : 'Sort by Osk_Mu',
+          ),
+        ],
+      ),
       body: _isLoading
           ? Center(child: CircularProgressIndicator())
           : RefreshIndicator(
@@ -77,16 +106,29 @@ class _LeaderboardPageState extends State<LeaderboardPage> {
                 itemCount: _leaderboard.length,
                 itemBuilder: (context, index) {
                   var player = _leaderboard[index];
+                  String truncatedOskMu = player['osk_mu'].toStringAsFixed(3);
+
+                  String assetName = _sortByOskMu
+                      ? 'assets/player_${index}_dp.png'
+                      : 'assets/player_${index}.png';
+
                   return Card(
                     margin: EdgeInsets.all(8),
                     child: ListTile(
                       contentPadding: EdgeInsets.all(10),
                       leading: CircleAvatar(
-                        child: Text(player['player_name'][0].toUpperCase()),
+                          child: Text(player['player_name'][0].toUpperCase())),
+                      title: Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          Text(player['player_name']),
+                          if (index < 3)
+                            Image.asset(assetName, width: 45, height: 45),
+                        ],
                       ),
-                      title: Text(player['player_name']),
+                      subtitle: Text(
-                      subtitle: Text('Elo Rating: ${player['elo_rating']}'),
+                          'Elo: ${player['elo_rating']} | TSC: $truncatedOskMu'),
-                      trailing: Text('Friend Code: ${player['friend_code']}'),
+                      trailing: Text('UID: ${player['friend_code']}'),
                     ),
                   );
                 },

lib/pages/views/myprofile.dart

@@ -15,6 +15,8 @@ class _ProfilePageState extends State<ProfilePage> {
   String? _name;
   int? _uid;
   int? _elo;
+  double? _mu;
+  double? _unc;
   List<dynamic> _matches = [];
 
   final String _getProfileApiUrl = '$apiurl/getprofile';
@@ -47,6 +49,8 @@ class _ProfilePageState extends State<ProfilePage> {
           _name = data['name'];
           _uid = data['uid'];
           _elo = data['elo'];
+          _mu = data['osk_mu'];
+          _unc = data['osk_sig'];
           _matches = data['matches'];
           _isLoading = false;
         });
@@ -74,6 +78,87 @@ class _ProfilePageState extends State<ProfilePage> {
     );
   }
 
+  String getRankImage(int? elo) {
+    if (elo == null || elo < -100) return 'assets/none.png';
+    if (elo >= 120) return 'assets/infdan.png';
+    if (elo >= 90) return 'assets/SS.png';
+    if (elo >= 60) return 'assets/S.png';
+    if (elo >= 30) return 'assets/A.png';
+    if (elo >= 0) return 'assets/B.png';
+    if (elo >= -30) return 'assets/C.png';
+    if (elo >= -60) return 'assets/D.png';
+    return 'assets/E.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
   Widget build(BuildContext context) {
     return Scaffold(
@@ -88,7 +173,6 @@ class _ProfilePageState extends State<ProfilePage> {
                     padding: EdgeInsets.all(16.0),
                     child: Row(
                       children: [
-                        // Profile Icon
                         CircleAvatar(
                           backgroundColor: _generateRandomColor(),
                           child: Text(
@@ -100,7 +184,6 @@ class _ProfilePageState extends State<ProfilePage> {
                           radius: 40,
                         ),
                         SizedBox(width: 16),
-                        // Profile Info
                         Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
@@ -111,15 +194,36 @@ class _ProfilePageState extends State<ProfilePage> {
                                 fontWeight: FontWeight.bold,
                               ),
                             ),
-                            SizedBox(height: 8),
+                            SizedBox(height: 6),
-                            Text('UID: ${_uid ?? 'N/A'}'),
+                            Row(
-                            Text('ELO: ${_elo ?? 'N/A'}'),
+                              children: [
+                                Text('UID: ${_uid ?? 'N/A'}'),
+                                SizedBox(
+                                  width: 30,
+                                ),
+                                Image.asset(
+                                  getRankImage(_elo),
+                                  width: 100,
+                                  height: 30,
+                                ),
+                              ],
+                            ),
+                            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(height: 16),
                   // Recent Matches
                   Expanded(
                     child: _matches.isEmpty

pubspec.yaml

@@ -2,7 +2,7 @@ name: pingpongapp
 description: "DTH Ping Pong Score tracking app"
 publish_to: 'none'
 
-version: 0.0.34+1
+version: 0.0.57+1
 
 environment:
   sdk: '>=3.4.3 <4.0.0'
@@ -15,6 +15,9 @@ dependencies:
   http: ^1.2.2
   logger: ^2.5.0
   package_info: ^2.0.2
+  font_awesome_flutter: ^10.8.0
+  url_launcher: ^6.3.1
+  fl_chart: ^0.70.2
 
 dev_dependencies:
   flutter_test:
@@ -24,9 +27,8 @@ flutter:
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
+  assets:
-  #   - images/a_dot_burr.jpeg
+     - assets/
-  #   - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware