Using panels

Panels are special components which can hold other components. In GÖÖi, a Panel and Layout are pretty much the same because we need the first one to access the second one.

• Grid layout
• Game layout
• Functions

#Grid layout

Note:

• It's a 4x4 grid layout
• in 1,1 (row 1, column 1) there's a rowspan = 2
• in 4,3 there's a colspan = 2

The actual code would be this:

require "gooi"
function love.load()
    panelGrid = gooi.newPanel({
        x  = 0,
        y = 0,
        w = 430,
        h = 150,
        layout = "grid 4x4"
    })
    panelGrid:setRowspan(1, 1, 2)
    panelGrid:setColspan(4, 3, 2)
    panelGrid:add(
        gooi.newButton({text = "Fat Button"}),
        gooi.newButton({text = "Button 1"}),
        gooi.newButton({text = "Button 2"}),
        gooi.newButton({text = "Button 3"}),
        gooi.newButton({text = "Button X"}),
        gooi.newButton({text = "Button Y"}),
        gooi.newButton({text = "Button Z"}),
        gooi.newButton({text = "Button ."}),
        gooi.newButton({text = "Button .."}),
        gooi.newButton({text = "Button ..."}),
        gooi.newButton({text = "Button ...."}),
        gooi.newButton({text = "Last Button"}),
        gooi.newCheck ({text = "Check 1"}),
        gooi.newCheck ({text = "Large Check"})
    )
end
function love.draw()
    gooi.draw()
end
function love.mousepressed(x, y, button)  gooi.pressed() end
function love.mousereleased(x, y, button) gooi.released() end

#Game layout

This layout was made for "in game" GUI's, so you can easily put components in "top-right", "bottom-left" and so on.

Code:

require "gooi"
function love.load()
	panelGrid = gooi.newPanel(0, 0, 380, 300, "game")
	panelGrid:add(gooi.newLabel("Score: 999999"), "t-l")
	panelGrid:add(gooi.newBar(),                  "t-r")
	panelGrid:add(gooi.newJoy({size = 70}),       "b-l")
	panelGrid:add(gooi.newButton("Action 1"),     "b-r")
	panelGrid:add(gooi.newButton("Action 2"),     "b-r")
end
function love.draw()
	gooi.draw()
end
function love.mousepressed(x, y, button)  gooi.pressed() end
function love.mousereleased(x, y, button) gooi.released() end

#Functions

• add(component[,string]) ➤ it adds a new component to the panel (the string is for game layout and it can be "t-l", "t-r", "b-l" or "b-r")
• debug() ➤ Shows the grid structure for grid layouts
• setRowspan(number, number, number) ➤ It sets the rowspan on the given row and column, the order is row, column, span (grid only)
• setColspan(number, number, number) ➤ Yeah, the same