kaplay-ui 0.13.0 → 0.15.0

package/README.md

@@ -26,22 +26,6 @@ npm install kaplay-ui
 
 ### Buttons
 
-#### Icon Button
-
-```javascript
-import kaplay from "kaplay";
-import "kaplay/global";
-
-import { addIconButton } from "kaplay-ui/buttons";
-
-kaplay();
-
-loadSprite("arrow", "sprites/arrow.png");
-
-// Add a text button with an onClick handler
-addIconButton("arrow", () => go("game"));
-```
-
 #### Text Button
 
 Here's some quick examples of how to add text buttons using Kaplay UI:

package/buttons/index.js

@@ -8,6 +8,7 @@ import "kaplay/global";
  * @param {number} width - Width of button (default is 100)
  * @param {number} height - Height of button (default is 50)
  * @param {number} btnRadius - Border radius of button (default is 8)
+ * @param {number} outline - Button radius (default is 1)
  * @param {number} txtSize - Text size of button (default is 15)
  * @returns {GameObj}
  */
@@ -18,6 +19,7 @@ export const makeTextButton = (
   width = 100,
   height = 50,
   btnRadius = 8,
+  outline = 1,
   txtSize = 15
 ) => {
   // Make button
@@ -26,7 +28,7 @@ export const makeTextButton = (
     pos(x, y),
     area(),
     scale(1),
-    outline(1),
+    outline(outline),
     color(255, 255, 255),
   ]);
 
@@ -43,73 +45,3 @@ export const makeTextButton = (
 
   return btn;
 };
-
-/**
- * Adds a clickable button icon button with hover effect
- * @param {string} spriteName - Sprite to use as icon
- * @param {Function} [onClick] - Click event handler (default is () => {}))
- * @param {number} x - The x postion to set (default is center().x).
- * @param {number} y - The x postion to set (default is center().y)
- * @param {number} w - Width of button (default is 48)
- * @param {number} h - Height of button (default is 48)
- * @param {boolean} [hoverFx] - Add hover effect (default is true)
- * @returns {GameObj}
- */
-export const addIconButton = (
-  spriteName,
-  onClick = () => {},
-  x = center().x,
-  y = center().y,
-  w = 48,
-  h = 48,
-  hoverFx = true
-) => {
-  // Shadow effect
-  const shadow = add([
-    rect(w, h, { radius: 8 }),
-    pos(x + 2, y + 2),
-    area(),
-    scale(1),
-    anchor("center"),
-    outline(1),
-    color(128, 128, 128),
-  ]);
-
-  // Add button
-  const iconBtn = add([
-    rect(w, h, { radius: 8 }),
-    pos(x, y),
-    area(),
-    scale(1),
-    anchor("center"),
-    outline(1),
-  ]);
-
-  // Add icon
-  iconBtn.add([sprite(spriteName), anchor("center")]);
-
-  // On click handler
-  iconBtn.onClick(() => {
-    setCursor("default");
-    onClick();
-  });
-
-  // On hover effect
-  iconBtn.onHover(() => {
-    setCursor("pointer");
-    if (hoverFx) {
-      iconBtn.scale = vec2(1.03);
-      shadow.scale = vec2(1.03);
-    }
-  });
-
-  iconBtn.onHoverEnd(() => {
-    setCursor("default");
-    if (hoverFx) {
-      iconBtn.scale = vec2(1);
-      shadow.scale = vec2(1);
-    }
-  });
-
-  return iconBtn;
-};

package/package.json

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