Added background elements to grid row and column

5 files changed, 59 insertions, 20 deletions

diff --git a/engine/Dynamic/Descriptors/UIElement.go b/engine/Dynamic/Descriptors/UIElement.go
index 0e59c9a..616d001 100644
--- a/engine/Dynamic/Descriptors/UIElement.go
+++ b/engine/Dynamic/Descriptors/UIElement.go
@@ -67,22 +67,12 @@ func parseAsLabel(base *UIElementDescriptor) ui.UIElement {
 		alignment = ui.Start
 	}
 
-	var child ui.UIElement = nil
-	if base.BackgroundElement != nil {
-		var parsed, err = base.BackgroundElement.Parse()
-		if err == nil {
-			child = parsed
-		} else {
-			rl.TraceLog(rl.LogWarning, "Failed to parse a background element of a label: %v", err.Error())
-		}
-	}
-
 	return &ui.Label {
 		Weight: base.Weight,
 		Text: base.Text,
 		Alignment: alignment,
 		Style: base.Style.Parse(),
-		BackgroundElement: child,
+		BackgroundElement: base.getBackgroundElement(),
 	}
 }
 
@@ -91,6 +81,7 @@ func parseAsGridRow(base *UIElementDescriptor) ui.UIElement {
 		Weight: base.Weight,
 		Spacing: base.Spacing,
 		Style: base.Style.Parse(),
+		BackgroundElement: base.getBackgroundElement(),
 		Objects: make([]ui.UIElement, 0, len(base.Children)),
 	}
 	for _, v := range base.Children {
@@ -109,6 +100,7 @@ func parseAsGridColumn(base *UIElementDescriptor) ui.UIElement {
 		Weight: base.Weight,
 		Spacing: base.Spacing,
 		Style: base.Style.Parse(),
+		BackgroundElement: base.getBackgroundElement(),
 		Objects: make([]ui.UIElement, 0, len(base.Children)),
 	}
 	for _, v := range base.Children {
@@ -135,3 +127,16 @@ func parseAsImage(base *UIElementDescriptor) ui.UIElement {
 	}
 	return &outp
 }
+
+func (base *UIElementDescriptor) getBackgroundElement() ui.UIElement {
+	var child ui.UIElement = nil
+	if base.BackgroundElement != nil {
+		var parsed, err = base.BackgroundElement.Parse()
+		if err == nil {
+			child = parsed
+		} else {
+			rl.TraceLog(rl.LogWarning, "Failed to parse a background element of a label: %v", err.Error())
+		}
+	}
+	return child
+}
diff --git a/engine/UI/GridColumn.go b/engine/UI/GridColumn.go
index 46c12ad..42c1eed 100644
--- a/engine/UI/GridColumn.go
+++ b/engine/UI/GridColumn.go
@@ -13,6 +13,7 @@ type GridColumn struct {
 	Spacing float32
 	// Styling preferences
 	Style Style `json:"-"`
+	BackgroundElement UIElement
 
 	location rl.Rectangle
 	cache layoutCache
@@ -26,6 +27,18 @@ func (base *GridColumn) Init(parent *Menu) {
 	base.cache = layoutCache {
 		ScreenResolution: rl.Vector2{ X:0, Y:0 },
 	}
+
+	if base.BackgroundElement != nil {
+		base.BackgroundElement.Init(parent)
+	}
+}
+
+func (base *GridColumn) GetStyle() *Style {
+	return &base.Style
+}
+
+func (base *GridColumn) GetBackgroundElement() UIElement {
+	return base.BackgroundElement
 }
 
 func (base *GridColumn) Destroy() {
@@ -41,6 +54,7 @@ func (base *GridColumn) Draw(span *rl.Rectangle) {
 	if !base.cache.IsValid() {
 		base.RecalculateCache(span)
 	}
+	drawStackedElementBackground(base, span)
 	for i, v := range base.Objects {
 		var offset = base.cache.RowLocations[i]
 		// rl.TraceLog(rl.LogInfo, "Cache: %v", base.cache)
diff --git a/engine/UI/GridRow.go b/engine/UI/GridRow.go
index 58d834d..3b6d90d 100644
--- a/engine/UI/GridRow.go
+++ b/engine/UI/GridRow.go
@@ -18,9 +18,10 @@ type GridRow struct {
 	Spacing float32
 	// Styling preferences
 	Style Style `json:"-"`
+	BackgroundElement UIElement
 
 	location rl.Rectangle
-	cache layoutCache
+	cache *layoutCache
 }
 
 func (base *GridRow) GetElements() []UIElement {
@@ -36,14 +37,26 @@ func (base *GridRow) Init(parent *Menu) {
 	for _, v := range base.Objects {
 		v.Init(parent)
 	}
-	base.cache = layoutCache {
+	base.cache = &layoutCache {
 		ScreenResolution: rl.Vector2{ X:0, Y:0 },
 	}
+
+	if base.BackgroundElement != nil {
+		base.BackgroundElement.Init(parent)
+	}
 }
 
 func (base *GridRow) Destroy() {
 }
 
+func (base *GridRow) GetStyle() *Style {
+	return &base.Style
+}
+
+func (base *GridRow) GetBackgroundElement() UIElement {
+	return base.BackgroundElement
+}
+
 // Gets the scale width of the element. Works similar to CSS's 'flex-grow'
 func (base *GridRow) GetOccupationWeight() float32 {
 	return base.Weight
@@ -54,6 +67,7 @@ func (base *GridRow) Draw(span *rl.Rectangle) {
 	if !base.cache.IsValid() {
 		base.RecalculateCache(span)
 	}
+	drawStackedElementBackground(base, span)
 	for i, v := range base.Objects {
 		var offset = base.cache.RowLocations[i]
 		// rl.TraceLog(rl.LogInfo, "Cache: %v", base.cache)
diff --git a/engine/UI/Label.go b/engine/UI/Label.go
index 64bb8d0..53157d9 100644
--- a/engine/UI/Label.go
+++ b/engine/UI/Label.go
@@ -53,10 +53,6 @@ func (base *Label) Init(menu *Menu) {
 func (base *Label) Destroy() {
 }
 
-func (base *Label) GetBackgroundElement() UIElement {
-	return base.BackgroundElement
-}
-
 func (base *Label) GetOccupationWeight() float32 {
 	return base.Weight
 }
@@ -80,6 +76,10 @@ func (base *Label) GetStyle() *Style {
 	return &base.Style
 }
 
+func (base *Label) GetBackgroundElement() UIElement {
+	return base.BackgroundElement
+}
+
 // Returns the size of the text that will not overflow in the side
 func (base *Label) getTextHeight(position *rl.Rectangle) int32 {
 	var width = position.Width - 2 * *base.Style.Padding
diff --git a/packages/Core/Menus/MainMenu.json b/packages/Core/Menus/MainMenu.json
index 9054627..5c5d896 100644
--- a/packages/Core/Menus/MainMenu.json
+++ b/packages/Core/Menus/MainMenu.json
@@ -1,8 +1,10 @@
 {
-    "PaddingX": 0.05,
-    "PaddingY": 0.1,
     "Contents": {
         "Type": "gridrow",
+        "Style": {
+            "BackgroundColor": "#f0aa00",
+            "Padding": 0.01
+        },
         "Children": [
             {
                 "Type": "void",
@@ -12,10 +14,14 @@
                 "Type": "gridcolumn",
                 "Weight": 1,
                 "Spacing": 0.01,
+                "Style": {
+                    "BackgroundColor": "#f00000",
+                    "Padding": 0.01
+                },
                 "Children": [
                     {
                         "Type": "label",
-                        "Text": "Ruines of Rafdalon",
+                        "Text": "Ruines of Rafdolon",
                         "BackgroundElement": {
                             "Type": "image",
                             "TextureName": "testPackage/water.png"