Add friend requests menu - Add friends - (Unity module)

Last updated on December 13, 2024

What's on The Menu​

In this tutorial, you will learn how to prepare the user interface (UI) you will use to display and handle sent or received friend requests. The UI files are available in the Resources section and consist of the following:

  • FriendRequestsMenuCanvas_Starter: A UI menu to display received friend requests.

    • CS file: Assets/Resources/Modules/FriendsEssentials/Scripts/UI/FriendRequestsMenuHandler_Starter.cs
    • Prefab file: Assets/Resources/Modules/FriendsEssentials/Prefabs/FriendRequest/FriendRequestsMenuCanvas_Starter.prefab

  • SentFriendRequestsMenuCanvas_Starter: A UI menu to display sent friend requests.

    • CS file: Assets/Resources/Modules/FriendsEssentials/Scripts/UI/SentFriendRequestsMenuHandler_Starter.cs
    • Prefab file: Assets/Resources/Modules/FriendsEssentials/Prefabs/SentFriendRequest/SentFriendRequestsMenuCanvas_Starter.prefab

  • FriendRequestsEntryComponent: A UI component to display the item of the received friend request information such as display name, avatar, and action buttons.

    • CS file: Assets/Resources/Modules/FriendsEssentials/Scripts/UI/FriendRequestsEntryHandler.cs
    • Prefab file: Assets/Resources/Modules/FriendsEssentials/Prefabs/FriendRequest/FriendRequestsEntryComponent.prefab

  • SentFriendRequestEntryComponent: A UI component to display the item of the sent friend request information such as display name, avatar, and action buttons.

    • CS file: Assets/Resources/Modules/FriendsEssentials/Scripts/UI/SentFriendRequestsEntryHandler.cs
    • Prefab file: Assets/Resources/Modules/FriendsEssentials/Prefabs/SentFriendRequest/SentFriendRequestsEntryComponent.prefab

Take a look at the prefabs of these UI menus for more detailed information.

Friend Requests Menu Canvas​

Below is the preview of the FriendRequestsMenuCanvas_Starter.prefab. This prefab contains the following panels:

  • Default Panel: Displays default text messages when there are no friend requests.
  • Loading Panel: Displays loading animation when the game is fetching friend requests.
  • Loading Failed Panel: Displays a message when the game fails to fetch friend requests.
  • Result Content Panel: Displays the list of incoming friend requests.

Friend requests widget Unity Byte Wars add friends

The components used in this prefab are declared in the FriendRequestsMenuHandler_Starter.cs file. Below are the declarations of the components used by this prefab.

[Header("Friend Request Components"), SerializeField] private GameObject friendEntryPrefab;

[Header("View Panels"), SerializeField] private RectTransform defaultPanel;
[SerializeField] private RectTransform loadingPanel;
[SerializeField] private RectTransform loadingFailedPanel;
[SerializeField] private RectTransform resultContentPanel;

To change the state of the panels, you can set the value of the CurrentView property in the FriendRequestsMenuHandler_Starter.cs file. Below is the code snippet that shows how to change the state of the panels.

CurrentView = FriendRequestsView.Loading;

Sent Friend Requests Menu Canvas​

Below is the preview of the SentFriendRequestMenuCanvas_Starter.prefab. This prefab contains the following panels:

  • Default Panel: Displays default text messages when there are no sent friend requests.
  • Loading Panel: Displays loading animation when the game is fetching sent friend requests.
  • Loading Failed Panel: Displays a message when the game fails to fetch sent friend requests.
  • Result Content Panel: Displays the list of outgoing friend requests.

Sent friend requests widget Unity Byte Wars add friends

The components used in this prefab are declared in the SentFriendRequestsMenuHandler_Starter.cs file. This prefab uses the following declarations of components:

[Header("Friend Request Components"), SerializeField] private GameObject friendEntryPrefab;
[Header("View Panels"), SerializeField] private RectTransform defaultPanel;
[SerializeField] private RectTransform loadingPanel;
[SerializeField] private RectTransform loadingFailedPanel;
[SerializeField] private RectTransform resultContentPanel;

To change the state of the panels, set the value of the CurrentView property in the SentFriendRequestsMenuHandler_Starter.cs file. The following code snippet shows how to change the state of the panels:

CurrentView = SentFriendRequestsView.Loading;

Friend Requests Entry Component​

Below is the preview of FriendRequestsEntryComponent.prefab which is used to display the item of the incoming friend request information such as display name, avatar, and action buttons. Used by the Friend Requests Menu Canvas.

Received friend request entry widget Unity Byte Wars add friends

The components used in this prefab are declared in the SentFriendRequestsEntryHandler.cs file. Below are the declarations of those components:

[SerializeField] private Image friendImage;
[SerializeField] private TMP_Text friendName;
[SerializeField] private Button rejectButton;
[SerializeField] private Button acceptButton;

To manipulate those components, the script have these public getters:

public Image FriendImage => friendImage;
public TMP_Text FriendName => friendName;
public Button RejectButton => rejectButton;
public Button AcceptButton => acceptButton;

It also has a User ID attribute to identify which entry represents which user.

public string UserId { get; set; } = string.Empty;

Sent Friend Requests Entry Component​

Below is the preview of SentFriendRequestsEntryComponent.prefab which is used to display the item of the outgoing friend request information such as display name, avatar, and action buttons.

Received friend request entry widget Unity Byte Wars add friends

This prefab can be found in the SentFriendRequestsEntryHandler.cs file. The declarations of the components used in this prefab are as below:

[SerializeField] private Image friendImage;
[SerializeField] private TMP_Text friendName;
[SerializeField] private Button cancelButton;

To manipulate those components, the script have these public getters:

public Image FriendImage => friendImage;
public TMP_Text FriendName => friendName;
public Button CancelButton => cancelButton;

It also has a User ID attribute to identify which entry represents which user.

public string UserId { get; set; } = string.Empty;

Ready the UI​

In this section, you will learn how to prepare the UI for both the Friend Requests and Sent Friend Requests menus.

  1. Open the FriendRequestsMenuHandler_Starter.cs file. You will see a function called LoadIncomingFriendRequests. Later on, you will implement this function to query all incoming friend requests.

    private void LoadIncomingFriendRequests()
    {
        // TODO: Implement Load Incoming Friend Requests here.
        BytewarsLogger.LogWarning("The LoadIncomingFriendRequests method is not implemented yet");
    }

  2. In the FriendRequestsMenuHandler_Starter.cs file, find the OnEnable function. This function is called when the UI is enabled.

    private void OnEnable()
    {
        // TODO: Define Module Wrappers and Load Incoming Friend Requests here.
    }

  3. Open the SentFriendRequestsMenuHandler_Starter.cs file. You will see a function called LoadOutgoingFriendRequests. Later on, you will implement this function to query all outgoing friend requests.

    private void LoadOutgoingFriendRequests()
    {
        // TODO: Implement Load Outgoing Friend Requests here.
        BytewarsLogger.LogWarning("The LoadOutgoingFriendRequests method is not implemented yet");
    }

  4. In the SentFriendRequestsMenuHandler_Starter.cs file, find the OnEnable function. This function is called when the UI is enabled.

    private void OnEnable()
    {
        // TODO: Define Module Wrappers and Load Outgoing Friend Requests here.
    }

  5. In the Unity Editor, go to Assets/Resources/Modules/FriendsEssentials, open the FriendsEssentialsAssetConfig asset file and make sure the Is Starter Active is set to true.

  6. Play the game in the Editor, log in, and go to Social > Friends Requests. If your implementation up to this point is successful, you will be able to open the Friend Requests menu and receive the following logs:

    [FriendRequestsMenuHandler_Starter.cs] [LoadIncomingFriendRequests] [Warning] [79] - The LoadIncomingFriendRequests method is not implemented yet

  7. Still while playing the game in the editor, go to Social > Sent Friend Requests. If your implementation up to this point is successful, you will be able to open the Sent Friend Requests menu and receive the following logs:

    [SentFriendRequestsMenuHandler_Starter.cs] [LoadOutgoingFriendRequests] [Warning] [79] - The LoadOutgoingFriendRequests method is not implemented yet

Resources​

Last updated on

On this page