From 27f8cc262c06a370f4d5334655d097e6976dadcc Mon Sep 17 00:00:00 2001 From: Rokas Puzonas Date: Fri, 1 Jul 2022 13:07:01 +0000 Subject: [PATCH] create my own basic immediate ui library --- src/helpers/lighten.lua | 1 - src/helpers/rgb.lua | 3 +++ src/main.lua | 2 +- src/states/main-menu.lua | 38 ++++++++++++++++++++++++++++++ src/ui/button.lua | 23 ++++++++++++++++++ src/ui/init.lua | 51 ++++++++++++++++++++++++++++++++++++++++ src/ui/label.lua | 5 ++++ src/ui/textbox.lua | 50 +++++++++++++++++++++++++++++++++++++++ 8 files changed, 171 insertions(+), 2 deletions(-) create mode 100644 src/helpers/rgb.lua create mode 100644 src/states/main-menu.lua create mode 100644 src/ui/button.lua create mode 100644 src/ui/init.lua create mode 100644 src/ui/label.lua create mode 100644 src/ui/textbox.lua diff --git a/src/helpers/lighten.lua b/src/helpers/lighten.lua index e475157..ef88db7 100644 --- a/src/helpers/lighten.lua +++ b/src/helpers/lighten.lua @@ -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 - diff --git a/src/helpers/rgb.lua b/src/helpers/rgb.lua new file mode 100644 index 0000000..ec9f6fc --- /dev/null +++ b/src/helpers/rgb.lua @@ -0,0 +1,3 @@ +return function(r, g, b) + return {r/255, g/255, b/255} +end diff --git a/src/main.lua b/src/main.lua index 2f48aaa..29324ed 100644 --- a/src/main.lua +++ b/src/main.lua @@ -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 diff --git a/src/states/main-menu.lua b/src/states/main-menu.lua new file mode 100644 index 0000000..120341a --- /dev/null +++ b/src/states/main-menu.lua @@ -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 diff --git a/src/ui/button.lua b/src/ui/button.lua new file mode 100644 index 0000000..ed6f9ce --- /dev/null +++ b/src/ui/button.lua @@ -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 diff --git a/src/ui/init.lua b/src/ui/init.lua new file mode 100644 index 0000000..3450329 --- /dev/null +++ b/src/ui/init.lua @@ -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 diff --git a/src/ui/label.lua b/src/ui/label.lua new file mode 100644 index 0000000..7f923a6 --- /dev/null +++ b/src/ui/label.lua @@ -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 diff --git a/src/ui/textbox.lua b/src/ui/textbox.lua new file mode 100644 index 0000000..cbb372d --- /dev/null +++ b/src/ui/textbox.lua @@ -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