game: hide portions of the SideView depending on state

ColourMeOKGame/Assets/Scripts/Backend.cs

@@ -58,7 +58,7 @@ public enum UserAccountDetailTargetEnum
     }
 
     /// <summary>
-    ///     callback functions to be invoked when the user signs in
+    ///     callback functions to be invoked when the connection status changes
     /// </summary>
     /// <returns></returns>
     private readonly List<Action<FirebaseConnectionStatus>> _onConnectionStatusChangedCallbacks = new();
@@ -119,6 +119,7 @@ public void Initialise(Action<FirebaseConnectionStatus> callback)
                     _db = FirebaseDatabase.DefaultInstance.RootReference;
                     Status = FirebaseConnectionStatus.Connected;
                     callback(Status);
+                    FireOnConnectionStatusChangedCallbacks();
                     break;
 
                 case DependencyStatus.UnavailableDisabled:
@@ -127,16 +128,19 @@ public void Initialise(Action<FirebaseConnectionStatus> callback)
                 case DependencyStatus.UnavailablePermission:
                     Status = FirebaseConnectionStatus.ExternalError;
                     callback(Status);
+                    FireOnConnectionStatusChangedCallbacks();
                     break;
 
                 case DependencyStatus.UnavailableUpdating:
                     Status = FirebaseConnectionStatus.Updating;
                     callback(Status);
+                    FireOnConnectionStatusChangedCallbacks();
                     RetryInitialiseAfterDelay(callback);
                     break;
 
                 case DependencyStatus.UnavailableUpdaterequired:
                     Status = FirebaseConnectionStatus.UpdateRequired;
+                    FireOnConnectionStatusChangedCallbacks();
                     callback(Status);
                     break;
 
@@ -144,6 +148,7 @@ public void Initialise(Action<FirebaseConnectionStatus> callback)
                 default:
                     Status = FirebaseConnectionStatus.InternalError;
                     Debug.LogError("firebase ??? blew up or something," + task.Result);
+                    FireOnConnectionStatusChangedCallbacks();
                     callback(Status);
                     break;
             }
@@ -152,6 +157,55 @@ public void Initialise(Action<FirebaseConnectionStatus> callback)
         });
     }
 
+    /// <summary>
+    ///     async function to retry initialisation after a delay
+    /// </summary>
+    private async void RetryInitialiseAfterDelay(Action<FirebaseConnectionStatus> callback)
+    {
+        await Task.Delay(TimeSpan.FromSeconds(10));
+        Initialise(callback);
+    }
+
+    /// <summary>
+    ///     cleanup function
+    /// </summary>
+    public void Cleanup()
+    {
+        SignOutUser();
+        _auth.StateChanged -= AuthStateChanged;
+        _auth = null;
+    }
+    
+    /// <summary>
+    ///     function to register a callback for when the user signs in
+    /// </summary>
+    /// <param name="callback">callback function that takes in a <c>FirebaseUser</c> object</param>
+    public void RegisterOnSignInCallback(Action<FirebaseUser> callback)
+    {
+        _onSignInCallbacks.Add(callback);
+        Debug.Log($"registering OnSignInCallback ({_onSignInCallbacks.Count})");
+    }
+
+    /// <summary>
+    ///     function to register a callback for when the user signs out
+    /// </summary>
+    /// <param name="callback">callback function</param>
+    public void RegisterOnSignOutCallback(Action callback)
+    {
+        _onSignOutCallbacks.Add(callback);
+        Debug.Log($"registering OnSignOutCallback ({_onSignOutCallbacks.Count})");
+    }
+    
+    /// <summary>
+    ///     function to register a callback for when the connection status changes
+    /// </summary>
+    /// <param name="callback">callback function that takes in a <c>FirebaseConnectionStatus</c> enum</param>
+    public void RegisterOnConnectionStatusChangedCallback(Action<FirebaseConnectionStatus> callback)
+    {
+        _onConnectionStatusChangedCallbacks.Add(callback);
+        Debug.Log($"registering ConnectionStatusChangedCallback ({_onConnectionStatusChangedCallbacks.Count})");
+    }
+    
     /// <summary>
     ///     function to fire all on sign in callbacks
     /// </summary>
@@ -187,22 +241,20 @@ private void FireOnSignOutCallbacks()
     }
     
     /// <summary>
-    ///     async function to retry initialisation after a delay
+    ///     function to fire all on connection status changed callbacks
     /// </summary>
-    private async void RetryInitialiseAfterDelay(Action<FirebaseConnectionStatus> callback)
+    private void FireOnConnectionStatusChangedCallbacks()
     {
-        await Task.Delay(TimeSpan.FromSeconds(10));
-        Initialise(callback);
+        Debug.Log($"firing OnConnectionStatusChangedCallbacks ({_onConnectionStatusChangedCallbacks.Count})");
+        foreach (var callback in _onConnectionStatusChangedCallbacks)
+            try
+            {
+                callback.Invoke(Status);
             }
-
-    /// <summary>
-    ///     cleanup function
-    /// </summary>
-    public void Cleanup()
+            catch (Exception e)
             {
-        SignOutUser();
-        _auth.StateChanged -= AuthStateChanged;
-        _auth = null;
+                Debug.LogError($"error invoking OnConnectionStatusChangedCallback: {e.Message}");
+            }
     }
 
     /// <summary>
@@ -233,24 +285,6 @@ private void AuthStateChanged(object sender, EventArgs eventArgs)
         RetrieveUsernameWithCallback((_, _) => { FireOnSignInCallbacks(); });
     }
 
-    /// <summary>
-    ///     function to register a callback for when the user signs in
-    /// </summary>
-    /// <param name="callback">callback function that takes in a <c>FirebaseUser</c> object</param>
-    public void RegisterOnSignInCallback(Action<FirebaseUser> callback)
-    {
-        _onSignInCallbacks.Add(callback);
-    }
-
-    /// <summary>
-    ///     function to register a callback for when the user signs out
-    /// </summary>
-    /// <param name="callback">callback function</param>
-    public void RegisterOnSignOutCallback(Action callback)
-    {
-        _onSignOutCallbacks.Add(callback);
-    }
-
     /// <summary>
     ///     abstraction function to authenticate the user
     /// </summary>

ColourMeOKGame/Assets/Scripts/GameManager.cs

@@ -107,6 +107,19 @@ private void OnEnable()
             Debug.Log("sign in callback, refreshing GameManager-controlled SideView UI");
             _data.LoadFromTheWorld(FireLocalPlayerDataChangeCallbacks);
         });
+        
+        Backend.RegisterOnConnectionStatusChangedCallback(status =>
+        {
+            Debug.Log($"post-fcStatus change, deciding to show/hide buttons based on new status: {status}");
+            ui.UI.Q<Button>("LeaderboardButton").style.display =
+                (status == Backend.FirebaseConnectionStatus.Connected)
+                    ? DisplayStyle.Flex
+                    : DisplayStyle.None;
+            ui.UI.Q<Button>("AccountButton").style.display =
+                (status == Backend.FirebaseConnectionStatus.Connected)
+                    ? DisplayStyle.Flex
+                    : DisplayStyle.None;
+        });
     }
 
     /// <summary>

ColourMeOKGame/Assets/Scripts/UIManager.cs

@@ -1,4 +1,6 @@
-using UnityEngine;
+using System;
+using System.Collections.Generic;
+using UnityEngine;
 using UnityEngine.UIElements;
 
 public class UIManager : MonoBehaviour
@@ -26,6 +28,11 @@ public enum DisplayState
     /// </summary>
     [SerializeField] private DisplayState state = DisplayState.UnassociatedState;
 
+    /// <summary>
+    ///     list of callbacks to invoke when the display state changes
+    /// </summary>
+    private readonly List<Action<DisplayState, DisplayState>> _onDisplayStateChangeCallbacks = new();
+
     /// <summary>
     ///     the visual element object for game ui
     /// </summary>
@@ -51,6 +58,14 @@ private void Awake()
         }
     }
 
+    /// <summary>
+    ///     initialise variables and register callbacks
+    /// </summary>
+    private void OnEnable()
+    {
+        UI = GetComponent<UIDocument>().rootVisualElement;
+    }
+
     /// <summary>
     ///     modify state of initial variables
     /// </summary>
@@ -59,14 +74,6 @@ private void Start()
         SetDisplayState(DisplayState.DefaultView);
     }
 
-    /// <summary>
-    ///     initialise variables
-    /// </summary>
-    private void OnEnable()
-    {
-        UI = GetComponent<UIDocument>().rootVisualElement;
-    }
-
     /// <summary>
     ///     function to show a menu based on the enum passed,
     ///     and any other necessary actions
@@ -74,16 +81,14 @@ private void OnEnable()
     /// <param name="newDisplayState">the game menu to show</param>
     public void SetDisplayState(DisplayState newDisplayState)
     {
-        var currentDisplayState = state;
-
         // if the new state is the same as the current state, do nothing
-        if (currentDisplayState == newDisplayState)
+        if (state == newDisplayState)
         {
-            Debug.Log($"staying at {currentDisplayState} (illogical transition)");
+            Debug.Log($"staying at {state} (illogical transition)");
             return;
         }
 
-        Debug.Log($"switching from {currentDisplayState} to {newDisplayState}");
+        Debug.Log($"switching from {state} to {newDisplayState}");
 
         var defaultView = UI.Q<VisualElement>("DefaultView");
         var gameView = UI.Q<VisualElement>("GameView");
@@ -120,5 +125,30 @@ public void SetDisplayState(DisplayState newDisplayState)
             DisplayState.AccountView => DisplayStyle.Flex,
             _ => DisplayStyle.None
         };
+
+        if (newDisplayState == DisplayState.GameView)
+        {
+            // if we're in the game view, everything except the account section/panel thing
+            UI.Q<Button>("PlayButton").style.display = DisplayStyle.None;
+            UI.Q<Button>("LeaderboardButton").style.display = DisplayStyle.None;
+            UI.Q<Button>("AccountButton").style.display = DisplayStyle.None;
+            UI.Q<VisualElement>("AccountSection").style.display = DisplayStyle.Flex;
+            UI.Q<VisualElement>("ConnectionStatus").style.display = DisplayStyle.None;
+        }
+        else
+        {
+            // if we're not in the game view, show everything!
+            UI.Q<Button>("PlayButton").style.display = DisplayStyle.Flex;
+            UI.Q<Button>("LeaderboardButton").style.display =
+                (GameManager.Instance.Backend.Status == Backend.FirebaseConnectionStatus.Connected)
+                    ? DisplayStyle.Flex
+                    : DisplayStyle.None;
+            UI.Q<Button>("AccountButton").style.display =
+                (GameManager.Instance.Backend.Status == Backend.FirebaseConnectionStatus.Connected)
+                    ? DisplayStyle.Flex
+                    : DisplayStyle.None;
+            UI.Q<VisualElement>("AccountSection").style.display = DisplayStyle.Flex;
+            UI.Q<VisualElement>("ConnectionStatus").style.display = DisplayStyle.Flex;
+        }
     }
 }

ColourMeOKGame/Assets/UI/GameUI.uss

@@ -28,6 +28,7 @@ #Content Label {
 #MainView Label {
     font-size: 22px;
     color: rgb(15, 13, 27);
+    white-space: normal;
 }
 
 .lch-slider Label {
@@ -71,15 +72,9 @@ .lch-slider #unity-dragger {
 #AccountFields TextField {
     flex-shrink: 0;
     flex-grow: 1;
-    margin-top: 0.75%;
-    margin-right: 0;
-    margin-bottom: 0.75%;
-    margin-left: 0;
+    margin: 0.75% 0;
     font-size: 22px;
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-right: 0;
-    padding-left: 0;
+    padding: 0;
     color: rgb(15, 13, 27);
 }
 
@@ -91,10 +86,7 @@ #AccountFields TextField Label {
 }
 
 #AccountFields TextField #unity-text-input {
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-bottom-left-radius: 5px;
+    border-radius: 5px;
     border-left-color: rgba(0, 0, 0, 0);
     border-right-color: rgba(0, 0, 0, 0);
     border-top-color: rgba(0, 0, 0, 0);
@@ -107,14 +99,8 @@ #AccountFields Button {
     flex-grow: 0;
     flex-shrink: 1;
     width: auto;
-    padding-top: 0;
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-left: 0;
-    margin-top: 0.75%;
-    margin-right: 0;
-    margin-bottom: 0.75%;
-    margin-left: 1.5%;
+    padding: 0;
+    margin: 0.75% 0 0.75% 1.5%;
     font-size: 22px;
     -unity-text-align: middle-center;
     background-color: rgb(15, 13, 27);
@@ -122,10 +108,7 @@ #AccountFields Button {
     border-right-color: rgba(0, 0, 0, 0);
     border-top-color: rgba(0, 0, 0, 0);
     border-bottom-color: rgba(0, 0, 0, 0);
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-bottom-left-radius: 5px;
+    border-radius: 5px;
     color: rgb(208, 152, 194);
     min-width: 8.5%;
 }
@@ -138,12 +121,6 @@ #AccountButtons > Button {
     border-right-color: rgba(0, 0, 0, 0);
     border-top-color: rgba(0, 0, 0, 0);
     border-bottom-color: rgba(0, 0, 0, 0);
-    padding-left: 0;
-    padding-right: 0;
-    margin-left: 0;
-    margin-right: 0;
-    margin-bottom: 0;
-    padding-bottom: 0;
-    padding-top: 0;
-    margin-top: 0;
+    padding: 0;
+    margin: 0;
 }

ColourMeOKGame/Assets/UI/GameUI.uxml

@@ -1,180 +1,130 @@
-<ui:UXML xmlns:ui="UnityEngine.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance"
-         engine="UnityEngine.UIElements" editor="UnityEditor.UIElements"
-         noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
-    <Style src="project://database/Assets/UI/GameUI.uss?fileID=7433441132597879392&amp;guid=2c7ff79f21a3e8e408e76d75944d575b&amp;type=3#GameUI"/>
-    <ui:VisualElement name="Root"
-                      style="flex-grow: 1; background-color: rgb(208, 152, 194); justify-content: space-around; align-items: stretch; align-self: stretch; flex-direction: row;">
-        <ui:VisualElement name="SideView"
-                          style="flex-grow: 0; background-color: rgb(15, 13, 27); flex-shrink: 0; width: 25%; justify-content: space-between;">
-            <ui:VisualElement name="Header"
-                              style="flex-grow: 0; margin-top: 10%; margin-right: 10%; margin-bottom: 0; margin-left: 10%; justify-content: space-between; align-items: flex-start; flex-direction: column;">
-                <ui:Label tabindex="-1" text="Colour Me OK" parse-escape-sequences="true"
-                          display-tooltip-when-elided="true" name="Name"
-                          style="color: rgb(208, 152, 194); -unity-font-style: bold; font-size: 58px; white-space: normal;"/>
-                <ui:Label tabindex="-1"
-                          text="Color Me OK is a colour-matching game using the coordinates of the OKLCh colour model on the OKLab perceptually uniform colour space."
-                          parse-escape-sequences="true" display-tooltip-when-elided="true" name="Description"
-                          style="font-size: 16px; white-space: normal; text-overflow: clip; color: rgb(208, 152, 194);"/>
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
+    <Style src="project://database/Assets/UI/GameUI.uss?fileID=7433441132597879392&amp;guid=2c7ff79f21a3e8e408e76d75944d575b&amp;type=3#GameUI" />
+    <ui:VisualElement name="Root" style="flex-grow: 1; background-color: rgb(208, 152, 194); justify-content: space-around; align-items: stretch; align-self: stretch; flex-direction: row;">
+        <ui:VisualElement name="SideView" style="flex-grow: 0; background-color: rgb(15, 13, 27); flex-shrink: 0; width: 25%; justify-content: space-between;">
+            <ui:VisualElement name="Header" style="flex-grow: 0; margin-top: 10%; margin-right: 10%; margin-bottom: 0; margin-left: 10%; justify-content: space-between; align-items: flex-start; flex-direction: column;">
+                <ui:Label tabindex="-1" text="Colour Me OK" parse-escape-sequences="true" display-tooltip-when-elided="true" name="Name" style="color: rgb(208, 152, 194); -unity-font-style: bold; font-size: 58px; white-space: normal;" />
+                <ui:Label tabindex="-1" text="Color Me OK is a colour-matching game using the coordinates of the OKLCh colour model on the OKLab perceptually uniform colour space." parse-escape-sequences="true" display-tooltip-when-elided="true" name="Description" style="font-size: 16px; white-space: normal; text-overflow: clip; color: rgb(208, 152, 194);" />
             </ui:VisualElement>
-            <ui:VisualElement name="Content"
-                              style="flex-grow: 0; padding-right: 10%; padding-bottom: 10%; padding-left: 10%;">
-                <ui:Button text="Play ↗" parse-escape-sequences="true" display-tooltip-when-elided="true"
-                           name="PlayButton" style="display: flex;"/>
-                <ui:Button text="Leaderboard ↗" parse-escape-sequences="true" display-tooltip-when-elided="true"
-                           name="LeaderboardButton" style="display: flex;"/>
-                <ui:Button text="Account ↗" parse-escape-sequences="true" display-tooltip-when-elided="true"
-                           name="AccountButton" style="display: flex;"/>
-                <ui:VisualElement name="AccountSection"
-                                  style="flex-grow: 0; border-top-color: rgb(208, 152, 194); margin-top: 0; border-top-width: 1px; margin-right: 0; margin-bottom: 0; margin-left: 0; border-bottom-color: rgb(208, 152, 194); padding-bottom: 12px; border-bottom-width: 1px; display: flex;">
-                    <ui:VisualElement name="PlayerDetails"
-                                      style="flex-grow: 1; flex-direction: row; align-items: stretch; justify-content: space-between; font-size: 10px; align-self: stretch;">
+            <ui:VisualElement name="Content" style="flex-grow: 0; padding-right: 10%; padding-bottom: 10%; padding-left: 10%;">
+                <ui:Button text="Play ↗" parse-escape-sequences="true" display-tooltip-when-elided="true" name="PlayButton" style="display: none;" />
+                <ui:Button text="Leaderboard ↗" parse-escape-sequences="true" display-tooltip-when-elided="true" name="LeaderboardButton" style="display: none;" />
+                <ui:Button text="Account ↗" parse-escape-sequences="true" display-tooltip-when-elided="true" name="AccountButton" style="display: none;" />
+                <ui:VisualElement name="AccountSection" style="flex-grow: 0; border-top-color: rgb(208, 152, 194); margin-top: 0; border-top-width: 1px; margin-right: 0; margin-bottom: 0; margin-left: 0; border-bottom-color: rgb(208, 152, 194); padding-bottom: 12px; border-bottom-width: 1px; display: flex;">
+                    <ui:VisualElement name="PlayerDetails" style="flex-grow: 1; flex-direction: row; align-items: stretch; justify-content: space-between; font-size: 10px; align-self: stretch;">
                         <ui:VisualElement name="PlayerNameDetail" style="flex-grow: 1;">
-                            <ui:Label tabindex="-1" text="Player" parse-escape-sequences="true"
-                                      display-tooltip-when-elided="true" name="PlayerHeader"
-                                      style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-left;"/>
-                            <ui:Label tabindex="-1" text="Not Signed In" parse-escape-sequences="true"
-                                      display-tooltip-when-elided="true" name="PlayerText"
-                                      style="-unity-font-style: normal; font-size: 18px; padding-top: 6px;"/>
+                            <ui:Label tabindex="-1" text="Player" parse-escape-sequences="true" display-tooltip-when-elided="true" name="PlayerHeader" style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-left;" />
+                            <ui:Label tabindex="-1" text="Not Signed In" parse-escape-sequences="true" display-tooltip-when-elided="true" name="PlayerText" style="-unity-font-style: normal; font-size: 18px; padding-top: 6px;" />
                         </ui:VisualElement>
                         <ui:VisualElement name="PlayerRatingDetail" style="flex-grow: 0;">
-                            <ui:Label tabindex="-1" text="Rating" parse-escape-sequences="true"
-                                      display-tooltip-when-elided="true" name="RatingHeader"
-                                      style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-right;"/>
-                            <ui:Label tabindex="-1" text="00.00%" parse-escape-sequences="true"
-                                      display-tooltip-when-elided="true" name="RatingText"
-                                      style="-unity-font-style: normal; font-size: 18px; padding-top: 6px; -unity-text-align: upper-right;"/>
+                            <ui:Label tabindex="-1" text="Rating" parse-escape-sequences="true" display-tooltip-when-elided="true" name="RatingHeader" style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-right;" />
+                            <ui:Label tabindex="-1" text="00.00%" parse-escape-sequences="true" display-tooltip-when-elided="true" name="RatingText" style="-unity-font-style: normal; font-size: 18px; padding-top: 6px; -unity-text-align: upper-right;" />
                         </ui:VisualElement>
                     </ui:VisualElement>
-                    <ui:VisualElement name="AccuracyDetails"
-                                      style="flex-grow: 1; flex-direction: row; align-items: stretch; justify-content: space-between; font-size: 10px; align-self: stretch; padding-top: 4px;">
+                    <ui:VisualElement name="AccuracyDetails" style="flex-grow: 1; flex-direction: row; align-items: stretch; justify-content: space-between; font-size: 10px; align-self: stretch; padding-top: 4px;">
                         <ui:VisualElement name="LightnessAccuracyDetail" style="flex-grow: 0;">
-                            <ui:Label tabindex="-1" text="Lightness&#10;Accuracy" parse-escape-sequences="true"
-                                      display-tooltip-when-elided="true" name="LightnessAccuracyHeader"
-                                      style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-left; padding-top: 0;"/>
-                            <ui:Label tabindex="-1" text="00.0%" parse-escape-sequences="true"
-                                      display-tooltip-when-elided="true" name="LightnessAccuracyText"
-                                      style="-unity-font-style: normal; font-size: 18px; padding-top: 6px; padding-bottom: 0;"/>
+                            <ui:Label tabindex="-1" text="Lightness&#10;Accuracy" parse-escape-sequences="true" display-tooltip-when-elided="true" name="LightnessAccuracyHeader" style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-left; padding-top: 0;" />
+                            <ui:Label tabindex="-1" text="00.0%" parse-escape-sequences="true" display-tooltip-when-elided="true" name="LightnessAccuracyText" style="-unity-font-style: normal; font-size: 18px; padding-top: 6px; padding-bottom: 0;" />
                         </ui:VisualElement>
                         <ui:VisualElement name="ChromaAccuracyDetail" style="flex-grow: 0;">
-                            <ui:Label tabindex="-1" text="Chroma&#10;Accuracy" parse-escape-sequences="true"
-                                      display-tooltip-when-elided="true" name="ChromaAccuracyHeader"
-                                      style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-center; padding-top: 0;"/>
-                            <ui:Label tabindex="-1" text="00.0%" parse-escape-sequences="true"
-                                      display-tooltip-when-elided="true" name="ChromaAccuracyText"
-                                      style="-unity-font-style: normal; font-size: 18px; padding-top: 6px; -unity-text-align: upper-center; padding-bottom: 0;"/>
+                            <ui:Label tabindex="-1" text="Chroma&#10;Accuracy" parse-escape-sequences="true" display-tooltip-when-elided="true" name="ChromaAccuracyHeader" style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-center; padding-top: 0;" />
+                            <ui:Label tabindex="-1" text="00.0%" parse-escape-sequences="true" display-tooltip-when-elided="true" name="ChromaAccuracyText" style="-unity-font-style: normal; font-size: 18px; padding-top: 6px; -unity-text-align: upper-center; padding-bottom: 0;" />
                         </ui:VisualElement>
                         <ui:VisualElement name="HueAccuracyDetail" style="flex-grow: 0;">
-                            <ui:Label tabindex="-1" text="Hue&#10;Accuracy" parse-escape-sequences="true"
-                                      display-tooltip-when-elided="true" name="HueAccuracyHeader"
-                                      style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-right; padding-top: 0;"/>
-                            <ui:Label tabindex="-1" text="00.0%" parse-escape-sequences="true"
-                                      display-tooltip-when-elided="true" name="HueAccuracyText"
-                                      style="-unity-font-style: normal; font-size: 18px; padding-top: 6px; -unity-text-align: upper-right; padding-bottom: 0;"/>
+                            <ui:Label tabindex="-1" text="Hue&#10;Accuracy" parse-escape-sequences="true" display-tooltip-when-elided="true" name="HueAccuracyHeader" style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-right; padding-top: 0;" />
+                            <ui:Label tabindex="-1" text="00.0%" parse-escape-sequences="true" display-tooltip-when-elided="true" name="HueAccuracyText" style="-unity-font-style: normal; font-size: 18px; padding-top: 6px; -unity-text-align: upper-right; padding-bottom: 0;" />
                         </ui:VisualElement>
                     </ui:VisualElement>
                 </ui:VisualElement>
-                <ui:VisualElement name="ConnectionStatusText"
-                                  style="flex-grow: 0; border-top-color: rgb(208, 152, 194); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; border-bottom-color: rgb(208, 152, 194); padding-bottom: 12px; display: flex; border-bottom-width: 1px;">
-                    <ui:Label tabindex="-1" text="Status: Unknown" parse-escape-sequences="true"
-                              display-tooltip-when-elided="true" name="ConnectionStatusText"
-                              style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-left; display: flex;"/>
+                <ui:VisualElement name="ConnectionStatus" style="flex-grow: 0; border-top-color: rgb(208, 152, 194); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; border-bottom-color: rgb(208, 152, 194); padding-bottom: 12px; display: flex; border-bottom-width: 1px;">
+                    <ui:Label tabindex="-1" text="Status: Unknown" parse-escape-sequences="true" display-tooltip-when-elided="true" name="ConnectionStatusText" style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-left; display: flex;" />
                 </ui:VisualElement>
             </ui:VisualElement>
         </ui:VisualElement>
-        <ui:VisualElement name="MainView"
-                          style="flex-grow: 0; flex-shrink: 0; width: 75%; justify-content: space-between;">
-            <ui:VisualElement name="DefaultView"
-                              style="flex-grow: 0; justify-content: space-around; height: 100%; align-self: stretch; display: flex;">
-                <ui:VisualElement name="DemoResponseColour"
-                                  style="flex-grow: 1; background-color: rgb(0, 0, 0); align-self: stretch; justify-content: center;">
-                    <ui:VisualElement name="DemoResponseSliderContainer"
-                                      style="flex-grow: 0; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; padding-top: 2%; padding-right: 2%; padding-bottom: 2%; padding-left: 2%; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; background-color: rgb(208, 152, 194);">
-                        <ui:Slider label="Lightness" high-value="100" name="DemoResponseLightnessSlider"
-                                   class="lch-slider"/>
-                        <ui:Slider label="Chroma" high-value="0.5" name="DemoResponseChromaSlider" class="lch-slider"/>
-                        <ui:Slider label="Hue" high-value="360" name="DemoResponseHueSlider" class="lch-slider"/>
+        <ui:VisualElement name="MainView" style="flex-grow: 0; flex-shrink: 0; width: 75%; justify-content: space-between;">
+            <ui:VisualElement name="DefaultView" style="flex-grow: 0; justify-content: space-around; height: 100%; align-self: stretch; display: none;">
+                <ui:VisualElement name="DemoResponseColour" style="flex-grow: 1; background-color: rgb(0, 0, 0); align-self: stretch; justify-content: center;">
+                    <ui:VisualElement name="DemoResponseSliderContainer" style="flex-grow: 0; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; padding-top: 2%; padding-right: 2%; padding-bottom: 2%; padding-left: 2%; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; background-color: rgb(208, 152, 194);">
+                        <ui:Slider label="Lightness" high-value="100" name="DemoResponseLightnessSlider" class="lch-slider" />
+                        <ui:Slider label="Chroma" high-value="0.5" name="DemoResponseChromaSlider" class="lch-slider" />
+                        <ui:Slider label="Hue" high-value="360" name="DemoResponseHueSlider" class="lch-slider" />
                     </ui:VisualElement>
                 </ui:VisualElement>
             </ui:VisualElement>
-            <ui:VisualElement name="GameView"
-                              style="flex-grow: 0; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; justify-content: space-between; height: 100%; align-self: stretch; display: none;">
-                <ui:VisualElement name="GameHeader"
-                                  style="flex-grow: 0; flex-direction: row; justify-content: space-between; align-self: stretch;">
-                    <ui:Label tabindex="-1" text="1/5" parse-escape-sequences="true" display-tooltip-when-elided="true"
-                              name="RoundText" style="font-size: 58px; -unity-font-style: normal;"/>
-                    <ui:Label tabindex="-1" text="0.00s" parse-escape-sequences="true"
-                              display-tooltip-when-elided="true" name="TimeText"
-                              style="-unity-text-align: lower-right; font-size: 58px;"/>
+            <ui:VisualElement name="GameView" style="flex-grow: 0; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; justify-content: space-between; height: 100%; align-self: stretch; display: none;">
+                <ui:VisualElement name="GameHeader" style="flex-grow: 0; flex-direction: row; justify-content: space-between; align-self: stretch;">
+                    <ui:Label tabindex="-1" text="1/5" parse-escape-sequences="true" display-tooltip-when-elided="true" name="RoundText" style="font-size: 58px; -unity-font-style: normal;" />
+                    <ui:Label tabindex="-1" text="0.00s" parse-escape-sequences="true" display-tooltip-when-elided="true" name="TimeText" style="-unity-text-align: lower-right; font-size: 58px;" />
                 </ui:VisualElement>
-                <ui:VisualElement name="ColourPreview"
-                                  style="flex-grow: 0; height: 50%; background-color: rgb(255, 255, 255); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; flex-direction: row; padding-top: 2%; padding-right: 2%; padding-bottom: 2%; padding-left: 2%; justify-content: space-between;">
-                    <ui:VisualElement name="TemplatePreview"
-                                      style="flex-grow: 0; flex-shrink: 0; height: 100%; width: 49%;">
-                        <ui:Label tabindex="-1" text="Template" parse-escape-sequences="true"
-                                  display-tooltip-when-elided="true" name="TemplateText"
-                                  style="margin-bottom: 12px; margin-top: 0; -unity-font-style: normal;"/>
-                        <ui:VisualElement name="TemplateColour"
-                                          style="flex-grow: 1; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; background-color: rgb(0, 0, 0);"/>
+                <ui:VisualElement name="ColourPreview" style="flex-grow: 0; height: 50%; background-color: rgb(255, 255, 255); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; flex-direction: row; padding-top: 2%; padding-right: 2%; padding-bottom: 2%; padding-left: 2%; justify-content: space-between;">
+                    <ui:VisualElement name="TemplatePreview" style="flex-grow: 0; flex-shrink: 0; height: 100%; width: 49%;">
+                        <ui:Label tabindex="-1" text="Template" parse-escape-sequences="true" display-tooltip-when-elided="true" name="TemplateText" style="margin-bottom: 12px; margin-top: 0; -unity-font-style: normal;" />
+                        <ui:VisualElement name="TemplateColour" style="flex-grow: 1; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; background-color: rgb(0, 0, 0);" />
                     </ui:VisualElement>
-                    <ui:VisualElement name="ResponsePreview"
-                                      style="flex-grow: 0; flex-shrink: 0; height: 100%; width: 49%;">
-                        <ui:Label tabindex="-1" text="Response" parse-escape-sequences="true"
-                                  display-tooltip-when-elided="true" name="ResponseText"
-                                  style="margin-bottom: 12px; margin-top: 0; -unity-font-style: normal; -unity-text-align: upper-right;"/>
-                        <ui:VisualElement name="ResponseColour"
-                                          style="flex-grow: 1; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; background-color: rgb(0, 0, 0);"/>
+                    <ui:VisualElement name="ResponsePreview" style="flex-grow: 0; flex-shrink: 0; height: 100%; width: 49%;">
+                        <ui:Label tabindex="-1" text="Response" parse-escape-sequences="true" display-tooltip-when-elided="true" name="ResponseText" style="margin-bottom: 12px; margin-top: 0; -unity-font-style: normal; -unity-text-align: upper-right;" />
+                        <ui:VisualElement name="ResponseColour" style="flex-grow: 1; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; background-color: rgb(0, 0, 0);" />
                     </ui:VisualElement>
                 </ui:VisualElement>
                 <ui:VisualElement name="ResponseSliders" style="flex-grow: 0; display: flex;">
-                    <ui:Slider label="Lightness" high-value="100" name="ResponseLightnessSlider" class="lch-slider"/>
-                    <ui:Slider label="Chroma" high-value="0.5" name="ResponseChromaSlider" class="lch-slider"/>
-                    <ui:Slider label="Hue" high-value="360" name="ResponseHueSlider" class="lch-slider"/>
+                    <ui:Slider label="Lightness" high-value="100" name="ResponseLightnessSlider" class="lch-slider" />
+                    <ui:Slider label="Chroma" high-value="0.5" name="ResponseChromaSlider" class="lch-slider" />
+                    <ui:Slider label="Hue" high-value="360" name="ResponseHueSlider" class="lch-slider" />
                 </ui:VisualElement>
             </ui:VisualElement>
-            <ui:VisualElement name="ResultsView" style="flex-grow: 1; display: none;"/>
-            <ui:VisualElement name="LeaderboardView"
-                              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="Leaderboard" parse-escape-sequences="true"
-                          display-tooltip-when-elided="true" name="RoundText"
-                          style="font-size: 58px; -unity-font-style: normal;"/>
-                <ui:ListView name="LeaderboardListView"/>
+            <ui:VisualElement name="ResultsView" style="flex-grow: 1; display: flex; margin-top: 3.25%; margin-right: 3.25%; margin-bottom: 3.25%; margin-left: 3.25%; justify-content: space-between;">
+                <ui:VisualElement name="ColourShowcase" style="flex-grow: 1; background-color: rgb(255, 255, 255); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding-top: 2%; padding-right: 2%; padding-bottom: 2%; padding-left: 2%; margin-bottom: 2%; margin-top: 0; margin-right: 0; margin-left: 0;">
+                    <ui:Label tabindex="-1" text="Templates" parse-escape-sequences="true" display-tooltip-when-elided="true" name="ShowcaseTemplatesText" style="-unity-text-align: upper-center; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 2%; padding-left: 0;" />
+                    <ui:VisualElement name="Gallery" style="flex-grow: 1; flex-direction: row;">
+                        <ui:VisualElement name="ShowcasePair1" style="flex-grow: 1;">
+                            <ui:VisualElement name="ShowcasePair1TemplateColour" style="flex-grow: 1; background-color: rgb(15, 13, 27); border-top-left-radius: 8px;" />
+                            <ui:VisualElement name="ShowcasePair1ResponseColour" style="flex-grow: 1; border-bottom-left-radius: 8px; border-left-color: rgb(26, 22, 40); border-right-color: rgb(26, 22, 40); border-top-color: rgb(26, 22, 40); border-bottom-color: rgb(26, 22, 40); background-color: rgb(26, 22, 40);" />
                         </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;"/>
+                        <ui:VisualElement name="ShowcasePair2" style="flex-grow: 1;">
+                            <ui:VisualElement name="ShowcasePair2TemplateColour" style="flex-grow: 1; background-color: rgb(42, 33, 56);" />
+                            <ui:VisualElement name="ShowcasePair2ResponseColour" style="flex-grow: 1; background-color: rgb(63, 48, 76);" />
+                        </ui:VisualElement>
+                        <ui:VisualElement name="ShowcasePair3" style="flex-grow: 1;">
+                            <ui:VisualElement name="ShowcasePair3TemplateColour" style="flex-grow: 1; background-color: rgb(63, 48, 76);" />
+                            <ui:VisualElement name="ShowcasePair3ResponseColour" style="flex-grow: 1; background-color: rgb(89, 67, 100);" />
+                        </ui:VisualElement>
+                        <ui:VisualElement name="ShowcasePair4" style="flex-grow: 1;">
+                            <ui:VisualElement name="ShowcasePair4TemplateColour" style="flex-grow: 1; background-color: rgb(89, 67, 100);" />
+                            <ui:VisualElement name="ShowcasePair4ResponseColour" style="flex-grow: 1; background-color: rgb(122, 90, 126);" />
+                        </ui:VisualElement>
+                        <ui:VisualElement name="ShowcasePair5" style="flex-grow: 1;">
+                            <ui:VisualElement name="ShowcasePair5TemplateColour" style="flex-grow: 1; background-color: rgb(162, 118, 158); border-top-right-radius: 8px;" />
+                            <ui:VisualElement name="ShowcasePair5ResponseColour" style="flex-grow: 1; background-color: rgb(208, 152, 194); border-bottom-right-radius: 8px;" />
+                        </ui:VisualElement>
+                    </ui:VisualElement>
+                    <ui:Label tabindex="-1" text="Responses" parse-escape-sequences="true" display-tooltip-when-elided="true" name="ShowcaseResponsesText" style="-unity-text-align: upper-center; padding-top: 1.5%; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;" />
+                </ui:VisualElement>
+                <ui:Label tabindex="-1" text="Over n rounds,&#10;you were 100.00% accurate.&#10;&#10;Lightness was 100.00% accurate. (+100.00% from your average)&#10;Chroma was 100.00% accurate. (+100.00% from your average)&#10;Hue was 100.00% accurate. (+100.00% from your average)&#10;&#10;Your RATING has increased by 100.00%." parse-escape-sequences="true" display-tooltip-when-elided="true" name="ResultsText" style="flex-grow: 0; font-size: 32px; margin-top: 2%; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;" />
+            </ui:VisualElement>
+            <ui:VisualElement name="LeaderboardView" 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="Leaderboard" parse-escape-sequences="true" display-tooltip-when-elided="true" name="LeaderboardHeader" style="font-size: 58px; -unity-font-style: normal;" />
+                <ui:ListView name="LeaderboardListView" />
+            </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;" />
                 <ui:VisualElement name="AccountFields" style="flex-grow: 0;">
-                    <ui:VisualElement name="UsernameContainer"
-                                      style="flex-grow: 1; flex-direction: row; justify-content: space-between;">
-                        <ui:TextField picking-mode="Ignore" label="Username" name="UsernameField"/>
-                        <ui:Button text="Update" parse-escape-sequences="true" display-tooltip-when-elided="true"
-                                   name="UsernameUpdateButton"/>
+                    <ui:VisualElement name="UsernameContainer" style="flex-grow: 1; flex-direction: row; justify-content: space-between;">
+                        <ui:TextField picking-mode="Ignore" label="Username" name="UsernameField" />
+                        <ui:Button text="Update" parse-escape-sequences="true" display-tooltip-when-elided="true" name="UsernameUpdateButton" />
                     </ui:VisualElement>
-                    <ui:VisualElement name="EmailContainer"
-                                      style="flex-grow: 1; flex-direction: row; justify-content: space-between;">
-                        <ui:TextField picking-mode="Ignore" label="Email" name="EmailField"
-                                      keyboard-type="EmailAddress"/>
-                        <ui:Button text="Update" parse-escape-sequences="true" display-tooltip-when-elided="true"
-                                   name="EmailUpdateButton"/>
+                    <ui:VisualElement name="EmailContainer" style="flex-grow: 1; flex-direction: row; justify-content: space-between;">
+                        <ui:TextField picking-mode="Ignore" label="Email" name="EmailField" keyboard-type="EmailAddress" />
+                        <ui:Button text="Update" parse-escape-sequences="true" display-tooltip-when-elided="true" name="EmailUpdateButton" />
                     </ui:VisualElement>
-                    <ui:VisualElement name="PasswordContainer"
-                                      style="flex-grow: 1; flex-direction: row; justify-content: space-between;">
-                        <ui:TextField picking-mode="Ignore" label="Password" name="PasswordField" password="true"/>
-                        <ui:Button text="Update" parse-escape-sequences="true" display-tooltip-when-elided="true"
-                                   name="PasswordUpdateButton"/>
+                    <ui:VisualElement name="PasswordContainer" style="flex-grow: 1; flex-direction: row; justify-content: space-between;">
+                        <ui:TextField picking-mode="Ignore" label="Password" name="PasswordField" password="true" />
+                        <ui:Button text="Update" parse-escape-sequences="true" display-tooltip-when-elided="true" name="PasswordUpdateButton" />
                     </ui:VisualElement>
-                    <ui:Label tabindex="-1" text="A verification email has been sent. Check your inbox."
-                              parse-escape-sequences="true" display-tooltip-when-elided="true" name="AccompanyingText"
-                              style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 1.5%; margin-right: 0; margin-bottom: 0.75%; margin-left: 0; -unity-text-align: upper-left; display: none;"/>
+                    <ui:Label tabindex="-1" text="A verification email has been sent. Check your inbox." parse-escape-sequences="true" display-tooltip-when-elided="true" name="AccompanyingText" style="padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; margin-top: 1.5%; margin-right: 0; margin-bottom: 0.75%; margin-left: 0; -unity-text-align: upper-left; display: none;" />
                 </ui:VisualElement>
                 <ui:VisualElement name="AccountButtons" style="flex-grow: 0; align-items: flex-start;">
-                    <ui:Button text="Primary Action Button →" parse-escape-sequences="true"
-                               display-tooltip-when-elided="true" name="PrimaryActionButton"
-                               style="-unity-text-align: middle-center; margin-bottom: 1%; margin-right: 1%; margin-top: 1%; -unity-font-style: bold;"/>
-                    <ui:Button text="Secondary Action Button →" parse-escape-sequences="true"
-                               display-tooltip-when-elided="true" name="SecondaryActionButton"
-                               style="margin-top: 1%; margin-right: 1%; -unity-font-style: bold;"/>
+                    <ui:Button text="Primary Action Button →" parse-escape-sequences="true" display-tooltip-when-elided="true" name="PrimaryActionButton" style="-unity-text-align: middle-center; margin-bottom: 1%; margin-right: 1%; margin-top: 1%; -unity-font-style: bold;" />
+                    <ui:Button text="Secondary Action Button →" parse-escape-sequences="true" display-tooltip-when-elided="true" name="SecondaryActionButton" style="margin-top: 1%; margin-right: 1%; -unity-font-style: bold;" />
                 </ui:VisualElement>
             </ui:VisualElement>
         </ui:VisualElement>