examples.lua

local child_1 = { n = G.UIT.C, config = { id = "custom_1" } }
local child_2 = { n = G.UIT.C, config = { id = "custom_2" } }
local child_3 = { n = G.UIT.C, config = { id = "custom_3" } }
local child_4 = { n = G.UIT.C, config = { id = "custom_4" } }
local child_5 = { n = G.UIT.C, config = { id = "custom_4" } }
local child_6 = { n = G.UIT.C, config = { id = "custom_4" } }
local child_7 = { n = G.UIT.C, config = { id = "custom_4" } }
local child_8 = { n = G.UIT.C, config = { id = "custom_4" } }
local child_9 = { n = G.UIT.C, config = { id = "custom_4" } }
local child_10 = { n = G.UIT.C, config = { id = "custom_4" } }

-- Valid ways to define ROOT element

-- single argument, any type
-- as `n` can be key or value from G.UIT
PB({ n = G.UIT.ROOT, config = { colour = G.C.CLEAR }, nodes = { child_1, child_2 } })
PB({ n = "ROOT", config = { colour = G.C.CLEAR }, nodes = { child_1, child_2 } })
-- two arguments, any type
PB(G.UIT.ROOT, { config = { colour = G.C.CLEAR }, nodes = { child_1, child_2 } })
PB("ROOT", { config = { colour = G.C.CLEAR }, nodes = { child_1, child_2 } })
-- single argument, chosen type
PB.ROOT({ config = { colour = G.C.CLEAR }, nodes = { child_1, child_2 } })

-- adding children

-- vanilla way
PB.ROOT({ nodes = { child_1, child_2 } })
-- as array
PB.ROOT({ child_1, child_2 })
-- as array of arrays
PB.ROOT({ child_1, { child_2, child_3 }, child_4 })
-- multiple arguments, each argument extends previous
PB.ROOT({ child_1, child_2 }, { child_3, child_4 })
-- chained
PB.ROOT({ child_1, child_2 })({ child_3, child_4 })
-- combined (.nodes first, then rest)
PB.ROOT({ nodes = { child_1 }, child_2 })

-- extreme example: all listed examples for adding children
-- can be used at the same time in any order
PB.ROOT(
    {
        nodes = { child_1, child_2 },

        child_3,
        { child_4, child_5 },
        child_6
    },
    {
        nodes = { child_7 },
        child_8,
        { child_9 }
    }
)({
    child_10
})
-- result element will be equivavelt of this element
PB.ROOT({
    child_1,
    child_2,
    child_3,
    child_4,
    child_5,
    child_6,
    child_7,
    child_8,
    child_9,
    child_10,
})

-- adding config

-- vanilla way
PB.ROOT({ config = { colour = G.C.CLEAR, padding = 0.1 } })
-- simple way
PB.ROOT({ colour = G.C.CLEAR, padding = 0.1 })
-- multiple arguments, each argument extends previous
PB.ROOT({ colour = G.C.CLEAR }, { padding = 0.1 })
-- chained, each call extends previous
PB.ROOT({ colour = G.C.CLEAR })({ padding = 0.1 })
-- combined (.config first, then rest)
PB.ROOT({ config = { colour = G.C.CLEAR }, padding = 0.1 })

-- extreme example: all listed examples for adding config
-- can be used at the same time in any order
PB.ROOT(
    {
        config = { colour = G.C.CLEAR, outline_colour = G.C.WHITE },
        padding = 0.1,
    },
    { h = 3, w = 5, colour = G.C.BLACK }
)({
    config = { outline = 1, padding = 0.25 },
    align = "cm"
})
-- result element will be equivavelt of this element
PB.ROOT({
    colour = G.C.BLACK,
    outline = 1,
    outline_colour = G.C.WHITE,
    padding = 0.25,
    h = 3,
    w = 5,
    align = "cm"
})

-- practical examples
-- main way thing intented to be used

-- Simple layout
PB.ROOT({
    colour = G.C.CLEAR,
    outline = 1,
    outline_colour = G.C.WHITE,

    PB.C({
        align = "cm",

        PB.R({ colour = G.C.MULT }),
        PB.R({ colour = G.C.CHIPS }),
    }),
    PB.C({
        align = "cm",

        PB.R({ colour = G.C.ORANGE }),
        PB.R({ colour = G.C.GREEN }),
    })
})
-- Using lua syntax for function call with table
PB.ROOT{
    colour = G.C.CLEAR,
    PB.C{
        align = "cm",
        PB.R{ colour = G.C.MULT },
    },
    PB.C{
        align = "cm",
        PB.R{ colour = G.C.ORANGE },
    }
}

-- list of nodes which you generated
-- in some way via code
local my_nodes_list = { PB.C(), PB.C() }
local my_footer_element = PB.C()

-- Inserting nodes + additional elements after
PB.ROOT({ colour = G.C.CLEAR, my_nodes_list, my_footer_element })
-- or
PB.ROOT({ colour = G.C.CLEAR }, my_nodes_list, { my_footer_element })
-- or (less versatile, .nodes always go first)
PB.ROOT({ colour = G.C.CLEAR, nodes = my_nodes_list, my_footer_element })

--------

local card = SMODS.create_card({ key = "j_joker", area = cardarea })
cardarea:emplace(card)
local cardarea = CardArea(
    0, 0, G.CARD_W, G.CARD_H,
    { type = "title" }
)

-- Vanilla way
PB.ROOT({
	colour = G.C.CLEAR,

	PB.O({ object = cardarea }),
})
-- Short way, PB.O treat children as objects
PB.ROOT({
	colour = G.C.CLEAR,
    PB.O({ cardarea }),
})
-- Even shorter way: ROOT, R and C wraps
-- element in G.UIT.O if see Moveable
PB.ROOT({
	colour = G.C.CLEAR,
    cardarea
})

--------

-- In vanilla, this kind of UI is unpredictable
-- Don't do that!
PB.ROOT({
    PB.R(), PB.C(), PB.R(), PB.O(), PB.R(),
})
-- ROOT, R, C applies automatic fix for layout based on first child
-- Still, don't do that!
-- Example above will be converted to this.
-- First child is R so other elements will be converted to R too
-- O element behave similar to C in vanilla
PB.ROOT({
    PB.R(), PB.R{ PB.C() }, PB.R(), PB.R{ PB.O() }, PB.R(),
})

-- In this example...
PB.ROOT({
    PB.C(), PB.R(), PB.O(), PB.R(), PB.C()
})
-- First child is C so other elements will be converted to C too
-- O element behave similar to C in vanilla
PB.ROOT({
    PB.C(), PB.C{ PB.R() }, PB.O(), PB.C{ PB.R() }, PB.C(),
})