kaplay-ui 0.19.0 → 0.20.1

package/README.md

@@ -114,6 +114,8 @@ A switch can take the following parameters:
 | `width`   | `number` | 50      | ❌ No    | Switch width      |
 | `height`  | `number` | 25      | ❌ No    | Switch height     |
 
+<br>
+
 #### Text Button
 
 To make a text button, one must use the exported <code>makeTextButton()</code> function.
@@ -152,6 +154,42 @@ A text button can take the following parameters:
 
 <br>
 
+#### Text input
+
+To make a toggle, one must use the exported <code>makeTextInput()</code> function.
+
+##### Example
+
+An example usage of a toggle.
+
+```javascript
+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 |
+
+<br>
+
 #### Toggle
 
 To make a toggle, one must use the exported <code>makeToggle()</code> function.

package/inputs/index.js

@@ -133,7 +133,7 @@ export const makeCheckbox = (x = 0, y = 0, width = 25, height = 25) => {
 };
 
 /**
- * Makes checkbox
+ * Makes switch
  * @param {number} x - Switch x postion (default is 0)
  * @param {number} y - Switch y postion (default is 0)
  * @param {number} width - Switch width (default is 50)
@@ -184,3 +184,43 @@ export const makeSwitch = (x = 0, y = 0, width = 50, height = 25) => {
 
   return switchBase;
 };
+
+/**
+ * Makes text input
+ * @param {number} x - Text input x postion (default is 0)
+ * @param {number} y - Text input y postion (default is 0)
+ * @param {number} width - Text input width (default is 400)
+ * @param {number} txtSize - Text input text size (default is 15)
+ * @param {number} pad - Text input padding (default is 10)
+ * @param {boolean} hasFocus - Text input focus (default is true)
+ * @returns {GameObj}
+ */
+export const makeTextInput = (
+  x = 0,
+  y = 0,
+  width = 400,
+  txtSize = 15,
+  pad = 10,
+  hasFocus = true
+) => {
+  // Text input container
+  const inputBase = make([
+    rect(width, txtSize + pad * 2),
+    pos(x, y),
+    area(),
+    outline(1),
+  ]);
+
+  // Text input
+  const input = make([
+    text("", { width: width - pad * 2, size: txtSize }),
+    textInput(hasFocus),
+    color(BLACK),
+    pos(pad, pad),
+    area(),
+  ]);
+
+  inputBase.add(input);
+
+  return inputBase;
+};

package/package.json

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