Mike/FlexLove
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Michael Freno
2025-11-13 09:33:49 -05:00
parent e61fb91cac
commit de2d5541ea
1 changed files with 36 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
README.md
View File

@@ -34,7 +34,6 @@ Add the `modules` directory and `FlexLove.lua` into your project and require it:
```lua ```lua
local FlexLove = require("FlexLove") local FlexLove = require("FlexLove")
local Gui = FlexLove.Gui
local Color = FlexLove.Color local Color = FlexLove.Color
``` ```
@@ -44,14 +43,14 @@ local Color = FlexLove.Color
local FlexLove = require("FlexLove") local FlexLove = require("FlexLove")
-- Initialize with base scaling and theme -- Initialize with base scaling and theme
FlexLove.Gui.init({ FlexLove.init({
baseScale = { width = 1920, height = 1080 }, baseScale = { width = 1920, height = 1080 },
theme = "space" theme = "space"
immediateMode = true -- Optional: enable immediate mode (default: false) immediateMode = true -- Optional: enable immediate mode (default: false)
}) })
-- Create a button with flexbox layout -- Create a button with flexbox layout
local button = FlexLove.Element.new({ local button = FlexLove.new({
width = "20vw", width = "20vw",
height = "10vh", height = "10vh",
backgroundColor = FlexLove.Color.new(0.2, 0.2, 0.8, 1), backgroundColor = FlexLove.Color.new(0.2, 0.2, 0.8, 1),
@@ -65,11 +64,11 @@ local button = FlexLove.Element.new({
-- In your love.update and love.draw: -- In your love.update and love.draw:
function love.update(dt) function love.update(dt)
FlexLove.Gui.update(dt) FlexLove.update(dt)
end end
function love.draw() function love.draw()
FlexLove.Gui.draw() FlexLove.draw()
end end
``` ```
@@ -102,7 +101,7 @@ state by .
```lua ```lua
local someGameState = true local someGameState = true
-- Create elements once (e.g., in love.load) -- Create elements once (e.g., in love.load)
local button1 = FlexLove.Element.new({ local button1 = FlexLove.new({
text = "Button 1", text = "Button 1",
disabled = someGameState, disabled = someGameState,
onEvent = function() print("Clicked!") end onEvent = function() print("Clicked!") end
@@ -110,7 +109,7 @@ local button1 = FlexLove.Element.new({
-- ... other things ... -- -- ... other things ... --
local someGameState = false -- button1 will not change its disabled state, you need a way to update the element local someGameState = false -- button1 will not change its disabled state, you need a way to update the element
local button2 = FlexLove.Element.new({ local button2 = FlexLove.new({
text = "Click to activate button 1", text = "Click to activate button 1",
onEvent = function(_, event) onEvent = function(_, event)
if event.type == "release" then -- only fire on mouse release if event.type == "release" then -- only fire on mouse release
@@ -121,7 +120,7 @@ local button2 = FlexLove.Element.new({
-- ... other things ... -- -- ... other things ... --
local someGameState = false -- button1 will not change its disabled state, you need a way to update the element local someGameState = false -- button1 will not change its disabled state, you need a way to update the element
local button2 = FlexLove.Element.new({ local button2 = FlexLove.new({
text = "Click to activate button 1", text = "Click to activate button 1",
onEvent = function(_, event) onEvent = function(_, event)
if event.type == "release" then -- only fire on mouse release if event.type == "release" then -- only fire on mouse release
@@ -145,7 +144,7 @@ There is of course some overhead for this, which is why it is not the default be
-- Recreate UI every frame -- Recreate UI every frame
local someGameState = true local someGameState = true
-- Create elements once (e.g., in love.load) -- Create elements once (e.g., in love.load)
local button1 = FlexLove.Element.new({ local button1 = FlexLove.new({
text = "Button 1", text = "Button 1",
disabled = someGameState, disabled = someGameState,
onEvent = function() print("Clicked!") end onEvent = function() print("Clicked!") end
@@ -153,7 +152,7 @@ local button1 = FlexLove.Element.new({
-- ... other things ... -- -- ... other things ... --
local someGameState = false -- button1 in immediate mode will have its state updated local someGameState = false -- button1 in immediate mode will have its state updated
local button2 = FlexLove.Element.new({ local button2 = FlexLove.new({
text = "Click to activate button 1", text = "Click to activate button 1",
onEvent = function(_, event) onEvent = function(_, event)
if event.type == "release" then -- only fire on mouse release if event.type == "release" then -- only fire on mouse release
@@ -235,7 +234,7 @@ Common properties for all elements:
#### Absolute Positioning #### Absolute Positioning
```lua ```lua
local element = Gui.new({ local element = FlexLove.new({
positioning = "absolute", positioning = "absolute",
x = 100, x = 100,
y = 50, y = 50,
@@ -246,7 +245,7 @@ local element = Gui.new({
#### Flexbox Layout #### Flexbox Layout
```lua ```lua
local container = Gui.new({ local container = FlexLove.new({
positioning = "flex", positioning = "flex",
flexDirection = "horizontal", flexDirection = "horizontal",
justifyContent = "center", justifyContent = "center",
@@ -257,7 +256,7 @@ local container = Gui.new({
#### Grid Layout #### Grid Layout
```lua ```lua
local grid = Gui.new({ local grid = FlexLove.new({
positioning = "grid", positioning = "grid",
gridRows = 3, gridRows = 3,
gridColumns = 3, gridColumns = 3,
@@ -290,14 +289,17 @@ To create a theme explore themes/space.lua as a reference
Load and apply themes for consistent styling: Load and apply themes for consistent styling:
```lua ```lua
local Theme = FlexLove.Theme FlexLove.init({
theme = "space" -- will use this as the initial theme
})
-- Load a theme -- and if you need dynamic themes
Theme.load("space") local Theme = FlexLove.Theme
Theme.setActive("space") Theme.load("metal")
Theme.setActive("metal")
-- Use theme on elements -- Use theme on elements
local button = Gui.new({ local button = Flexlove.new({
width = 200, width = 200,
height = 60, height = 60,
text = "Themed Button", text = "Themed Button",
@@ -381,7 +383,7 @@ FlexLöve provides text input support with single-line (and multi-line coming so
```lua ```lua
-- Create a text input field -- Create a text input field
local input = Gui.new({ local input = FlexLove.new({
x = 10, x = 10,
y = 10, y = 10,
width = 200, width = 200,
@@ -395,7 +397,7 @@ local input = Gui.new({
end end
}) })
local textArea = Gui.new({ local textArea = FlexLove.new({
x = 10, x = 10,
y = 50, y = 50,
width = 300, width = 300,
@@ -460,18 +462,18 @@ Create smooth transitions:
local Animation = FlexLove.Animation local Animation = FlexLove.Animation
-- Fade animation -- Fade animation
local fadeIn = FlexLove.Animation.fade(1.0, 0, 1) local fadeIn = Animation.fade(1.0, 0, 1)
fadeIn:apply(element) fadeIn:apply(element)
-- Scale animation -- Scale animation
local scaleUp = FlexLove.Animation.scale(0.5, local scaleUp = Animation.scale(0.5,
{ width = 100, height = 50 }, { width = 100, height = 50 },
{ width = 200, height = 100 } { width = 200, height = 100 }
) )
scaleUp:apply(element) scaleUp:apply(element)
-- Custom animation with easing -- Custom animation with easing
local customAnim = FlexLove.Animation.new({ local customAnim = Animation.new({
duration = 1.0, duration = 1.0,
start = { opacity = 0, width = 100 }, start = { opacity = 0, width = 100 },
final = { opacity = 1, width = 200 }, final = { opacity = 1, width = 200 },
@@ -483,23 +485,24 @@ customAnim:apply(element)
### Creating Colors ### Creating Colors
```lua ```lua
local Color = FlexLove.Color
-- From RGB values (0-1 range) -- From RGB values (0-1 range)
local red = FlexLove.Color.new(1, 0, 0, 1) local red = Color.new(1, 0, 0, 1)
-- From hex string -- From hex string
local blue = FlexLove.Color.fromHex("#0000FF") local blue = Color.fromHex("#0000FF")
local semiTransparent = FlexLove.Color.fromHex("#FF000080") local semiTransparent = Color.fromHex("#FF000080")
``` ```
## API Reference ## API Reference
### Gui (Main Module) ### Flexlove (Main Module)
- `Gui.init(props)` - Initialize GUI system with base scale - `Flexlove.init(props)` - Initialize GUI system with base scale
- `Gui.new(props)` - Create a new element - `Flexlove.new(props)` - Create a new element
- `Gui.update(dt)` - Update all elements - `Flexlove.update(dt)` - Update all elements
- `Gui.draw()` - Draw all elements - `Flexlove.draw()` - Draw all elements
- `Gui.resize()` - Handle window resize - `Flexlove.resize()` - Handle window resize
### Color ### Color
@@ -508,7 +511,7 @@ local semiTransparent = FlexLove.Color.fromHex("#FF000080")
- `Color:toHex()` - Convert to hex string - `Color:toHex()` - Convert to hex string
- `Color:toRGBA()` - Get RGBA values - `Color:toRGBA()` - Get RGBA values
### Theme ### Theme (only needed for dynamic changes)
- `Theme.load(name)` - Load theme by name - `Theme.load(name)` - Load theme by name
- `Theme.setActive(name)` - Set active theme - `Theme.setActive(name)` - Set active theme