{"id":13526497,"url":"https://github.com/Nabeel20/Badr","last_synced_at":"2025-04-01T07:32:43.175Z","repository":{"id":235412811,"uuid":"784060435","full_name":"Nabeel20/Badr","owner":"Nabeel20","description":"🌕 Simple and fun UI syntax for Löve2D","archived":false,"fork":false,"pushed_at":"2024-10-04T15:01:24.000Z","size":180,"stargazers_count":32,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T03:22:26.024Z","etag":null,"topics":["gamedev","gui","love2d","lua"],"latest_commit_sha":null,"homepage":"","language":"Lua","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nabeel20.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-09T05:33:40.000Z","updated_at":"2025-02-11T16:27:02.000Z","dependencies_parsed_at":"2024-10-14T06:03:00.797Z","dependency_job_id":"8cba1ebf-22ec-4b5f-9b51-9ed1a16f1c00","html_url":"https://github.com/Nabeel20/Badr","commit_stats":{"total_commits":337,"total_committers":1,"mean_commits":337.0,"dds":0.0,"last_synced_commit":"1a7bcfa69680fa87b884da7c75540562dd90365d"},"previous_names":["nabeel20/badar","nabeel20/badr"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nabeel20%2FBadr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nabeel20%2FBadr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nabeel20%2FBadr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nabeel20%2FBadr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nabeel20","download_url":"https://codeload.github.com/Nabeel20/Badr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246600845,"owners_count":20803495,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gamedev","gui","love2d","lua"],"created_at":"2024-08-01T06:01:30.640Z","updated_at":"2025-04-01T07:32:38.154Z","avatar_url":"https://github.com/Nabeel20.png","language":"Lua","readme":"# Badr 🌕\n\nBadr _(Full moon in Arabic)_ is a easy and enjoyable way to write user interfaces, prioritizing _**developer experience**_, _**composition**_ and _**readability**_ 🌝\n\n### Usage\n\nCopy [badr.lua](badr.lua) to your project. \u003cbr\u003e\n🌙 For a **_functional_** example see: [example.lua](components/example.lua)\n\n```lua\nfunction love.load()\n    menu = component { column = true, gap = 10 }\n        + label 'Hello, World!'\n        + label { text = 'love2d', id = '#2' }\n        + button {\n            text = 'Click me!',\n            onClick = function(self)\n                -- get child by id\n                (self.parent % '#2').text = 'awesome'\n            end\n        }\nend\n```\n\n## Creating a new component\n\nEach component acts as a container for values and includes a `draw` function.There are some default properties (`id (string)`, `x`, `y`, `width`, `height`, `visible`, `parent` and `children`). However, you can pass any additional values to a component and utilize them as needed. To create a custom component, simply override the draw function, for inspiration take a look at [components](components).\n\n### Basic layout support\n\nBadr offers built-in support for simple layout composition with `row(boolean)`, `column(boolean)`, and `gap(number)`. For more advanced layouts, you can implement custom drawing logic.\n\n```lua\nlocal newComponent = component {\n  x = 10,\n  y = 10,\n  myCustomProp = true,\n  customFunction = myCustomLogic(),\n  draw = function(self)\n      -- your drawing logic here\n      -- don't forget to loop through children to draw them\n      if not self.visible then return end\n      love.graphics.print('Hello!', self.x, self.y)\n  end,\n}\n```\n\n## Appending a child component\n\nTo append a child component to a parent component, you can use the following syntax `parent = parent + child`.\n\n### Composition\n\nComposition allows you to break your UI into simple, independent components. This approach offers greater flexibility and scalability.\n\n```lua\nlocal customComponent = component { row = true, gap = 10 }\n    + label 'second'\n    + label 'third'\n\nlocal mainComponent = component { column = true }\n    + label 'first'\n    + customComponent\n    + (component() + label 'fourth') -- this work also\n```\n\n## Removing a child component\n\nTo remove a child component from its parent, you can use the following syntax: `parent = parent - child`. To hide a component you can use `component.visible = false`.\n\n## Updating a child component\n\nTo update a child component, you can directly modify its value using: `child.value = newValue`. For continuous updates, use `:onUpdate()`, and ensure to call component update method.\n\n### Retrieving a child component by id\n\nTo retrieve a child component by its `id` (string), you can use the following syntax:, use the following syntax: `parent % id`. This will return the targeted child component\n\n### Updating the position of all children\n\nTo update the position of a child component and all its children, you can use the following syntax `:updatePosition(x,y)`.\n\n### Animating a child component\n\nTo animate any component, you can use `flux`. If you want to animate a component and all its children, you can use `:animate()`.\n\n```lua\nbutton {\n    text = 'Click for animation',\n    onClick = function(self)\n        -- Animate this component\n        self.opacity = 0\n        flux.to(self, 0.4, { opacity = 1 })\n        -- Animate the whole tree\n        self.parent:animate(function(s)\n            -- note that we pass the current position\n            flux.to(s, 2, { x = s.x + 250 })\n        end)\n    end,\n}\n```\n\n\u003e [!NOTE]\n\u003e Don't forget to call `:draw()` and `:update()`.\n\nTo check if the mouse is within a component, you can use `:isMouseInside()`. Badr uses mouse.isDown() to check for mouse clicks. Feel free to use your own methods when creating your components.\u003cbr\u003e\nFeedback and ideas appreciated ✨\n\n## License\n\nThis library is free software; you can redistribute it and/or modify it under\nthe terms of the MIT license. See [LICENSE](LICENSE) for details.\n","funding_links":[],"categories":["UI"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNabeel20%2FBadr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNabeel20%2FBadr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNabeel20%2FBadr/lists"}