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