FlexLove/examples/SimpleGrid.lua

-- Example demonstrating the simplified grid layout system
-- Shows how to create grids with simple row/column counts

package.path = package.path .. ";?.lua"
require("testing/loveStub")
local FlexLove = require("FlexLove")
local Gui = FlexLove.GUI
local Color = FlexLove.Color
local enums = FlexLove.enums

print("=== Simplified Grid Layout Examples ===\n")

-- Example 1: Simple 3x2 grid
print("1. Simple 3x2 Grid")
print("   Grid with 3 columns and 2 rows")

local grid1 = Gui.new({
  x = 50,
  y = 50,
  width = 600,
  height = 400,
  positioning = enums.Positioning.GRID,
  gridRows = 2,
  gridColumns = 3,
  columnGap = 10,
  rowGap = 10,
  background = Color.new(0.9, 0.9, 0.9, 1),
  padding = { horizontal = 20, vertical = 20 },
})

-- Add grid items - they auto-tile in order
for i = 1, 6 do
  Gui.new({
    parent = grid1,
    background = Color.new(0.2, 0.5, 0.8, 1),
    text = "Item " .. i,
    textColor = Color.new(1, 1, 1, 1),
    textAlign = enums.TextAlign.CENTER,
  })
end

print("   Grid container: 600x400, 3 columns, 2 rows")
print("   Column gap: 10px, Row gap: 10px")
print("   Items: 6 items auto-tiled in order\n")

-- Example 2: Square grid (4x4)
print("2. Square Grid (4x4)")
print("   Perfect for icon grids or game boards")

Gui.destroy()
local grid2 = Gui.new({
  x = 50,
  y = 50,
  width = 400,
  height = 400,
  positioning = enums.Positioning.GRID,
  gridRows = 4,
  gridColumns = 4,
  columnGap = 5,
  rowGap = 5,
  background = Color.new(0.9, 0.9, 0.9, 1),
  padding = { horizontal = 10, vertical = 10 },
})

for i = 1, 16 do
  Gui.new({
    parent = grid2,
    background = Color.new(0.3, 0.6, 0.3, 1),
    text = tostring(i),
    textColor = Color.new(1, 1, 1, 1),
    textAlign = enums.TextAlign.CENTER,
  })
end

print("   16 items in a 4x4 grid")
print("   Each cell is equal size\n")

-- Example 3: Horizontal strip (1 row, multiple columns)
print("3. Horizontal Strip")
print("   Single row with multiple columns")

Gui.destroy()
local grid3 = Gui.new({
  x = 50,
  y = 50,
  width = 800,
  height = 100,
  positioning = enums.Positioning.GRID,
  gridRows = 1,
  gridColumns = 5,
  columnGap = 10,
  rowGap = 0,
  background = Color.new(0.9, 0.9, 0.9, 1),
  padding = { horizontal = 10, vertical = 10 },
})

local labels = { "Home", "Products", "About", "Contact", "Login" }
for i = 1, 5 do
  Gui.new({
    parent = grid3,
    background = Color.new(0.3, 0.3, 0.8, 1),
    text = labels[i],
    textColor = Color.new(1, 1, 1, 1),
    textAlign = enums.TextAlign.CENTER,
  })
end

print("   Perfect for navigation bars\n")

-- Example 4: Vertical strip (multiple rows, 1 column)
print("4. Vertical Strip")
print("   Single column with multiple rows")

Gui.destroy()
local grid4 = Gui.new({
  x = 50,
  y = 50,
  width = 200,
  height = 500,
  positioning = enums.Positioning.GRID,
  gridRows = 5,
  gridColumns = 1,
  columnGap = 0,
  rowGap = 10,
  background = Color.new(0.9, 0.9, 0.9, 1),
  padding = { horizontal = 10, vertical = 10 },
})

for i = 1, 5 do
  Gui.new({
    parent = grid4,
    background = Color.new(0.5, 0.3, 0.7, 1),
    text = "Option " .. i,
    textColor = Color.new(1, 1, 1, 1),
    textAlign = enums.TextAlign.CENTER,
  })
end

print("   Perfect for sidebar menus\n")

-- Example 5: Nested grids
print("5. Nested Grids")
print("   Grid containers within grid cells")

Gui.destroy()
local outerGrid = Gui.new({
  x = 50,
  y = 50,
  width = 600,
  height = 400,
  positioning = enums.Positioning.GRID,
  gridRows = 2,
  gridColumns = 2,
  columnGap = 10,
  rowGap = 10,
  background = Color.new(0.85, 0.85, 0.85, 1),
  padding = { horizontal = 10, vertical = 10 },
})

-- Top-left: Simple item
Gui.new({
  parent = outerGrid,
  background = Color.new(0.5, 0.3, 0.7, 1),
  text = "Single Item",
  textColor = Color.new(1, 1, 1, 1),
  textAlign = enums.TextAlign.CENTER,
})

-- Top-right: Nested 2x2 grid
local nestedGrid1 = Gui.new({
  parent = outerGrid,
  positioning = enums.Positioning.GRID,
  gridRows = 2,
  gridColumns = 2,
  columnGap = 5,
  rowGap = 5,
  background = Color.new(0.7, 0.7, 0.7, 1),
  padding = { horizontal = 5, vertical = 5 },
})

for i = 1, 4 do
  Gui.new({
    parent = nestedGrid1,
    background = Color.new(0.3, 0.6, 0.9, 1),
    text = "A" .. i,
    textColor = Color.new(1, 1, 1, 1),
    textAlign = enums.TextAlign.CENTER,
  })
end

-- Bottom-left: Nested 1x3 grid
local nestedGrid2 = Gui.new({
  parent = outerGrid,
  positioning = enums.Positioning.GRID,
  gridRows = 1,
  gridColumns = 3,
  columnGap = 5,
  rowGap = 5,
  background = Color.new(0.7, 0.7, 0.7, 1),
  padding = { horizontal = 5, vertical = 5 },
})

for i = 1, 3 do
  Gui.new({
    parent = nestedGrid2,
    background = Color.new(0.9, 0.6, 0.3, 1),
    text = "B" .. i,
    textColor = Color.new(1, 1, 1, 1),
    textAlign = enums.TextAlign.CENTER,
  })
end

-- Bottom-right: Another simple item
Gui.new({
  parent = outerGrid,
  background = Color.new(0.3, 0.7, 0.5, 1),
  text = "Another Item",
  textColor = Color.new(1, 1, 1, 1),
  textAlign = enums.TextAlign.CENTER,
})

print("   Outer grid: 2x2 layout")
print("   Top-right: 2x2 nested grid")
print("   Bottom-left: 1x3 nested grid\n")

print("=== Summary ===")
print("The simplified grid system provides:")
print("• Simple API: Just set gridRows and gridColumns")
print("• Auto-tiling: Children are placed in order automatically")
print("• Equal sizing: All cells are equal size")
print("• Gaps: Use columnGap and rowGap for spacing")
print("• Stretch: Children stretch to fill cells by default")
print("• Nesting: Grids can contain other grids")
print("\nNo need for complex track definitions, explicit placement, or spans!")

Gui.destroy()