UI work

Editor/Editor.cpp

@@ -30,7 +30,7 @@ int main()
     Ref<Nuake::Texture> lightTexture = Nuake::TextureManager::Get()->GetTexture("resources/Icons/Gizmo/Light.png");
     Ref<Nuake::Texture> camTexture = Nuake::TextureManager::Get()->GetTexture("resources/Icons/Gizmo/Camera.png");
     Ref<Nuake::Shader> GuizmoShader = Nuake::ShaderManager::GetShader("resources/Shaders/gizmo.shader");
-    Ref<Nuake::UI::UserInterface> uinterface = Nuake::UI::UserInterface::New("Editor");
+    Ref<Nuake::UI::UserInterface> uinterface = Nuake::UI::UserInterface::New("Editor", "resources/Interface/Testing.interface");
     
     while (!Nuake::Engine::GetCurrentWindow()->ShouldClose())
     {
@@ -39,18 +39,16 @@ int main()
 
         uinterface->Update(0.0f);
         Nuake::Engine::Draw();
-        //
+
         if (Nuake::Input::IsKeyPressed(GLFW_KEY_F1))
             uinterface->Reload();
+
         if (Nuake::Input::IsKeyPressed(GLFW_KEY_F8))
             Nuake::Engine::ExitPlayMode();
         
         Nuake::Vector2 WindowSize = Nuake::Engine::GetCurrentWindow()->GetSize();
         glViewport(0, 0, WindowSize.x, WindowSize.y);
         Nuake::Renderer2D::BeginDraw(WindowSize);
-        //Nuake::Renderer2D::DrawRect(Nuake::Vector2(100, 100), Nuake::Vector2(100, 100), Nuake::Color(1.0, 0.0, 0.0, 1.0), 2.0f);
-
-        
         uinterface->Draw(WindowSize);
 
         Ref<Nuake::FrameBuffer> sceneFramebuffer = Nuake::Engine::GetCurrentWindow()->GetFrameBuffer();
@@ -97,9 +95,6 @@ int main()
         }
         sceneFramebuffer->Unbind();
 
-        
-        //if (ImGui::Begin("test")) {}
-        //ImGui::End();
         //editor.Draw();
         Nuake::Engine::EndDraw();
     }

Editor/resources/Interface/Testing.css

@@ -15,6 +15,7 @@
     align-content: center;
     flex-direction: column;
 }
+
 .panel {
     display: flex;
     height: 33%;
@@ -32,7 +33,7 @@
 }
 
 .panel-bottom {
-    width:100%;
+    width: 100%;
     height: 25%;
     justify-content: space-around;
     align-items: center;
@@ -44,6 +45,11 @@
     justify-content: space-around;
     align-items: center;
     align-content: center;
+    background-color: 18 18 18 255;
+}
+
+.rect:hover {
+    background-color: 40 40 40 255;
 }
 
 .normal-text {

Editor/resources/Interface/Testing.interface

@@ -15,16 +15,14 @@
         groups="rect"
         height="50px"
         width="49%"
-        border="8px 8px 8px 8px"
-        color="18 18 18 255">
+        border="8px 8px 8px 8px">
         <p groups="normal-text">New Project</p>
       </Rect>
       <Rect
         groups="rect"
         height="50px"
         width="49%"
-        border="8px 8px 8px 8px"
-        color="18 18 18 255">
+        border="8px 8px 8px 8px">
         <p groups="normal-text">Load Project</p>
       </Rect>
     </Rect>

Nuake/src/Core/Input.cpp

@@ -139,7 +139,7 @@ namespace Nuake
 		double xpos, ypos;
 		glfwGetCursorPos(window, &xpos, &ypos);
 
-		return  Vector2(xpos, ypos);
+		return Vector2(xpos, ypos);
 	}
 #pragma endregion
 

Nuake/src/Scripting/VM.cpp

@@ -0,0 +1,16 @@
+#include "VM.h"
+
+namespace Nuake {
+	VM::VM()
+	{
+		WrenConfiguration config;
+        wrenInitConfiguration(&config);
+
+        //config.loadModuleFn = &myLoadModule;
+        //config.errorFn = &errorFn;
+        //config.writeFn = &writeFn;
+        //config.bindForeignMethodFn = &bindForeignMethod;
+
+        m_VM = wrenNewVM(&config);
+	}
+}

Nuake/src/Scripting/VM.h

@@ -0,0 +1,13 @@
+#pragma once
+#include <src/Vendors/wren/src/include/wren.h>
+
+namespace Nuake {
+	class VM 
+	{
+		VM();
+
+		inline WrenVM* GetVM();
+	private:
+		WrenVM* m_VM;
+	};
+}

Nuake/src/UI/InterfaceParser.cpp

@@ -49,7 +49,7 @@ namespace Nuake
 		Ref<TextNode> node = CreateRef<TextNode>();
 		node->content = xml_node.text().as_string();
 		node->Type = NodeType::Text;
-		TextStyle style{
+		TextStyle style {
 			FontManager::GetFont("resources/Fonts/RobotoMono-Regular.ttf"),
 			0.5,
 			Color(255, 255, 255, 255)
@@ -66,29 +66,29 @@ namespace Nuake
 				}
 			}
 			if (name == "height")
-				node->Height = GetUnit(a.value());
+				node->NormalStyle.Height = GetUnit(a.value());
 			if (name == "width")
-				node->Width = GetUnit(a.value());
+				node->NormalStyle.Width = GetUnit(a.value());
 			if (name == "margin")
-				node->Margin = GetVec4Unit(a.value());
+				node->NormalStyle.Margin = GetVec4Unit(a.value());
 			if (name == "padding")
-				node->Padding = GetVec4Unit(a.value());
+				node->NormalStyle.Padding = GetVec4Unit(a.value());
 			if (name == "border")
-				node->Border = GetVec4Unit(a.value());
+				node->NormalStyle.Border = GetVec4Unit(a.value());
 			if (name == "position")
-				node->Position = GetVec4Unit(a.value());
+				node->NormalStyle.Position = GetVec4Unit(a.value());
 			if (name == "color")
-				node->BackgroundColor = GetColor(a.value());
+				node->NormalStyle.BackgroundColor = GetColor(a.value());
 			if (name == "font-size")
 				style.fontSize = std::stof(a.value());
 		}
 
 		Vector2 minSize = Renderer2D::CalculateStringSize(node->content, style);
-		node->Width = {
+		node->NormalStyle.Width = {
 			minSize.x,
 			Layout::Unit::PIXEL
 		};
-		node->Height = {
+		node->NormalStyle.Height = {
 			minSize.y,
 			Layout::Unit::PIXEL
 		};
@@ -114,19 +114,19 @@ namespace Nuake
 				}
 			}
 			if (name == "height")
-				node->Height = GetUnit(a.value());
+				node->NormalStyle.Height = GetUnit(a.value());
 			if (name == "width")
-				node->Width = GetUnit(a.value());
+				node->NormalStyle.Width = GetUnit(a.value());
 			if (name == "margin")
-				node->Margin = GetVec4Unit(a.value());
+				node->NormalStyle.Margin = GetVec4Unit(a.value());
 			if (name == "padding")
-				node->Padding = GetVec4Unit(a.value());
+				node->NormalStyle.Padding = GetVec4Unit(a.value());
 			if (name == "border")
-				node->Border = GetVec4Unit(a.value());
+				node->NormalStyle.Border = GetVec4Unit(a.value());
 			if (name == "position")
-				node->Position = GetVec4Unit(a.value());
+				node->NormalStyle.Position = GetVec4Unit(a.value());
 			if (name == "color")
-				node->BackgroundColor = GetColor(a.value());
+				node->NormalStyle.BackgroundColor = GetColor(a.value());
 			if (name == "onclick")
 			{
 				std::string signature = a.value();
@@ -268,19 +268,19 @@ namespace Nuake
 				}
 			}
 			if (name == "height")
-				node->Height = GetUnit(a.value());
+				node->NormalStyle.Height = GetUnit(a.value());
 			if (name == "width")
-				node->Width = GetUnit(a.value());
+				node->NormalStyle.Width = GetUnit(a.value());
 			if (name == "margin")
-				node->Margin = GetVec4Unit(a.value());
+				node->NormalStyle.Margin = GetVec4Unit(a.value());
 			if (name == "padding")
-				node->Padding = GetVec4Unit(a.value());
+				node->NormalStyle.Padding = GetVec4Unit(a.value());
 			if (name == "border")
-				node->Border = GetVec4Unit(a.value());
+				node->NormalStyle.Border = GetVec4Unit(a.value());
 			if (name == "position")
-				node->Position = GetVec4Unit(a.value());
+				node->NormalStyle.Position = GetVec4Unit(a.value());
 			if (name == "color")
-				node->BackgroundColor = GetColor(a.value());
+				node->NormalStyle.BackgroundColor = GetColor(a.value());
 			if (name == "script")
 			{
 				auto s = split(a.value(), ' ');

Nuake/src/UI/Nodes/Node.cpp

@@ -6,109 +6,126 @@ namespace Nuake
 	{
 		Childrens = std::vector<Ref<Node>>();
 		Groups = std::vector<std::string>();
-		PositionType = Layout::PositionType::RELATIVE;
-		Position = Layout::LayoutVec4();
-		Height = MaxHeight = MinHeight = Layout::LayoutUnit();
-		Margin = Padding = Border = Layout::LayoutVec4();
-		Direction = Layout::LayoutDirection::LTR;
-		FlexDirection = Layout::FlexDirection::ROW;
-		FlexWrap = Layout::FlexWrap::WRAP;
-		FlexGrow = 0.f;
-		FlexShrink = 1.f;
-		FlexBasis = 10.f;
-		AspectRatio = 1.f;
-		AlignItems = Layout::AlignItems::AUTO;
-		AlignSelf = Layout::AlignItems::AUTO;
+
+		NormalStyle = {
+			Layout::PositionType::RELATIVE,
+			Layout::LayoutVec4(),
+			Layout::LayoutUnit(), Layout::LayoutUnit(), Layout::LayoutUnit(),
+			Layout::LayoutUnit(), Layout::LayoutUnit(), Layout::LayoutUnit(),
+			Layout::LayoutVec4(),
+			Layout::LayoutVec4(),
+			Layout::LayoutVec4(),
+			Color(),
+			Layout::LayoutDirection::LTR,
+			Layout::FlexDirection::ROW,
+			Layout::FlexWrap::WRAP,
+			0.f,
+			1.f,
+			10.f,
+			1.f,
+			Layout::JustifyContent(),
+			Layout::AlignItems::AUTO,
+			Layout::AlignItems::AUTO,
+		};
 	}
 
-	void Node::ApplyStyle(Ref<StyleGroup> stylegroup)
+	void Node::ApplyStyle(Ref<StyleGroup> stylegroup, StyleGroupSelector selector)
 	{
+		Style style = NormalStyle;
 		for (auto& s : stylegroup->GetProps())
 		{
 			switch (s.first)
 			{
 			case PropType::HEIGHT:
 			{
-				Height.Unit = (Layout::Unit)(s.second.type);
+				style.Height.Unit = (Layout::Unit)(s.second.type);
 				float value = s.second.value.Number;
-				Height.Value = value;
+				style.Height.Value = value;
 			}
 			break;
 			case PropType::MIN_HEIGHT:
-				MinHeight.Unit = (Layout::Unit)s.second.type;
-				MinHeight.Value = s.second.value.Number;
+				style.MinHeight.Unit = (Layout::Unit)s.second.type;
+				style.MinHeight.Value = s.second.value.Number;
 				break;
 			case PropType::MAX_HEIGHT:
-				MaxHeight.Unit = (Layout::Unit)s.second.type;
-				MaxHeight.Value = s.second.value.Number;
+				style.MaxHeight.Unit = (Layout::Unit)s.second.type;
+				style.MaxHeight.Value = s.second.value.Number;
 				break;
 			case PropType::WIDTH:
-				Width.Unit = (Layout::Unit)s.second.type;
-				Width.Value = s.second.value.Number;
+				style.Width.Unit = (Layout::Unit)s.second.type;
+				style.Width.Value = s.second.value.Number;
 				break;
 			case PropType::MIN_WIDTH:
-				MinWidth.Unit = (Layout::Unit)s.second.type;
-				MinWidth.Value = s.second.value.Number;
+				style.MinWidth.Unit = (Layout::Unit)s.second.type;
+				style.MinWidth.Value = s.second.value.Number;
 				break;
 			case PropType::MAX_WIDTH:
-				MaxWidth.Unit = (Layout::Unit)s.second.type;
-				MaxWidth.Value = s.second.value.Number;
+				style.MaxWidth.Unit = (Layout::Unit)s.second.type;
+				style.MaxWidth.Value = s.second.value.Number;
 				break;
 			case PropType::MARGIN_RIGHT:
-				Margin.Right.Unit = (Layout::Unit)s.second.type;
-				Margin.Right.Value = s.second.value.Number;
+				style.Margin.Right.Unit = (Layout::Unit)s.second.type;
+				style.Margin.Right.Value = s.second.value.Number;
 				break;
 			case PropType::MARGIN_LEFT:
-				Margin.Left.Unit = (Layout::Unit)s.second.type;
-				Margin.Left.Value = s.second.value.Number;
+				style.Margin.Left.Unit = (Layout::Unit)s.second.type;
+				style.Margin.Left.Value = s.second.value.Number;
 				break;
 			case PropType::MARGIN_TOP:
-				Margin.Top.Unit = (Layout::Unit)s.second.type;
-				Margin.Top.Value = s.second.value.Number;
+				style.Margin.Top.Unit = (Layout::Unit)s.second.type;
+				style.Margin.Top.Value = s.second.value.Number;
 				break;
 			case PropType::MARGIN_BOTTOM:
-				Margin.Bottom.Unit = (Layout::Unit)s.second.type;
-				Margin.Bottom.Value = s.second.value.Number;
+				style.Margin.Bottom.Unit = (Layout::Unit)s.second.type;
+				style.Margin.Bottom.Value = s.second.value.Number;
 				break;
 			case PropType::JUSTIFY_CONTENT:
-				JustifyContent = (Layout::JustifyContent)s.second.value.Enum;
+				style.JustifyContent = (Layout::JustifyContent)s.second.value.Enum;
 				break;
 			case PropType::FLEX_WRAP:
-				FlexWrap = (Layout::FlexWrap)s.second.value.Enum;
+				style.FlexWrap = (Layout::FlexWrap)s.second.value.Enum;
 				break;
 			case PropType::FLEX_DIRECTION:
-				FlexDirection = (Layout::FlexDirection)s.second.value.Enum;
+				style.FlexDirection = (Layout::FlexDirection)s.second.value.Enum;
 				break;
 			case PropType::ALIGN_ITEMS:
-				AlignItems = (Layout::AlignItems)s.second.value.Enum;
+				style.AlignItems = (Layout::AlignItems)s.second.value.Enum;
 				break;
 			case PropType::SELF_ALIGN:
-				AlignSelf = (Layout::AlignItems)s.second.value.Enum;
+				style.AlignSelf = (Layout::AlignItems)s.second.value.Enum;
 				break;
 			case PropType::ALIGN_CONTENT:
-				AlignContent = (Layout::AlignContent)s.second.value.Enum;
+				style.AlignContent = (Layout::AlignContent)s.second.value.Enum;
 				break;
 			case PropType::POSITION:
-				PositionType = (Layout::PositionType)s.second.value.Enum;
+				style.PositionType = (Layout::PositionType)s.second.value.Enum;
 				break;
 			case PropType::LEFT:
-				Position.Left.Unit = (Layout::Unit)s.second.type;
-				Position.Left.Value = s.second.value.Number;
+				style.Position.Left.Unit = (Layout::Unit)s.second.type;
+				style.Position.Left.Value = s.second.value.Number;
 				break;
 			case PropType::RIGHT:
-				Position.Right.Unit = (Layout::Unit)s.second.type;
-				Position.Right.Value = s.second.value.Number;
+				style.Position.Right.Unit = (Layout::Unit)s.second.type;
+				style.Position.Right.Value = s.second.value.Number;
 				break;
 			case PropType::TOP:
-				Position.Top.Unit = (Layout::Unit)s.second.type;
-				Position.Top.Value = s.second.value.Number;
+				style.Position.Top.Unit = (Layout::Unit)s.second.type;
+				style.Position.Top.Value = s.second.value.Number;
 				break;
 			case PropType::BOTTOM:
-				Position.Bottom.Unit = (Layout::Unit)s.second.type;
-				Position.Bottom.Value = s.second.value.Number;
+				style.Position.Bottom.Unit = (Layout::Unit)s.second.type;
+				style.Position.Bottom.Value = s.second.value.Number;
+				break;
+			case PropType::BACKGROUND_COLOR:
+				style.BackgroundColor = s.second.value.Color;
 				break;
 			}
 		}
+
+		if (selector == StyleGroupSelector::Hover)
+			HoverStyle = style;
+		else
+			NormalStyle = style;
 	}
 
 	bool Node::IsPositionInside(Vector2 position)
@@ -122,19 +139,11 @@ namespace Nuake
 		float parentLeft = 0.0f;
 		float parentTop = 0.0f;
 		auto parent = YGNodeGetParent(YogaNode);
-		if (parent)
+		while (parent)
 		{
-			parentLeft = YGNodeLayoutGetLeft(YGNodeGetParent(YogaNode));
-			parentTop = YGNodeLayoutGetTop(YGNodeGetParent(YogaNode));
-			float parentPaddingTop = YGNodeLayoutGetPadding(parent, YGEdgeTop);
-			float parentPaddingLeft = YGNodeLayoutGetPadding(parent, YGEdgeTop);
-			// Overflow hidden.
-			float parentwidth = YGNodeLayoutGetWidth(parent);
-			if (parentwidth - YGNodeLayoutGetMargin(YogaNode, YGEdgeLeft) < width)
-				width = parentwidth - parentPaddingLeft;
-			float parentHeight = YGNodeLayoutGetHeight(parent);
-			if (parentHeight < height)
-				height = parentHeight - parentPaddingTop;
+			parentLeft += YGNodeLayoutGetLeft(parent);
+			parentTop += YGNodeLayoutGetTop(parent);
+			parent = YGNodeGetParent(parent);
 		}
 
 		left += parentLeft;

Nuake/src/UI/Nodes/Node.h

@@ -8,71 +8,12 @@
 
 namespace Nuake
 {
-	namespace Layout
-	{
-		enum class LayoutDirection
-		{
-			LTR = 2, RTL = 3
-		};
-
-		enum class FlexWrap
-		{
-			NO_WRAP, WRAP, WRAP_REVERSED
-		};
-
-		enum class FlexDirection
-		{
-			ROW, COLUMN, ROW_REVERSED, COLUMN_REVERSED
-		};
-
-		enum class JustifyContent
-		{
-			FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND, SPACE_EVENLY
-		};
-
-		enum class AlignItems
-		{
-			STRETCH, FLEX_START, FLEX_END, CENTER, BASELINE, AUTO,
-		};
-
-		enum class AlignContent
-		{
-			FLEX_START, FLEX_END, STRETCH, CENTER, SPACE_BETWEEN, SPACE_AROUND
-		};
-
-		enum class PositionType
-		{
-			STATIC, RELATIVE, ABSOLUTE
-		};
-
-		enum Unit
-		{
-			PIXEL, PERCENT, AUTO
-		};
-
-		struct LayoutUnit
-		{
-			float Value = 0.0f;
-			Unit Unit = Unit::PIXEL;
-		};
-
-		struct LayoutVec4
-		{
-			LayoutUnit Top = LayoutUnit{ 0, PIXEL };
-			LayoutUnit Bottom = LayoutUnit{ 0, PIXEL };
-			LayoutUnit Left = LayoutUnit{ 0, PIXEL };
-			LayoutUnit Right = LayoutUnit{ 0, PIXEL };
-		};
-	}
-
-
 	enum class NodeType
 	{
 		Normal,
 		Text
 	};
 
-	// Base UI node.
 	class Node
 	{
 	public:
@@ -88,31 +29,13 @@ namespace Nuake
 
 		YGNodeRef YogaNode;
 
-		Ref<Style> style;
-
-		Layout::PositionType PositionType;
-		Layout::LayoutVec4 Position;
-		Layout::LayoutUnit Width, MaxWidth, MinWidth;
-		Layout::LayoutUnit Height, MaxHeight, MinHeight;
-		Layout::LayoutVec4 Margin;
-		Layout::LayoutVec4 Padding;
-		Layout::LayoutVec4 Border;
-		Color BackgroundColor;
-		Layout::LayoutDirection Direction;
-		Layout::FlexDirection FlexDirection = Layout::FlexDirection::ROW;
-		Layout::FlexWrap FlexWrap;
-		float FlexGrow;
-		float FlexShrink;
-		float FlexBasis;
-		float AspectRatio;
-		Layout::JustifyContent JustifyContent;
-		Layout::AlignItems AlignItems;
-		Layout::AlignItems AlignSelf;
-		Layout::AlignContent AlignContent;
+		bool IsHover = false;
+		Style NormalStyle;
+		Style HoverStyle;
 
 		Node();
 
-		void ApplyStyle(Ref<StyleGroup> stylegroup);
+		void ApplyStyle(Ref<StyleGroup> stylegroup, StyleGroupSelector selector = StyleGroupSelector::Normal);
 
 		bool IsPositionInside(Vector2 position);
 
@@ -132,243 +55,249 @@ namespace Nuake
 
 		void SetMargin()
 		{
-			switch (Margin.Left.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetMargin(YogaNode, YGEdgeLeft, Margin.Left.Value);
-				break;
-			case Layout::Unit::PERCENT:
-				YGNodeStyleSetMarginPercent(YogaNode, YGEdgeLeft, Margin.Left.Value);
-				break;
-			case Layout::Unit::AUTO:
-				YGNodeStyleSetMarginAuto(YogaNode, YGEdgeLeft);
-				break;
-			}
-
-			switch (Margin.Right.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetMargin(YogaNode, YGEdgeRight, Margin.Right.Value);
-				break;
-			case Layout::Unit::PERCENT:
-				YGNodeStyleSetMarginPercent(YogaNode, YGEdgeRight, Margin.Right.Value);
-				break;
-			case Layout::Unit::AUTO:
-				YGNodeStyleSetMarginAuto(YogaNode, YGEdgeRight);
-				break;
-			}
-
-			switch (Margin.Top.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetMargin(YogaNode, YGEdgeTop, Margin.Top.Value);
-				break;
-			case Layout::Unit::PERCENT:
-				YGNodeStyleSetMarginPercent(YogaNode, YGEdgeTop, Margin.Top.Value);
-				break;
-			case Layout::Unit::AUTO:
-				YGNodeStyleSetMarginAuto(YogaNode, YGEdgeTop);
-				break;
-			}
-
-			switch (Margin.Bottom.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetMargin(YogaNode, YGEdgeBottom, Margin.Bottom.Value);
-				break;
-			case Layout::Unit::PERCENT:
-				YGNodeStyleSetMarginPercent(YogaNode, YGEdgeBottom, Margin.Bottom.Value);
-				break;
-			case Layout::Unit::AUTO:
-				YGNodeStyleSetMarginAuto(YogaNode, YGEdgeTop);
-				break;
-			}
-
+			
 		}
 
 		void SetPadding()
 		{
-			switch (Padding.Left.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetPadding(YogaNode, YGEdgeLeft, Padding.Left.Value);
-				break;
-			case Layout::Unit::PERCENT:
-				YGNodeStyleSetPaddingPercent(YogaNode, YGEdgeLeft, Padding.Left.Value);
-				break;
-			}
-
-			switch (Padding.Right.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetPadding(YogaNode, YGEdgeRight, Padding.Right.Value);
-				break;
-			case Layout::Unit::PERCENT:
-				YGNodeStyleSetPaddingPercent(YogaNode, YGEdgeRight, Padding.Right.Value);
-				break;
-			}
-
-			switch (Padding.Top.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetPadding(YogaNode, YGEdgeTop, Padding.Top.Value);
-				break;
-			case Layout::Unit::PERCENT:
-				YGNodeStyleSetPaddingPercent(YogaNode, YGEdgeTop, Padding.Top.Value);
-				break;
-			}
-
-			switch (Padding.Bottom.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetPadding(YogaNode, YGEdgeBottom, Padding.Bottom.Value);
-				break;
-			case Layout::Unit::PERCENT:
-				YGNodeStyleSetPaddingPercent(YogaNode, YGEdgeBottom, Padding.Bottom.Value);
-				break;
-			}
+			
 		}
 
 		void SetBorder()
 		{
-			switch (Border.Left.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetBorder(YogaNode, YGEdgeLeft, Border.Left.Value);
-				break;
-			}
-
-			switch (Border.Right.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetBorder(YogaNode, YGEdgeRight, Border.Right.Value);
-				break;
-			}
-
-			switch (Border.Top.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetBorder(YogaNode, YGEdgeTop, Border.Top.Value);
-				break;
-			}
-
-			switch (Border.Bottom.Unit)
-			{
-			case Layout::Unit::PIXEL:
-				YGNodeStyleSetBorder(YogaNode, YGEdgeBottom, Border.Bottom.Value);
-				break;
-			}
+			
 		}
 
 		void SetYogaLayout()
 		{
-			switch (Width.Unit)
+			Style style = this->NormalStyle;
+			if (IsHover)
+				style = this->HoverStyle;
+
+			switch (style.Width.Unit)
 			{
 			case Layout::Unit::PIXEL:
-				YGNodeStyleSetWidth(YogaNode, Width.Value);
+				YGNodeStyleSetWidth(YogaNode, style.Width.Value);
 				break;
 			case Layout::Unit::PERCENT:
-				YGNodeStyleSetWidthPercent(YogaNode, Width.Value);
+				YGNodeStyleSetWidthPercent(YogaNode, style.Width.Value);
 				break;
 			case Layout::Unit::AUTO:
 				YGNodeStyleSetWidthAuto(YogaNode);
 				break;
 			}
-			switch (Height.Unit)
+			switch (style.Height.Unit)
 			{
 			case Layout::Unit::PIXEL:
-				YGNodeStyleSetHeight(YogaNode, Height.Value);
+				YGNodeStyleSetHeight(YogaNode, style.Height.Value);
 				break;
 			case Layout::Unit::PERCENT:
-				YGNodeStyleSetHeightPercent(YogaNode, Height.Value);
+				YGNodeStyleSetHeightPercent(YogaNode, style.Height.Value);
 				break;
 			case Layout::Unit::AUTO:
 				YGNodeStyleSetHeightAuto(YogaNode);
 				break;
 			}
 
-			SetMargin();
-			SetPadding();
-			SetBorder();
+			switch (style.Margin.Left.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetMargin(YogaNode, YGEdgeLeft, style.Margin.Left.Value);
+				break;
+			case Layout::Unit::PERCENT:
+				YGNodeStyleSetMarginPercent(YogaNode, YGEdgeLeft, style.Margin.Left.Value);
+				break;
+			case Layout::Unit::AUTO:
+				YGNodeStyleSetMarginAuto(YogaNode, YGEdgeLeft);
+				break;
+			}
 
-			if (FlexWrap == Layout::FlexWrap::WRAP)
+			switch (style.Margin.Right.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetMargin(YogaNode, YGEdgeRight, style.Margin.Right.Value);
+				break;
+			case Layout::Unit::PERCENT:
+				YGNodeStyleSetMarginPercent(YogaNode, YGEdgeRight, style.Margin.Right.Value);
+				break;
+			case Layout::Unit::AUTO:
+				YGNodeStyleSetMarginAuto(YogaNode, YGEdgeRight);
+				break;
+			}
+
+			switch (style.Margin.Top.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetMargin(YogaNode, YGEdgeTop, style.Margin.Top.Value);
+				break;
+			case Layout::Unit::PERCENT:
+				YGNodeStyleSetMarginPercent(YogaNode, YGEdgeTop, style.Margin.Top.Value);
+				break;
+			case Layout::Unit::AUTO:
+				YGNodeStyleSetMarginAuto(YogaNode, YGEdgeTop);
+				break;
+			}
+
+			switch (style.Margin.Bottom.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetMargin(YogaNode, YGEdgeBottom, style.Margin.Bottom.Value);
+				break;
+			case Layout::Unit::PERCENT:
+				YGNodeStyleSetMarginPercent(YogaNode, YGEdgeBottom, style.Margin.Bottom.Value);
+				break;
+			case Layout::Unit::AUTO:
+				YGNodeStyleSetMarginAuto(YogaNode, YGEdgeTop);
+				break;
+			}
+			switch (style.Padding.Left.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetPadding(YogaNode, YGEdgeLeft, style.Padding.Left.Value);
+				break;
+			case Layout::Unit::PERCENT:
+				YGNodeStyleSetPaddingPercent(YogaNode, YGEdgeLeft, style.Padding.Left.Value);
+				break;
+			}
+
+			switch (style.Padding.Right.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetPadding(YogaNode, YGEdgeRight, style.Padding.Right.Value);
+				break;
+			case Layout::Unit::PERCENT:
+				YGNodeStyleSetPaddingPercent(YogaNode, YGEdgeRight, style.Padding.Right.Value);
+				break;
+			}
+
+			switch (style.Padding.Top.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetPadding(YogaNode, YGEdgeTop, style.Padding.Top.Value);
+				break;
+			case Layout::Unit::PERCENT:
+				YGNodeStyleSetPaddingPercent(YogaNode, YGEdgeTop, style.Padding.Top.Value);
+				break;
+			}
+
+			switch (style.Padding.Bottom.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetPadding(YogaNode, YGEdgeBottom, style.Padding.Bottom.Value);
+				break;
+			case Layout::Unit::PERCENT:
+				YGNodeStyleSetPaddingPercent(YogaNode, YGEdgeBottom, style.Padding.Bottom.Value);
+				break;
+			}
+			switch (style.Border.Left.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetBorder(YogaNode, YGEdgeLeft, style.Border.Left.Value);
+				break;
+			}
+
+			switch (style.Border.Right.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetBorder(YogaNode, YGEdgeRight, style.Border.Right.Value);
+				break;
+			}
+
+			switch (style.Border.Top.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetBorder(YogaNode, YGEdgeTop, style.Border.Top.Value);
+				break;
+			}
+
+			switch (style.Border.Bottom.Unit)
+			{
+			case Layout::Unit::PIXEL:
+				YGNodeStyleSetBorder(YogaNode, YGEdgeBottom, style.Border.Bottom.Value);
+				break;
+			}
+
+			if (style.FlexWrap == Layout::FlexWrap::WRAP)
 				YGNodeStyleSetFlexWrap(YogaNode, YGWrapWrap);
-			else if (FlexWrap == Layout::FlexWrap::NO_WRAP)
+			else if (style.FlexWrap == Layout::FlexWrap::NO_WRAP)
 				YGNodeStyleSetFlexWrap(YogaNode, YGWrapNoWrap);
-			else if (FlexWrap == Layout::FlexWrap::WRAP_REVERSED)
+			else if (style.FlexWrap == Layout::FlexWrap::WRAP_REVERSED)
 				YGNodeStyleSetFlexWrap(YogaNode, YGWrapWrapReverse);
 
-			if (FlexDirection == Layout::FlexDirection::ROW)
+			if (style.FlexDirection == Layout::FlexDirection::ROW)
 				YGNodeStyleSetFlexDirection(YogaNode, YGFlexDirectionRow);
-			else if (FlexDirection == Layout::FlexDirection::ROW_REVERSED)
+			else if (style.FlexDirection == Layout::FlexDirection::ROW_REVERSED)
 				YGNodeStyleSetFlexDirection(YogaNode, YGFlexDirectionRowReverse);
-			else if (FlexDirection == Layout::FlexDirection::COLUMN)
+			else if (style.FlexDirection == Layout::FlexDirection::COLUMN)
 				YGNodeStyleSetFlexDirection(YogaNode, YGFlexDirectionColumn);
-			else if (FlexDirection == Layout::FlexDirection::COLUMN_REVERSED)
+			else if (style.FlexDirection == Layout::FlexDirection::COLUMN_REVERSED)
 				YGNodeStyleSetFlexDirection(YogaNode, YGFlexDirectionColumnReverse);
 
-			if (JustifyContent == Layout::JustifyContent::FLEX_START)
+			if (style.JustifyContent == Layout::JustifyContent::FLEX_START)
 				YGNodeStyleSetJustifyContent(YogaNode, YGJustifyFlexStart);
-			else if (JustifyContent == Layout::JustifyContent::FLEX_END)
+			else if (style.JustifyContent == Layout::JustifyContent::FLEX_END)
 				YGNodeStyleSetJustifyContent(YogaNode, YGJustifyFlexEnd);
-			else if (JustifyContent == Layout::JustifyContent::CENTER)
+			else if (style.JustifyContent == Layout::JustifyContent::CENTER)
 				YGNodeStyleSetJustifyContent(YogaNode, YGJustifyCenter);
-			else if (JustifyContent == Layout::JustifyContent::SPACE_BETWEEN)
+			else if (style.JustifyContent == Layout::JustifyContent::SPACE_BETWEEN)
 				YGNodeStyleSetJustifyContent(YogaNode, YGJustifySpaceBetween);
-			else if (JustifyContent == Layout::JustifyContent::SPACE_AROUND)
+			else if (style.JustifyContent == Layout::JustifyContent::SPACE_AROUND)
 				YGNodeStyleSetJustifyContent(YogaNode, YGJustifySpaceAround);
-			else if (JustifyContent == Layout::JustifyContent::SPACE_EVENLY)
+			else if (style.JustifyContent == Layout::JustifyContent::SPACE_EVENLY)
 				YGNodeStyleSetJustifyContent(YogaNode, YGJustifySpaceEvenly);
 
-			if (AlignItems == Layout::AlignItems::FLEX_START)
+			if (style.AlignItems == Layout::AlignItems::FLEX_START)
 				YGNodeStyleSetAlignItems(YogaNode, YGAlignFlexStart);
-			else if (AlignItems == Layout::AlignItems::FLEX_END)
+			else if (style.AlignItems == Layout::AlignItems::FLEX_END)
 				YGNodeStyleSetAlignItems(YogaNode, YGAlignFlexEnd);
-			else if (AlignItems == Layout::AlignItems::CENTER)
+			else if (style.AlignItems == Layout::AlignItems::CENTER)
 				YGNodeStyleSetAlignItems(YogaNode, YGAlignCenter);
-			else if (AlignItems == Layout::AlignItems::BASELINE)
+			else if (style.AlignItems == Layout::AlignItems::BASELINE)
 				YGNodeStyleSetAlignItems(YogaNode, YGAlignBaseline);
-			else if (AlignItems == Layout::AlignItems::STRETCH)
+			else if (style.AlignItems == Layout::AlignItems::STRETCH)
 				YGNodeStyleSetAlignItems(YogaNode, YGAlignStretch);
 			//else if (AlignItems == Layout::AlignItems::AUTO)
 			//	YGNodeStyleSetAlignItems(YogaNode, YGAlignAuto);
 
-			if (AlignSelf == Layout::AlignItems::FLEX_START)
+			if (style.AlignSelf == Layout::AlignItems::FLEX_START)
 				YGNodeStyleSetAlignSelf(YogaNode, YGAlignFlexStart);
-			else if (AlignSelf == Layout::AlignItems::FLEX_END)
+			else if (style.AlignSelf == Layout::AlignItems::FLEX_END)
 				YGNodeStyleSetAlignSelf(YogaNode, YGAlignFlexEnd);
-			else if (AlignSelf == Layout::AlignItems::CENTER)
+			else if (style.AlignSelf == Layout::AlignItems::CENTER)
 				YGNodeStyleSetAlignSelf(YogaNode, YGAlignCenter);
-			else if (AlignSelf == Layout::AlignItems::BASELINE)
+			else if (style.AlignSelf == Layout::AlignItems::BASELINE)
 				YGNodeStyleSetAlignSelf(YogaNode, YGAlignBaseline);
-			else if (AlignSelf == Layout::AlignItems::STRETCH)
+			else if (style.AlignSelf == Layout::AlignItems::STRETCH)
 				YGNodeStyleSetAlignSelf(YogaNode, YGAlignStretch);
-			else if (AlignSelf == Layout::AlignItems::AUTO)
+			else if (style.AlignSelf == Layout::AlignItems::AUTO)
 				YGNodeStyleSetAlignSelf(YogaNode, YGAlignAuto);
 
-			if (AlignContent == Layout::AlignContent::FLEX_START)
+			if (style.AlignContent == Layout::AlignContent::FLEX_START)
 				YGNodeStyleSetAlignContent(YogaNode, YGAlignFlexStart);
-			else if (AlignContent == Layout::AlignContent::FLEX_END)
+			else if (style.AlignContent == Layout::AlignContent::FLEX_END)
 				YGNodeStyleSetAlignContent(YogaNode, YGAlignFlexEnd);
-			else if (AlignContent == Layout::AlignContent::CENTER)
+			else if (style.AlignContent == Layout::AlignContent::CENTER)
 				YGNodeStyleSetAlignContent(YogaNode, YGAlignCenter);
-			else if (AlignContent == Layout::AlignContent::STRETCH)
+			else if (style.AlignContent == Layout::AlignContent::STRETCH)
 				YGNodeStyleSetAlignContent(YogaNode, YGAlignStretch);
-			else if (AlignContent == Layout::AlignContent::SPACE_BETWEEN)
+			else if (style.AlignContent == Layout::AlignContent::SPACE_BETWEEN)
 				YGNodeStyleSetAlignContent(YogaNode, YGAlignSpaceBetween);
-			else if (AlignContent == Layout::AlignContent::SPACE_AROUND)
+			else if (style.AlignContent == Layout::AlignContent::SPACE_AROUND)
 				YGNodeStyleSetAlignContent(YogaNode, YGAlignSpaceAround);
 
-			if (PositionType == Layout::PositionType::RELATIVE)
+			if (style.PositionType == Layout::PositionType::RELATIVE)
 				YGNodeStyleSetPositionType(YogaNode, YGPositionTypeRelative);
-			else if (PositionType == Layout::PositionType::ABSOLUTE)
+			else if (style.PositionType == Layout::PositionType::ABSOLUTE)
 				YGNodeStyleSetPositionType(YogaNode, YGPositionTypeAbsolute);
 		}
 
 		void Draw(float z)
 		{
 			Renderer2D::UIShader->Bind();
-			Color color = this->BackgroundColor;
+			Color color = this->NormalStyle.BackgroundColor;
+			if(IsHover)
+				color = this->HoverStyle.BackgroundColor;
+
 			Renderer2D::UIShader->SetUniform4f("u_BackgroundColor",
 				color.r / 255.f,
 				color.g / 255.f,
@@ -417,7 +346,7 @@ namespace Nuake
 
 			//Logger::Log("Left: " + std::to_string(left) + " Top:" + std::to_string(top));
 			Renderer2D::UIShader->SetUniformMat4f("model", transform);
-			Renderer2D::UIShader->SetUniform1f("u_BorderRadius", Border.Left.Value);
+			Renderer2D::UIShader->SetUniform1f("u_BorderRadius", NormalStyle.Border.Left.Value);
 			Renderer2D::UIShader->SetUniform2f("u_Size", width, height);
 
 			Renderer2D::DrawRect();

Nuake/src/UI/Nodes/TextNode.h

@@ -14,12 +14,12 @@ namespace Nuake
 	{
 	public:
 		std::string content = "Hello World!";
-		TextStyle style;
+		TextStyle textStyle;
 
 
 		void SetTextStyle(TextStyle textStyle)
 		{
-			this->style = textStyle;
+			this->textStyle = textStyle;
 		}
 
 		void CalculateSize()
@@ -41,6 +41,10 @@ namespace Nuake
 			float parentTop = 0.0f;
 			auto parent = YGNodeGetParent(YogaNode);
 
+			float maxWidth = 0; 
+			if (parent)
+				maxWidth = YGNodeLayoutGetWidth(parent);
+
 			while (parent)
 			{
 				parentLeft += YGNodeLayoutGetLeft(parent);
@@ -62,8 +66,6 @@ namespace Nuake
 				//	height = parentHeight - YGNodeLayoutGetMargin(this->YogaNode, YGEdgeTop) - parentPaddingTop;
 			}
 
-
-
 			transform = glm::translate(transform, Vector3(left + parentLeft, top + parentTop, 0.f));
 			//transform = glm::scale(transform, Vector3(width, height, 1.0));
 			//Renderer2D::UIShader->Bind();
@@ -75,7 +77,7 @@ namespace Nuake
 
 			//Logger::Log("Left: " + std::to_string(left) + " Top:" + std::to_string(top));
 
-			Renderer2D::DrawString(content, style, transform);
+			Renderer2D::DrawString(content, textStyle, transform);
 			//Renderer2D::DrawString(content, style.font, Vector2(Position.Left, Position.Top), 2.0);
 		}
 	};

Nuake/src/UI/Styling/Style.h

@@ -4,6 +4,63 @@
 
 namespace Nuake
 {
+	namespace Layout
+	{
+		enum class LayoutDirection
+		{
+			LTR = 2, RTL = 3
+		};
+
+		enum class FlexWrap
+		{
+			NO_WRAP, WRAP, WRAP_REVERSED
+		};
+
+		enum class FlexDirection
+		{
+			ROW, COLUMN, ROW_REVERSED, COLUMN_REVERSED
+		};
+
+		enum class JustifyContent
+		{
+			FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND, SPACE_EVENLY
+		};
+
+		enum class AlignItems
+		{
+			STRETCH, FLEX_START, FLEX_END, CENTER, BASELINE, AUTO,
+		};
+
+		enum class AlignContent
+		{
+			FLEX_START, FLEX_END, STRETCH, CENTER, SPACE_BETWEEN, SPACE_AROUND
+		};
+
+		enum class PositionType
+		{
+			STATIC, RELATIVE, ABSOLUTE
+		};
+
+		enum Unit
+		{
+			PIXEL, PERCENT, AUTO
+		};
+
+		struct LayoutUnit
+		{
+			float Value = 0.0f;
+			Unit Unit = Unit::PIXEL;
+		};
+
+		struct LayoutVec4
+		{
+			LayoutUnit Top = LayoutUnit{ 0, PIXEL };
+			LayoutUnit Bottom = LayoutUnit{ 0, PIXEL };
+			LayoutUnit Left = LayoutUnit{ 0, PIXEL };
+			LayoutUnit Right = LayoutUnit{ 0, PIXEL };
+		};
+	}
+
 	enum class PropType
 	{
 		NONE, HEIGHT, MAX_HEIGHT, MIN_HEIGHT, WIDTH, MAX_WIDTH, MIN_WIDTH,
@@ -36,10 +93,18 @@ namespace Nuake
 		Value value;
 	};
 
+	enum class StyleGroupSelector
+	{
+		Normal,
+		Hover,
+		Active
+	};
+
 	class StyleGroup
 	{
 	public:
 		std::map<PropType, PropValue> Props;
+		StyleGroupSelector Selector;
 
 		StyleGroup()
 		{
@@ -81,8 +146,30 @@ namespace Nuake
 	};
 
 
-	class Style
+	struct Style
 	{
-
+		Layout::PositionType PositionType;
+		Layout::LayoutVec4 Position;
+		Layout::LayoutUnit Width;
+		Layout::LayoutUnit MaxWidth;
+		Layout::LayoutUnit MinWidth;
+		Layout::LayoutUnit Height; 
+		Layout::LayoutUnit MaxHeight;
+		Layout::LayoutUnit MinHeight;
+		Layout::LayoutVec4 Margin;
+		Layout::LayoutVec4 Padding;
+		Layout::LayoutVec4 Border;
+		Color BackgroundColor;
+		Layout::LayoutDirection Direction;
+		Layout::FlexDirection FlexDirection;
+		Layout::FlexWrap FlexWrap;
+		float FlexGrow;
+		float FlexShrink;
+		float FlexBasis;
+		float AspectRatio;
+		Layout::JustifyContent JustifyContent;
+		Layout::AlignItems AlignItems;
+		Layout::AlignItems AlignSelf;
+		Layout::AlignContent AlignContent;
 	};
 }

Nuake/src/UI/Styling/StyleSheetParser.cpp

@@ -1,6 +1,7 @@
 #include "StyleSheetParser.h"
 #include <regex>
 #include <src/Vendors/pugixml/pugixml.hpp>
+#include "src/Core/String.h"
 
 namespace Nuake
 {
@@ -57,6 +58,23 @@ namespace Nuake
 			};
 			break;
 		}
+		break;
+		case PropType::BACKGROUND_COLOR:
+			std::vector<std::string> splits = String::Split(str, ' ');
+
+			if (splits.size() == 4)
+			{
+				float r = String::ToFloat(splits[0]);
+				float g = String::ToFloat(splits[1]);
+				float b = String::ToFloat(splits[2]);
+				float a = String::ToFloat(splits[3]);
+				PropValue data = PropValue{
+					PropValueType::COLOR,
+					{0},
+				};
+				data.value.Color = Color(r, g, b, a);
+				return data;
+			}
 		}
 
 		return PropValue();

Nuake/src/UI/Styling/Stylesheet.h

@@ -7,7 +7,7 @@
 #include "../Nodes/Node.h"
 #include <src/UI/Styling/StyleSheetParser.h>
 #include <regex>
-#include <string>
+#include "src/Core/String.h"
 #include <map>
 
 namespace Nuake
@@ -23,20 +23,7 @@ namespace Nuake
 		public:
 			std::string Path;
 			static Ref<StyleSheet> New(const std::string& path);
-			std::vector<std::string> Split(std::string const& str, const char delim)
-			{
-				std::vector<std::string> result;
-				size_t start;
-				size_t end = 0;
 
-				while ((start = str.find_first_not_of(delim, end)) != std::string::npos)
-				{
-					end = str.find(delim, start);
-					result.push_back(str.substr(start, end - start));
-				}
-
-				return result;
-			}
 			void AddStyleGroup(std::string selector, Ref<StyleGroup> group)
 			{
 				Styles[selector] = group;
@@ -71,6 +58,7 @@ namespace Nuake
 				if (rule->type == KatanaRuleStyle)
 				{
 					Ref<StyleGroup> styleGroup = CreateRef<StyleGroup>();
+					styleGroup->Selector = StyleGroupSelector::Normal;
 
 					// Selectors
 					KatanaStyleRule* stylerule = (KatanaStyleRule*)rule;
@@ -79,6 +67,17 @@ namespace Nuake
 						KatanaSelector* selector = (KatanaSelector*)stylerule->selectors->data[j];
 						std::string name = selector->data->value;
 
+						KatanaPseudoType pseudo = KatanaPseudoUnknown;
+						if(selector->tagHistory)
+							pseudo = selector->tagHistory->pseudo;
+
+						// Special selectors
+						if (pseudo == KatanaPseudoHover)
+						{
+							name += ":hover";
+							styleGroup->Selector = StyleGroupSelector::Hover;
+						}
+						
 						AddStyleGroup(name, styleGroup);
 					}
 
@@ -102,7 +101,7 @@ namespace Nuake
 							std::smatch match_value;
 							Layout::LayoutVec4 result;
 
-							std::vector<std::string> splits = Split(value, ' ');
+							std::vector<std::string> splits = String::Split(value, ' ');
 							int idx = 0;
 							for (auto& s : splits)
 							{
@@ -239,11 +238,14 @@ namespace Nuake
 						{
 							type = PropType::FONT_SIZE;
 						}
+						if (name == "background-color")
+						{
+							type = PropType::BACKGROUND_COLOR;
+						}
+
 						if(type != PropType::NONE)
 							styleGroup->SetProp(type, StyleSheetParser::ParsePropType(value, type));
-						Logger::Log(declaration->property);
 					}
-					Logger::Log(rule->name);
 				}
 				return true;
 			}

Nuake/src/UI/UserInterface.cpp

@@ -9,12 +9,12 @@
 
 namespace Nuake {
 	namespace UI {
-		UserInterface::UserInterface(const std::string& name)
+		UserInterface::UserInterface(const std::string& name, const std::string& path)
 		{
 			m_Name = name;
 
-			font = FontLoader::LoadFont("resources/Fonts/RobotoMono-Regular.ttf");
-			Root = InterfaceParser::Parse("resources/Interface/Testing.interface");
+			font = FontLoader::LoadFont("resources/Fonts/OpenSans-Regular.ttf");
+			Root = InterfaceParser::Parse(path);
 
 			if (!Root)
 			{
@@ -23,6 +23,7 @@ namespace Nuake {
 
 			yoga_config = YGConfigNew();
 			yoga_config->useWebDefaults = true;
+
 			CreateYogaLayout();
 		}
 
@@ -46,9 +47,9 @@ namespace Nuake {
 			CreateYogaLayout();
 		}
 
-		Ref<UserInterface> UserInterface::New(const std::string& name)
+		Ref<UserInterface> UserInterface::New(const std::string& name, const std::string& path)
 		{
-			return CreateRef<UserInterface>(name);
+			return CreateRef<UserInterface>(name, path);
 		}
 
 		void UserInterface::Calculate(int available_width, int available_height)
@@ -63,17 +64,23 @@ namespace Nuake {
 			Root->YogaNode = yoga_root;
 
 			for (auto& g : Root->GetGroups())
-				if (Root->StyleSheet->HasStyleGroup(g))
-					Root->ApplyStyle(Root->StyleSheet->GetStyleGroup(g));
+			{
+				if (!Root->StyleSheet->HasStyleGroup(g))
+					continue;
+
+				Ref<StyleGroup> stylegroup = Root->StyleSheet->GetStyleGroup(g);
+				if(stylegroup->Selector == StyleGroupSelector::Normal)
+					Root->ApplyStyle(stylegroup);
+			}
 			Root->SetYogaLayout();
 			CreateYogaLayoutRecursive(Root, yoga_root);
 		}
 
-
 		void UserInterface::CreateYogaLayoutRecursive(Ref<Node> node, YGNodeRef yoga_node)
 		{
 			if (node->Childrens.size() > 0)
 				YGNodeCalculateLayout(yoga_node, YGNodeLayoutGetWidth(yoga_node), YGNodeLayoutGetHeight(yoga_node), YGDirectionLTR);
+			
 			int index = 0;
 			for (auto& n : node->Childrens)
 			{
@@ -81,8 +88,16 @@ namespace Nuake {
 				n->YogaNode = newYogaNode;
 
 				for (auto& g : n->GetGroups())
-					if (Root->StyleSheet->HasStyleGroup(g))
-						n->ApplyStyle(Root->StyleSheet->GetStyleGroup(g));
+				{
+					if (!Root->StyleSheet->HasStyleGroup(g))
+						continue;
+
+					Ref<StyleGroup> stylegroup = Root->StyleSheet->GetStyleGroup(g);
+					if (stylegroup->Selector == StyleGroupSelector::Normal)
+						n->ApplyStyle(stylegroup);
+				}
+
+				n->HoverStyle = n->NormalStyle;
 
 				n->SetYogaLayout();
 				YGNodeInsertChild(yoga_node, newYogaNode, index);
@@ -95,15 +110,7 @@ namespace Nuake {
 		{
 			Calculate(size.x, size.y);
 			Renderer2D::BeginDraw(size);
-
-			float leftOffset = YGNodeLayoutGetLeft(Root->YogaNode);
-			float topOffset = YGNodeLayoutGetTop(Root->YogaNode);
-
-			Vector2 charPos = Vector2(100.f, 100.f);
-			Char charr = font->GetChar(89);
-
 			DrawRecursive(Root, 0);
-			//Renderer2D::DrawChar(charr, font, charPos, size);
 		}
 
 		void UserInterface::DrawRecursive(Ref<Node> node, float z)
@@ -132,8 +139,33 @@ namespace Nuake {
 			{
 				ConsumeMouseClick(Input::GetMousePosition());
 			}
+
+			// Hover
+			RecursiveHover(Root, Input::GetMousePosition());
 		}
 
+		void UserInterface::RecursiveHover(Ref<Node> node, Vector2 pos)
+		{
+			for (auto& c : node->Childrens)
+			{
+				RecursiveHover(c, pos);
+
+				bool isHover = c->IsPositionInside(pos);
+				c->IsHover = isHover;
+				if (isHover)
+				{
+					for (auto& g : c->GetGroups())
+					{
+						if (!Root->StyleSheet->HasStyleGroup(g + ":hover"))
+							continue;
+
+						Ref<StyleGroup> stylegroup = Root->StyleSheet->GetStyleGroup(g + ":hover");
+						c->ApplyStyle(stylegroup, StyleGroupSelector::Hover);
+					}
+				}
+				c->SetYogaLayout();
+			}
+		}
 
 		void UserInterface::RecursiveMouseClick(Ref<Node> node, Vector2 pos)
 		{
@@ -142,13 +174,11 @@ namespace Nuake {
 				RecursiveMouseClick(c, pos);
 				if (c->IsPositionInside(pos) && c->OnClickSignature != "")
 					this->Root->Script->CallMethod(c->OnClickSignature);
-
 			}
 		}
 
 		void UserInterface::ConsumeMouseClick(Vector2 pos)
 		{
-
 			RecursiveMouseClick(Root, pos);
 		}
 	}

Nuake/src/UI/UserInterface.h

@@ -14,22 +14,28 @@ namespace Nuake {
 		class UserInterface
 		{
 		private:
-			Ref<FrameBuffer> m_Framebuffer; // Texture of the interface.
 			std::string m_Name;
+			std::string m_Path;
+
+			Ref<FrameBuffer> m_Framebuffer; // Texture of the interface.
+
 			Ref<Canvas> Root;
+
 			YGConfigRef yoga_config;
 			YGNodeRef yoga_root;
+
+			void RecursiveHover(Ref<Node> node, Vector2 pos);
 		public:
 			Ref<Font> font;
 			const int Width = 1920;
 			const int Height = 1080;
 
-			UserInterface(const std::string& name);
+			UserInterface(const std::string& name, const std::string& path);
 			~UserInterface();
 
 			void Reload();
 
-			static Ref<UserInterface> New(const std::string& name);
+			static Ref<UserInterface> New(const std::string& name, const std::string& path);
 			void Calculate(int available_width, int available_height);
 
 			void CreateYogaLayout();
@@ -38,6 +44,7 @@ namespace Nuake {
 			void DrawRecursive(Ref<Node> node, float z);
 			void Update(Timestep ts);
 
+			void RecursiveStyle(Ref<Node> node);
 			void RecursiveMouseClick(Ref<Node> node, Vector2 pos);
 
 			void ConsumeMouseClick(Vector2 pos);