create my own basic immediate ui library
This commit is contained in:
parent
8600abcdda
commit
27f8cc262c
@ -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
3
src/helpers/rgb.lua
Normal file
@ -0,0 +1,3 @@
|
||||
return function(r, g, b)
|
||||
return {r/255, g/255, b/255}
|
||||
end
|
@ -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
38
src/states/main-menu.lua
Normal 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
23
src/ui/button.lua
Normal 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
51
src/ui/init.lua
Normal 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
5
src/ui/label.lua
Normal 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
50
src/ui/textbox.lua
Normal 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
|
Loading…
Reference in New Issue
Block a user