mark/colourmeok
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

game: working PopulateFields

Browse source
This commit is contained in:
Mark Joshwel 2024-11-17 22:31:03 +08:00
parent 685fbe961d
commit 30c82d77f6
5 changed files with 175 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ColourMeOKGame/Assets/Scripts/AccountUI.cs
View file

@ -78,6 +78,11 @@ public class AccountUI : MonoBehaviour
/// </summary> /// </summary>
private Button _usernameUpdateButton; private Button _usernameUpdateButton;
private void Awake()
{
GameManager.Instance.Backend.RegisterOnSignInCallback(OnSignInCallback);
}
public void Start() public void Start()
{ {
if (state == State.UnassociatedState) throw new Exception("unreachable state"); if (state == State.UnassociatedState) throw new Exception("unreachable state");
@ -118,11 +123,6 @@ public void OnEnable()
TransitionStateTo(State.NotSignedIn); TransitionStateTo(State.NotSignedIn);
} }
private void Awake()
{
GameManager.Instance.Backend.RegisterOnSignInCallback(OnSignInCallback);
}
private void OnSignInCallback(FirebaseUser user) private void OnSignInCallback(FirebaseUser user)
{ {
Debug.Log("sign in account ui callback"); Debug.Log("sign in account ui callback");
@ -134,15 +134,6 @@ private void OnSignInCallback(FirebaseUser user)
_header.text = $"Signed in as {username}"; _header.text = $"Signed in as {username}";
} }
/// <summary>
/// populate the fields with the given username and email, used by GameManager after local player data is loaded
/// </summary>
public void PopulateFields(string username, string email)
{
_usernameField.value = username;
_emailField.value = email;
}
private void TransitionStateTo(State newState, bool keepAccompanyingText = false) private void TransitionStateTo(State newState, bool keepAccompanyingText = false)
{ {
// if we're transitioning to the same state, do nothing // if we're transitioning to the same state, do nothing

42
ColourMeOKGame/Assets/Scripts/GameManager.cs
View file

@ -1,4 +1,5 @@
using UnityEngine; using UnityEngine;
using UnityEngine.UIElements;
/// <summary> /// <summary>
/// singleton for a single source of truth game state and flow management /// singleton for a single source of truth game state and flow management
@ -10,6 +11,11 @@ public class GameManager : MonoBehaviour
/// </summary> /// </summary>
public static GameManager Instance; public static GameManager Instance;
/// <summary>
/// ui manager object for handling ui state and flow
/// </summary>
public UIManager ui;
/// <summary> /// <summary>
/// the local player data object for storing player data /// the local player data object for storing player data
/// </summary> /// </summary>
@ -20,11 +26,6 @@ public class GameManager : MonoBehaviour
/// </summary> /// </summary>
public Backend Backend; public Backend Backend;
/// <summary>
/// ui manager object for handling ui state and flow
/// </summary>
public UIManager ui;
/// <summary> /// <summary>
/// enforces singleton behaviour; sets doesn't destroy on load and checks for multiple instances /// enforces singleton behaviour; sets doesn't destroy on load and checks for multiple instances
/// </summary> /// </summary>
@ -43,7 +44,17 @@ private void Awake()
Debug.Log("awake as non-singleton instance, destroying self"); Debug.Log("awake as non-singleton instance, destroying self");
Destroy(gameObject); Destroy(gameObject);
} }
}
private void Start()
{
// load the local player data and refresh the ui
_localPlayerData = new LocalPlayerData();
_localPlayerData.LoadFromTheWorld();
PopulateFields();
// register a callback to refresh the ui when the player signs in
Backend.RegisterOnSignInCallback(_ => { _localPlayerData.LoadFromTheWorld(); });
} }
/// <summary> /// <summary>
@ -56,21 +67,22 @@ private void OnEnable()
ui = UIManager.Instance; ui = UIManager.Instance;
} }
private void Start() /// <summary>
/// called when the application is quitting, saves the local player data
/// </summary>
private void OnApplicationQuit()
{ {
// load the local player data and refresh the ui Debug.Log("running deferred cleanup/save functions");
_localPlayerData = new LocalPlayerData(); Backend.Cleanup();
_localPlayerData.LoadFromTheWorld(); _localPlayerData.SaveToTheWorld();
// register a callback to refresh the ui when the player signs in
Backend.RegisterOnSignInCallback(_ => { _localPlayerData.LoadFromTheWorld(); });
} }
/// <summary> /// <summary>
/// called when the game object is disabled /// populate the fields with the given username and email, used by GameManager after local player data is loaded
/// </summary> /// </summary>
private void OnDestroy() public void PopulateFields()
{ {
Backend.Cleanup(); ui.UI.Q<TextField>("UsernameField").value = _localPlayerData.LastKnownUsername;
ui.UI.Q<TextField>("EmailField").value = _localPlayerData.LastKnownEmail;
} }
} }

7
ColourMeOKGame/Assets/Scripts/LocalPlayerData.cs
View file

@ -90,7 +90,8 @@ public void LoadFromTheWorld()
RecentOnlineScores.Enqueue(onlineScore); RecentOnlineScores.Enqueue(onlineScore);
} }
Debug.Log("loaded online scores from backend"); Debug.Log(
$"loaded lpdata from the world ({LastKnownUsername} <{LastKnownEmail}> with RLS.Count={RecentLocalScores.Count}), ROS.Count={RecentOnlineScores.Count}");
}); });
} }
@ -114,8 +115,7 @@ public void SaveToTheWorld()
idx++; idx++;
} }
Debug.Log("saved lpdata to playerprefs"); Debug.Log("saved lpdata to playerprefs"); // online scores are already saved in the backend
// online scores are already saved in the backend
} }
/// <summary> /// <summary>
@ -128,7 +128,6 @@ public void RegisterLocalScore(Score score)
RecentLocalScores.Enqueue(score); RecentLocalScores.Enqueue(score);
} }
public struct Score public struct Score
{ {
/// <summary> /// <summary>

16
ColourMeOKGame/Assets/Scripts/UIManager.cs
View file

@ -4,11 +4,6 @@
public class UIManager : MonoBehaviour public class UIManager : MonoBehaviour
{ {
/// <summary>
/// singleton pattern: define instance field for accessing the singleton elsewhere
/// </summary>
public static UIManager Instance;
/// <summary> /// <summary>
/// enum for available menus in the game, for use with <c>ShowMenu()</c> /// enum for available menus in the game, for use with <c>ShowMenu()</c>
/// </summary> /// </summary>
@ -20,12 +15,17 @@ public enum DisplayState
LeaderboardView, LeaderboardView,
AccountView AccountView
} }
/// <summary>
/// singleton pattern: define instance field for accessing the singleton elsewhere
/// </summary>
public static UIManager Instance;
/// <summary> /// <summary>
/// the current display state of the game /// the current display state of the game
/// </summary> /// </summary>
[SerializeField] private DisplayState state = DisplayState.UnassociatedState; [SerializeField] private DisplayState state = DisplayState.UnassociatedState;
/// <summary> /// <summary>
/// the visual element object for game ui /// the visual element object for game ui
/// </summary> /// </summary>
@ -56,7 +56,7 @@ private void OnEnable()
UI = GetComponent<UIDocument>().rootVisualElement; UI = GetComponent<UIDocument>().rootVisualElement;
SetDisplayState(DisplayState.Nothing); SetDisplayState(DisplayState.Nothing);
} }
/// <summary> /// <summary>
/// function to show a menu based on the enum passed, /// function to show a menu based on the enum passed,
/// and any other necessary actions /// and any other necessary actions

190
ColourMeOKGame/Assets/UI/GameUI.uxml
View file

@ -1,92 +1,166 @@
<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"> <ui:UXML xmlns:ui="UnityEngine.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance"
<Style src="project://database/Assets/UI/GameUI.uss?fileID=7433441132597879392&amp;guid=2c7ff79f21a3e8e408e76d75944d575b&amp;type=3#GameUI" /> engine="UnityEngine.UIElements" editor="UnityEditor.UIElements"
<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;"> noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<ui:VisualElement name="SideView" style="flex-grow: 0; background-color: rgb(15, 13, 27); flex-shrink: 0; width: 25%; justify-content: space-between;"> <Style src="project://database/Assets/UI/GameUI.uss?fileID=7433441132597879392&amp;guid=2c7ff79f21a3e8e408e76d75944d575b&amp;type=3#GameUI"/>
<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:VisualElement name="Root"
<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;" /> style="flex-grow: 1; background-color: rgb(208, 152, 194); justify-content: space-around; align-items: stretch; align-self: stretch; flex-direction: row;">
<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 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>
<ui:VisualElement name="Content" style="flex-grow: 0; padding-right: 10%; padding-bottom: 10%; padding-left: 10%;"> <ui:VisualElement name="Content"
<ui:Button text="Play ↗" parse-escape-sequences="true" display-tooltip-when-elided="true" name="PlayButton" /> style="flex-grow: 0; padding-right: 10%; padding-bottom: 10%; padding-left: 10%;">
<ui:Button text="Leaderboard ↗" parse-escape-sequences="true" display-tooltip-when-elided="true" name="LeaderboardButton" /> <ui:Button text="Play ↗" parse-escape-sequences="true" display-tooltip-when-elided="true"
<ui:Button text="Account ↗" parse-escape-sequences="true" display-tooltip-when-elided="true" name="AccountButton" /> name="PlayButton"/>
<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;"> <ui:Button text="Leaderboard ↗" parse-escape-sequences="true" display-tooltip-when-elided="true"
<ui:VisualElement name="PlayerDetails" style="flex-grow: 1; flex-direction: row; align-items: stretch; justify-content: space-between; font-size: 10px; align-self: stretch;"> name="LeaderboardButton"/>
<ui:Button text="Account ↗" parse-escape-sequences="true" display-tooltip-when-elided="true"
name="AccountButton"/>
<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;">
<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: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="Player" parse-escape-sequences="true"
<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;" /> 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>
<ui:VisualElement name="PlayerRatingDetail" style="flex-grow: 0;"> <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="Rating" parse-escape-sequences="true"
<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;" /> 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> </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: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="Lightness&#10;Accuracy" parse-escape-sequences="true"
<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;" /> 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>
<ui:VisualElement name="ChromaAccuracyDetail" style="flex-grow: 0;"> <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="Chroma&#10;Accuracy" parse-escape-sequences="true"
<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;" /> 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>
<ui:VisualElement name="HueAccuracyDetail" style="flex-grow: 0;"> <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="Hue&#10;Accuracy" parse-escape-sequences="true"
<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;" /> 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>
</ui:VisualElement> </ui:VisualElement>
<ui:VisualElement name="ConnectionStatusText" 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); border-bottom-width: 1px; padding-bottom: 12px;"> <ui:VisualElement name="ConnectionStatusText"
<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;" /> 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); border-bottom-width: 1px; padding-bottom: 12px;">
<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;"/>
</ui:VisualElement> </ui:VisualElement>
</ui:VisualElement> </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="MainView"
<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;"> style="flex-grow: 0; flex-shrink: 0; width: 75%; justify-content: space-between;">
<ui:VisualElement name="GameHeader" style="flex-grow: 0; flex-direction: row; justify-content: space-between; align-self: stretch;"> <ui:VisualElement name="GameView"
<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;" /> 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: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="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>
<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="ColourPreview"
<ui:VisualElement name="TemplatePreview" style="flex-grow: 0; flex-shrink: 0; height: 100%; width: 49%;"> 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: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="TemplatePreview"
<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);" /> 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>
<ui:VisualElement name="ResponsePreview" style="flex-grow: 0; flex-shrink: 0; height: 100%; width: 49%;"> <ui:VisualElement name="ResponsePreview"
<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;" /> style="flex-grow: 0; flex-shrink: 0; height: 100%; width: 49%;">
<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: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> </ui:VisualElement>
<ui:VisualElement name="ResponseSliders" style="flex-grow: 0; display: flex;"> <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="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="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="Hue" high-value="360" name="ResponseHueSlider" class="lch-slider"/>
</ui:VisualElement> </ui:VisualElement>
</ui:VisualElement> </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:VisualElement name="LeaderboardView"
<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;" /> 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:ListView name="LeaderboardListView" /> <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> </ui:VisualElement>
<ui:VisualElement name="AccountView" 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:VisualElement name="AccountView"
<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;" /> 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="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="AccountFields" style="flex-grow: 0;">
<ui:VisualElement name="UsernameContainer" style="flex-grow: 1; flex-direction: row; justify-content: space-between;"> <ui:VisualElement name="UsernameContainer"
<ui:TextField picking-mode="Ignore" label="Username" name="UsernameField" /> style="flex-grow: 1; flex-direction: row; justify-content: space-between;">
<ui:Button text="Update" parse-escape-sequences="true" display-tooltip-when-elided="true" name="UsernameUpdateButton" /> <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>
<ui:VisualElement name="EmailContainer" style="flex-grow: 1; flex-direction: row; justify-content: space-between;"> <ui:VisualElement name="EmailContainer"
<ui:TextField picking-mode="Ignore" label="Email" name="EmailField" keyboard-type="EmailAddress" /> style="flex-grow: 1; flex-direction: row; justify-content: space-between;">
<ui:Button text="Update" parse-escape-sequences="true" display-tooltip-when-elided="true" name="EmailUpdateButton" /> <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>
<ui:VisualElement name="PasswordContainer" style="flex-grow: 1; flex-direction: row; justify-content: space-between;"> <ui:VisualElement name="PasswordContainer"
<ui:TextField picking-mode="Ignore" label="Password" name="PasswordField" password="true" /> style="flex-grow: 1; flex-direction: row; justify-content: space-between;">
<ui:Button text="Update" parse-escape-sequences="true" display-tooltip-when-elided="true" name="PasswordUpdateButton" /> <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: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>
<ui:VisualElement name="AccountButtons" style="flex-grow: 0; align-items: flex-start;"> <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="Primary Action Button →" parse-escape-sequences="true"
<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;" /> 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> </ui:VisualElement>
</ui:VisualElement> </ui:VisualElement>