diff --git a/Frontend/lib/mih_packages/mine_sweeper/builders/build_minesweeper_leaderboard_list.dart b/Frontend/lib/mih_packages/mine_sweeper/builders/build_minesweeper_leaderboard_list.dart index 5c18eaca..7f870c46 100644 --- a/Frontend/lib/mih_packages/mine_sweeper/builders/build_minesweeper_leaderboard_list.dart +++ b/Frontend/lib/mih_packages/mine_sweeper/builders/build_minesweeper_leaderboard_list.dart @@ -1,6 +1,8 @@ +import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart'; import 'package:mzansi_innovation_hub/main.dart'; import 'package:mzansi_innovation_hub/mih_package_components/mih_circle_avatar.dart'; +import 'package:mzansi_innovation_hub/mih_package_components/mih_icons.dart'; import 'package:mzansi_innovation_hub/mih_providers/mih_mine_sweeper_provider.dart'; import 'package:mzansi_innovation_hub/mih_providers/mzansi_profile_provider.dart'; import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart'; @@ -48,61 +50,100 @@ class _BuildMinesweeperLeaderboardListState }, itemCount: mineSweeperProvider.leaderboard!.length, itemBuilder: (context, index) { - return Padding( - padding: EdgeInsets.symmetric(horizontal: width / 20), - child: Row( - children: [ - Text( - "#${index + 1}", - style: TextStyle( - fontSize: 25, - color: getMedalColor(index), + return FutureBuilder( + future: mineSweeperProvider.leaderboardUserPicturesUrl[index], + builder: (context, asyncSnapshot) { + ImageProvider? imageFile; + bool loading = true; + if (asyncSnapshot.connectionState == ConnectionState.done) { + loading = false; + if (asyncSnapshot.hasData) { + imageFile = asyncSnapshot.requireData != "" + ? CachedNetworkImageProvider( + asyncSnapshot.requireData) + : null; + } else { + imageFile = null; + } + } else { + imageFile = null; + } + return Padding( + padding: EdgeInsets.symmetric(horizontal: width / 20), + child: Row( + children: [ + Text( + "#${index + 1}", + style: TextStyle( + fontSize: 25, + color: getMedalColor(index), + ), + ), + const SizedBox(width: 10), + loading + ? Icon( + MihIcons.mihRing, + size: 80, + color: MihColors.getSecondaryColor( + MzansiInnovationHub.of(context)! + .theme + .mode == + "Dark"), + ) + : imageFile == null + ? Icon( + MihIcons.iDontKnow, + size: 80, + color: MihColors.getSecondaryColor( + MzansiInnovationHub.of(context)! + .theme + .mode == + "Dark"), + ) + : MihCircleAvatar( + key: UniqueKey(), + imageFile: imageFile, + width: 80, + editable: false, + fileNameController: null, + userSelectedfile: null, + frameColor: getMedalColor(index), + backgroundColor: MihColors.getPrimaryColor( + MzansiInnovationHub.of(context)! + .theme + .mode == + "Dark"), + onChange: () {}, + ), + const SizedBox(width: 10), + Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "${mineSweeperProvider.leaderboard![index].username}${profileProvider.user!.username == mineSweeperProvider.leaderboard![index].username ? " (You)" : ""}", + textAlign: TextAlign.left, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: getMedalColor(index), + ), + ), + Text( + "Score: ${mineSweeperProvider.leaderboard![index].game_score}\nTime: ${mineSweeperProvider.leaderboard![index].game_time}", + textAlign: TextAlign.left, + style: TextStyle( + fontSize: 18, + // fontWeight: FontWeight.bold, + color: getMedalColor(index), + ), + ), + ], + ) + ], ), - ), - const SizedBox(width: 10), - MihCircleAvatar( - key: UniqueKey(), - imageFile: - mineSweeperProvider.leaderboardUserPictures.isNotEmpty - ? mineSweeperProvider.leaderboardUserPictures[index] - : null, - width: 80, - editable: false, - fileNameController: null, - userSelectedfile: null, - frameColor: getMedalColor(index), - backgroundColor: MihColors.getPrimaryColor( - MzansiInnovationHub.of(context)!.theme.mode == "Dark"), - onChange: () {}, - ), - const SizedBox(width: 10), - Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "${mineSweeperProvider.leaderboard![index].username}${profileProvider.user!.username == mineSweeperProvider.leaderboard![index].username ? " (You)" : ""}", - textAlign: TextAlign.left, - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.bold, - color: getMedalColor(index), - ), - ), - Text( - "Score: ${mineSweeperProvider.leaderboard![index].game_score}\nTime: ${mineSweeperProvider.leaderboard![index].game_time}", - textAlign: TextAlign.left, - style: TextStyle( - fontSize: 18, - // fontWeight: FontWeight.bold, - color: getMedalColor(index), - ), - ), - ], - ) - ], - ), - ); + ); + }); }, ); }, diff --git a/Frontend/lib/mih_packages/mine_sweeper/package_tools/mih_mine_sweeper_leader_board.dart b/Frontend/lib/mih_packages/mine_sweeper/package_tools/mih_mine_sweeper_leader_board.dart index 7bd183ca..d2865b2a 100644 --- a/Frontend/lib/mih_packages/mine_sweeper/package_tools/mih_mine_sweeper_leader_board.dart +++ b/Frontend/lib/mih_packages/mine_sweeper/package_tools/mih_mine_sweeper_leader_board.dart @@ -1,4 +1,3 @@ -import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:ken_logger/ken_logger.dart'; @@ -32,14 +31,14 @@ class _MihMineSweeperLeaderBoardState extends State { filterController.text = mineSweeperProvider.difficulty; KenLogger.success("getting data"); await MihMinesweeperServices().getTop20Leaderboard(mineSweeperProvider); - List?> userPictures = []; - String userPicUrl = ""; + List> userPicturesUrl = []; + Future userPicUrl; for (final ranking in mineSweeperProvider.leaderboard!) { - userPicUrl = await MihFileApi.getMinioFileUrl(ranking.proPicUrl); - userPictures.add(CachedNetworkImageProvider(userPicUrl)); + userPicUrl = MihFileApi.getMinioFileUrl(ranking.proPicUrl); + userPicturesUrl.add(userPicUrl); } mineSweeperProvider.setLeaderboardUserPictures( - leaderboardUserPictures: userPictures); + leaderboardUserPicturesUrl: userPicturesUrl); setState(() { isLoading = false; }); @@ -190,7 +189,9 @@ class _MihMineSweeperLeaderBoardState extends State { ], ), ) - : Expanded(child: BuildMinesweeperLeaderboardList()), + : Expanded( + child: BuildMinesweeperLeaderboardList(), + ), ], ); } diff --git a/Frontend/lib/mih_providers/mih_mine_sweeper_provider.dart b/Frontend/lib/mih_providers/mih_mine_sweeper_provider.dart index dd1e9bf8..2a942979 100644 --- a/Frontend/lib/mih_providers/mih_mine_sweeper_provider.dart +++ b/Frontend/lib/mih_providers/mih_mine_sweeper_provider.dart @@ -9,7 +9,7 @@ class MihMineSweeperProvider extends ChangeNotifier { int totalMines; List? leaderboard; List? myScoreboard; - List?> leaderboardUserPictures = []; + List> leaderboardUserPicturesUrl = []; MihMineSweeperProvider({ this.difficulty = "Easy", @@ -74,8 +74,8 @@ class MihMineSweeperProvider extends ChangeNotifier { } void setLeaderboardUserPictures( - {required List?> leaderboardUserPictures}) { - this.leaderboardUserPictures = leaderboardUserPictures; + {required List> leaderboardUserPicturesUrl}) { + this.leaderboardUserPicturesUrl = leaderboardUserPicturesUrl; notifyListeners(); } }