From 5f089649b35d1549f41a2947e1f92c06cb71c35f Mon Sep 17 00:00:00 2001 From: Mark Joshwel Date: Mon, 18 Nov 2024 03:19:37 +0800 Subject: [PATCH] game: add working defaultView and empty resultsView --- ColourMeOKGame/Assets/Scenes/GameScene.unity | 16 +++++ ColourMeOKGame/Assets/Scripts/Backend.cs | 1 + ColourMeOKGame/Assets/Scripts/Colorimetry.cs | 26 +++++++ .../Assets/Scripts/DemoOklchColourPicker.cs | 23 +++++++ .../Scripts/DemoOklchColourPicker.cs.meta | 3 + .../Assets/Scripts/OklchColourPickerUI.cs | 67 ++++++------------- ColourMeOKGame/Assets/Scripts/SideViewUI.cs | 2 +- ColourMeOKGame/Assets/Scripts/UIManager.cs | 61 ++++++++--------- ColourMeOKGame/Assets/UI/GameUI.uxml | 28 ++++++-- 9 files changed, 142 insertions(+), 85 deletions(-) create mode 100644 ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs create mode 100644 ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs.meta diff --git a/ColourMeOKGame/Assets/Scenes/GameScene.unity b/ColourMeOKGame/Assets/Scenes/GameScene.unity index 1298f4d..87fe1f5 100644 --- a/ColourMeOKGame/Assets/Scenes/GameScene.unity +++ b/ColourMeOKGame/Assets/Scenes/GameScene.unity @@ -133,6 +133,7 @@ GameObject: - component: {fileID: 133964672} - component: {fileID: 133964671} - component: {fileID: 133964676} + - component: {fileID: 133964677} - component: {fileID: 133964673} - component: {fileID: 133964674} - component: {fileID: 133964675} @@ -227,6 +228,21 @@ MonoBehaviour: m_Name: m_EditorClassIdentifier: state: 0 +--- !u!114 &133964677 +MonoBehaviour: + m_ObjectHideFlags: 0 + m_CorrespondingSourceObject: {fileID: 0} + m_PrefabInstance: {fileID: 0} + m_PrefabAsset: {fileID: 0} + m_GameObject: {fileID: 133964670} + m_Enabled: 1 + m_EditorHideFlags: 0 + m_Script: {fileID: 11500000, guid: f52665dbd9934a3cabe2e8a0d89059bd, type: 3} + m_Name: + m_EditorClassIdentifier: + lightness: 0 + chroma: 0 + hue: 0 --- !u!1 &447905425 GameObject: m_ObjectHideFlags: 0 diff --git a/ColourMeOKGame/Assets/Scripts/Backend.cs b/ColourMeOKGame/Assets/Scripts/Backend.cs index 31e4e42..7995ff5 100644 --- a/ColourMeOKGame/Assets/Scripts/Backend.cs +++ b/ColourMeOKGame/Assets/Scripts/Backend.cs @@ -341,6 +341,7 @@ public void RegisterOnSignOutCallback(Action callback) return; } + // logging in _auth.SignInWithEmailAndPasswordAsync(email, password) .ContinueWithOnMainThread(signInTask => { diff --git a/ColourMeOKGame/Assets/Scripts/Colorimetry.cs b/ColourMeOKGame/Assets/Scripts/Colorimetry.cs index bf5ce52..8b19f80 100644 --- a/ColourMeOKGame/Assets/Scripts/Colorimetry.cs +++ b/ColourMeOKGame/Assets/Scripts/Colorimetry.cs @@ -1,7 +1,33 @@ using System; +using UnityEngine; public static class Colorimetry { + /// + /// convert the oklch colour to a unity rgba colour object + /// + /// a unity rgba color object + public static Color RawLchToColor(double lightness, double chroma, double hue) + { + // clamp values + var cL = Math.Clamp(lightness / 100.0d, 0d, 1d); + var cC = Math.Clamp(chroma, 0d, 0.5d); + var cH = Math.Clamp(hue, 0d, 360d); + + // convert [OKL]Ch to [OKL]ab + var hueRadians = cH * Math.PI / 180.0d; + var a = cC * Math.Cos(hueRadians); + var b = cC * Math.Sin(hueRadians); + + // bring it to linear sRGB, clip it, then bring it back to non-linear sRGB + var lsrgb = oklab_to_linear_srgb(new Lab((float)cL, (float)a, (float)b)); + var clippedLsrgb = gamut_clip_preserve_chroma(lsrgb); + return new Color( + Math.Clamp((float)srgb_nonlinear_transform_f(clippedLsrgb.r), 0.0f, 1.0f), + Math.Clamp((float)srgb_nonlinear_transform_f(clippedLsrgb.g), 0.0f, 1.0f), + Math.Clamp((float)srgb_nonlinear_transform_f(clippedLsrgb.b), 0.0f, 1.0f)); + } + /// /// transform a linear srgb value to a non-linear srgb value /// diff --git a/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs b/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs new file mode 100644 index 0000000..186f336 --- /dev/null +++ b/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs @@ -0,0 +1,23 @@ +using UnityEngine.UIElements; + +public class DemoOklchColourPicker : OklchColourPickerUI +{ + /// + /// initialise the ui elements and register change event callbacks functions + /// + public new void OnEnable() + { + var ui = GetComponent().rootVisualElement; + + LightnessSlider = ui.Q("DemoResponseLightnessSlider"); + LightnessSlider.RegisterCallback>(OnLightnessChange); + + ChromaSlider = ui.Q("DemoResponseChromaSlider"); + ChromaSlider.RegisterCallback>(OnChromaChange); + + HueSlider = ui.Q("DemoResponseHueSlider"); + HueSlider.RegisterCallback>(OnHueChange); + + ResponseColour = ui.Q("DemoResponseColour"); + } +} \ No newline at end of file diff --git a/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs.meta b/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs.meta new file mode 100644 index 0000000..a24de25 --- /dev/null +++ b/ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs.meta @@ -0,0 +1,3 @@ +fileFormatVersion: 2 +guid: f52665dbd9934a3cabe2e8a0d89059bd +timeCreated: 1731870685 \ No newline at end of file diff --git a/ColourMeOKGame/Assets/Scripts/OklchColourPickerUI.cs b/ColourMeOKGame/Assets/Scripts/OklchColourPickerUI.cs index 9cbf454..aa02eb4 100644 --- a/ColourMeOKGame/Assets/Scripts/OklchColourPickerUI.cs +++ b/ColourMeOKGame/Assets/Scripts/OklchColourPickerUI.cs @@ -25,31 +25,31 @@ public class OklchColourPickerUI : MonoBehaviour /// /// slider for the chroma value /// - private Slider _chromaSlider; + protected Slider ChromaSlider; /// /// slider for the hue value /// - private Slider _hueSlider; + protected Slider HueSlider; /// /// slider for the lightness value /// - private Slider _lightnessSlider; + protected Slider LightnessSlider; /// /// visual element for the response colour preview /// - private VisualElement _responseColour; + protected VisualElement ResponseColour; /// /// modify state of initialised variables /// private void Start() { - _lightnessSlider.value = 74.61f; - _chromaSlider.value = 0.0868f; - _hueSlider.value = 335.72f; + LightnessSlider.value = 74.61f; + ChromaSlider.value = 0.0868f; + HueSlider.value = 335.72f; } /// @@ -59,72 +59,45 @@ public void OnEnable() { var ui = GetComponent().rootVisualElement; - _lightnessSlider = ui.Q("ResponseLightnessSlider"); - _lightnessSlider.RegisterCallback>(OnLightnessChange); + LightnessSlider = ui.Q("ResponseLightnessSlider"); + LightnessSlider.RegisterCallback>(OnLightnessChange); - _chromaSlider = ui.Q("ResponseChromaSlider"); - _chromaSlider.RegisterCallback>(OnChromaChange); + ChromaSlider = ui.Q("ResponseChromaSlider"); + ChromaSlider.RegisterCallback>(OnChromaChange); - _hueSlider = ui.Q("ResponseHueSlider"); - _hueSlider.RegisterCallback>(OnHueChange); + HueSlider = ui.Q("ResponseHueSlider"); + HueSlider.RegisterCallback>(OnHueChange); - _responseColour = ui.Q("ResponseColour"); + ResponseColour = ui.Q("ResponseColour"); } /// /// handle lightness slider change /// /// change event - private void OnLightnessChange(ChangeEvent evt) + protected void OnLightnessChange(ChangeEvent evt) { lightness = Math.Clamp(evt.newValue, 0d, 100d); - _responseColour.style.backgroundColor = ToColor(); + ResponseColour.style.backgroundColor = Colorimetry.RawLchToColor(lightness, chroma, hue); } /// /// handle chroma slider change /// /// change event - private void OnChromaChange(ChangeEvent evt) + protected void OnChromaChange(ChangeEvent evt) { chroma = Math.Clamp(evt.newValue, 0d, 0.5d); - _responseColour.style.backgroundColor = ToColor(); + ResponseColour.style.backgroundColor = Colorimetry.RawLchToColor(lightness, chroma, hue); } /// /// handle hue slider change /// /// change event - private void OnHueChange(ChangeEvent evt) + protected void OnHueChange(ChangeEvent evt) { hue = Math.Clamp(evt.newValue, 0d, 360d); - _responseColour.style.backgroundColor = ToColor(); - } - - /// - /// convert the oklch colour to a unity rgba colour object - /// - /// a unity rgba color object - private Color ToColor() - { - // clamp values - var cL = Math.Clamp(lightness / 100.0d, 0d, 1d); - var cC = Math.Clamp(chroma, 0d, 0.5d); - var cH = Math.Clamp(hue, 0d, 360d); - - // convert [OKL]Ch to [OKL]ab - var hueRadians = cH * Math.PI / 180.0d; - var a = cC * Math.Cos(hueRadians); - var b = cC * Math.Sin(hueRadians); - - // bring it to linear sRGB, clip it, then bring it back to non-linear sRGB - var lsrgb = Colorimetry.oklab_to_linear_srgb(new Colorimetry.Lab((float)cL, (float)a, (float)b)); - var clippedLsrgb = Colorimetry.gamut_clip_preserve_chroma(lsrgb); - var srgb = new Color( - Math.Clamp((float)Colorimetry.srgb_nonlinear_transform_f(clippedLsrgb.r), 0.0f, 1.0f), - Math.Clamp((float)Colorimetry.srgb_nonlinear_transform_f(clippedLsrgb.g), 0.0f, 1.0f), - Math.Clamp((float)Colorimetry.srgb_nonlinear_transform_f(clippedLsrgb.b), 0.0f, 1.0f)); - - return srgb; + ResponseColour.style.backgroundColor = Colorimetry.RawLchToColor(lightness, chroma, hue); } } \ No newline at end of file diff --git a/ColourMeOKGame/Assets/Scripts/SideViewUI.cs b/ColourMeOKGame/Assets/Scripts/SideViewUI.cs index 7aa2c88..b6813d5 100644 --- a/ColourMeOKGame/Assets/Scripts/SideViewUI.cs +++ b/ColourMeOKGame/Assets/Scripts/SideViewUI.cs @@ -88,7 +88,7 @@ private void OnEnable() /// private static void OnPlayButtonClicked() { - GameManager.Instance.ui.SetDisplayState(UIManager.DisplayState.PlayView); + GameManager.Instance.ui.SetDisplayState(UIManager.DisplayState.GameView); } /// diff --git a/ColourMeOKGame/Assets/Scripts/UIManager.cs b/ColourMeOKGame/Assets/Scripts/UIManager.cs index a7ed4ea..af59413 100644 --- a/ColourMeOKGame/Assets/Scripts/UIManager.cs +++ b/ColourMeOKGame/Assets/Scripts/UIManager.cs @@ -1,5 +1,4 @@ -using System; -using UnityEngine; +using UnityEngine; using UnityEngine.UIElements; public class UIManager : MonoBehaviour @@ -10,8 +9,9 @@ public class UIManager : MonoBehaviour public enum DisplayState { UnassociatedState, - Nothing, - PlayView, + DefaultView, + GameView, + ResultsView, LeaderboardView, AccountView } @@ -56,7 +56,7 @@ private void Awake() /// private void Start() { - SetDisplayState(DisplayState.Nothing); + SetDisplayState(DisplayState.DefaultView); } /// @@ -85,39 +85,40 @@ public void SetDisplayState(DisplayState newDisplayState) Debug.Log($"switching from {currentDisplayState} to {newDisplayState}"); + var defaultView = UI.Q("DefaultView"); var gameView = UI.Q("GameView"); + var resultsView = UI.Q("ResultsView"); var leaderboardView = UI.Q("LeaderboardView"); var accountView = UI.Q("AccountView"); - switch (newDisplayState) + defaultView.style.display = newDisplayState switch { - case DisplayState.Nothing: - gameView.style.display = DisplayStyle.None; - leaderboardView.style.display = DisplayStyle.None; - accountView.style.display = DisplayStyle.None; - break; + DisplayState.DefaultView => DisplayStyle.Flex, + _ => DisplayStyle.None + }; - case DisplayState.PlayView: - gameView.style.display = DisplayStyle.Flex; - leaderboardView.style.display = DisplayStyle.None; - accountView.style.display = DisplayStyle.None; - break; + gameView.style.display = newDisplayState switch + { + DisplayState.GameView => DisplayStyle.Flex, + _ => DisplayStyle.None + }; - case DisplayState.LeaderboardView: - gameView.style.display = DisplayStyle.None; - leaderboardView.style.display = DisplayStyle.Flex; - accountView.style.display = DisplayStyle.None; - break; + resultsView.style.display = newDisplayState switch + { + DisplayState.ResultsView => DisplayStyle.Flex, + _ => DisplayStyle.None + }; - case DisplayState.AccountView: - gameView.style.display = DisplayStyle.None; - leaderboardView.style.display = DisplayStyle.None; - accountView.style.display = DisplayStyle.Flex; - break; + leaderboardView.style.display = newDisplayState switch + { + DisplayState.LeaderboardView => DisplayStyle.Flex, + _ => DisplayStyle.None + }; - case DisplayState.UnassociatedState: - default: - throw new ArgumentOutOfRangeException(nameof(newDisplayState), newDisplayState, null); - } + accountView.style.display = newDisplayState switch + { + DisplayState.AccountView => DisplayStyle.Flex, + _ => DisplayStyle.None + }; } } \ No newline at end of file diff --git a/ColourMeOKGame/Assets/UI/GameUI.uxml b/ColourMeOKGame/Assets/UI/GameUI.uxml index 2ca73b7..c3b7455 100644 --- a/ColourMeOKGame/Assets/UI/GameUI.uxml +++ b/ColourMeOKGame/Assets/UI/GameUI.uxml @@ -19,13 +19,13 @@ + name="PlayButton" style="display: flex;"/> + name="LeaderboardButton" style="display: flex;"/> + name="AccountButton" style="display: flex;"/> + 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;"> @@ -74,15 +74,28 @@ + 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;"> + style="-unity-font-style: normal; font-size: 14px; padding-bottom: 0; -unity-text-align: lower-left; display: flex;"/> + + + + + + + + + + + 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;">