fully functional without skins

main.lua

@@ -1,9 +1,17 @@
 local pop = require "pop"
 
 function love.load()
-    pop.setSkin("blackonwhite")
+    local align = pop.box():align("center", "center"):setSize(200, 200)
-    local align = pop.box():align("center", "center"):setSize(100, 100):setSkin("blackonwhite")
+    pop.box(align):align("left", "top"):setSize(75, 10):setColor(255, 0, 255, 255)
-    --print(align.skin)
+    pop.box(align):align("center", "top"):setColor(100, 100, 100)
+    pop.box(align, {0, 255, 0, 255}):setSize(20, 5):align("right", "top")
+    pop.box(align):align("left", "center"):setColor(0, 0, 255)
+    pop.box(align):align("center", "center"):setSize(90, 90):setColor(255, 255, 255)
+    pop.box(align):align("right", "center"):setColor(255, 0, 0)
+    pop.box(align):align("left", "bottom"):setColor(0, 255, 0)
+    pop.box(align):align("center", "bottom"):setColor(255, 255, 0)
+    pop.box(align):align("right", "bottom"):setColor(0, 255, 255)
+    pop.box(nil, {255, 0, 0, 255}):align("left", "top"):setSize(50, 50)
 end
 
 function love.update(dt)
@@ -12,8 +20,6 @@ end
 
 function love.draw()
     pop.draw()
-    love.graphics.setColor(255, 255, 255, 255)
-    --love.graphics.rectangle("fill", 0, 0, 100, 100)
 end
 
 function love.textinput(text)

pop/elements/box.lua

@@ -6,44 +6,56 @@ local element = require(path .. "/elements/element")
 
 local box = class("pop.box", element)
 
-function box:initialize(pop, parent, skin)
+function box:initialize(pop, parent, background)
-    element.initialize(self, pop, parent, skin)
+    element.initialize(self, pop, parent)
+
+    self.background = background or false
 end
 
-function box:draw() --TODO these ifs are probably wrong
+function box:draw() --NOTE these ifs are probably wrong
-    print("box drawn!")
+    if self.background then
-
+        if type(self.background) == "table" then
-    if self.skin.background then
+            lg.setColor(self.background)
-        if type(self.skin.background) == "table" then
-            lg.setColor(self.skin.background)
-            print(self.skin.background[4], self.x, self.y, self.w, self.h)
-            lg.rectangle("fill", self.x, self.y, self.w, self.h)
-            print("rect")
-        else
-            lg.setColor(255, 255, 255, 255)
-            local w, h = self.skin.background:getDimensions()
-            -- scale!
-            w = self.w/w
-            h = self.h/h
-            lg.draw(self.skin.background, self.x, self.y, 0, w, h)
-        end
-    end
-
-    if self.skin.foreground then
-        if type(self.skin.foreground) == "table" then
-            lg.setColor(self.skin.foreground)
             lg.rectangle("fill", self.x, self.y, self.w, self.h)
         else
             lg.setColor(255, 255, 255, 255)
-            local w, h = self.skin.foreground:getDimensions()
+            local w, h = self.background:getDimensions()
             -- scale!
             w = self.w/w
             h = self.h/h
-            lg.draw(self.skin.foreground, self.x, self.y, 0, w, h)
+            lg.draw(self.background, self.x, self.y, 0, w, h)
         end
     end
 
     return self
 end
 
+function box:setBackground(background)
+    self.background = background
+
+    return self
+end
+
+function box:getBackground()
+    return self.background
+end
+
+function box:setColor(r, g, b, a)
+    self.background = {r, g, b, a}
+
+    if not a then
+        self.background[4] = 255
+    end
+
+    return self
+end
+
+function box:getColor()
+    if type(self.background) == "table" then
+        return self.background[1], self.background[1], self.background[3], self.background[4]
+    else
+        error("This box doesn't have a color.")
+    end
+end
+
 return box

pop/elements/element.lua

@@ -3,8 +3,7 @@ local class = require(path .. "/lib/middleclass")
 
 local element = class("pop.element")
 
-function element:initialize(pop, parent, skin)
+function element:initialize(pop, parent)
-    self.pop = pop --I hate this -.-
     self.parent = parent
     self.child = {}
 
@@ -13,12 +12,6 @@ function element:initialize(pop, parent, skin)
     self.w = 10
     self.h = 10
 
-    if skin then
-        self.skin = pop.skins[skin]
-    else
-        self.skin = pop.skins[pop.currentSkin]
-    end
-
     self.horizontal = "left"
     self.vertical = "top"
 end
@@ -150,14 +143,4 @@ function element:setAlignment(horizontal, vertical)
     return self
 end
 
-function element:setSkin(skin)
-    if type(skin) == "string" then
-        self.skin = self.pop.skins[skin]
-    else
-        self.skin = skin
-    end
-
-    return self
-end
-
 return element

pop/init.lua

@@ -6,8 +6,6 @@ local pop = {}
 pop.elementClasses = {}
 --pop.elements = {}
 pop.window = {child = {}} --top level element, defined in pop.load()
-pop.skins = {}
-pop.currentSkin = "clear"
 --TODO we need a "focused" element for textinput or whatever
 
 function pop.load()
@@ -22,20 +20,10 @@ function pop.load()
         -- wrapper to be able to call pop.element() to create elements
         if not pop[name] then
             pop[name] = function(...) return pop.create(name, ...) end
-            print("pop." .. name .. "() created")
+            print("wrapper: pop." .. name .. "() created")
         end
     end
 
-    -- load skins
-    local skinList = lf.getDirectoryItems(path .. "/skins")
-
-    for i=1, #skinList do
-        local name = skinList[i]:sub(1, -5)
-        pop.skins[name] = require(path .. "/skins/" .. name)
-        pop.skins[name].name = name
-        print("loaded \"" .. name .. "\" skin")
-    end
-
     -- set top element
     pop.window = pop.create("element"):setSize(lg.getWidth(), lg.getHeight())
     print("created pop.window")
@@ -61,6 +49,7 @@ function pop.update(dt, element)
         element:update(dt)
     end
 
+    --NOTE add excludeUpdating for performance if needed
     for i=1,#element.child do
         pop.update(dt, element.child[i])
     end
@@ -72,9 +61,7 @@ function pop.draw(element)
     end
 
     if not element.excludeRendering then
-        if element.skin.draw and element.skin.draw(element) then
+        if element.draw then
-            -- do nothing...
-        elseif element.draw then
             element:draw()
         end
 
@@ -100,14 +87,6 @@ function pop.keyreleased(key)
     --TODO no idea what to do with this
 end
 
-function pop.setSkin(skin)
-    if type(skin) == "string" then
-        pop.currentSkin = pop.skins[skin]
-    else
-        pop.currentSkin = skin
-    end
-end
-
 pop.load()
 
 return pop

pop/skinclass.lua

@@ -1,11 +0,0 @@
---TODO make skins inherit this, and allow duplication and modification of skins on the fly
-local path = string.sub(..., 1, string.len(...) - string.len("/skinclass"))
-local class = require(path .. "/lib/middleclass")
-
-local skinclass = class("pop.skinclass")
-
-function skinclass:initialize()
-    --
-end
-
-return skinclass

pop/skins/blackonwhite.lua

@@ -1,6 +0,0 @@
-local skin = {}
-
-skin.background = {255, 255, 255, 255} -- Drawable, color table, or false
-skin.foreground = {0, 0, 0, 255}       -- Drawable, color table, or false
-
-return skin

pop/skins/clear.lua

@@ -1,6 +0,0 @@
-local skin = {}
-
-skin.background = false                -- Drawable, color table, or false
-skin.foreground = {255, 255, 255, 255} -- Drawable, color table, or false
-
-return skin