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

game(ui): finished-ish MainView/GameView

Browse source
This commit is contained in:
Mark Joshwel 2024-11-17 03:04:45 +08:00
parent c172ddd29f
commit 383431b965
6 changed files with 245 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
ColourMeOKGame/Assets/UI/CMOPanelSettings.asset Normal file
View file

@ -0,0 +1,38 @@
%YAML 1.1
%TAG !u! tag:unity3d.com,2011:
--- !u!114 &11400000
MonoBehaviour:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 0}
m_Enabled: 1
m_EditorHideFlags: 0
m_Script: {fileID: 19101, guid: 0000000000000000e000000000000000, type: 0}
m_Name: CMOPanelSettings
m_EditorClassIdentifier:
themeUss: {fileID: -4733365628477956816, guid: 1127348fea560484c8f170b596a61a46, type: 3}
m_TargetTexture: {fileID: 0}
m_ScaleMode: 2
m_ReferenceSpritePixelsPerUnit: 100
m_Scale: 1
m_ReferenceDpi: 96
m_FallbackDpi: 96
m_ReferenceResolution: {x: 1920, y: 1080}
m_ScreenMatchMode: 1
m_Match: 0
m_SortingOrder: 0
m_TargetDisplay: 0
m_ClearDepthStencil: 1
m_ClearColor: 0
m_ColorClearValue: {r: 0, g: 0, b: 0, a: 0}
m_DynamicAtlasSettings:
m_MinAtlasSize: 64
m_MaxAtlasSize: 4096
m_MaxSubTextureSize: 64
m_ActiveFilters: -1
m_AtlasBlitShader: {fileID: 9101, guid: 0000000000000000f000000000000000, type: 0}
m_RuntimeShader: {fileID: 9100, guid: 0000000000000000f000000000000000, type: 0}
m_RuntimeWorldShader: {fileID: 9102, guid: 0000000000000000f000000000000000, type: 0}
textSettings: {fileID: 0}

8
ColourMeOKGame/Assets/UI/CMOPanelSettings.asset.meta Normal file
View file

@ -0,0 +1,8 @@
fileFormatVersion: 2
guid: 507e346b0e9956149b317358e209c34b
NativeFormatImporter:
externalObjects: {}
mainObjectFileID: 11400000
userData:
assetBundleName:
assetBundleVariant:

111
ColourMeOKGame/Assets/UI/GameUI.uss Normal file
View file

@ -0,0 +1,111 @@
Button {
border-left-color: rgba(0, 0, 0, 0);
border-right-color: rgba(0, 0, 0, 0);
border-top-color: rgba(0, 0, 0, 0);
border-bottom-color: rgba(0, 0, 0, 0);
}
#Content > Button {
border-top-color: rgb(208, 152, 194);
border-right-color: rgba(208, 152, 194, 0);
border-bottom-color: rgba(208, 152, 194, 0);
border-left-color: rgba(208, 152, 194, 0);
border-bottom-width: 1px;
}
#Content Button {
background-color: rgba(0, 0, 0, 0);
padding-left: 0;
padding-right: 0;
padding-top: 12px;
padding-bottom: 12px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
font-size: 18px;
color: rgb(208, 152, 194);
-unity-text-align: upper-left;
text-overflow: ellipsis;
}
#Content Label {
font-size: 18px;
color: rgb(208, 152, 194);
text-overflow: ellipsis;
-unity-text-align: upper-left;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}
#MainView Label {
font-size: 22px;
color: rgb(15, 13, 27);
}
.stretch {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.center {
align-items: center;
justify-content: center;
}
.circle {
width: 70%;
height: 0;
padding-top: 70%;
}
.lch-slider Label {
display: flex;
color: rgb(36, 0, 255);
width: auto;
min-width: 15%;
}
.lch-slider #unity-drag-container {
}
.lch-slider #unity-tracker {
background-color: rgb(122, 90, 126);
border-left-color: rgba(0, 0, 0, 0);
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-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
margin-left: 4px;
margin-right: 4px;
}
.lch-slider #unity-dragger {
background-color: rgb(15, 13, 27);
border-left-color: rgb(0, 0, 0);
border-right-color: rgb(0, 0, 0);
border-top-color: rgb(0, 0, 0);
border-bottom-color: rgb(0, 0, 0);
border-top-width: 12px;
border-right-width: 12px;
border-bottom-width: 12px;
border-left-width: 12px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
height: 24px;
width: 24px;
}

11
ColourMeOKGame/Assets/UI/GameUI.uss.meta Normal file
View file

@ -0,0 +1,11 @@
fileFormatVersion: 2
guid: 2c7ff79f21a3e8e408e76d75944d575b
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}
serializedVersion: 2
userData:
assetBundleName:
assetBundleVariant:
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
disableValidation: 0

67
ColourMeOKGame/Assets/UI/GameUI.uxml Normal file
View file

@ -0,0 +1,67 @@
<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 percepually 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" />
<ui:Button text="Leaderboard ↗" parse-escape-sequences="true" display-tooltip-when-elided="true" 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); border-bottom-width: 1px; padding-bottom: 12px;">
<ui:VisualElement name="UserDetails" 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: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: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="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: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: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: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="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;">
<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>
<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:VisualElement>
</ui:VisualElement>
<ui:VisualElement name="LeaderboardView" style="flex-grow: 1; visibility: visible; display: none; padding-top: 10%; padding-right: 10%; padding-bottom: 10%; padding-left: 10%;" />
<ui:VisualElement name="AccountView" style="flex-grow: 1; display: none; padding-top: 10%; padding-right: 10%; padding-bottom: 10%; padding-left: 10%;" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

10
ColourMeOKGame/Assets/UI/GameUI.uxml.meta Normal file
View file

@ -0,0 +1,10 @@
fileFormatVersion: 2
guid: 11e9bf775ad0e834fa8d7d3e80056d11
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}
serializedVersion: 2
userData:
assetBundleName:
assetBundleVariant:
script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}