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

game: add working defaultView and empty resultsView

Browse source
This commit is contained in:
Mark Joshwel 2024-11-18 03:19:37 +08:00
parent fe44ced9f8
commit 5f089649b3
9 changed files with 142 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ColourMeOKGame/Assets/Scenes/GameScene.unity
View file

@ -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

1
ColourMeOKGame/Assets/Scripts/Backend.cs
View file

@ -341,6 +341,7 @@ public void RegisterOnSignOutCallback(Action callback)
return;
}
// logging in
_auth.SignInWithEmailAndPasswordAsync(email, password)
.ContinueWithOnMainThread(signInTask =>
{

26
ColourMeOKGame/Assets/Scripts/Colorimetry.cs
View file

@ -1,7 +1,33 @@
using System;
using UnityEngine;
public static class Colorimetry
{
/// <summary>
/// convert the oklch colour to a unity rgba colour object
/// </summary>
/// <returns>a unity rgba color object</returns>
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));
}
/// <summary>
/// transform a linear srgb value to a non-linear srgb value
/// </summary>

23
ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs Normal file
View file

@ -0,0 +1,23 @@
using UnityEngine.UIElements;
public class DemoOklchColourPicker : OklchColourPickerUI
{
/// <summary>
/// initialise the ui elements and register change event callbacks functions
/// </summary>
public new void OnEnable()
{
var ui = GetComponent<UIDocument>().rootVisualElement;
LightnessSlider = ui.Q<Slider>("DemoResponseLightnessSlider");
LightnessSlider.RegisterCallback<ChangeEvent<float>>(OnLightnessChange);
ChromaSlider = ui.Q<Slider>("DemoResponseChromaSlider");
ChromaSlider.RegisterCallback<ChangeEvent<float>>(OnChromaChange);
HueSlider = ui.Q<Slider>("DemoResponseHueSlider");
HueSlider.RegisterCallback<ChangeEvent<float>>(OnHueChange);
ResponseColour = ui.Q<VisualElement>("DemoResponseColour");
}
}

3
ColourMeOKGame/Assets/Scripts/DemoOklchColourPicker.cs.meta Normal file
View file

@ -0,0 +1,3 @@
fileFormatVersion: 2
guid: f52665dbd9934a3cabe2e8a0d89059bd
timeCreated: 1731870685

67
ColourMeOKGame/Assets/Scripts/OklchColourPickerUI.cs
View file

@ -25,31 +25,31 @@ public class OklchColourPickerUI : MonoBehaviour
/// <summary>
/// slider for the chroma value
/// </summary>
private Slider _chromaSlider;
protected Slider ChromaSlider;
/// <summary>
/// slider for the hue value
/// </summary>
private Slider _hueSlider;
protected Slider HueSlider;
/// <summary>
/// slider for the lightness value
/// </summary>
private Slider _lightnessSlider;
protected Slider LightnessSlider;
/// <summary>
/// visual element for the response colour preview
/// </summary>
private VisualElement _responseColour;
protected VisualElement ResponseColour;
/// <summary>
/// modify state of initialised variables
/// </summary>
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;
}
/// <summary>
@ -59,72 +59,45 @@ public void OnEnable()
{
var ui = GetComponent<UIDocument>().rootVisualElement;
_lightnessSlider = ui.Q<Slider>("ResponseLightnessSlider");
_lightnessSlider.RegisterCallback<ChangeEvent<float>>(OnLightnessChange);
LightnessSlider = ui.Q<Slider>("ResponseLightnessSlider");
LightnessSlider.RegisterCallback<ChangeEvent<float>>(OnLightnessChange);
_chromaSlider = ui.Q<Slider>("ResponseChromaSlider");
_chromaSlider.RegisterCallback<ChangeEvent<float>>(OnChromaChange);
ChromaSlider = ui.Q<Slider>("ResponseChromaSlider");
ChromaSlider.RegisterCallback<ChangeEvent<float>>(OnChromaChange);
_hueSlider = ui.Q<Slider>("ResponseHueSlider");
_hueSlider.RegisterCallback<ChangeEvent<float>>(OnHueChange);
HueSlider = ui.Q<Slider>("ResponseHueSlider");
HueSlider.RegisterCallback<ChangeEvent<float>>(OnHueChange);
_responseColour = ui.Q<VisualElement>("ResponseColour");
ResponseColour = ui.Q<VisualElement>("ResponseColour");
}
/// <summary>
/// handle lightness slider change
/// </summary>
/// <param name="evt">change event</param>
private void OnLightnessChange(ChangeEvent<float> evt)
protected void OnLightnessChange(ChangeEvent<float> evt)
{
lightness = Math.Clamp(evt.newValue, 0d, 100d);
_responseColour.style.backgroundColor = ToColor();
ResponseColour.style.backgroundColor = Colorimetry.RawLchToColor(lightness, chroma, hue);
}
/// <summary>
/// handle chroma slider change
/// </summary>
/// <param name="evt">change event</param>
private void OnChromaChange(ChangeEvent<float> evt)
protected void OnChromaChange(ChangeEvent<float> evt)
{
chroma = Math.Clamp(evt.newValue, 0d, 0.5d);
_responseColour.style.backgroundColor = ToColor();
ResponseColour.style.backgroundColor = Colorimetry.RawLchToColor(lightness, chroma, hue);
}
/// <summary>
/// handle hue slider change
/// </summary>
/// <param name="evt">change event</param>
private void OnHueChange(ChangeEvent<float> evt)
protected void OnHueChange(ChangeEvent<float> evt)
{
hue = Math.Clamp(evt.newValue, 0d, 360d);
_responseColour.style.backgroundColor = ToColor();
}
/// <summary>
/// convert the oklch colour to a unity rgba colour object
/// </summary>
/// <returns>a unity rgba color object</returns>
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);
}
}

2
ColourMeOKGame/Assets/Scripts/SideViewUI.cs
View file

@ -88,7 +88,7 @@ private void OnEnable()
/// </summary>
private static void OnPlayButtonClicked()
{
GameManager.Instance.ui.SetDisplayState(UIManager.DisplayState.PlayView);
GameManager.Instance.ui.SetDisplayState(UIManager.DisplayState.GameView);
}
/// <summary>

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

@ -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()
/// </summary>
private void Start()
{
SetDisplayState(DisplayState.Nothing);
SetDisplayState(DisplayState.DefaultView);
}
/// <summary>
@ -85,39 +85,40 @@ public void SetDisplayState(DisplayState newDisplayState)
Debug.Log($"switching from {currentDisplayState} to {newDisplayState}");
var defaultView = UI.Q<VisualElement>("DefaultView");
var gameView = UI.Q<VisualElement>("GameView");
var resultsView = UI.Q<VisualElement>("ResultsView");
var leaderboardView = UI.Q<VisualElement>("LeaderboardView");
var accountView = UI.Q<VisualElement>("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
};
}
}

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

@ -19,13 +19,13 @@
<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"/>
name="PlayButton" style="display: flex;"/>
<ui:Button text="Leaderboard ↗" parse-escape-sequences="true" display-tooltip-when-elided="true"
name="LeaderboardButton"/>
name="LeaderboardButton" style="display: flex;"/>
<ui:Button text="Account ↗" parse-escape-sequences="true" display-tooltip-when-elided="true"
name="AccountButton"/>
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;">
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;">
@ -74,15 +74,28 @@
</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;">
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;"/>
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>
</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"
@ -118,6 +131,7 @@
<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"
@ -126,7 +140,7 @@
<ui:ListView name="LeaderboardListView"/>
</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;">
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;"/>