79 lines
2.0 KiB
Markdown
79 lines
2.0 KiB
Markdown
## Shell
|
|
|
|
The shell module is basically abstractions over state and input subscriptions for common elements
|
|
|
|
In practice the result is that lenghty code like:
|
|
|
|
```lua
|
|
local input = require('helium.core.input')
|
|
|
|
local x = function()
|
|
local elementState = useState({down = false, over = false})
|
|
input('clicked', function()
|
|
elementState.down = true
|
|
return function()
|
|
elementState.down = false
|
|
end
|
|
end)
|
|
input('hovered', function()
|
|
elementState.over = true
|
|
return function()
|
|
elementState.over = false
|
|
end
|
|
end)
|
|
|
|
return function()
|
|
if elementState.down then
|
|
love.graphics.setColor(1, 0, 0)
|
|
else
|
|
love.graphics.setColor(0, 1, 1)
|
|
end
|
|
love.graphics.print(elementState.over and 'Thanks' or 'Hover over me!')
|
|
end
|
|
end
|
|
```
|
|
|
|
Gets simplified down to:
|
|
|
|
```lua
|
|
local useButton = require('helium.shell.button')
|
|
|
|
local x = function()
|
|
local buttonState = useButton()
|
|
|
|
return function()
|
|
if buttonState.down then
|
|
love.graphics.setColor(1, 0, 0)
|
|
else
|
|
love.graphics.setColor(0, 1, 1)
|
|
end
|
|
love.graphics.print(buttonState.over and 'Thanks' or 'Hover over me!')
|
|
end
|
|
end
|
|
```
|
|
|
|
For a more detailed description of each shell function check out the individual files in /shell/
|
|
|
|
If you're looking to build a big library of widgets with helium this pattern is certainly something i think you should look in to using, you can build your own set of shell functions, you can use any of the helium hooks, inputs, etc in there just fine.
|
|
|
|
For an idea of a 'shell' I can imagine creating a style abstraction hook with contexts
|
|
|
|
```lua
|
|
local context = require('helium.hooks.context')
|
|
|
|
return function()
|
|
--This assumes an existing context named style
|
|
local ctx = context.get('style')
|
|
|
|
return {
|
|
setPrimaryFont = function() love.graphics.setFont(ctx.primaryFont) end,
|
|
setPrimaryColor = function() love.graphics.setColor(ctx.primaryColor) end,
|
|
}
|
|
end
|
|
```
|
|
|
|
The rest of the functions you can let your imagination run wild, but after creating those you'd
|
|
|
|
#1 have a common repository of all those values
|
|
|
|
#2 change those values everywhere at once |