kaplay-plugin-ui 1.0.0 → 1.0.2

package/dist/plugin.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.umd.min.js","names":["factory","global","exports","createButtonComponent","currentText","text","currentOpt","opt","readWidth","theme","readHeight","comp","value","k","next","width","height","radius","fill","textColor","size","font","drawRect","drawText","createButtonObject","baseColor","hoverColor","pressedColor","pos","obj","label","currentColor","w","h","color","x","y","DEFAULT_PRIMARY","DEFAULT_TEXT","defaultTheme","resolveTheme","input","uiPlugin","userTheme","currentTheme"],"sources":["../src/button.ts","../src/theme.ts","../src/plugin.ts"],"sourcesContent":["import type { Comp, GameObj, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport type { ButtonComp, ButtonCompOpt, Color, Theme } from './types';\n\nexport function createButtonComponent(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonCompOpt,\n): ButtonComp {\n  let currentText = text;\n  let currentOpt: ButtonCompOpt = { ...opt };\n\n  const readWidth = (): number => {\n    return currentOpt.width ?? theme.components.button.width;\n  };\n\n  const readHeight = (): number => {\n    return currentOpt.height ?? theme.components.button.height;\n  };\n\n  const comp: ButtonComp = {\n    id: 'button',\n    get text() {\n      return currentText;\n    },\n    set text(value: string) {\n      currentText = value;\n    },\n    get width() {\n      return readWidth();\n    },\n    set width(value: number) {\n      currentOpt.width = value;\n    },\n    get height() {\n      return readHeight();\n    },\n    set height(value: number) {\n      currentOpt.height = value;\n    },\n    renderArea() {\n      return new k.Rect(k.vec2(), comp.width, comp.height);\n    },\n    setStyle(next: Partial<ButtonCompOpt>): void {\n      currentOpt = { ...currentOpt, ...next };\n    },\n    add(): void {\n      // No-op: rendering is handled in draw().\n    },\n    draw(): void {\n      const width = comp.width;\n      const height = comp.height;\n      const radius = currentOpt.radius ?? theme.shape.borderRadius;\n      const fill = currentOpt.fill ?? theme.palette.primary;\n      const textColor = currentOpt.textColor ?? theme.palette.text;\n      const size = currentOpt.size ?? theme.typography.fontSize;\n      const font = currentOpt.font ?? theme.typography.fontFamily;\n\n      const drawRect = k.drawRect as unknown as\n        ((opt: Record<string, unknown>) => void) | undefined;\n      drawRect?.({\n        pos: k.vec2(),\n        width,\n        height,\n        color: fill,\n        radius,\n      });\n\n      const drawText = k.drawText as unknown as\n        ((opt: Record<string, unknown>) => void) | undefined;\n      drawText?.({\n        text: currentText,\n        pos: k.vec2(width / 2, height / 2),\n        size,\n        font,\n        color: textColor,\n        anchor: 'center',\n      });\n    },\n    destroy(): void {\n      // No resources to release.\n    },\n  };\n\n  return comp;\n}\n\nexport function createButtonObject(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonCompOpt & {\n    pos?: Vec2;\n    onClick?: () => void;\n    color?: Color;\n    hoverColor?: Color;\n    pressedColor?: Color;\n    textColor?: Color;\n  },\n): GameObj {\n  const width = opt.width ?? theme.components.button.width;\n  const height = opt.height ?? theme.components.button.height;\n  const radius = opt.radius ?? theme.shape.borderRadius;\n  const baseColor = opt.color ?? opt.fill ?? theme.palette.primary;\n  const hoverColor = opt.hoverColor ?? theme.palette.hover;\n  const pressedColor = opt.pressedColor ?? theme.palette.pressed;\n  const textColor = opt.textColor ?? theme.palette.text;\n  const size = opt.size ?? theme.typography.fontSize;\n  const font = opt.font ?? theme.typography.fontFamily;\n  const pos = opt.pos ?? k.vec2();\n\n  interface ButtonGameObj {\n    add: (comps: Comp[]) => { text: string; textSize: number };\n    onClick: (cb: () => void) => void;\n    onHover: (cb: () => void) => void;\n    onHoverEnd: (cb: () => void) => void;\n    width: number;\n    height: number;\n    color: unknown;\n    scale: { x: number; y: number };\n    pos: { x: number; y: number };\n    setSize: (w: number, h: number) => void;\n    setButtonColor: (color: Color) => void;\n    setButtonText: (value: string) => void;\n    setButtonTextSize: (value: number) => void;\n    setPosition: (x: number, y: number) => void;\n  }\n\n  const obj = k.add([\n    k.rect(width, height, radius > 0 ? { radius } : undefined),\n    k.pos(pos as never),\n    k.area(),\n    k.color(baseColor as never),\n    k.anchor('center'),\n  ]) as unknown as ButtonGameObj;\n\n  const label = obj.add([\n    k.text(text, { size, font }),\n    k.color(textColor as never),\n    k.anchor('center'),\n  ]) as GameObj & { text: string; textSize: number };\n\n  let currentText = text;\n  let currentColor: Color = baseColor;\n\n  obj.onClick(() => {\n    obj.color = pressedColor;\n    opt.onClick?.();\n  });\n  obj.onHover(() => {\n    obj.color = hoverColor;\n    obj.scale = k.vec2(1.05, 1.05);\n    k.setCursor('pointer');\n  });\n  obj.onHoverEnd(() => {\n    obj.color = currentColor;\n    obj.scale = k.vec2(1, 1);\n    k.setCursor('default');\n  });\n\n  obj.setSize = (w: number, h: number): void => {\n    obj.width = w;\n    obj.height = h;\n  };\n\n  obj.setButtonColor = (color: Color): void => {\n    currentColor = color;\n    obj.color = color;\n  };\n\n  obj.setButtonText = (value: string): void => {\n    currentText = value;\n    label.text = value;\n  };\n\n  obj.setButtonTextSize = (value: number): void => {\n    label.textSize = value;\n  };\n\n  obj.setPosition = (x: number, y: number): void => {\n    obj.pos = k.vec2(x, y);\n  };\n\n  label.text = currentText;\n\n  return obj as unknown as GameObj;\n}\n","import type { DeepPartial, Theme } from './types';\n\nconst DEFAULT_PRIMARY = '#4f8cff';\nconst DEFAULT_TEXT = '#ffffff';\n\n/** Default theme used when no theme is provided. */\nexport const defaultTheme: Theme = {\n  palette: {\n    primary: DEFAULT_PRIMARY,\n    secondary: DEFAULT_PRIMARY,\n    background: '#111827',\n    surface: '#1f2937',\n    text: DEFAULT_TEXT,\n    textSecondary: DEFAULT_TEXT,\n    hover: DEFAULT_PRIMARY,\n    pressed: DEFAULT_PRIMARY,\n    disabled: '#6b7280',\n    error: '#ef4444',\n  },\n  typography: {\n    fontFamily: 'sans-serif',\n    fontSize: 18,\n    fontWeight: 400,\n    lineHeight: 1.2,\n  },\n  shape: {\n    borderRadius: 0,\n  },\n  spacing: 8,\n  components: {\n    button: {\n      width: 120,\n      height: 40,\n      minWidth: 120,\n      paddingX: 12,\n      paddingY: 8,\n      textTransform: 'none',\n    },\n    modal: {\n      backdropOpacity: 0.5,\n      borderRadius: 8,\n    },\n    tooltip: {\n      background: '#111827',\n      textColor: DEFAULT_TEXT,\n      delay: 300,\n    },\n  },\n};\n\n/** Resolve a partial theme into a fully resolved theme. */\nexport function resolveTheme(input?: DeepPartial<Theme>): Theme {\n  return {\n    palette: { ...defaultTheme.palette, ...input?.palette },\n    typography: { ...defaultTheme.typography, ...input?.typography },\n    shape: { ...defaultTheme.shape, ...input?.shape },\n    spacing: input?.spacing ?? defaultTheme.spacing,\n    components: {\n      button: {\n        ...defaultTheme.components.button,\n        ...input?.components?.button,\n        width:\n          input?.components?.button?.width ??\n          input?.components?.button?.minWidth ??\n          defaultTheme.components.button.width,\n      },\n      modal: {\n        ...defaultTheme.components.modal,\n        ...input?.components?.modal,\n      },\n      tooltip: {\n        ...defaultTheme.components.tooltip,\n        ...input?.components?.tooltip,\n      },\n    },\n  };\n}\n","import type { GameObj, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport { createButtonComponent, createButtonObject } from './button';\nimport { resolveTheme } from './theme';\nimport type {\n  ButtonComp,\n  ButtonCompOpt,\n  Color,\n  DeepPartial,\n  Theme,\n} from './types';\n\nexport { createButtonComponent, createButtonObject } from './button';\nexport type { ButtonComp, ButtonCompOpt, Color, Theme } from './types';\n\ndeclare module 'kaplay' {\n  interface KAPLAYCtx {\n    button: (text?: string, opt?: ButtonCompOpt) => ButtonComp;\n    addButton: (\n      text?: string,\n      opt?: ButtonCompOpt & {\n        pos?: Vec2;\n        onClick?: () => void;\n        color?: Color;\n        hoverColor?: Color;\n        pressedColor?: Color;\n        textColor?: Color;\n      },\n    ) => GameObj;\n    setTheme: (theme: DeepPartial<Theme>) => void;\n    getTheme: () => Theme;\n  }\n}\n\n/** KAPLAY UI plugin. */\nexport function uiPlugin(k: KAPLAYCtx, theme: DeepPartial<Theme> = {}) {\n  let userTheme: DeepPartial<Theme> = theme;\n  let currentTheme: Theme = resolveTheme(userTheme);\n\n  const getTheme = (): Theme => currentTheme;\n\n  const setTheme = (next: DeepPartial<Theme>): void => {\n    userTheme = { ...userTheme, ...next };\n    currentTheme = resolveTheme(userTheme);\n  };\n\n  const button = (text = '', opt: ButtonCompOpt = {}): ButtonComp => {\n    return createButtonComponent(k, currentTheme, text, opt);\n  };\n\n  const addButton = (\n    text = '',\n    opt: ButtonCompOpt & {\n      pos?: Vec2;\n      onClick?: () => void;\n      color?: Color;\n      hoverColor?: Color;\n      pressedColor?: Color;\n      textColor?: Color;\n    } = {},\n  ): GameObj => {\n    return createButtonObject(k, currentTheme, text, opt);\n  };\n\n  return {\n    button,\n    addButton,\n    setTheme,\n    getTheme,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"plugin.umd.min.js","names":["factory","global","exports","toColor","color","k","createButton","width","opt","theme","height","radius","baseColor","hoverColor","pressedColor","textColor","size","font","pos","button","label","text","PRIMARY","TEXT","resolveTheme","input","uiPlugin","userTheme","currentTheme","next"],"sources":["../src/utils.ts","../src/button.ts","../src/theme.ts","../src/plugin.ts"],"sourcesContent":["import type { Color, KAPLAYCtx } from 'kaplay';\n\n/**\n * Convert hex string to color or return color.\n *\n * @param k - The Kaplay context.\n * @param color - The hex string or color.\n * @returns The color.\n */\nexport function toColor(k: KAPLAYCtx, color: string | Color): Color {\n  return typeof color === 'string' ? k.rgb(color) : color;\n}\n","import type { Color, KAPLAYCtx, Vec2 } from 'kaplay';\n\nimport type { ButtonOpt, Theme } from './types';\nimport { toColor } from './utils';\n\nexport function createButton(\n  k: KAPLAYCtx,\n  theme: Theme,\n  text: string,\n  opt: ButtonOpt & {\n    pos?: Vec2;\n    onClick?: () => void;\n    color?: string | Color;\n    hoverColor?: string | Color;\n    pressedColor?: string | Color;\n    textColor?: string | Color;\n  },\n) {\n  const width = opt.width ?? theme.components.button.width;\n  const height = opt.height ?? theme.components.button.height;\n  const radius = opt.radius ?? theme.shape.borderRadius;\n  const baseColor = toColor(k, opt.color ?? opt.fill ?? theme.palette.primary);\n  const hoverColor = toColor(k, opt.hoverColor ?? theme.palette.hover);\n  const pressedColor = toColor(k, opt.pressedColor ?? theme.palette.pressed);\n  const textColor = toColor(k, opt.textColor ?? theme.palette.text);\n  const size = opt.size ?? theme.typography.fontSize;\n  const font = opt.font ?? theme.typography.fontFamily;\n  const pos = opt.pos ?? k.vec2();\n\n  const button = k.add([\n    k.rect(width, height, radius > 0 ? { radius } : undefined),\n    k.pos(pos),\n    k.area(),\n    k.scale(),\n    k.color(baseColor),\n    k.anchor('center'),\n  ]);\n\n  const label = button.add([\n    k.text(text, { size, font }),\n    k.color(textColor as never),\n    k.anchor('center'),\n  ]);\n\n  button.onClick(() => {\n    button.color = toColor(k, pressedColor);\n    opt.onClick?.();\n  });\n\n  button.onHover(() => {\n    button.color = toColor(k, hoverColor);\n    button.scale = k.vec2(1.05, 1.05);\n    k.setCursor('pointer');\n  });\n\n  button.onHoverEnd(() => {\n    button.color = baseColor;\n    button.scale = k.vec2(1, 1);\n    k.setCursor('default');\n  });\n\n  return {\n    ...button,\n    label,\n  };\n}\n","import type { DeepPartial, Theme } from './types';\n\nconst PRIMARY = '#4f8cff';\nconst TEXT = '#ffffff';\n\n/** Default theme. */\nconst theme: Theme = {\n  palette: {\n    primary: PRIMARY,\n    secondary: PRIMARY,\n    background: '#111827',\n    surface: '#1f2937',\n    text: TEXT,\n    textSecondary: TEXT,\n    hover: PRIMARY,\n    pressed: PRIMARY,\n    disabled: '#6b7280',\n    error: '#ef4444',\n  },\n  typography: {\n    fontFamily: 'sans-serif',\n    fontSize: 18,\n    fontWeight: 400,\n    lineHeight: 1.2,\n  },\n  shape: {\n    borderRadius: 0,\n  },\n  spacing: 8,\n  components: {\n    button: {\n      width: 120,\n      height: 40,\n      minWidth: 120,\n      paddingX: 12,\n      paddingY: 8,\n      textTransform: 'none',\n    },\n    modal: {\n      backdropOpacity: 0.5,\n      borderRadius: 8,\n    },\n    tooltip: {\n      background: '#111827',\n      textColor: TEXT,\n      delay: 300,\n    },\n  },\n};\n\n/** Resolve a partial theme into a fully resolved theme. */\nexport function resolveTheme(input?: DeepPartial<Theme>): Theme {\n  return {\n    palette: { ...theme.palette, ...input?.palette },\n    typography: { ...theme.typography, ...input?.typography },\n    shape: { ...theme.shape, ...input?.shape },\n    spacing: input?.spacing ?? theme.spacing,\n    components: {\n      button: {\n        ...theme.components.button,\n        ...input?.components?.button,\n        width:\n          input?.components?.button?.width ??\n          input?.components?.button?.minWidth ??\n          theme.components.button.width,\n      },\n      modal: {\n        ...theme.components.modal,\n        ...input?.components?.modal,\n      },\n      tooltip: {\n        ...theme.components.tooltip,\n        ...input?.components?.tooltip,\n      },\n    },\n  };\n}\n","import type { KAPLAYCtx } from 'kaplay';\n\nimport { createButton } from './button';\nimport { resolveTheme } from './theme';\nimport type {\n  AddButton,\n  DeepPartial,\n  GetTheme,\n  SetTheme,\n  Theme,\n} from './types';\n\n/** KAPLAY UI plugin. */\nexport function uiPlugin(k: KAPLAYCtx, theme: DeepPartial<Theme> = {}) {\n  let userTheme: DeepPartial<Theme> = theme;\n  let currentTheme: Theme = resolveTheme(userTheme);\n\n  const getTheme: GetTheme = () => currentTheme;\n\n  const setTheme: SetTheme = (next) => {\n    userTheme = { ...userTheme, ...next };\n    currentTheme = resolveTheme(userTheme);\n  };\n\n  const addButton: AddButton = (text = '', opt = {}) => {\n    return createButton(k, currentTheme, text, opt);\n  };\n\n  return {\n    addButton,\n    setTheme,\n    getTheme,\n  };\n}\n"],"mappings":"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"}

package/global.d.ts

@@ -1,7 +1,58 @@
-import type { uiPlugin } from './dist/plugin.cjs';
+import { uiPlugin } from './dist/plugin.cjs';
+
+type Plugin = ReturnType<typeof uiPlugin>;
 
 declare global {
-  var uiPlugin: uiPlugin;
+  /**
+   * Add a button.
+   *
+   * @param text - The button text.
+   * @param opt - The button options.
+   *
+   * @example
+   * ```js
+   * addButton('Start', {
+   *   onClick: () => {
+   *     go('game');
+   *   },
+   * });
+   * ```
+   *
+   * @returns The button object.
+   */
+  var addButton: Plugin['addButton'];
+
+  /**
+   * Retrieve the theme.
+   *
+   * @example
+   * ```js
+   * getTheme();
+   * ```
+   *
+   * @returns The theme config.
+   */
+  var getTheme: Plugin['getTheme'];
+
+  /**
+   * Customize the theme.
+   *
+   * @param theme - The partial theme overrides.
+   *
+   * @example
+   * ```js
+   * setTheme({
+   *   palette: {
+   *     primary: rgb(80, 160, 255),
+   *     text: rgb(255, 255, 255),
+   *   },
+   *   shape: {
+   *     borderRadius: 8,
+   *   },
+   * });
+   * ```
+   */
+  var setTheme: Plugin['setTheme'];
 }
 
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaplay-plugin-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Kaplay plugin UI",
   "author": "Mark <mark@remarkablemark.org> (https://remarkablemark.org)",
   "main": "./dist/plugin.cjs",
@@ -67,7 +67,7 @@
     "@eslint/js": "10.0.1",
     "@types/node": "26.6.6",
     "@vitest/coverage-v8": "5.0.5",
-    "eslint": "10.13.0",
+    "eslint": "10.14.0",
     "eslint-plugin-prettier": "5.5.7",
     "eslint-plugin-simple-import-sort": "14.0.0",
     "eslint-plugin-tsdoc": "0.5.4",