Verse UI Logic/Flow Issue

[WayWARD8]

I’m attempting to draw some UI to the screen that will represent a shop window to buy upgrades.

To do so I call a function that draws UI (ShowShopUI); this function initialises three discrete arrays of type stack_box. Each element of these arrays represents an item card in the shop, comprising a string, icon, price and buy button.

Within ShowShopUI another function is called (CreateShopScreen). This function is passed the no initialised arrays and is responsible for adding the relvant content to a canvas and returning that canvas to be drawn on-screen.

Things work as expected when only a single array of item cards are passed to CreateShopScreen:

There is a section title, and two item cards.

However, when I attempt to add two further arrays of item cards, the flow/logic falls over and I’m just not sure why. Frustratingly, the titles of the sections work and are added in a vertical stack but all of the item cards are grouped together with the last array and appear beneath the last section, if that makes sense:

Can anyone help point me in the right direction to resolve this?

Code below:

shop_canvas := class():
    var ShopCanvas : canvas = canvas{}
    var OverlayContainer : overlay = overlay{}
    ShopBackgroundImage : texture_block = texture_block{DefaultImage := shop_background, DefaultDesiredSize := vector2{X:=1000.0, Y:=1100.0}}
    var RootStackbox : stack_box = stack_box {Orientation := orientation.Vertical}
    WhiteColor : color = MakeColorFromSRGB(1.0, 1.0, 1.0)

CreateShopScreen<public>(Stack_S0 : []stack_box, Stack_S1 : []stack_box, Stack_S2 : []stack_box, ShopManager : shop_manager, ShopLevelText : overlay) : canvas =
        
        # Build the entire UI
        ShopCanvas.AddWidget(canvas_slot{
            Widget := OverlayContainer,
            Anchors := anchors{Minimum := vector2{X := 0.5, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}},
            Offsets := margin{Left := 0.0, Top := 0.0, Right := 1000.0, Bottom := 1100.0},
            Alignment := vector2{X := 0.5, Y := 0.5},
            SizeToContent := false,
            ZOrder := 0
            })
        OverlayContainer.AddWidget(overlay_slot{
            Widget := ShopBackgroundImage,
            Padding := margin{Left := 0.0, Top := 0.0, Right := 0.0, Bottom := 0.0},
            HorizontalAlignment := horizontal_alignment.Fill,
            VerticalAlignment := vertical_alignment.Fill
            })

        RootStackbox.AddWidget(stack_box_slot{
            Widget := AddStackboxToUI(Stack_S0, "Section 0 Upgrades")#LevelStackbox0_Outer,
            Padding := margin{Left := 0.0, Top := 0.0, Right := 0.0, Bottom := 0.0}
            })

        # RootStackbox.AddWidget(stack_box_slot{
        #     Widget := AddStackboxToUI(Stack_S1, "Section 1 Upgrades")#LevelStackbox1_Outer,
        #     Padding := margin{Left := 0.0, Top := 0.0, Right := 0.0, Bottom := 0.0}
        #     })

        # RootStackbox.AddWidget(stack_box_slot{
        #     Widget := AddStackboxToUI(Stack_S2, "Section 2 Upgrades")#LevelStackbox2_Outer,
        #     Padding := margin{Left := 0.0, Top := 0.0, Right := 0.0, Bottom := 0.0}
        #     })

        OverlayContainer.AddWidget(overlay_slot{
            Widget := RootStackbox,
            Padding := margin{Left := 0.0, Top := 0.0, Right := 0.0, Bottom := 0.0},
            HorizontalAlignment := horizontal_alignment.Center,
            VerticalAlignment := vertical_alignment.Center 
        })
        # Exit button
        ExitButton := button_quiet {DefaultText := StringToMessage("Exit")}
        OverlayContainer.AddWidget(overlay_slot{
                Widget := ExitButton,
                Padding := margin{Left := 0.0, Top := 30.0, Right := 30.0, Bottom := 0.0},
                HorizontalAlignment := horizontal_alignment.Right,
                VerticalAlignment := vertical_alignment.Top
            })
        # Button subscriptions
        ExitButton.OnClick().Subscribe(ExitShop)
        return ShopCanvas

AddStackboxToUI(Stackbox : []stack_box, SectionString : string) : stack_box =
    var LevelStackbox : stack_box = stack_box{Orientation := orientation.Vertical}
    var LevelStackbox_Inner : stack_box = stack_box{Orientation := orientation.Horizontal}

    for (Index -> ItemStackbox : Stackbox):
        LevelStackbox_Inner.AddWidget(stack_box_slot{
            Widget := ItemStackbox,
            Padding := margin{Left := 20.0, Top := 10.0, Right := 20.0, Bottom := 10.0},
            HorizontalAlignment := horizontal_alignment.Center,
            VerticalAlignment := vertical_alignment.Center
        })

    LevelStackbox.AddWidget(stack_box_slot{
        Widget := text_block{ DefaultText := StringToMessage(SectionString), DefaultTextColor := WhiteColor},
        Padding := margin{Left := 0.0, Top := 15.0, Right := 0.0, Bottom := 15.0},
        HorizontalAlignment := horizontal_alignment.Center,
        VerticalAlignment := vertical_alignment.Center
    })

    LevelStackbox.AddWidget(stack_box_slot{
        Widget := LevelStackbox_Inner,
        Padding := margin{Left := 0.0, Top := 0.0, Right := 0.0, Bottom := 0.0}
    })

    return LevelStackbox

[Hicsy]

Weird. Hopefully someone else can see what it happening better than myself…

I wonder if it’s flattening the 2x sequential layers of vertical stackbox when adding the RootStackbox slots to OverlayContainer.
Maybe it’s threading the function calls?

---

Perhaps first just try shifting the 3x RootStackbox.AddWidget() calls until after all 3x OverlayContainer.AddWidget() calls?
(so the root is already on the canvas overlay BEFORE adding your sections to it)

---

Otherwise, i’d next try manually wrapping each section in their own horizontal:

# Maybe try manually wrapping each call within their own Horiz box?:
OverlayContainer.AddWidget:
    stack_box:
        Orientation := orientation.Horizontal
        Slots := array:
            stack_box_slot:
                Widget := AddStackboxToUI(S0|S1|S2,"...")