layering

2025-10-13 09:44:33 -04:00
parent 2d724bf120
commit a0cea8081b
12 changed files with 313 additions and 123 deletions
--- a/examples/ThemeLayeringDemo.lua
+++ b/examples/ThemeLayeringDemo.lua
@@ -0,0 +1,196 @@
+-- Demo showing the new layering system:
+-- backgroundColor -> theme -> borders -> text
+
+local FlexLove = require("FlexLove")
+local Gui = FlexLove.GUI
+local Theme = FlexLove.Theme
+local Color = FlexLove.Color
+
+function love.load()
+  -- Initialize FlexLove with the space theme
+  Gui.init({
+    baseScale = { width = 1920, height = 1080 },
+    theme = "space"
+  })
+  
+  -- Create main container
+  local container = Gui.new({
+    x = 50,
+    y = 50,
+    width = 700,
+    height = 500,
+    backgroundColor = Color.new(0.1, 0.1, 0.15, 1),
+    border = { top = true, bottom = true, left = true, right = true },
+    borderColor = Color.new(0.5, 0.5, 0.6, 1),
+    positioning = "flex",
+    flexDirection = "vertical",
+    gap = 20,
+    padding = { top = 20, right = 20, bottom = 20, left = 20 },
+  })
+  
+  -- Title
+  Gui.new({
+    parent = container,
+    height = 40,
+    text = "Theme Layering Demo",
+    textSize = 24,
+    textAlign = "center",
+    textColor = Color.new(1, 1, 1, 1),
+    backgroundColor = Color.new(0.2, 0.2, 0.3, 1),
+  })
+  
+  -- Description
+  Gui.new({
+    parent = container,
+    height = 60,
+    text = "Layering order: backgroundColor -> theme -> borders -> text\nAll layers are always rendered when specified",
+    textSize = 14,
+    textAlign = "center",
+    textColor = Color.new(0.8, 0.9, 1, 1),
+    backgroundColor = Color.new(0.15, 0.15, 0.2, 0.8),
+    padding = { top = 10, right = 10, bottom = 10, left = 10 },
+  })
+  
+  -- Example 1: Theme with backgroundColor
+  local example1 = Gui.new({
+    parent = container,
+    height = 100,
+    positioning = "flex",
+    flexDirection = "vertical",
+    gap = 10,
+    backgroundColor = Color.new(0.12, 0.12, 0.17, 1),
+    padding = { top = 10, right = 10, bottom = 10, left = 10 },
+  })
+  
+  Gui.new({
+    parent = example1,
+    height = 20,
+    text = "Example 1: Theme with backgroundColor (red tint behind)",
+    textSize = 14,
+    textColor = Color.new(0.8, 0.9, 1, 1),
+    backgroundColor = Color.new(0, 0, 0, 0),
+  })
+  
+  Gui.new({
+    parent = example1,
+    width = 200,
+    height = 50,
+    text = "Themed Button",
+    textAlign = "center",
+    textColor = Color.new(1, 1, 1, 1),
+    backgroundColor = Color.new(0.8, 0.2, 0.2, 0.5), -- Red tint behind theme
+    themeComponent = "button",
+    callback = function(element, event)
+      if event.type == "click" then
+        print("Button with backgroundColor clicked!")
+      end
+    end
+  })
+  
+  -- Example 2: Theme with borders
+  local example2 = Gui.new({
+    parent = container,
+    height = 100,
+    positioning = "flex",
+    flexDirection = "vertical",
+    gap = 10,
+    backgroundColor = Color.new(0.12, 0.12, 0.17, 1),
+    padding = { top = 10, right = 10, bottom = 10, left = 10 },
+  })
+  
+  Gui.new({
+    parent = example2,
+    height = 20,
+    text = "Example 2: Theme with borders (yellow borders on top)",
+    textSize = 14,
+    textColor = Color.new(0.8, 0.9, 1, 1),
+    backgroundColor = Color.new(0, 0, 0, 0),
+  })
+  
+  Gui.new({
+    parent = example2,
+    width = 200,
+    height = 50,
+    text = "Bordered Button",
+    textAlign = "center",
+    textColor = Color.new(1, 1, 1, 1),
+    backgroundColor = Color.new(0.2, 0.2, 0.3, 0.5),
+    border = { top = true, bottom = true, left = true, right = true },
+    borderColor = Color.new(1, 1, 0, 1), -- Yellow border on top of theme
+    themeComponent = "button",
+    callback = function(element, event)
+      if event.type == "click" then
+        print("Button with borders clicked!")
+      end
+    end
+  })
+  
+  -- Example 3: Theme with both backgroundColor and borders
+  local example3 = Gui.new({
+    parent = container,
+    height = 120,
+    positioning = "flex",
+    flexDirection = "vertical",
+    gap = 10,
+    backgroundColor = Color.new(0.12, 0.12, 0.17, 1),
+    padding = { top = 10, right = 10, bottom = 10, left = 10 },
+  })
+  
+  Gui.new({
+    parent = example3,
+    height = 20,
+    text = "Example 3: Theme with backgroundColor AND borders",
+    textSize = 14,
+    textColor = Color.new(0.8, 0.9, 1, 1),
+    backgroundColor = Color.new(0, 0, 0, 0),
+  })
+  
+  Gui.new({
+    parent = example3,
+    width = 250,
+    height = 60,
+    text = "Full Layering",
+    textAlign = "center",
+    textColor = Color.new(1, 1, 1, 1),
+    backgroundColor = Color.new(0.2, 0.6, 0.8, 0.3), -- Blue tint behind
+    border = { top = true, bottom = true, left = true, right = true },
+    borderColor = Color.new(0, 1, 0, 1), -- Green border on top
+    themeComponent = "button",
+    callback = function(element, event)
+      if event.type == "click" then
+        print("Full layering button clicked!")
+      end
+    end
+  })
+  
+  -- Example 4: Panel with backgroundColor
+  Gui.new({
+    x = 800,
+    y = 50,
+    width = 300,
+    height = 200,
+    backgroundColor = Color.new(0.3, 0.1, 0.3, 0.5), -- Purple tint
+    border = { top = true, bottom = true, left = true, right = true },
+    borderColor = Color.new(1, 0.5, 0, 1), -- Orange border
+    themeComponent = "panel",
+    padding = { top = 20, right = 20, bottom = 20, left = 20 }
+  })
+end
+
+function love.update(dt)
+  Gui.update(dt)
+end
+
+function love.draw()
+  love.graphics.clear(0.05, 0.05, 0.1, 1)
+  Gui.draw()
+  
+  -- Draw instructions
+  love.graphics.setColor(1, 1, 1, 1)
+  love.graphics.print("Theme Layering System", 10, 10)
+  love.graphics.print("Hover over buttons to see state changes", 10, 30)
+end
+
+function love.resize(w, h)
+  Gui.resize()
+end