input, adding back examples
This commit is contained in:
Michael Freno
301
examples/03_theming_system.lua
Normal file
301
examples/03_theming_system.lua
Normal file
@@ -0,0 +1,301 @@
|
||||
--[[
|
||||
FlexLove Example 03: Theming System
|
||||
|
||||
This example demonstrates the theming system in FlexLove:
|
||||
- Loading and applying themes
|
||||
- Theme components (button, panel, card)
|
||||
- Theme states (normal, hover, pressed, disabled, active)
|
||||
- Theme colors and fonts
|
||||
|
||||
Run with: love /path/to/libs/examples/03_theming_system.lua
|
||||
]]
|
||||
|
||||
local Lv = love
|
||||
|
||||
local FlexLove = require("../FlexLove")
|
||||
local Gui = FlexLove.Gui
|
||||
local Color = FlexLove.Color
|
||||
local enums = FlexLove.enums
|
||||
|
||||
function Lv.load()
|
||||
Gui.init({
|
||||
baseScale = { width = 1920, height = 1080 }
|
||||
})
|
||||
|
||||
-- Load the space theme
|
||||
Gui.loadTheme("space", "../themes/space")
|
||||
|
||||
-- Title
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "2vh",
|
||||
width = "96vw",
|
||||
height = "6vh",
|
||||
text = "FlexLove Example 03: Theming System",
|
||||
textSize = "4vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- ========================================
|
||||
-- Section 1: Theme Components
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "10vh",
|
||||
width = "96vw",
|
||||
height = "3vh",
|
||||
text = "Theme Components - Space Theme",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
-- Card component
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "14vh",
|
||||
width = "30vw",
|
||||
height = "20vh",
|
||||
theme = "space",
|
||||
themeComponent = "card",
|
||||
text = "Card Component",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- Panel component
|
||||
Gui.new({
|
||||
x = "34vw",
|
||||
y = "14vh",
|
||||
width = "30vw",
|
||||
height = "20vh",
|
||||
theme = "space",
|
||||
themeComponent = "panel",
|
||||
text = "Panel Component",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- Panel red component
|
||||
Gui.new({
|
||||
x = "66vw",
|
||||
y = "14vh",
|
||||
width = "32vw",
|
||||
height = "20vh",
|
||||
theme = "space",
|
||||
themeComponent = "panelred",
|
||||
text = "Panel Red Component",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(1, 0.8, 0.8, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
})
|
||||
|
||||
-- ========================================
|
||||
-- Section 2: Button States
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "36vh",
|
||||
width = "96vw",
|
||||
height = "3vh",
|
||||
text = "Button States - Hover and Click to See State Changes",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
-- Normal button (hover to see hover state, click to see pressed state)
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "40vh",
|
||||
width = "22vw",
|
||||
height = "8vh",
|
||||
theme = "space",
|
||||
themeComponent = "button",
|
||||
text = "Normal Button",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
print("Normal button clicked!")
|
||||
end
|
||||
end,
|
||||
})
|
||||
|
||||
-- Active button (simulating active state)
|
||||
local activeButton = Gui.new({
|
||||
x = "26vw",
|
||||
y = "40vh",
|
||||
width = "22vw",
|
||||
height = "8vh",
|
||||
theme = "space",
|
||||
themeComponent = "button",
|
||||
text = "Active Button",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(0.3, 1, 0.3, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
active = true,
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
element.active = not element.active
|
||||
print("Active button toggled:", element.active)
|
||||
end
|
||||
end,
|
||||
})
|
||||
|
||||
-- Disabled button
|
||||
Gui.new({
|
||||
x = "50vw",
|
||||
y = "40vh",
|
||||
width = "22vw",
|
||||
height = "8vh",
|
||||
theme = "space",
|
||||
themeComponent = "button",
|
||||
text = "Disabled Button",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(0.5, 0.5, 0.5, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
disabled = true,
|
||||
callback = function(element, event)
|
||||
-- This won't be called because button is disabled
|
||||
print("This shouldn't print!")
|
||||
end,
|
||||
})
|
||||
|
||||
-- Button with callback feedback
|
||||
local clickCount = 0
|
||||
local counterButton = Gui.new({
|
||||
x = "74vw",
|
||||
y = "40vh",
|
||||
width = "24vw",
|
||||
height = "8vh",
|
||||
theme = "space",
|
||||
themeComponent = "button",
|
||||
text = "Click Me! (0)",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
callback = function(element, event)
|
||||
if event.type == "click" then
|
||||
clickCount = clickCount + 1
|
||||
element.text = "Click Me! (" .. clickCount .. ")"
|
||||
end
|
||||
end,
|
||||
})
|
||||
|
||||
-- ========================================
|
||||
-- Section 3: Theme Colors and Fonts
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "50vh",
|
||||
width = "96vw",
|
||||
height = "3vh",
|
||||
text = "Theme Colors and Fonts",
|
||||
textSize = "2.5vh",
|
||||
textColor = Color.new(0.9, 0.9, 0.9, 1),
|
||||
})
|
||||
|
||||
-- Container showing theme colors
|
||||
local colorContainer = Gui.new({
|
||||
x = "2vw",
|
||||
y = "54vh",
|
||||
width = "96vw",
|
||||
height = "20vh",
|
||||
positioning = enums.Positioning.FLEX,
|
||||
flexDirection = enums.FlexDirection.HORIZONTAL,
|
||||
justifyContent = enums.JustifyContent.SPACE_EVENLY,
|
||||
alignItems = enums.AlignItems.CENTER,
|
||||
backgroundColor = Color.new(0.1, 0.1, 0.15, 1),
|
||||
border = { top = true, right = true, bottom = true, left = true },
|
||||
borderColor = Color.new(0.3, 0.3, 0.4, 1),
|
||||
})
|
||||
|
||||
-- Primary color swatch
|
||||
Gui.new({
|
||||
parent = colorContainer,
|
||||
width = "20vw",
|
||||
height = "15vh",
|
||||
backgroundColor = Color.new(0.08, 0.75, 0.95, 1), -- Theme primary color
|
||||
text = "Primary Color",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(1, 1, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 5,
|
||||
})
|
||||
|
||||
-- Secondary color swatch
|
||||
Gui.new({
|
||||
parent = colorContainer,
|
||||
width = "20vw",
|
||||
height = "15vh",
|
||||
backgroundColor = Color.new(0.15, 0.20, 0.25, 1), -- Theme secondary color
|
||||
text = "Secondary Color",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 5,
|
||||
})
|
||||
|
||||
-- Text color swatch
|
||||
Gui.new({
|
||||
parent = colorContainer,
|
||||
width = "20vw",
|
||||
height = "15vh",
|
||||
backgroundColor = Color.new(0.2, 0.2, 0.25, 1),
|
||||
text = "Text Color",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(0.80, 0.90, 1.00, 1), -- Theme text color
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 5,
|
||||
})
|
||||
|
||||
-- Text dark color swatch
|
||||
Gui.new({
|
||||
parent = colorContainer,
|
||||
width = "20vw",
|
||||
height = "15vh",
|
||||
backgroundColor = Color.new(0.25, 0.25, 0.3, 1),
|
||||
text = "Text Dark Color",
|
||||
textSize = "2vh",
|
||||
textColor = Color.new(0.35, 0.40, 0.45, 1), -- Theme textDark color
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
cornerRadius = 5,
|
||||
})
|
||||
|
||||
-- ========================================
|
||||
-- Section 4: Font Family from Theme
|
||||
-- ========================================
|
||||
|
||||
Gui.new({
|
||||
x = "2vw",
|
||||
y = "76vh",
|
||||
width = "96vw",
|
||||
height = "18vh",
|
||||
theme = "space",
|
||||
themeComponent = "card",
|
||||
text = "This text uses the theme's default font (VT323)",
|
||||
textSize = "3vh",
|
||||
textColor = Color.new(0.8, 0.9, 1, 1),
|
||||
textAlign = enums.TextAlign.CENTER,
|
||||
fontFamily = "default", -- References theme font
|
||||
})
|
||||
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