kaplay-ui 0.18.4 → 0.20.0

package/README.md

@@ -57,9 +57,9 @@ add(checkBox);
 
 A cehckbox has the following state:
 
-| state | Type | Default | State change by |
-| --------- | -------- | ------- | ------------------- |
-| `checked` | `boolean` | false | Click on checkbox |
+| state     | Type      | Default | State change by   |
+| --------- | --------- | ------- | ----------------- |
+| `checked` | `boolean` | false   | Click on checkbox |
 
 ##### Parameters
 
@@ -74,6 +74,46 @@ A checkbox can take the following parameters:
 
 <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);
+```
+
+##### 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 <code>makeTextButton()</code> function.
@@ -137,9 +177,9 @@ add(toggle);
 
 A cehckbox has the following state:
 
-| state | Type | Default | State change by |
-| --------- | -------- | ------- | ------------------- |
-| `toggled` | `boolean` | false | Click on toggle |
+| state     | Type      | Default | State change by |
+| --------- | --------- | ------- | --------------- |
+| `toggled` | `boolean` | false   | Click on toggle |
 
 ##### Parameters
 

package/inputs/index.js

@@ -131,3 +131,96 @@ export const makeCheckbox = (x = 0, y = 0, width = 25, height = 25) => {
 
   return 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)
+ * @param {number} height - Switch height (default is 25)
+ * @returns {GameObj}
+ */
+export const makeSwitch = (x = 0, y = 0, width = 50, height = 25) => {
+  // Make switch base
+  const switchBase = make([
+    rect(width, height),
+    pos(x, y),
+    opacity(0),
+    area(),
+    {
+      switched: false,
+    },
+  ]);
+
+  // Make switch line
+  const switchLine = make([
+    rect(width, height / 2, { radius: height / 4 }),
+    color(169, 169, 169),
+    pos(0, height / 2 - height / 4),
+    area(),
+  ]);
+
+  // Make switch circle
+  const switchCircle = make([circle(height / 2), pos(height / 2, height / 2)]);
+
+  // On click
+  switchBase.onClick(() => {
+    if (switchBase.switched) {
+      switchLine.use(color(169, 169, 169));
+      switchCircle.use(color(255, 255, 255));
+      switchCircle.use(pos(height / 2, height / 2));
+      switchBase.switched = false;
+    } else {
+      switchLine.use(color(148, 188, 236));
+      switchCircle.use(color(24, 118, 210));
+      switchCircle.use(pos(width - switchCircle.radius, height / 2));
+      switchBase.switched = true;
+    }
+  });
+
+  // Add line and circle
+  switchBase.add(switchLine);
+  switchBase.add(switchCircle);
+
+  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.18.4",
+  "version": "0.20.0",
   "description": "UI components for KAPLAY",
   "main": "index.js",
   "repository": {