kaplay-ui 0.20.0 → 0.20.3

package/README.md

@@ -1,207 +1,79 @@
-![WIP](https://img.shields.io/badge/status-WIP-yellow)
-<br>_🚧 This package is a work in progress! 🚧_  
-_Expect breaking changes and incomplete features._
+# KAPLAY UI
 
-# KAPLAY UI - A UI Component Library for KAPLAY
+_A simple and customizable UI plugin library for building interfaces in https://kaplayjs.com/._
 
-_A simple and customizable component UI library for [KAPLAY](https://kaplayjs.com/)._
+Kaplay UI provides a game‑oriented **UI plugin** designed specifically for KAPLAY.
 
-## 🚀 Introduction
+It helps you build buttons, menus, controls, HUD elements, input fields, and more—without reinventing the wheel.
 
-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.
+> ⚠️ **Note**  
+> The currently published stable version (`0.20.1`) is being replaced by a complete redesign.  
+> A new **v1** version is under active development and can be installed in prerelease form (see below).
 
-- [Installation](#installation)
-- [Usage](#usage)
-- [License](#license)
+---
 
-## Installation
+## 📦 Installation
 
-You can install Kaplay UI via npm:
+### Stable release
 
 ```bash
 npm install kaplay-ui
 ```
 
-## Usage
+### Prerelease (new v1 work)
 
-### Inputs
-
-All inputs are imported from the <code>/inputs</code> folder.
-
-```javascript
-import {} from "kaplay-ui/inputs";
-```
-
-#### Checkbox
-
-To make a checkbox, one must use the exported <code>makeCheckbox()</code> function.
-
-##### Example
-
-An example usage of a checkbox.
-
-```javascript
-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     |
-
-<br>
-
-#### Switch
-
-To make a text button, one must use the exported <code>makeSwitch()</code> function.
-
-##### Example
-
-An example usage of a text button.
-
-```javascript
-import kaplay from "kaplay";
-import "kaplay/global";
-
-import { makeSwitch } from "kaplay-ui/inputs";
-
-kaplay();
-
-const switchBtn = makeSwitch();
-
-add(switchBtn);
+```bash
+npm install kaplay-ui@next
 ```
 
-##### 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
+This gives you the latest `1.0.0‑alpha.*` builds.
 
-To make a text button, one must use the exported <code>makeTextButton()</code> function.
+---
 
-##### Example
+## 🚀 Usage
 
-An example usage of a text button.
+Kaplay UI exports a plugin for adding UI elements.
 
-```javascript
-import kaplay from "kaplay";
-import "kaplay/global";
+The plugin is exported from the package root:
 
-import { makeTextButton } from "kaplay-ui/inputs";
-
-kaplay();
-
-const txtBtn = makeTextButton("Start");
-
-add(txtBtn);
+```ts
+import kaplayUI from "kaplay-ui";
 ```
 
-##### 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                          |
-
-<br>
+---
 
-#### Toggle
+## 🧩 Game Object (_**will evolve over time**_)
 
-To make a toggle, one must use the exported <code>makeToggle()</code> function.
+### **Switch**
 
-##### Example
+### **Text Button**
 
-An example usage of a toggle.
+Clickable text-based button:
 
-```javascript
-import kaplay from "kaplay";
-import "kaplay/global";
-
-import { makeToggle } from "kaplay-ui/inputs";
-
-kaplay();
-
-const toggle = makeToggle();
-
-add(toggle);
+```ts
+const txtBtn = addTextButton("Play!", 200, 100);
 ```
 
-##### State
-
-A cehckbox has the following state:
+---
 
-| state     | Type      | Default | State change by |
-| --------- | --------- | ------- | --------------- |
-| `toggled` | `boolean` | false   | Click on toggle |
+## 🛣️ Roadmap
 
-##### Parameters
+_to be added shortly .._
 
-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
 
-<br>
+This project is licensed under the **MIT License**.  
+See the `LICENSE` file for details.
 
-## License
+---
 
-This project is licensed under the MIT License - see the LICENSE file for details.
+## 💬 Contact
 
-<br>
+Have questions or suggestions?  
+Open an issue on GitHub:
 
-## Contact
+👉 <https://github.com/jbakchr/kaplay-ui>
 
-Have questions or suggestions? Reach out via:
 
-- GitHub Issues

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaplay-ui",
-  "version": "0.20.0",
+  "version": "0.20.3",
   "description": "UI components for KAPLAY",
   "main": "index.js",
   "repository": {