kaplay-ui 0.15.2 → 0.16.0

package/README.md

@@ -24,38 +24,31 @@ npm install kaplay-ui
 
 ## Usage
 
-### Buttons
+### Inputs
 
 #### Text Button
 
-Here's some quick examples of how to add text buttons using Kaplay UI:
+Makes a button with centered text that takes the following parameters:
 
-```javascript
-import kaplay from "kaplay";
-import "kaplay/global";
+| 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                          |
 
-import { addTextButton } from "kaplay-ui/buttons";
+#### Toggle
 
-kaplay();
+Makes a toggle that takes the following parameters:
 
-// Add a text button
-addTextButton("Start");
-
-// Add a text button with an onClick handler
-addTextButton("Start", () => go("game"));
-
-// Add a text button with x and y position
-addTextButton("Start", () => go("game"), 200, 200);
-
-// Add a text button with width and height
-addTextButton("Start", () => go("game"), 200, 200, 200, 70);
-
-// Add a text button with text size
-addTextButton("Start", () => go("game"), 200, 200, 200, 70, 20);
-
-// Add a text button with disabled hover effect
-addTextButton("Start", () => go("game"), 200, 200, 200, 70, 20, false);
-```
+| Parameter | Type     | Default | Required | Description       |
+| --------- | -------- | ------- | -------- | ----------------- |
+| `x`       | `number` | 0       | ❌ No    | Toggle x position |
+| `y`       | `number` | 0       | ❌ No    | Toggle y position |
 
 ## License
 

package/{buttons → inputs}/index.js

@@ -45,3 +45,42 @@ export const makeTextButton = (
 
   return btn;
 };
+
+/**
+ * Makes toggle
+ * @param {number} x - The x postion to set (default is 0).
+ * @param {number} y - The x postion to set (default is 0)
+ * @returns {GameObj}
+ */
+export const makeToggle = (x = 0, y = 0) => {
+  // Toggle base
+  const toggle = make([
+    rect(50, 25, { radius: 25 }),
+    pos(x, y),
+    color(169, 169, 169),
+    area(),
+    {
+      toggled: false,
+    },
+  ]);
+
+  // Toggle button
+  const toggleBtn = make([circle(10), color(WHITE), pos(12.5, 12.5)]);
+
+  // Add button to toggleBase
+  toggle.add(toggleBtn);
+
+  toggle.onClick(() => {
+    if (toggle.toggled) {
+      toggle.use(color(169, 169, 169));
+      toggleBtn.use(pos(12.5, 12.5));
+      toggle.toggled = false;
+    } else {
+      toggle.use(color(59, 130, 246));
+      toggleBtn.use(pos(37.5, 12.5));
+      toggle.toggled = true;
+    }
+  });
+
+  return toggle;
+};

package/package.json

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