🚧 This package is a work in progress! 🚧
Expect breaking changes and incomplete features.

KAPLAY UI - A UI Component Library for KAPLAY

A simple and customizable component UI library for KAPLAY.

🚀 Introduction

Kaplay UI is a component library designed specifically for KAPLAY. It will provide ready-made UI components to help you build better user interfaces for your KAPLAY games with minimal effort.

• Installation
• Usage
• License

Installation

You can install Kaplay UI via npm:

npm install kaplay-ui

Usage

Inputs

All inputs are imported from the /inputs folder.

import {} from "kaplay-ui/inputs";

Checkbox

To make a checkbox, one must use the exported makeCheckbox() function.

Example

An example usage of a checkbox.

import kaplay from "kaplay";
import "kaplay/global";

import { makeCheckbox } from "kaplay-ui/inputs";

kaplay();

const checkBox = makeCheckbox();

add(checkBox);

State

A cehckbox has the following state:

| state | Type | Default | State change by | | --------- | --------- | ------- | ----------------- | | checked | boolean | false | Click on checkbox |

Parameters

A checkbox can take the following parameters:

| Parameter | Type | Default | Required | Description | | --------- | -------- | ------- | -------- | ------------------- | | x | number | 0 | ❌ No | Checkbox x position | | y | number | 0 | ❌ No | Checkbox x position | | width | number | 25 | ❌ No | Checkbox width | | height | number | 25 | ❌ No | Checkbox height |

Switch

To make a text button, one must use the exported makeSwitch() function.

Example

An example usage of a text button.

import kaplay from "kaplay";
import "kaplay/global";

import { makeSwitch } from "kaplay-ui/inputs";

kaplay();

const switchBtn = makeSwitch();

add(switchBtn);

State

A cehckbox has the following state:

| state | Type | Default | State change by | | ---------- | --------- | ------- | --------------- | | switched | boolean | false | Click on switch |

Parameters

A switch can take the following parameters:

| Parameter | Type | Default | Required | Description | | --------- | -------- | ------- | -------- | ----------------- | | x | number | 0 | ❌ No | Switch x position | | y | number | 0 | ❌ No | Switch x position | | width | number | 50 | ❌ No | Switch width | | height | number | 25 | ❌ No | Switch height |

Text Button

To make a text button, one must use the exported makeTextButton() function.

Example

An example usage of a text button.

import kaplay from "kaplay";
import "kaplay/global";

import { makeTextButton } from "kaplay-ui/inputs";

kaplay();

const txtBtn = makeTextButton("Start");

add(txtBtn);

Parameters

A text button can take the following parameters:

| Parameter | Type | Default | Required | Description | | ------------ | -------- | ------- | -------- | ---------------------------------- | | text | string | N/A | ✅ Yes | The text to display on the button. | | x | number | 0 | ❌ No | Button x position | | y | number | 0 | ❌ No | Button y position | | width | number | 100 | ❌ No | Button width | | height | number | 50 | ❌ No | Button height | | btnRadius | number | 8 | ❌ No | Button radius | | btnOutline | number | 1 | ❌ No | Button outline | | txtSize | number | 15 | ❌ No | Text size |

Text input

To make a toggle, one must use the exported makeTextInput() function.

Example

An example usage of a toggle.

import kaplay from "kaplay";
import "kaplay/global";

import { makeTextInput } from "kaplay-ui/inputs";

kaplay();

const txtInput = makeTextInput();

add(txtInput);

Parameters

A text input can take the following parameters:

| Parameter | Type | Default | Required | Description | | ---------- | --------- | ------- | -------- | ------------------------------ | | x | number | 0 | ❌ No | x position | | y | number | 0 | ❌ No | y position | | width | number | 400 | ❌ No | width | | txtSize | number | 15 | ❌ No | Input text size | | pad | number | 10 | ❌ No | Padding | | hasFocus | boolean | true | ❌ No | If text input has focus or not |

Toggle

To make a toggle, one must use the exported makeToggle() function.

Example

An example usage of a toggle.

import kaplay from "kaplay";
import "kaplay/global";

import { makeToggle } from "kaplay-ui/inputs";

kaplay();

const toggle = makeToggle();

add(toggle);

State

A cehckbox has the following state:

| state | Type | Default | State change by | | --------- | --------- | ------- | --------------- | | toggled | boolean | false | Click on toggle |

Parameters

A toggle can take the following parameters:

| Parameter | Type | Default | Required | Description | | --------- | -------- | ------- | -------- | ----------------- | | x | number | 0 | ❌ No | Toggle x position | | y | number | 0 | ❌ No | Toggle y position | | width | number | 50 | ❌ No | Toggle width | | height | number | 25 | ❌ No | Toggle height |

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

Have questions or suggestions? Reach out via:

• GitHub Issues