input, adding back examples
This commit is contained in:
Michael Freno
274
examples/13_comprehensive_demo.lua
Normal file
274
examples/13_comprehensive_demo.lua
Normal file
@@ -0,0 +1,274 @@
|
||||
--[[
|
||||
FlexLove Example 13: Comprehensive Demo
|
||||
|
||||
This example combines multiple FlexLove features into a polished demo:
|
||||
- Flex and grid layouts
|
||||
- Themed components
|
||||
- Animations
|
||||
- Event handling
|
||||
- Responsive design
|
||||
|
||||
Run with: love /path/to/libs/examples/13_comprehensive_demo.lua
|
||||
]]
|
||||
|
||||
local Lv = love
|
||||
|
||||
local FlexLove = require("../FlexLove")
|
||||
local Gui = FlexLove.Gui
|
||||
local Color = FlexLove.Color
|
||||
local Animation = FlexLove.Animation
|
||||
local enums = FlexLove.enums
|
||||
|
||||
function Lv.load()
|
||||
Gui.init({
|
||||
baseScale = { width = 1920, height = 1080 },
|
||||
theme = "space"
|
||||
})
|
||||
|
||||
-- Header
|
||||
local header = Gui.new({
|
||||
x = 0,
|
||||
y = 0,
|
||||
width = "100vw",
|
||||
height = "12vh",
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.HORIZONTAL,
|
||||
justifyContent = enums.JustifyContent.SPACE_BETWEEN,
|
||||
alignItems = enums.AlignItems.CENTER,
|
||||
backgroundColor = Color.new(0.1, 0.1, 0.15, 1),
|
||||
padding = { top = 10, right = 20, bottom = 10, left = 20 },
|
||||
border = { bottom = true },
|
||||
borderColor = Color.new(0.3, 0.3, 0.4, 1),
|
||||
})
|
||||
|
||||
-- Logo/Title
|
||||
Gui.new({
|
||||
parent = header,
|
||||
width = "auto",
|
||||
height = "auto",
|
||||
text = "FlexLove Demo",
|
||||
textSize = "4vh",
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
})
|
||||
|
||||
-- Header buttons
|
||||
local headerButtons = Gui.new({
|
||||
parent = header,
|
||||
width = "auto",
|
||||
height = "auto",
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.HORIZONTAL,
|
||||
gap = 10,
|
||||
})
|
||||
|
||||
local buttonNames = { "Home", "Features", "About" }
|
||||
for _, name in ipairs(buttonNames) do
|
||||
Gui.new({
|
||||
parent = headerButtons,
|
||||
width = "8vw",
|
||||
height = "6vh",
|
||||
backgroundColor = Color.new(0.3, 0.4, 0.6, 1),
|
||||
text = name,
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 5,
|
||||
themeComponent = "button",
|
||||
})
|
||||
end
|
||||
|
||||
-- Main content area
|
||||
local mainContent = Gui.new({
|
||||
x = 0,
|
||||
y = "12vh",
|
||||
width = "100vw",
|
||||
height = "88vh",
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.HORIZONTAL,
|
||||
backgroundColor = Color.new(0.05, 0.05, 0.08, 1),
|
||||
})
|
||||
|
||||
-- Sidebar
|
||||
local sidebar = Gui.new({
|
||||
parent = mainContent,
|
||||
width = "20vw",
|
||||
height = "88vh",
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.VERTICAL,
|
||||
backgroundColor = Color.new(0.08, 0.08, 0.12, 1),
|
||||
padding = { top = 20, right = 10, bottom = 20, left = 10 },
|
||||
gap = 10,
|
||||
border = { right = true },
|
||||
borderColor = Color.new(0.2, 0.2, 0.3, 1),
|
||||
})
|
||||
|
||||
-- Sidebar menu items
|
||||
local menuItems = {
|
||||
{ icon = "◆", label = "Dashboard" },
|
||||
{ icon = "◇", label = "Analytics" },
|
||||
{ icon = "○", label = "Settings" },
|
||||
{ icon = "□", label = "Profile" },
|
||||
{ icon = "△", label = "Help" },
|
||||
}
|
||||
|
||||
for _, item in ipairs(menuItems) do
|
||||
local menuButton = Gui.new({
|
||||
parent = sidebar,
|
||||
width = "auto",
|
||||
height = "7vh",
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.HORIZONTAL,
|
||||
alignItems = enums.AlignItems.CENTER,
|
||||
backgroundColor = Color.new(0.15, 0.15, 0.2, 1),
|
||||
padding = { top = 10, right = 15, bottom = 10, left = 15 },
|
||||
cornerRadius = 5,
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = menuButton,
|
||||
width = "auto",
|
||||
height = "auto",
|
||||
text = item.icon .. " " .. item.label,
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
end
|
||||
|
||||
-- Content panel
|
||||
local contentPanel = Gui.new({
|
||||
parent = mainContent,
|
||||
width = "80vw",
|
||||
height = "88vh",
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.VERTICAL,
|
||||
padding = { top = 20, right = 20, bottom = 20, left = 20 },
|
||||
gap = 15,
|
||||
})
|
||||
|
||||
-- Welcome section
|
||||
Gui.new({
|
||||
parent = contentPanel,
|
||||
width = "auto",
|
||||
height = "auto",
|
||||
text = "Welcome to FlexLove!",
|
||||
textSize = "3.5vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
})
|
||||
|
||||
-- Stats grid
|
||||
local statsGrid = Gui.new({
|
||||
parent = contentPanel,
|
||||
width = "auto",
|
||||
height = "20vh",
|
||||
positioning = enums.Positioning.GRID,
|
||||
gridRows = 1,
|
||||
gridColumns = 4,
|
||||
columnGap = 15,
|
||||
})
|
||||
|
||||
local stats = {
|
||||
{ label = "Projects", value = "24", color = Color.new(0.3, 0.6, 0.8, 1) },
|
||||
{ label = "Users", value = "1.2K", color = Color.new(0.6, 0.3, 0.8, 1) },
|
||||
{ label = "Revenue", value = "$45K", color = Color.new(0.8, 0.6, 0.3, 1) },
|
||||
{ label = "Growth", value = "+12%", color = Color.new(0.3, 0.8, 0.6, 1) },
|
||||
}
|
||||
|
||||
for _, stat in ipairs(stats) do
|
||||
local statCard = Gui.new({
|
||||
parent = statsGrid,
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.VERTICAL,
|
||||
justifyContent = enums.JustifyContent.CENTER,
|
||||
alignItems = enums.AlignItems.CENTER,
|
||||
backgroundColor = stat.color,
|
||||
cornerRadius = 8,
|
||||
padding = { top = 15, right = 15, bottom = 15, left = 15 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = statCard,
|
||||
width = "auto",
|
||||
height = "auto",
|
||||
text = stat.value,
|
||||
textSize = "4vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = statCard,
|
||||
width = "auto",
|
||||
height = "auto",
|
||||
text = stat.label,
|
||||
textSize = "1.8vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
end
|
||||
|
||||
-- Feature cards
|
||||
local cardsContainer = Gui.new({
|
||||
parent = contentPanel,
|
||||
width = "auto",
|
||||
height = "auto",
|
||||
positioning = enums.Positioning.GRID,
|
||||
gridRows = 2,
|
||||
gridColumns = 3,
|
||||
rowGap = 15,
|
||||
columnGap = 15,
|
||||
})
|
||||
|
||||
local features = {
|
||||
"Flexbox Layout",
|
||||
"Grid System",
|
||||
"Theming",
|
||||
"Animations",
|
||||
"Events",
|
||||
"Responsive"
|
||||
}
|
||||
|
||||
for i, feature in ipairs(features) do
|
||||
local card = Gui.new({
|
||||
parent = cardsContainer,
|
||||
positioning = enums.Positioning.FLEX,
|
||||
justifyContent = enums.JustifyContent.CENTER,
|
||||
alignItems = enums.AlignItems.CENTER,
|
||||
backgroundColor = Color.new(0.15, 0.15, 0.2, 1),
|
||||
cornerRadius = 10,
|
||||
padding = { top = 20, right = 20, bottom = 20, left = 20 },
|
||||
})
|
||||
|
||||
Gui.new({
|
||||
parent = card,
|
||||
width = "auto",
|
||||
height = "auto",
|
||||
text = feature,
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- Add hover animation
|
||||
card.callback = function(element)
|
||||
local anim = Animation.new({
|
||||
duration = 0.2,
|
||||
start = { opacity = 1 },
|
||||
final = { opacity = 0.8 },
|
||||
})
|
||||
anim:apply(element)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
function Lv.update(dt)
|
||||
Gui.update(dt)
|
||||
end
|
||||
|
||||
function Lv.draw()
|
||||
Lv.graphics.clear(0.05, 0.05, 0.08, 1)
|
||||
Gui.draw()
|
||||
end
|
||||
|
||||
function Lv.resize(w, h)
|
||||
Gui.resize(w, h)
|
||||
end
|
||||
Reference in New Issue
Block a user