local Vec3 = require "lib.utils.vec3"
local ui = require "lib.ui.core"


--- @type Rectangle
local ReactiveRectangle = ui.Rectangle {
    size = Vec3 { 100, 100 },
    color = { 1, 0, 0 },
    state = { active = false }
}
function ReactiveRectangle:update(dt)
    getmetatable(self):update(dt)

    self:onTap(function()
        self.state.active = not self.state.active
        self.color = self.state.active and { 0, 1, 0 } or { 1, 0, 0 }
    end)
end

local Layout = ui.Root {
    child = ui.Align {
        alignment = "bottom_center",
        child = ui.Row {
            children = {
                ReactiveRectangle
            }
        }
    }
}

return Layout