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/pages/views/creatematch.dart

@@ -12,9 +12,10 @@ class CreateMatchPage extends StatefulWidget {
 class _CreateMatchPageState extends State<CreateMatchPage> {
   String? _matchId;
   bool _isLoading = false;
-  bool _isTwoPlayerModeEnabled = false; // Track the toggle state
+  bool _isTwoPlayerModeEnabled = false;
 
   final String _createMatchApiUrl = '$apiurl/creatematch';
+  final String _createDoubleMatchUrl = '$apiurl/creatematch_2v2';
 
   Future<void> _createMatch() async {
     setState(() {
@@ -33,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}),
       );
@@ -42,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 {
@@ -57,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)),
@@ -106,10 +111,6 @@ class _CreateMatchPageState extends State<CreateMatchPage> {
                   setState(() {
                     _isTwoPlayerModeEnabled = value;
                   });
-                  if (_isTwoPlayerModeEnabled) {
-                    _showToast(
-                        'We\'re sorry, this feature isn\'t available yet');
-                  }
                 },
               ),
               SizedBox(height: 16),

lib/pages/views/joinmatch.dart

@@ -13,14 +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;
-  String? _matchId;
+  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(() {
@@ -40,10 +48,44 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
     }
 
     try {
+      if (_is2v2Mode) {
+        // Joining a 2v2 match
+        final response = await http.post(
+          Uri.parse(_joinMatch2v2ApiUrl),
+          headers: {'Content-Type': 'application/json'},
+          body: json.encode({
+            'token': token,
+            'match_id': int.parse(matchId),
+            'slot': _selectedSlot,
+          }),
+        );
+
+        if (response.statusCode == 200) {
+          final responseData = json.decode(response.body);
+          setState(() {
+            _isJoined = true;
+            _matchId = matchId;
+            _players = List<String>.from(
+                responseData['players'].map((p) => p['name']));
+            _canEdit = responseData['canEdit'];
+            _player1Score = 0;
+            _player2Score = 0;
+            _player3Score = 0;
+            _player4Score = 0;
+          });
+          _showToast('Joined match successfully!');
+        } else {
+          _showToast('Failed to join 2v2 match.');
+        }
+      } else {
+        // 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)}),
+          body: json.encode({
+            'token': token,
+            'match_id': int.parse(matchId),
+          }),
         );
 
         if (response.statusCode == 200) {
@@ -60,6 +102,7 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
         } else {
           _showToast('Failed to join match.');
         }
+      }
     } catch (e) {
       _showToast('Error: $e');
     } finally {
@@ -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 {
     setState(() {
       _isLoading = true;
@@ -96,6 +129,27 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
     }
 
     try {
+      if (_is2v2Mode) {
+        // End the 2v2 match using the /endfour API
+        final response = await http.post(
+          Uri.parse(_endFourApiUrl),
+          headers: {'Content-Type': 'application/json'},
+          body: json.encode({
+            '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) {
+          _showToast('2v2 match ended successfully!');
+        } else {
+          _showToast('Failed to end 2v2 match.');
+        }
+      } else {
+        // End the 1v1 match
         final response = await http.post(
           Uri.parse(_endMatchApiUrl),
           headers: {'Content-Type': 'application/json'},
@@ -111,6 +165,7 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
         } else {
           _showToast('Failed to end match.');
         }
+      }
     } catch (e) {
       _showToast('Error: $e');
     } finally {
@@ -138,45 +193,191 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
                     child: Column(
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: [
-                        // Player 1
-                        Text(
-                          _player1name ?? 'Player 1',
-                          style: TextStyle(
-                            fontSize: 18,
+                        // Display for 2v2 match
+                        if (_is2v2Mode && _canEdit) ...[
+                          Text('2v2 Match',
+                              style:
+                                  TextStyle(color: Colors.white, fontSize: 24)),
+                          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)),
+                                    ],
+                                  ),
+                                ],
+                              ),
+                            ],
+                          ),
+                          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: 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
+                        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),
-                            ),
+                                  onPressed: () => _updateScore(1, -1)),
                               Container(
                                   width: 100,
                                   height: 50,
                                   decoration: BoxDecoration(
-                                border:
-                                    Border.all(color: Colors.white, width: 2),
-                                borderRadius: BorderRadius.circular(8),
-                              ),
+                                      border: Border.all(
+                                          color: Colors.white, width: 2),
+                                      borderRadius: BorderRadius.circular(8)),
                                   child: Center(
-                                child: Text(
-                                  '$_player1Score',
+                                      child: Text('$_player1Score',
                                           style: TextStyle(
-                                    fontSize: 24,
                                               color: Colors.white,
                                               fontWeight: FontWeight.bold,
-                                  ),
-                                ),
-                              ),
-                            ),
+                                              fontSize: 24)))),
                               IconButton(
                                   icon: Icon(Icons.add, color: Colors.white),
-                              onPressed: () => _updateScore(1, 1),
-                            ),
+                                  onPressed: () => _updateScore(1, 1)),
                             ],
                           ),
                           SizedBox(height: 8),
@@ -184,50 +385,36 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
                               color: Colors.white,
                               thickness: 2,
                               indent: 80,
-                          endIndent: 80,
-                        ),
+                              endIndent: 80),
                           SizedBox(height: 8),
-                        // Player 2
                           Row(
                             mainAxisAlignment: MainAxisAlignment.center,
                             children: [
                               IconButton(
                                   icon: Icon(Icons.remove, color: Colors.white),
-                              onPressed: () => _updateScore(2, -1),
-                            ),
+                                  onPressed: () => _updateScore(2, -1)),
                               Container(
                                   width: 100,
                                   height: 50,
                                   decoration: BoxDecoration(
-                                border:
-                                    Border.all(color: Colors.white, width: 2),
-                                borderRadius: BorderRadius.circular(8),
-                              ),
+                                      border: Border.all(
+                                          color: Colors.white, width: 2),
+                                      borderRadius: BorderRadius.circular(8)),
                                   child: Center(
-                                child: Text(
-                                  '$_player2Score',
+                                      child: Text('$_player2Score',
                                           style: TextStyle(
-                                    fontSize: 24,
                                               color: Colors.white,
                                               fontWeight: FontWeight.bold,
-                                  ),
-                                ),
-                              ),
-                            ),
+                                              fontSize: 24)))),
                               IconButton(
                                   icon: Icon(Icons.add, color: Colors.white),
-                              onPressed: () => _updateScore(2, 1),
-                            ),
+                                  onPressed: () => _updateScore(2, 1)),
                             ],
                           ),
                           SizedBox(height: 8),
-                        Text(
-                          _player2name ?? 'Player 2',
-                          style: TextStyle(
-                            fontSize: 18,
-                            color: Colors.white,
-                          ),
-                        ),
+                          Text(_player2name ?? 'Player 2',
+                              style: TextStyle(color: Colors.white)),
+                        ],
                         SizedBox(height: 32),
                         ElevatedButton(
                           onPressed: _endMatch,
@@ -249,6 +436,34 @@ class _JoinMatchPageState extends State<JoinMatchPage> {
                         ),
                       ),
                       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(
                         onPressed: () {
                           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;
+      }
+    });
+  }
 }

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('Elo Rating: ${player['elo_rating']}'),
-                      trailing: Text('Friend Code: ${player['friend_code']}'),
+                      subtitle: Text(
+                          'Elo: ${player['elo_rating']} | TSC: $truncatedOskMu'),
+                      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;
         });
@@ -75,14 +79,84 @@ class _ProfilePageState extends State<ProfilePage> {
   }
 
   String getRankImage(int? elo) {
-    if (elo == null) return '$apiurl/assets/none.png';
-    if (elo > 1000) return '$apiurl/assets/U.png';
-    if (elo > 750) return '$apiurl/assets/S.png';
-    if (elo > 400) return '$apiurl/assets/A.png';
-    if (elo > 200) return '$apiurl/assets/B.png';
-    if (elo > 100) return '$apiurl/assets/C.png';
-    if (elo > 30) return '$apiurl/assets/D.png';
-    return '$apiurl/assets/none.png';
+    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
@@ -109,9 +183,7 @@ class _ProfilePageState extends State<ProfilePage> {
                           ),
                           radius: 40,
                         ),
-
                         SizedBox(width: 16),
-                        // Profile Info
                         Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
@@ -122,16 +194,32 @@ class _ProfilePageState extends State<ProfilePage> {
                                 fontWeight: FontWeight.bold,
                               ),
                             ),
-                            SizedBox(height: 8),
+                            SizedBox(height: 6),
+                            Row(
+                              children: [
                                 Text('UID: ${_uid ?? 'N/A'}'),
-                            Text('ELO: ${_elo ?? 'N/A'}'),
+                                SizedBox(
+                                  width: 30,
+                                ),
+                                Image.asset(
+                                  getRankImage(_elo),
+                                  width: 100,
+                                  height: 30,
+                                ),
                               ],
                             ),
-                        SizedBox(width: 25),
-                        Image.network(
-                          getRankImage(_elo),
-                          width: 137,
-                          height: 137,
+                            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?',
+                                ),
+                              ],
+                            ),
+                          ],
                         ),
                       ],
                     ),

pubspec.yaml

@@ -2,7 +2,7 @@ name: pingpongapp
 description: "DTH Ping Pong Score tracking app"
 publish_to: 'none'
 
-version: 0.0.51+2
+version: 0.0.57+1
 
 environment:
   sdk: '>=3.4.3 <4.0.0'
@@ -27,8 +27,8 @@ flutter:
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
-  #   - images/a_dot_ham.jpeg
+  assets:
+     - assets/
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware