Unreal Engine Module - Add a weekly high score leaderboard - Put it all together

Last updated on January 13, 2024

Connecting UI with Get Weekly Periodic Leaderboard Rankings Implementation

1. Open the LeaderboardWeeklyWidget_Starter class CPP file, navigate to the GetWeeklyRankings() function, and replace the current implementation with the following code. It will get the weekly leaderboard rankings using the PeriodicBoardSubsystem_Starter and then display it upon completion.

   void ULeaderboardWeeklyWidget_Starter::GetWeeklyRankings()
   {
       FUniqueNetIdRepl PlayerNetId = GetOwningPlayer()->GetLocalPlayer()->GetPreferredUniqueNetId();
       if (!PlayerNetId.IsValid())
       {
           return;
       }
   
       Ws_Leaderboard->SetWidgetState(EAccelByteWarsWidgetSwitcherState::Loading);
   
       PeriodicLeaderboardSubsystem->GetPeriodicRankings(
           GetOwningPlayer(),
           LeaderboardCode,
           CycleId,
           ResultLimit,
           FOnGetLeaderboardRankingComplete::CreateWeakLambda(this, [this, PlayerNetId](bool bWasSuccessful, const TArray<ULeaderboardRank*>   Rankings)
           {
               if (!bWasSuccessful)
               {
                   Ws_Leaderboard->SetWidgetState(EAccelByteWarsWidgetSwitcherState::Empty);
                   return;
               }
   
               // Add rankings to the leaderboard weekly ranking list.
               Lv_Leaderboard->SetListItems(Rankings);
   
               // Get the logged-in player's weekly rank if it is not included in the leaderboard.
               const TArray<ULeaderboardRank*> FilteredRank = Rankings.FilterByPredicate([PlayerNetId](const ULeaderboardRank* Temp) { return  Temp && Temp->UserId == PlayerNetId; });
               const ULeaderboardRank* PlayerRank = FilteredRank.IsEmpty() ? nullptr : FilteredRank[0];
               if (!PlayerRank)
               {
                   GetPlayerWeeklyRanking();
               }
               // Display the weekly rankings if it is not empty.
               else
               {
                   DisplayPlayerWeeklyRank(PlayerRank);
                   Ws_Leaderboard->SetWidgetState(
                       Lv_Leaderboard->GetNumItems() <= 0 ?
                       EAccelByteWarsWidgetSwitcherState::Empty :
                       EAccelByteWarsWidgetSwitcherState::Not_Empty);
               }
           }
       ));
   }

2. Next, navigate to the GetPlayerWeeklyRanking() function and replace the current implementation with the following code. It will only be called if the currently logged-in player is not included in the rankings retrieved by the GetWeeklyRankings() function.

   void ULeaderboardWeeklyWidget_Starter::GetPlayerWeeklyRanking()
   {
       PeriodicLeaderboardSubsystem->GetPlayerPeriodicRanking(
           GetOwningPlayer(),
           LeaderboardCode,
           CycleId,
           FOnGetLeaderboardRankingComplete::CreateWeakLambda(this, [this](bool bWasSuccessful, const TArray<ULeaderboardRank*> Rankings)
           {
               // Get and display the logged-in player's weekly rank.
               DisplayPlayerWeeklyRank((!bWasSuccessful || Rankings.IsEmpty()) ? nullptr : Rankings[0]);
   
               // Display the weekly rankings if it is not empty.
               Ws_Leaderboard->SetWidgetState(
                   Lv_Leaderboard->GetNumItems() <= 0 ?
                   EAccelByteWarsWidgetSwitcherState::Empty :
                   EAccelByteWarsWidgetSwitcherState::Not_Empty);
           }
       ));
   }

3. Finally, modify the NativeOnActivated() by adding the following code. We pass the leaderboard code based on the Leaderboard Code we have configured in the Admin Portal, and also we pass the Cycle ID based on the statistics cycle created from the previous section. Note that, if you want to use your own cycle, change the CycleId to your own cycle's ID.

   void ULeaderboardWeeklyWidget_Starter::NativeOnActivated()
   {
       // Set leaderboard code based on board-unreal-highestscore-{gamemode} format. 
       LeaderboardCode = FString::Printf(TEXT("board-unreal-highestscore-%s"), *ULeaderboardsWidget::GetLeaderboardGameMode());
   
       // Set cycle id to the weekly leaderboard’s cycle id.
       CycleId = FString("55c5b1d5a4e14eaba45477cd70de9c15");
   
       ...
   }

4. Congratulations! You have connected the widget to get and display the weekly periodic leaderboard.

Resources

• The files used in this tutorial section are available in the Byte Wars GitHub repository.

  • AccelByteWars/Source/AccelByteWars/TutorialModules/Engagement/PeriodicLeaderboard/UI/LeaderboardWeeklyWidget_Starter.h
  • AccelByteWars/Source/AccelByteWars/TutorialModules/Engagement/PeriodicLeaderboard/UI/LeaderboardWeeklyWidget_Starter.cpp