1
0

create my own basic immediate ui library

This commit is contained in:
Rokas Puzonas 2022-07-01 13:07:01 +00:00
parent 8600abcdda
commit 27f8cc262c
8 changed files with 171 additions and 2 deletions

View File

@ -5,4 +5,3 @@ local YELLOW_HUE = 60/360
return function(r, g, b)
return hueShift(YELLOW_HUE, 0.05, vivid.saturate(0.1, vivid.lighten(0.1, r, g, b)))
end

3
src/helpers/rgb.lua Normal file
View File

@ -0,0 +1,3 @@
return function(r, g, b)
return {r/255, g/255, b/255}
end

View File

@ -5,6 +5,6 @@ function love.load()
love.keyboard.setKeyRepeat(true)
math.randomseed(love.timer.getTime())
Gamestate.switch(require("states.main"))
Gamestate.switch(require("states.main-menu"))
Gamestate.registerEvents()
end

38
src/states/main-menu.lua Normal file
View File

@ -0,0 +1,38 @@
local MainMenu = {}
local UI = require("ui")
local rgb = require("helpers.rgb")
local darken = require("helpers.darken")
local lighten = require("helpers.lighten")
function MainMenu:init()
self.ui = UI.new{
font = love.graphics.newFont(48),
text_color = rgb(255, 255, 255),
bg_color = rgb(60, 60, 60),
bg_hover_color = {lighten(rgb(60, 60, 60))},
bg_pressed_color = {darken(rgb(60, 60, 60))},
}
self.ip_textbox = { text = "127.0.0.1" }
end
function MainMenu:update()
end
function MainMenu:keypressed(...)
self.ui:keypressed(...)
end
function MainMenu:textinput(...)
self.ui:textinput(...)
end
function MainMenu:draw()
local w, h = love.graphics.getDimensions()
self.ui:textbox(self.ip_textbox, w/2-350, h/2-30, 400, 60)
if self.ui:button("Connect", w/2+100, h/2-30, 250, 60) then
end
self.ui:postDraw()
end
return MainMenu

23
src/ui/button.lua Normal file
View File

@ -0,0 +1,23 @@
return function(ui, text, x, y, w, h)
local mx, my = love.mouse.getPosition()
local bg = ui.theme.bg_color
local result = false
if ui.inRect(mx, my, x, y, w, h) then
bg = ui.theme.bg_hover_color
if love.mouse.isDown(1) then
bg = ui.theme.bg_pressed_color
elseif ui:wasDown(1) then
result = true
end
end
love.graphics.setColor(bg)
love.graphics.rectangle("fill", x, y, w, h)
local font_height = ui.theme.font:getHeight()
love.graphics.setFont(ui.theme.font)
love.graphics.setColor(ui.theme.text_color)
love.graphics.printf(text, x, y+(h-font_height)/2, w, "center")
return result
end

51
src/ui/init.lua Normal file
View File

@ -0,0 +1,51 @@
local UI = {}
UI.__index = UI
local elements = {
label = require(... .. ".label"),
button = require(... .. ".button"),
textbox = require(... .. ".textbox"),
}
function UI.new(theme)
local self = setmetatable({}, UI)
self.theme = theme or {}
self.mouse_buttons = {}
return self
end
function UI:postDraw()
self.keys_pressed = {}
self.entered_text = nil
self.mouse_buttons[1] = love.mouse.isDown(1)
self.mouse_buttons[2] = love.mouse.isDown(2)
self.mouse_buttons[3] = love.mouse.isDown(3)
end
function UI:keypressed(key)
self.keys_pressed[key] = true
end
function UI:textinput(text)
self.entered_text = text
end
function UI.inRect(mx, my, x, y, w, h)
return (x <= mx and mx < x+w) and (y <= my and my < y+h)
end
function UI:wasDown(...)
for i=1, select("#", ...) do
local button = select(i, ...)
if self.mouse_buttons[button] then
return true
end
end
return false
end
function UI.__index(t, k)
return UI[k] or elements[k]
end
return UI

5
src/ui/label.lua Normal file
View File

@ -0,0 +1,5 @@
return function (ui, text, x, y)
love.graphics.setFont(ui.theme.font)
love.graphics.setColor(ui.theme.text_color)
love.graphics.print(text, x, y)
end

50
src/ui/textbox.lua Normal file
View File

@ -0,0 +1,50 @@
local padding = 10
return function(ui, textbox, x, y, w, h)
local mx, my = love.mouse.getPosition()
local bg = ui.theme.bg_color
if ui.inRect(mx, my, x, y, w, h) then
bg = ui.theme.bg_hover_color
if love.mouse.isDown(1) then
bg = ui.theme.bg_pressed_color
elseif ui:wasDown(1) then
textbox.is_editing = true
textbox.cursor = #textbox.text
end
else
if love.mouse.isDown(1) then
textbox.is_editing = false
end
end
love.graphics.setColor(bg)
love.graphics.rectangle("fill", x, y, w, h)
love.graphics.setColor(ui.theme.text_color)
if textbox.is_editing then
if ui.keys_pressed["escape"] then
textbox.is_editing = false
elseif ui.keys_pressed["left"] then
textbox.cursor = math.max(textbox.cursor - 1, 0)
elseif ui.keys_pressed["right"] then
textbox.cursor = math.min(textbox.cursor + 1, #textbox.text)
elseif ui.keys_pressed["backspace"] and textbox.cursor > 0 then
textbox.text = textbox.text:sub(0, textbox.cursor-1) .. textbox.text:sub(textbox.cursor+1)
textbox.cursor = textbox.cursor - 1
end
if ui.entered_text then
textbox.text = textbox.text:sub(1, textbox.cursor) .. ui.entered_text .. textbox.text:sub(textbox.cursor+1)
textbox.cursor = textbox.cursor + #ui.entered_text
end
love.graphics.setLineWidth(3)
love.graphics.line(x, y+h-1.5, x+w, y+h-1.5)
local cursor_ox = ui.theme.font:getWidth(textbox.text:sub(1, textbox.cursor))+padding
love.graphics.line(x+cursor_ox, y+padding, x+cursor_ox, y+h-padding)
end
local font_height = ui.theme.font:getHeight()
love.graphics.setFont(ui.theme.font)
love.graphics.print(textbox.text or "", x+padding, y+(h-font_height)/2)
end