kaplay-ui 0.18.3 → 0.19.0

package/README.md

@@ -26,9 +26,44 @@ npm install kaplay-ui
 
 ### Inputs
 
+All inputs are imported from the <code>/inputs</code> folder.
+
+```javascript
+import {} from "kaplay-ui/inputs";
+```
+
 #### Checkbox
 
-Makes a checkbow that takes the following parameters:
+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         |
 | --------- | -------- | ------- | -------- | ------------------- |
@@ -37,9 +72,72 @@ Makes a checkbow that takes the following parameters:
 | `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);
+```
+
+##### 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
 
-Makes a button with centered text that takes the following parameters:
+To make a text button, one must use the exported <code>makeTextButton()</code> function.
+
+##### Example
+
+An example usage of a text button.
+
+```javascript
+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                        |
 | ------------ | -------- | ------- | -------- | ---------------------------------- |
@@ -52,9 +150,40 @@ Makes a button with centered text that takes the following parameters:
 | `btnOutline` | `number` | 1       | ❌ No    | Button outline                     |
 | `txtSize`    | `number` | 15      | ❌ No    | Text size                          |
 
+<br>
+
 #### Toggle
 
-Makes a toggle that takes the following parameters:
+To make a toggle, one must use the exported <code>makeToggle()</code> function.
+
+##### Example
+
+An example usage of a toggle.
+
+```javascript
+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       |
 | --------- | -------- | ------- | -------- | ----------------- |
@@ -63,10 +192,14 @@ Makes a toggle that takes the following parameters:
 | `width`   | `number` | 50      | ❌ No    | Toggle width      |
 | `height`  | `number` | 25      | ❌ No    | Toggle height     |
 
+<br>
+
 ## License
 
 This project is licensed under the MIT License - see the LICENSE file for details.
 
+<br>
+
 ## Contact
 
 Have questions or suggestions? Reach out via:

package/inputs/index.js

@@ -131,3 +131,56 @@ export const makeCheckbox = (x = 0, y = 0, width = 25, height = 25) => {
 
   return checkbox;
 };
+
+/**
+ * Makes checkbox
+ * @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;
+};

package/package.json

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