game: leaderboard ui

ColourMeOKGame/Assets/Scripts/LeaderboardUI.cs

@@ -0,0 +1,69 @@
+using System;
+using System.Collections.Generic;
+using Unity.VisualScripting;
+using UnityEngine;
+
+/// <summary>
+///     class that loads leaderboard data and displays it in the UI
+/// </summary>
+public class LeaderboardUI : MonoBehaviour
+{
+    /// <summary>
+    ///     maximum number of entries to display in the leaderboard
+    /// </summary>
+    private const int MaxEntries = 10;
+    
+    /// <summary>
+    ///     leaderboard data
+    /// </summary>
+    private List<Backend.LeaderboardEntry> _leaderboardData = new(MaxEntries);
+
+    /// <summary>
+    ///     register callbacks
+    /// </summary>
+    private void OnEnable()
+    {
+        UIManager.Instance.RegisterOnDisplayStateChangeCallback((_, newState) =>
+        {
+            if (newState == UIManager.DisplayState.LeaderboardView)
+            {
+                LoadLeaderboardData();
+            }
+        });
+    }
+
+    /// <summary>
+    ///     load leaderboard data from the backend
+    /// </summary>
+    private void LoadLeaderboardData()
+    {
+        if (GameManager.Instance.Backend.Status != Backend.FirebaseConnectionStatus.Connected)
+        {
+            Debug.LogError("attempted to load leaderboard data without a connection to the backend");
+            RenderLeaderboardData("Not connected to the backend, can't load leaderboard data.");
+            return;
+        }
+        
+        GameManager.Instance.Backend.GetLeaderboard((result, entries) =>
+        {
+            if (result == Backend.TransactionResult.Ok)
+            {
+                _leaderboardData = entries;
+                RenderLeaderboardData();
+            }
+            else
+            {
+                Debug.LogError("failed to load leaderboard data");
+                RenderLeaderboardData("An error occured, couldn't load leaderboard data.");
+            }
+        });
+    }
+    
+    /// <summary>
+    ///     render leaderboard data
+    /// </summary>
+    private void RenderLeaderboardData(string message = "")
+    {
+        // render leaderboard data
+    }
+}

ColourMeOKGame/Assets/Scripts/LeaderboardUI.cs.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: f58221274607ad145b45792b8649c87f
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

ColourMeOKGame/Assets/Scripts/UIManager.cs

@@ -3,6 +3,9 @@
 using UnityEngine;
 using UnityEngine.UIElements;
 
+/// <summary>
+///     class to handles overall game ui state and transitions
+/// </summary>
 public class UIManager : MonoBehaviour
 {
     /// <summary>
@@ -81,6 +84,30 @@ private void OnEnable()
         UI = GetComponent<UIDocument>().rootVisualElement;
     }
 
+    /// <summary>
+    ///     function to register a callback to be invoked when the display state changes
+    /// </summary>
+    /// <param name="callback">
+    ///     callback function that takes two <c>DisplayState</c> parameters:
+    /// </param>
+    public void RegisterOnDisplayStateChangeCallback(Action<DisplayState, DisplayState> callback)
+    {
+        _onDisplayStateChangeCallbacks.Add(callback);
+    }
+    
+    private void FireOnDisplayStateChange(DisplayState oldState, DisplayState newState)
+    {
+        foreach (var callback in _onDisplayStateChangeCallbacks)
+            try
+            {
+                callback.Invoke(oldState, newState);
+            }
+            catch (Exception e)
+            {
+                Debug.LogError($"error invoking OnSignOutCallback: {e.Message}");
+            }
+    }
+
     /// <summary>
     ///     function to show a menu based on the enum passed,
     ///     and any other necessary actions
@@ -160,5 +187,8 @@ public void SetDisplayState(DisplayState newDisplayState)
             UI.Q<VisualElement>("AccountSection").style.display = DisplayStyle.Flex;
             UI.Q<VisualElement>("ConnectionStatus").style.display = DisplayStyle.Flex;
         }
+        
+        FireOnDisplayStateChange(state, newDisplayState);
+        state = newDisplayState;
     }
 }

ColourMeOKGame/Assets/UI/GameUI.uxml

@@ -108,7 +108,7 @@
             </ui:VisualElement>
             <ui:VisualElement name="LeaderboardView" style="flex-grow: 1; display: flex; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; flex-direction: column; justify-content: space-between;">
                 <ui:Label tabindex="-1" text="Leaderboard" parse-escape-sequences="true" display-tooltip-when-elided="true" name="LeaderboardHeader" style="font-size: 58px; -unity-font-style: normal;" />
-                <ui:VisualElement name="Deliberate" style="flex-grow: 0; display: flex;">
+                <ui:VisualElement name="Deliberate" style="flex-grow: 0; display: none;">
                     <ui:VisualElement name="LeaderboardEntryHeader">
                         <ui:Label tabindex="-1" text="Rank" parse-escape-sequences="true" display-tooltip-when-elided="true" name="EntryRankPosition" style="white-space: nowrap; width: 10%;" />
                         <ui:Label tabindex="-1" text="Username" parse-escape-sequences="true" display-tooltip-when-elided="true" name="EntryNameText" style="white-space: nowrap; width: 70%;" />
@@ -120,7 +120,7 @@
                         <ui:Label tabindex="-1" text="000.000" parse-escape-sequences="true" display-tooltip-when-elided="true" name="EntryRatingText" style="white-space: nowrap; width: 20%; -unity-text-align: upper-right;" />
                     </ui:VisualElement>
                 </ui:VisualElement>
-                <ui:ListView name="LeaderboardListView" style="display: none; visibility: visible;" />
+                <ui:ListView name="LeaderboardListView" style="display: flex; visibility: visible;" />
             </ui:VisualElement>
             <ui:VisualElement name="AccountView" style="flex-grow: 1; display: none; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; flex-direction: column; justify-content: space-between;">
                 <ui:Label tabindex="-1" text="You are not signed in." parse-escape-sequences="true" display-tooltip-when-elided="true" name="AccountHeader" style="font-size: 58px; -unity-font-style: normal;" />