From 5b1e71306b15e2fd53cea9fe23ccd31ba8892497 Mon Sep 17 00:00:00 2001
From: Vladimir <vova.koshevarov@gmail.com>
Date: Sun, 29 Sep 2024 14:42:07 +0300
Subject: [PATCH] continue to work on UI

---
 Assets/UI/inGameHud.uss         | 64 ++++++++++++++++++++++-----------
 Assets/UI/inGameHud.uxml        | 31 +++++++++++++---
 Assets/UI/progressBar.cs        | 24 +++++++++++++
 Assets/UI/progressBar.cs.meta   |  2 ++
 Assets/UI/progressBar.uss       | 15 ++++++++
 Assets/UI/progressBar.uxml      |  7 ++++
 Assets/UI/progressBar.uxml.meta | 10 ++++++
 7 files changed, 128 insertions(+), 25 deletions(-)
 create mode 100644 Assets/UI/progressBar.cs
 create mode 100644 Assets/UI/progressBar.cs.meta
 create mode 100644 Assets/UI/progressBar.uxml
 create mode 100644 Assets/UI/progressBar.uxml.meta

diff --git a/Assets/UI/inGameHud.uss b/Assets/UI/inGameHud.uss
index 07ee0edc..e81f97dc 100644
--- a/Assets/UI/inGameHud.uss
+++ b/Assets/UI/inGameHud.uss
@@ -1,36 +1,58 @@
-.container
-{
+.container {
     display: flex;
     flex-direction: row;
-    height:50px;
+    height: 50px;
 }
 
-.player-image{
+.player-image {
     flex-grow: 1;
-    height:50px;
-    max-width:40px;
-    background-image: url(&quot;project://database/Assets/Characters/pics/Sophie.png?fileID=2800000&amp;guid=4999eb6bfdcacae48a7ed2020bd489d0&amp;type=3#Sophie&quot;);    
+    height: 50px;
+    max-width: 40px;
+    background-image: url('&quot;project://database/Assets/Characters/pics/Sophie.png?fileID=2800000&amp;guid=4999eb6bfdcacae48a7ed2020bd489d0&amp;type=3#Sophie&quot;');
 }
 
 .panel {
+    display: flex;
     flex-grow: 2;
-    -unity-background-image-tint-color: rgba(2, 2, 2, 0.64);
     background-color: rgba(0, 0, 0, 0.75);
-    align-items: auto;
-    height: 40px;
+    height: 25px;
+    justify-content: left;
+    flex-direction: row;
+    align-items: flex-start;
 }
 
-.progress-bar-container {
-    width: 100px;
-    height: 7px;
-    background-color: rgba(255, 255, 255, 0.3);
-    border-radius: 10px;
-    overflow: hidden;
+.top-elements-block {
+flex: 1    
+    display: flex;
+    align-items: flex-start;
+    justify-content: left;
+    flex-direction: row;
 }
 
-.progress-bar-fill {
-    width: 50%;
-    height: 100%;
-    background-color: #00FF00;
-    border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
+.stat-container {
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    align-self: center;
+}
+
+.progress-icon {
+    display: inline-block;
+    width: 25px;
+    height: 20px;
+    align-items: center;
+    align-self: center;
+    flex-direction: row;
+}
+
+.top-bar-label{
+    color: rgb(255, 255, 255);
+    align-self: center;
+    -unity-text-align: middle-left;
+}
+
+.justify-center{
+     justify-content: center;
+     align-self: center;
 }
\ No newline at end of file
diff --git a/Assets/UI/inGameHud.uxml b/Assets/UI/inGameHud.uxml
index a8ce5189..767d2e7f 100644
--- a/Assets/UI/inGameHud.uxml
+++ b/Assets/UI/inGameHud.uxml
@@ -2,10 +2,33 @@
     <Style src="project://database/Assets/UI/inGameHud.uss?fileID=7433441132597879392&amp;guid=b1b33e86ffa27d840968609d368bc1ac&amp;type=3#inGameHud" />
     <ui:VisualElement class="container">
         <ui:VisualElement name="CharacterImage" class="player-image" style="background-image: url(&quot;project://database/Assets/Characters/pics/Sophie.png?fileID=2800000&amp;guid=4999eb6bfdcacae48a7ed2020bd489d0&amp;type=3#Sophie&quot;);" />
-        <ui:VisualElement name="Panel" class="panel">
-            <ui:VisualElement name="VisualElement" class="progress-bar-container">
-           <ui:VisualElement class="progress-bar-fill" name="progressFill" />
-           </ui:VisualElement>
+        <ui:VisualElement name="TopPanel" class="panel">
+            <ui:VisualElement name="Stats" class="top-elements-block">
+                <ui:VisualElement name="EnergyProgress" template="progressBar" class="stat-container">
+                    <Style src="project://database/Assets/UI/progressBar.uss?fileID=7433441132597879392&amp;guid=755fc3f2b04b5014794dec9f2787b86e&amp;type=3#progressBar" />
+                    <ui:VisualElement name="icon" class="progress-icon" style="background-image: url(&quot;project://database/Assets/3dAssets/Textures/EnergyIcon.png?fileID=2800000&amp;guid=dfe1a973babd6cc4bb1a418ed2f3562e&amp;type=3#EnergyIcon&quot;);" />
+                    <ui:VisualElement name="progressBarContainer" class="progress-bar-container">
+                        <ui:VisualElement name="progressFill" class="progress-bar-fill" />
+                    </ui:VisualElement>
+                </ui:VisualElement>
+                <ui:VisualElement name="HungerProgress" template="progressBar" class="stat-container">
+                    <Style src="project://database/Assets/UI/progressBar.uss?fileID=7433441132597879392&amp;guid=755fc3f2b04b5014794dec9f2787b86e&amp;type=3#progressBar" />
+                    <ui:VisualElement name="icon" class="progress-icon" style="background-image: url(&quot;project://database/Assets/3dAssets/Textures/FoodIcon.png?fileID=2800000&amp;guid=bc479ad3f781c4540995d023a62d8c1d&amp;type=3#FoodIcon&quot;);" />
+                    <ui:VisualElement name="progressBarContainer" class="progress-bar-container">
+                        <ui:VisualElement name="progressFill" class="progress-bar-fill" />
+                    </ui:VisualElement>
+                </ui:VisualElement>
+                <ui:VisualElement name="MoneyPanel" class="stat-container">
+                    <ui:VisualElement name="icon" style="background-image: url(&quot;project://database/Assets/3dAssets/Textures/MoneyIcon.png?fileID=2800000&amp;guid=e46ce1f51442ea448bc1091e8d1367d9&amp;type=3#MoneyIcon&quot;); height: 15px; width: 30px; max-height: 15px;" />
+                    <ui:Label text="100000" class="top-bar-label" />
+                </ui:VisualElement>
+            </ui:VisualElement>
+            <ui:VisualElement name="LocationInfo" class="top-elements-block justify-center">
+                    <ui:Label text="Nowhere" class="top-bar-label justify-center" />
+            </ui:VisualElement>
+             <ui:VisualElement name="TimeInfo" class="top-elements-block justify-center">
+                <ui:Label text="Nowhere" class="top-bar-label" />
+            </ui:VisualElement>
         </ui:VisualElement>
     </ui:VisualElement>
 </ui:UXML>
diff --git a/Assets/UI/progressBar.cs b/Assets/UI/progressBar.cs
new file mode 100644
index 00000000..71c3adb0
--- /dev/null
+++ b/Assets/UI/progressBar.cs
@@ -0,0 +1,24 @@
+using UnityEngine;
+using UnityEngine.UIElements;
+
+public class ProgressBar : MonoBehaviour
+{
+    public VisualElement progressBarFill;
+    private float progress = 0f;
+
+    void Start()
+    {
+        var root = GetComponent<UIDocument>().rootVisualElement;
+        progressBarFill = root.Q<VisualElement>("progressFill");
+    }
+
+    void Update()
+    {
+        // Update progress value here
+        progress += Time.deltaTime * 0.1f; // Example increment
+        progress = Mathf.Clamp01(progress);
+
+        // Update the width of the progress bar fill
+        progressBarFill.style.width = new Length(progress * 100, LengthUnit.Percent);
+    }
+}
\ No newline at end of file
diff --git a/Assets/UI/progressBar.cs.meta b/Assets/UI/progressBar.cs.meta
new file mode 100644
index 00000000..d15e3d29
--- /dev/null
+++ b/Assets/UI/progressBar.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 06b9647c1a0866f42968471850af5480
\ No newline at end of file
diff --git a/Assets/UI/progressBar.uss b/Assets/UI/progressBar.uss
index e69de29b..43d930c0 100644
--- a/Assets/UI/progressBar.uss
+++ b/Assets/UI/progressBar.uss
@@ -0,0 +1,15 @@
+.progress-bar-container {
+    width: 80px;
+    position: relative;
+    height: 7px;
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.progress-bar-fill {
+    width: 50%;
+    height: 100%;
+    background-color: #00FF00;
+    border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
+}
\ No newline at end of file
diff --git a/Assets/UI/progressBar.uxml b/Assets/UI/progressBar.uxml
new file mode 100644
index 00000000..b4e2b2ce
--- /dev/null
+++ b/Assets/UI/progressBar.uxml
@@ -0,0 +1,7 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
+    <Style src="project://database/Assets/UI/progressBar.uss?fileID=7433441132597879392&amp;guid=755fc3f2b04b5014794dec9f2787b86e&amp;type=3#progressBar" />
+    <ui:VisualElement name="ImageContainer" />
+    <ui:VisualElement name="VisualElement" class="progress-bar-container">        
+        <ui:VisualElement name="progressFill" class="progress-bar-fill" />
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/Assets/UI/progressBar.uxml.meta b/Assets/UI/progressBar.uxml.meta
new file mode 100644
index 00000000..9f026ce1
--- /dev/null
+++ b/Assets/UI/progressBar.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: d1f095cbac9cb9c4a8df0d12f5567b30
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}