Kaboom Flex UI

A modern UI library for kaboom.

Installation

npm i kaboom-flex-ui

Getting Started

Firstly, import the UI plugin and load it into kaboom.

import flexUIPlugin from "kaboom-flex-ui";

const k = kaboom({
    plugins: [ flexUIPlugin ]
});

Then, to create a UI you will have to call the makeUI function with a function that returns a UI element.

const mainMenu = k.makeUI(() => k.$box(
    {
        width: 500,
        height: 500,
        background: YELLOW
    },
    k.$text("Hello, World!")
));

After defining the UI you will have to add it the current scene using its add method.

mainMenu.add();

After a reload you should now see a yellow rectangle on your screen with the text "Hello, World!".

Docs

🧰 Functions

• makeUI
• makeUI
• makeUI
• $box
• $box
• $box
• $text
• $button
• $checkbox
• $input
• default

⚙️ makeUI

Takes in a Kaboom context and a UI generator function, returning a UI manager. The UI manager allows addition, removal, and re-addition of UI elements. Takes in a UI generator function that creates a UI element and returns a UI manager. The UI manager enables addition, removal, and re-addition of the UI.

Function	Type
makeUI	{ (kaboom: KaboomCtx, generator: UIGenerator): UIManager; (generator: UIGenerator): UIManager; }

Parameters:

• kaboom: The Kaboom context used for UI creation.
• generator: The UI generator function that generates a UI element.
• generator: The UI generator function that generates a UI element.

⚙️ makeUI

Takes in a Kaboom context and a UI generator function, returning a UI manager. The UI manager allows addition, removal, and re-addition of UI elements. Takes in a UI generator function that creates a UI element and returns a UI manager. The UI manager enables addition, removal, and re-addition of the UI.

Function	Type
makeUI	{ (kaboom: KaboomCtx, generator: UIGenerator): UIManager; (generator: UIGenerator): UIManager; }

Parameters:

• kaboom: The Kaboom context used for UI creation.
• generator: The UI generator function that generates a UI element.
• generator: The UI generator function that generates a UI element.

⚙️ makeUI

Takes in a Kaboom context and a UI generator function, returning a UI manager. The UI manager allows addition, removal, and re-addition of UI elements. Takes in a UI generator function that creates a UI element and returns a UI manager. The UI manager enables addition, removal, and re-addition of the UI.

Function	Type
makeUI	{ (kaboom: KaboomCtx, generator: UIGenerator): UIManager; (generator: UIGenerator): UIManager; }

Parameters:

• kaboom: The Kaboom context used for UI creation.
• generator: The UI generator function that generates a UI element.
• generator: The UI generator function that generates a UI element.

⚙️ $box

Creates a UI box element with optional attributes and children elements. Creates a UI box element with specified attributes and optional children elements.

Function	Type
$box	{ (...children: UIElement[]): UIBoxElement; (attrs: Partial<UIBoxAttributes>, ...children: UIElement[]): UIBoxElement; }

Parameters:

• children: The children UI elements.
• attrs: The attributes for the box element.
• children: The children UI elements.

⚙️ $box

Creates a UI box element with optional attributes and children elements. Creates a UI box element with specified attributes and optional children elements.

Function	Type
$box	{ (...children: UIElement[]): UIBoxElement; (attrs: Partial<UIBoxAttributes>, ...children: UIElement[]): UIBoxElement; }

Parameters:

• children: The children UI elements.
• attrs: The attributes for the box element.
• children: The children UI elements.

⚙️ $box

Creates a UI box element with optional attributes and children elements. Creates a UI box element with specified attributes and optional children elements.

Function	Type
$box	{ (...children: UIElement[]): UIBoxElement; (attrs: Partial<UIBoxAttributes>, ...children: UIElement[]): UIBoxElement; }

Parameters:

• children: The children UI elements.
• attrs: The attributes for the box element.
• children: The children UI elements.

⚙️ $text

Creates a UI text element with the specified text and optional attributes.

Function	Type
$text	(text: string, attrs?: Partial<UITextAttributes>) => UITextElement

Parameters:

• text: The text content.
• attrs: Optional attributes for the text element.

⚙️ $button

Creates a UI button element with the specified text and attributes.

Function	Type
$button	(text: string, attrs: UIButtonAttributes) => UIBoxElement

Parameters:

• text: The text content.
• attrs: The attributes for the button element.

⚙️ $checkbox

Represents a checkbox element generator function.

Function	Type
$checkbox	(attrs: UICheckboxAttributes) => UIBoxElement

Parameters:

• attrs: The attributes for the checkbox element.

⚙️ $input

Represents an input element generator function.

Function	Type
$input	(attrs: UIInputAttributes) => UIBoxElement

Parameters:

• attrs: The attributes for the input element.

⚙️ default

A plugin that provides UI generation functionality.

Function	Type
default	(ctx: KaboomCtx) => { readonly makeUI: { (kaboom: KaboomCtx, generator: UIGenerator): UIManager; (generator: UIGenerator): UIManager; }; ... 4 more ...; readonly $input: (attrs: UIInputAttributes) => UIBoxElement; }

Parameters:

• ctx: The Kaboom context.

🏭 UITextElement

Represents a UI text element with specified attributes.

Methods

• setParent
• style
• setText
• setKaboom
• getKaboom

⚙️ setParent

Method	Type
setParent	(parent: UIManager) => void

⚙️ style

Method	Type
style	(newAttributes: Partial<UITextAttributes>) => void

⚙️ setText

Method	Type
setText	(text: string) => void

⚙️ setKaboom

Method	Type
setKaboom	(kaboom: KaboomCtx) => void

⚙️ getKaboom

Method	Type
getKaboom	() => KaboomCtx

🏭 UIBoxElement

Represents a UI box element with specified attributes and children elements.

Methods

• triggerListener
• setParent
• style
• getChild
• setKaboom
• getKaboom

⚙️ triggerListener

Method	Type
triggerListener	(event: string, ...args: any) => void

⚙️ setParent

Method	Type
setParent	(parent: UIManager) => void

⚙️ style

Method	Type
style	(newAttributes: Partial<UIBoxAttributes>) => void

⚙️ getChild

Method	Type
getChild	<U extends UIElement = UIElement>(nth: number) => UIElementPublic<U>

⚙️ setKaboom

Method	Type
setKaboom	(kaboom: KaboomCtx) => void

⚙️ getKaboom

Method	Type
getKaboom	() => KaboomCtx