image and animation progress

examples/image_showcase.lua

@@ -0,0 +1,279 @@
+-- Image Showcase Example
+-- Demonstrates all image features in FlexLove
+
+local FlexLove = require("libs.FlexLove")
+local Color = FlexLove.Color
+-- I use this to avoid lsp warnings
+local lv = love
+
+-- Set to immediate mode for this example
+FlexLove.setMode("immediate")
+
+function lv.load()
+  -- Set window size
+  lv.window.setMode(1200, 800, { resizable = true })
+  lv.window.setTitle("FlexLove Image Showcase")
+end
+
+function lv.draw()
+  local container = FlexLove.new({
+    width = "100vw",
+    height = "100vh",
+    flexDirection = "vertical",
+    padding = { top = 20, right = 20, bottom = 20, left = 20 },
+    gap = 20,
+    backgroundColor = Color.new(0.95, 0.95, 0.95, 1),
+  })
+
+  -- Title
+  local title = FlexLove.new({
+    parent = container,
+    text = "FlexLove Image Showcase",
+    textSize = "xxl",
+    textColor = Color.new(0.2, 0.2, 0.2, 1),
+    textAlign = "center",
+    padding = { top = 0, right = 0, bottom = 20, left = 0 },
+  })
+
+  -- Section 1: Object-Fit Modes
+  local fitSection = FlexLove.new({
+    parent = container,
+    flexDirection = "vertical",
+    gap = 10,
+  })
+
+  local fitTitle = FlexLove.new({
+    parent = fitSection,
+    text = "Object-Fit Modes",
+    textSize = "lg",
+    textColor = Color.new(0.3, 0.3, 0.3, 1),
+  })
+
+  local fitRow = FlexLove.new({
+    parent = fitSection,
+    flexDirection = "horizontal",
+    gap = 10,
+    justifyContent = "space-around",
+  })
+
+  local fitModes = { "fill", "contain", "cover", "scale-down", "none" }
+  for _, mode in ipairs(fitModes) do
+    local fitBox = FlexLove.new({
+      parent = fitRow,
+      width = 180,
+      height = 120,
+      flexDirection = "vertical",
+      gap = 5,
+      backgroundColor = Color.new(1, 1, 1, 1),
+      cornerRadius = 8,
+      padding = { top = 10, right = 10, bottom = 10, left = 10 },
+    })
+
+    local fitImage = FlexLove.new({
+      parent = fitBox,
+      width = 160,
+      height = 80,
+      backgroundColor = Color.new(0.9, 0.9, 0.9, 1),
+      cornerRadius = 4,
+      imagePath = "sample.jpg",
+      objectFit = mode,
+    })
+
+    local fitLabel = FlexLove.new({
+      parent = fitBox,
+      text = mode,
+      textSize = "sm",
+      textColor = Color.new(0.4, 0.4, 0.4, 1),
+      textAlign = "center",
+    })
+  end
+
+  local posSection = FlexLove.new({
+    parent = container,
+    flexDirection = "vertical",
+    gap = 10,
+  })
+
+  local posTitle = FlexLove.new({
+    parent = posSection,
+    text = "Object-Position",
+    textSize = "lg",
+    textColor = Color.new(0.3, 0.3, 0.3, 1),
+  })
+
+  local posRow = FlexLove.new({
+    parent = posSection,
+    flexDirection = "horizontal",
+    gap = 10,
+    justifyContent = "space-around",
+  })
+
+  local positions = { "top left", "center center", "bottom right", "50% 20%", "left center" }
+  for _, pos in ipairs(positions) do
+    local posBox = FlexLove.new({
+      parent = posRow,
+      width = 180,
+      height = 120,
+      flexDirection = "vertical",
+      gap = 5,
+      backgroundColor = Color.new(1, 1, 1, 1),
+      cornerRadius = 8,
+      padding = { top = 10, right = 10, bottom = 10, left = 10 },
+    })
+
+    local posImage = FlexLove.new({
+      parent = posBox,
+      width = 160,
+      height = 80,
+      backgroundColor = Color.new(0.9, 0.9, 0.9, 1),
+      cornerRadius = 4,
+      imagePath = "sample.jpg",
+      objectFit = "none",
+      objectPosition = pos,
+    })
+
+    local posLabel = FlexLove.new({
+      parent = posBox,
+      text = pos,
+      textSize = "xs",
+      textColor = Color.new(0.4, 0.4, 0.4, 1),
+      textAlign = "center",
+    })
+  end
+
+  -- Section 3: Image Tiling/Repeat
+  local tileSection = FlexLove.new({
+    parent = container,
+    flexDirection = "vertical",
+    gap = 10,
+  })
+
+  local tileTitle = FlexLove.new({
+    parent = tileSection,
+    text = "Image Tiling (Repeat Modes)",
+    textSize = "lg",
+    textColor = Color.new(0.3, 0.3, 0.3, 1),
+  })
+
+  local tileRow = FlexLove.new({
+    parent = tileSection,
+    flexDirection = "horizontal",
+    gap = 10,
+    justifyContent = "space-around",
+  })
+
+  local repeatModes = { "no-repeat", "repeat", "repeat-x", "repeat-y" }
+  for _, mode in ipairs(repeatModes) do
+    local tileBox = FlexLove.new({
+      parent = tileRow,
+      width = 240,
+      height = 120,
+      flexDirection = "vertical",
+      gap = 5,
+      backgroundColor = Color.new(1, 1, 1, 1),
+      cornerRadius = 8,
+      padding = { top = 10, right = 10, bottom = 10, left = 10 },
+    })
+
+    local tileImage = FlexLove.new({
+      parent = tileBox,
+      width = 220,
+      height = 80,
+      backgroundColor = Color.new(0.9, 0.9, 0.9, 1),
+      cornerRadius = 4,
+      -- imagePath = "assets/pattern.png",  -- Uncomment if you have a pattern image
+      imageRepeat = mode,
+    })
+
+    local tileLabel = FlexLove.new({
+      parent = tileBox,
+      text = mode,
+      textSize = "sm",
+      textColor = Color.new(0.4, 0.4, 0.4, 1),
+      textAlign = "center",
+    })
+  end
+
+  -- Section 4: Image Tinting and Opacity
+  local tintSection = FlexLove.new({
+    parent = container,
+    flexDirection = "vertical",
+    gap = 10,
+  })
+
+  local tintTitle = FlexLove.new({
+    parent = tintSection,
+    text = "Image Tinting & Opacity",
+    textSize = "lg",
+    textColor = Color.new(0.3, 0.3, 0.3, 1),
+  })
+
+  local tintRow = FlexLove.new({
+    parent = tintSection,
+    flexDirection = "horizontal",
+    gap = 10,
+    justifyContent = "space-around",
+  })
+
+  local tints = {
+    { name = "No Tint", color = nil, opacity = 1 },
+    { name = "Red Tint", color = Color.new(1, 0.5, 0.5, 1), opacity = 1 },
+    { name = "Blue Tint", color = Color.new(0.5, 0.5, 1, 1), opacity = 1 },
+    { name = "50% Opacity", color = nil, opacity = 0.5 },
+    { name = "Green + 70%", color = Color.new(0.5, 1, 0.5, 1), opacity = 0.7 },
+  }
+
+  for _, tint in ipairs(tints) do
+    local tintBox = FlexLove.new({
+      parent = tintRow,
+      width = 180,
+      height = 120,
+      flexDirection = "vertical",
+      gap = 5,
+      backgroundColor = Color.new(1, 1, 1, 1),
+      cornerRadius = 8,
+      padding = { top = 10, right = 10, bottom = 10, left = 10 },
+    })
+
+    local tintImage = FlexLove.new({
+      parent = tintBox,
+      width = 160,
+      height = 80,
+      backgroundColor = Color.new(0.9, 0.9, 0.9, 1),
+      cornerRadius = 4,
+      imagePath = "sample.jpg",
+      imageTint = tint.color,
+      imageOpacity = tint.opacity,
+    })
+
+    local tintLabel = FlexLove.new({
+      parent = tintBox,
+      text = tint.name,
+      textSize = "xs",
+      textColor = Color.new(0.4, 0.4, 0.4, 1),
+      textAlign = "center",
+    })
+  end
+
+  -- Footer note
+  local note = FlexLove.new({
+    parent = container,
+    text = "Note: Uncomment imagePath properties in code to see actual images",
+    textSize = "xs",
+    textColor = Color.new(0.5, 0.5, 0.5, 1),
+    textAlign = "center",
+    padding = { top = 10, right = 0, bottom = 0, left = 0 },
+  })
+end
+
+function lv.mousepressed(x, y, button)
+  FlexLove.mousepressed(x, y, button)
+end
+
+function lv.mousereleased(x, y, button)
+  FlexLove.mousereleased(x, y, button)
+end
+
+function lv.mousemoved(x, y, dx, dy)
+  FlexLove.mousemoved(x, y, dx, dy)
+end

examples/input_handling.lua

@@ -6,227 +6,227 @@ local FlexLove = require("libs.FlexLove")
 local InputExample = {}
 
 function InputExample:new()
-    local obj = {
-        -- State variables for input handling example
-        mousePosition = { x = 0, y = 0 },
-        keyPressed = "",
-        touchPosition = { x = 0, y = 0 },
-        isMouseOver = false,
-        hoverCount = 0
-    }
-    setmetatable(obj, {__index = self})
-    return obj
+  local obj = {
+    -- State variables for input handling example
+    mousePosition = { x = 0, y = 0 },
+    keyPressed = "",
+    touchPosition = { x = 0, y = 0 },
+    isMouseOver = false,
+    hoverCount = 0,
+  }
+  setmetatable(obj, { __index = self })
+  return obj
 end
 
 function InputExample:render()
-    local flex = FlexLove.new({
-        x = "10%",
-        y = "10%",
-        width = "80%",
-        height = "80%",
-        positioning = "flex",
-        flexDirection = "vertical",
-        gap = 10,
-        padding = { horizontal = 10, vertical = 10 },
-    })
-    
-    -- Title
-    FlexLove.new({
-        parent = flex,
-        text = "Input Handling System Example",
-        textAlign = "center",
-        textSize = "2xl",
-        width = "100%",
-        height = "10%",
-    })
-    
-    -- Mouse interaction section
-    local mouseSection = FlexLove.new({
-        parent = flex,
-        positioning = "flex",
-        flexDirection = "horizontal",
-        justifyContent = "space-between",
-        alignItems = "center",
-        width = "100%",
-        height = "20%",
-        backgroundColor = "#2d3748",
-        borderRadius = 8,
-        padding = { horizontal = 15 },
-    })
-    
-    FlexLove.new({
-        parent = mouseSection,
-        text = "Mouse Position: (" .. self.mousePosition.x .. ", " .. self.mousePosition.y .. ")",
-        textAlign = "left",
-        textSize = "md",
-        width = "60%",
-    })
-    
-    -- Hoverable area
-    local hoverArea = FlexLove.new({
-        parent = mouseSection,
-        positioning = "flex",
-        justifyContent = "center",
-        alignItems = "center",
-        width = "30%",
-        height = "100%",
-        backgroundColor = "#4a5568",
-        borderRadius = 8,
-        padding = { horizontal = 10 },
-        onEvent = function(_, event)
-            if event.type == "mousemoved" then
-                self.mousePosition.x = event.x
-                self.mousePosition.y = event.y
-            elseif event.type == "mouseenter" then
-                self.isMouseOver = true
-                self.hoverCount = self.hoverCount + 1
-            elseif event.type == "mouseleave" then
-                self.isMouseOver = false
-            end
-        end,
-    })
-    
-    FlexLove.new({
-        parent = hoverArea,
-        text = "Hover over me!",
-        textAlign = "center",
-        textSize = "md",
-        width = "100%",
-        height = "100%",
-        color = self.isMouseOver and "#48bb78" or "#a0aec0",  -- Green when hovered
-    })
-    
-    -- Keyboard input section
-    local keyboardSection = FlexLove.new({
-        parent = flex,
-        positioning = "flex",
-        flexDirection = "horizontal",
-        justifyContent = "space-between",
-        alignItems = "center",
-        width = "100%",
-        height = "20%",
-        backgroundColor = "#4a5568",
-        borderRadius = 8,
-        padding = { horizontal = 15 },
-    })
-    
-    FlexLove.new({
-        parent = keyboardSection,
-        text = "Last Key Pressed: " .. (self.keyPressed or "None"),
-        textAlign = "left",
-        textSize = "md",
-        width = "60%",
-    })
-    
-    -- Input field for typing
-    local inputField = FlexLove.new({
-        parent = keyboardSection,
-        themeComponent = "inputv2",
-        text = "",
-        textAlign = "left",
-        textSize = "md",
-        width = "30%",
-        onEvent = function(_, event)
-            if event.type == "textinput" then
-                self.keyPressed = event.text
-            elseif event.type == "keypressed" then
-                self.keyPressed = event.key
-            end
-        end,
-    })
-    
-    -- Touch input section
-    local touchSection = FlexLove.new({
-        parent = flex,
-        positioning = "flex",
-        flexDirection = "horizontal",
-        justifyContent = "space-between",
-        alignItems = "center",
-        width = "100%",
-        height = "20%",
-        backgroundColor = "#2d3748",
-        borderRadius = 8,
-        padding = { horizontal = 15 },
-    })
-    
-    FlexLove.new({
-        parent = touchSection,
-        text = "Touch Position: (" .. self.touchPosition.x .. ", " .. self.touchPosition.y .. ")",
-        textAlign = "left",
-        textSize = "md",
-        width = "60%",
-    })
-    
-    -- Touchable area
-    local touchArea = FlexLove.new({
-        parent = touchSection,
-        positioning = "flex",
-        justifyContent = "center",
-        alignItems = "center",
-        width = "30%",
-        height = "100%",
-        backgroundColor = "#4a5568",
-        borderRadius = 8,
-        padding = { horizontal = 10 },
-        onEvent = function(_, event)
-            if event.type == "touch" then
-                self.touchPosition.x = event.x
-                self.touchPosition.y = event.y
-            end
-        end,
-    })
-    
-    FlexLove.new({
-        parent = touchArea,
-        text = "Touch me!",
-        textAlign = "center",
-        textSize = "md",
-        width = "100%",
-        height = "100%",
-    })
-    
-    -- Status section showing interaction counts
-    local statusSection = FlexLove.new({
-        parent = flex,
-        positioning = "flex",
-        flexDirection = "horizontal",
-        justifyContent = "space-between",
-        alignItems = "center",
-        width = "100%",
-        height = "20%",
-        backgroundColor = "#4a5568",
-        borderRadius = 8,
-        padding = { horizontal = 15 },
-    })
-    
-    FlexLove.new({
-        parent = statusSection,
-        text = "Hover Count: " .. self.hoverCount,
-        textAlign = "left",
-        textSize = "md",
-        width = "30%",
-    })
-    
-    -- Reset button
-    FlexLove.new({
-        parent = statusSection,
-        themeComponent = "buttonv2",
-        text = "Reset All",
-        textAlign = "center",
-        width = "30%",
-        onEvent = function(_, event)
-            if event.type == "release" then
-                self.mousePosition = { x = 0, y = 0 }
-                self.keyPressed = ""
-                self.touchPosition = { x = 0, y = 0 }
-                self.hoverCount = 0
-                self.isMouseOver = false
-                print("All input states reset")
-            end
-        end,
-    })
-    
-    return flex
+  local flex = FlexLove.new({
+    x = "10%",
+    y = "10%",
+    width = "80%",
+    height = "80%",
+    positioning = "flex",
+    flexDirection = "vertical",
+    gap = 10,
+    padding = { horizontal = 10, vertical = 10 },
+  })
+
+  -- Title
+  FlexLove.new({
+    parent = flex,
+    text = "Input Handling System Example",
+    textAlign = "center",
+    textSize = "2xl",
+    width = "100%",
+    height = "10%",
+  })
+
+  -- Mouse interaction section
+  local mouseSection = FlexLove.new({
+    parent = flex,
+    positioning = "flex",
+    flexDirection = "horizontal",
+    justifyContent = "space-between",
+    alignItems = "center",
+    width = "100%",
+    height = "20%",
+    backgroundColor = "#2d3748",
+    borderRadius = 8,
+    padding = { horizontal = 15 },
+  })
+
+  FlexLove.new({
+    parent = mouseSection,
+    text = "Mouse Position: (" .. self.mousePosition.x .. ", " .. self.mousePosition.y .. ")",
+    textAlign = "left",
+    textSize = "md",
+    width = "60%",
+  })
+
+  -- Hoverable area
+  local hoverArea = FlexLove.new({
+    parent = mouseSection,
+    positioning = "flex",
+    justifyContent = "center",
+    alignItems = "center",
+    width = "30%",
+    height = "100%",
+    backgroundColor = "#4a5568",
+    borderRadius = 8,
+    padding = { horizontal = 10 },
+    onEvent = function(_, event)
+      if event.type == "mousemoved" then
+        self.mousePosition.x = event.x
+        self.mousePosition.y = event.y
+      elseif event.type == "mouseenter" then
+        self.isMouseOver = true
+        self.hoverCount = self.hoverCount + 1
+      elseif event.type == "mouseleave" then
+        self.isMouseOver = false
+      end
+    end,
+  })
+
+  FlexLove.new({
+    parent = hoverArea,
+    text = "Hover over me!",
+    textAlign = "center",
+    textSize = "md",
+    width = "100%",
+    height = "100%",
+    color = self.isMouseOver and "#48bb78" or "#a0aec0", -- Green when hovered
+  })
+
+  -- Keyboard input section
+  local keyboardSection = FlexLove.new({
+    parent = flex,
+    positioning = "flex",
+    flexDirection = "horizontal",
+    justifyContent = "space-between",
+    alignItems = "center",
+    width = "100%",
+    height = "20%",
+    backgroundColor = "#4a5568",
+    borderRadius = 8,
+    padding = { horizontal = 15 },
+  })
+
+  FlexLove.new({
+    parent = keyboardSection,
+    text = "Last Key Pressed: " .. (self.keyPressed or "None"),
+    textAlign = "left",
+    textSize = "md",
+    width = "60%",
+  })
+
+  -- Input field for typing
+  local inputField = FlexLove.new({
+    parent = keyboardSection,
+    themeComponent = "inputv2",
+    text = "",
+    textAlign = "left",
+    textSize = "md",
+    width = "30%",
+    onEvent = function(_, event)
+      if event.type == "textinput" then
+        self.keyPressed = event.text
+      elseif event.type == "keypressed" then
+        self.keyPressed = event.key
+      end
+    end,
+  })
+
+  -- Touch input section
+  local touchSection = FlexLove.new({
+    parent = flex,
+    positioning = "flex",
+    flexDirection = "horizontal",
+    justifyContent = "space-between",
+    alignItems = "center",
+    width = "100%",
+    height = "20%",
+    backgroundColor = "#2d3748",
+    borderRadius = 8,
+    padding = { horizontal = 15 },
+  })
+
+  FlexLove.new({
+    parent = touchSection,
+    text = "Touch Position: (" .. self.touchPosition.x .. ", " .. self.touchPosition.y .. ")",
+    textAlign = "left",
+    textSize = "md",
+    width = "60%",
+  })
+
+  -- Touchable area
+  local touchArea = FlexLove.new({
+    parent = touchSection,
+    positioning = "flex",
+    justifyContent = "center",
+    alignItems = "center",
+    width = "30%",
+    height = "100%",
+    backgroundColor = "#4a5568",
+    borderRadius = 8,
+    padding = { horizontal = 10 },
+    onEvent = function(_, event)
+      if event.type == "touch" then
+        self.touchPosition.x = event.x
+        self.touchPosition.y = event.y
+      end
+    end,
+  })
+
+  FlexLove.new({
+    parent = touchArea,
+    text = "Touch me!",
+    textAlign = "center",
+    textSize = "md",
+    width = "100%",
+    height = "100%",
+  })
+
+  -- Status section showing interaction counts
+  local statusSection = FlexLove.new({
+    parent = flex,
+    positioning = "flex",
+    flexDirection = "horizontal",
+    justifyContent = "space-between",
+    alignItems = "center",
+    width = "100%",
+    height = "20%",
+    backgroundColor = "#4a5568",
+    borderRadius = 8,
+    padding = { horizontal = 15 },
+  })
+
+  FlexLove.new({
+    parent = statusSection,
+    text = "Hover Count: " .. self.hoverCount,
+    textAlign = "left",
+    textSize = "md",
+    width = "30%",
+  })
+
+  -- Reset button
+  FlexLove.new({
+    parent = statusSection,
+    themeComponent = "buttonv2",
+    text = "Reset All",
+    textAlign = "center",
+    width = "30%",
+    onEvent = function(_, event)
+      if event.type == "release" then
+        self.mousePosition = { x = 0, y = 0 }
+        self.keyPressed = ""
+        self.touchPosition = { x = 0, y = 0 }
+        self.hoverCount = 0
+        self.isMouseOver = false
+        print("All input states reset")
+      end
+    end,
+  })
+
+  return flex
 end
 
-return InputExample
+return InputExample

examples/performance_example.lua

@@ -1,124 +0,0 @@
---- Performance Monitoring Example
---- Demonstrates how to use the Performance module
-
-package.path = package.path .. ";./?.lua;./modules/?.lua"
-
--- Load love stub and Performance module
-require("testing.loveStub")
-local Performance = require("modules.Performance")
-
-print("=== Performance Module Example ===\n")
-
--- 1. Initialize and enable performance monitoring
-print("1. Initializing Performance monitoring...")
-Performance.init({
-  enabled = true,
-  logToConsole = true,
-  logWarnings = true,
-})
-print("   Enabled: " .. tostring(Performance.isEnabled()))
-print()
-
--- 2. Test basic timer functionality
-print("2. Testing timers...")
-Performance.startTimer("test_operation")
--- Simulate some work
-local sum = 0
-for i = 1, 1000000 do
-  sum = sum + i
-end
-local elapsed = Performance.stopTimer("test_operation")
-print(string.format("   Test operation completed in %.3fms", elapsed))
-print()
-
--- 3. Test measure wrapper
-print("3. Testing measure wrapper...")
-local expensiveFunction = function(n)
-  local result = 0
-  for i = 1, n do
-    result = result + math.sqrt(i)
-  end
-  return result
-end
-
-local measuredFunction = Performance.measure("expensive_calculation", expensiveFunction)
-local result = measuredFunction(100000)
-print(string.format("   Expensive calculation result: %.2f", result))
-print()
-
--- 4. Simulate frame timing
-print("4. Simulating frame timing...")
-for _ = 1, 10 do
-  Performance.startFrame()
-
-  -- Simulate frame work
-  Performance.startTimer("frame_layout")
-  local layoutSum = 0
-  for i = 1, 50000 do
-    layoutSum = layoutSum + i
-  end
-  Performance.stopTimer("frame_layout")
-
-  Performance.startTimer("frame_render")
-  local renderSum = 0
-  for i = 1, 30000 do
-    renderSum = renderSum + i
-  end
-  Performance.stopTimer("frame_render")
-
-  Performance.endFrame()
-end
-print(string.format("   Simulated %d frames", 10))
-print()
-
--- 5. Get and display metrics
-print("5. Performance Metrics:")
-local metrics = Performance.getMetrics()
-print(string.format("   FPS: %d", metrics.frame.fps))
-print(string.format("   Average Frame Time: %.3fms", metrics.frame.averageFrameTime))
-print(string.format("   Min/Max Frame Time: %.3f/%.3fms", metrics.frame.minFrameTime, metrics.frame.maxFrameTime))
-print(string.format("   Memory: %.2f MB (peak: %.2f MB)", metrics.memory.currentMb, metrics.memory.peakMb))
-print()
-
-print("6. Top Timings:")
-for name, data in pairs(metrics.timings) do
-  print(string.format("   %s:", name))
-  print(string.format("     Average: %.3fms", data.average))
-  print(string.format("     Min/Max: %.3f/%.3fms", data.min, data.max))
-  print(string.format("     Count: %d", data.count))
-end
-print()
-
--- 7. Export metrics
-print("7. Exporting metrics...")
-local json = Performance.exportJSON()
-print("   JSON Export:")
-print(json)
-print()
-
-local csv = Performance.exportCSV()
-print("   CSV Export:")
-print(csv)
-print()
-
--- 8. Test warnings
-print("8. Recent Warnings:")
-local warnings = Performance.getWarnings(5)
-if #warnings > 0 then
-  for _, warning in ipairs(warnings) do
-    print(string.format("   [%s] %s: %.3fms", warning.level, warning.name, warning.value))
-  end
-else
-  print("   No warnings")
-end
-print()
-
--- 9. Reset and verify
-print("9. Testing reset...")
-Performance.reset()
-local newMetrics = Performance.getMetrics()
-print(string.format("   Frame count after reset: %d", newMetrics.frame.frameCount))
-print(string.format("   Timings count after reset: %d", #newMetrics.timings))
-print()
-
-print("=== Performance Module Example Complete ===")

examples/slider_example.lua

@@ -1,8 +1,6 @@
 --- Example demonstrating how to create sliders using FlexLove
 -- This example shows the implementation pattern used in SettingsMenu.lua
 local FlexLove = require("libs.FlexLove")
-local Theme = FlexLove.Theme
-local Color = FlexLove.Color
 local helpers = require("utils.helperFunctions")
 local round = helpers.round
 
@@ -14,11 +12,11 @@ local instance
 
 ---@return SliderExample
 function SliderExample.init()
-    if instance == nil then
-        local self = setmetatable({}, SliderExample)
-        instance = self
-    end
-    return instance
+  if instance == nil then
+    local self = setmetatable({}, SliderExample)
+    instance = self
+  end
+  return instance
 end
 
 --- Create a slider control like in SettingsMenu
@@ -29,131 +27,132 @@ end
 ---@param initial_value number? Initial value (defaults to min)
 ---@param display_multiplier number? Multiplier for display (e.g., 100 for percentage)
 function SliderExample:create_slider(parent, label, min, max, initial_value, display_multiplier)
-    display_multiplier = display_multiplier or 1
-    initial_value = initial_value or min
+  display_multiplier = display_multiplier or 1
+  initial_value = initial_value or min
 
-    local row = FlexLove.new({
-        parent = parent,
-        width = "100%",
-        height = "5vh",
-        positioning = "flex",
-        flexDirection = "horizontal",
-        justifyContent = "space-between",
-        alignItems = "center",
-        gap = 10,
-    })
+  local row = FlexLove.new({
+    parent = parent,
+    width = "100%",
+    height = "5vh",
+    positioning = "flex",
+    flexDirection = "horizontal",
+    justifyContent = "space-between",
+    alignItems = "center",
+    gap = 10,
+  })
 
-    -- Label
-    FlexLove.new({
-        parent = row,
-        text = label,
-        textAlign = "start",
-        textSize = "md",
-        width = "30%",
-    })
+  -- Label
+  FlexLove.new({
+    parent = row,
+    text = label,
+    textAlign = "start",
+    textSize = "md",
+    width = "30%",
+  })
 
-    local slider_container = FlexLove.new({
-        parent = row,
-        width = "50%",
-        height = "100%",
-        positioning = "flex",
-        flexDirection = "horizontal",
-        alignItems = "center",
-        gap = 5,
-    })
+  local slider_container = FlexLove.new({
+    parent = row,
+    width = "50%",
+    height = "100%",
+    positioning = "flex",
+    flexDirection = "horizontal",
+    alignItems = "center",
+    gap = 5,
+  })
 
-    local value = initial_value
-    local normalized = (value - min) / (max - min)
+  local value = initial_value
+  local normalized = (value - min) / (max - min)
 
-    local function convert_x_to_percentage(mx, parentX, parentWidth)
-        local val = (mx - parentX) / parentWidth
-        if val < 0.01 then
-            val = 0
-        elseif val > 0.99 then
-            val = 1
-        else
-            val = round(val, 2)
-        end
-        -- In a real app, you'd update the actual setting here
-        value = min + (val * (max - min))
-        -- Update the display value
-        value_display.text = string.format("%d", value * display_multiplier)
+  local function convert_x_to_percentage(mx, parentX, parentWidth)
+    local val = (mx - parentX) / parentWidth
+    if val < 0.01 then
+      val = 0
+    elseif val > 0.99 then
+      val = 1
+    else
+      val = round(val, 2)
     end
+    -- In a real app, you'd update the actual setting here
+    value = min + (val * (max - min))
+    -- Update the display value
+    value_display.text = string.format("%d", value * display_multiplier)
+  end
 
-    local slider_track = FlexLove.new({
-        parent = slider_container,
-        width = "80%",
-        height = "75%",
-        positioning = "flex",
-        flexDirection = "horizontal",
-        themeComponent = "framev3",
-        onEvent = function(elem, event)
-            convert_x_to_percentage(event.x, elem.x, elem.width)
-        end,
-    })
+  local slider_track = FlexLove.new({
+    parent = slider_container,
+    width = "80%",
+    height = "75%",
+    positioning = "flex",
+    flexDirection = "horizontal",
+    themeComponent = "framev3",
+    onEvent = function(elem, event)
+      convert_x_to_percentage(event.x, elem.x, elem.width)
+    end,
+  })
 
-    local fill_bar = FlexLove.new({
-        parent = slider_track,
-        width = (normalized * 100) .. "%",
-        height = "100%",
-        themeComponent = "buttonv1",
-        onEvent = function(_, event)
-            convert_x_to_percentage(event.x, slider_track.x, slider_track.width)
-        end,
-    })
+  local fill_bar = FlexLove.new({
+    parent = slider_track,
+    width = (normalized * 100) .. "%",
+    height = "100%",
+    themeComponent = "buttonv1",
+    onEvent = function(_, event)
+      convert_x_to_percentage(event.x, slider_track.x, slider_track.width)
+    end,
+  })
 
-    local value_display = FlexLove.new({
-        parent = slider_container,
-        text = string.format("%d", value * display_multiplier),
-        textAlign = "center",
-        textSize = "md",
-        width = "15%",
-    })
+  local value_display = FlexLove.new({
+    parent = slider_container,
+    text = string.format("%d", value * display_multiplier),
+    textAlign = "center",
+    textSize = "md",
+    width = "15%",
+  })
 end
 
 --- Create an example UI with multiple sliders
 function SliderExample:render_example()
-    -- Create a window for our example
-    local window = FlexLove.new({
-        x = "10%",
-        y = "10%",
-        width = "80%",
-        height = "80%",
-        themeComponent = "framev3",
-        positioning = "flex",
-        flexDirection = "vertical",
-        justifySelf = "center",
-        justifyContent = "flex-start",
-        alignItems = "center",
-        scaleCorners = 3,
-        padding = { horizontal = "5%", vertical = "3%" },
-        gap = 20,
-    })
+  -- Create a window for our example
+  local window = FlexLove.new({
+    x = "10%",
+    y = "10%",
+    width = "80%",
+    height = "80%",
+    themeComponent = "framev3",
+    positioning = "flex",
+    flexDirection = "vertical",
+    justifySelf = "center",
+    justifyContent = "flex-start",
+    alignItems = "center",
+    scaleCorners = 3,
+    padding = { horizontal = "5%", vertical = "3%" },
+    gap = 20,
+  })
 
-    FlexLove.new({
-        parent = window,
-        text = "Slider Example",
-        textAlign = "center",
-        textSize = "3xl",
-        width = "100%",
-        margin = { top = "-4%", bottom = "4%" },
-    })
+  FlexLove.new({
+    parent = window,
+    text = "Slider Example",
+    textAlign = "center",
+    textSize = "3xl",
+    width = "100%",
+    margin = { top = "-4%", bottom = "4%" },
+  })
 
-    -- Content container
-    local content = FlexLove.new({
-        parent = window,
-        width = "100%",
-        height = "100%",
-        positioning = "flex",
-        flexDirection = "vertical",
-        padding = { top = "4%" },
-        gap = 20,
-    })
+  -- Content container
+  local content = FlexLove.new({
+    parent = window,
+    width = "100%",
+    height = "100%",
+    positioning = "flex",
+    flexDirection = "vertical",
+    padding = { top = "4%" },
+    gap = 20,
+  })
 
-    -- Create a few example sliders
-    self:create_slider(content, "Volume", 0, 100, 75, 1)
-    self:create_slider(content, "Brightness", 0, 100, 50, 1)
-    self:create_slider(content, "Sensitivity", 0.1, 2.0, 1.0, 100)
+  -- Create a few example sliders
+  self:create_slider(content, "Volume", 0, 100, 75, 1)
+  self:create_slider(content, "Brightness", 0, 100, 50, 1)
+  self:create_slider(content, "Sensitivity", 0.1, 2.0, 1.0, 100)
 end
 
-return SliderExample.init()
+return SliderExample.init()
+

examples/stateful_ui.lua

@@ -244,4 +244,3 @@ function StatefulUIExample:render()
 end
 
 return StatefulUIExample
-

examples/theme_custom_components.lua

@@ -141,4 +141,3 @@ function ThemeExample:render()
 end
 
 return ThemeExample
-