kaplay-ui 0.3.0 → 0.4.0

package/README.md

@@ -20,16 +20,18 @@ npm install kaplay-ui
 
 ## 🛠️ Usage
 
-Here’s a quick example of how to add a simple clickable button using Kaplay UI:
+Here’s a quick example of how to add a simple clickable and hoverable text button using Kaplay UI:
 
 ```javascript
 import kaplay from "kaplay";
+import "kaplay/global";
+
 import { addTextButton } from "kaplay-ui";
 
 kaplay();
 
 // Add a UI button
-addTextButton(center().x, center().y, "start", () => go("game"));
+addTextButton(center().x, center().y, "start");
 ```
 
 ## 📄 License

package/index.js

@@ -2,14 +2,14 @@ import "kaplay/global";
 
 /**
  * Adds a clickable button with custom text
+ * @param {string} txt - Button text to display
  * @param {number} x - The x postion to set.
  * @param {y} y - The y position to set.
- * @param {string} txt - Button text to display
  * @param {Function} [f] - Click event handler (default is () => {}))
  * @param {boolean} [hover] - Add hover effect (default is true)
  * @returns {GameObj}
  */
-export const addTextButton = (x, y, txt, f = () => {}, hover = true) => {
+export const addTextButton = (txt, x, y, f = () => {}, hover = true) => {
   const btn = add([
     rect(240, 80, { radius: 8 }),
     pos(x, y),
@@ -17,9 +17,20 @@ export const addTextButton = (x, y, txt, f = () => {}, hover = true) => {
     anchor("center"),
     outline(4),
     color(255, 255, 255),
+    z(10),
+  ]);
+
+  // Shadow effect
+  btn.add([
+    pos(x, y).add(3, 3),
+    rect(240, 80),
+    color(0, 50, 150),
+    anchor("center"),
+    z(5),
   ]);
 
-  btn.add([text(txt), anchor("center"), color(0, 0, 0)]);
+  // button text
+  btn.add([text(txt), anchor("center"), color(0, 0, 0), z(15)]);
 
   btn.onClick(f);
 

package/package.json

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