@guinetik/gcanvas 1.0.0

package/src/game/ui/button.js

@@ -0,0 +1,396 @@
+/***************************************************************
+ * Button.js
+ *
+ * A basic UI Button GameObject that combines a Rectangle shape
+ * and a Text label using a Group. It supports hover and press
+ * states, and fires an optional onClick callback when clicked.
+ ***************************************************************/
+
+import { Group, Rectangle, TextShape, Shape } from "../../shapes";
+import { GameObject } from "../objects/go";
+
+/**
+ * Button - A clickable UI element as a GameObject.
+ *
+ * The Button uses:
+ *  - A background Rectangle (or a custom shape if supplied).
+ *  - A TextShape (label).
+ *  - A Group to position both.
+ *
+ * The button responds to pointer events and has states:
+ * "default", "hover", and "pressed". An optional onClick callback
+ * is fired when the user completes a press on the button.
+ *
+ * Example usage:
+ * ```js
+ * const btn = new Button(game, {
+ *   x: 200,
+ *   y: 100,
+ *   width: 150,
+ *   height: 50,
+ *   text: "Click Me",
+ *   onClick: () => this.logger.log("Button pressed!")
+ * });
+ * game.pipeline.add(btn);
+ * ```
+ */
+export class Button extends GameObject {
+  /**
+   * Create a Button instance.
+   * @param {Game} game - The main game instance.
+   * @param {object} [options={}] - Configuration for the Button.
+   * @param {number} [options.x=0] - X-position of the Button (center).
+   * @param {number} [options.y=0] - Y-position of the Button (center).
+   * @param {number} [options.width=120] - Width of the Button.
+   * @param {number} [options.height=40] - Height of the Button.
+   * @param {string} [options.text="Button"] - Label text for the Button.
+   * @param {string} [options.font="14px monospace"] - Font for the text.
+   * @param {string} [options.textColor="#000"] - Text color for the Button.
+   * @param {string} [options.textAlign="center"] - Alignment of the text.
+   * @param {string} [options.textBaseline="middle"] - Baseline of the text.
+   * @param {Rectangle|Shape} [options.shape=null] - Custom shape for the Button background. Defaults to a Rectangle.
+   * @param {TextShape} [options.label=null] - Custom text shape. Defaults to a center-aligned TextShape.
+   * @param {Function} [options.onClick=null] - Callback to invoke upon button click.
+   * @param {Function} [options.onHover=null] - Callback to invoke upon button hover.
+   * @param {Function} [options.onPressed=null] - Callback to invoke upon button pressed.
+   * @param {Function} [options.onRelease=null] - Callback to invoke upon button release.
+   * @param {string} [options.anchor] - Optional anchor for positioning (e.g. "top-left").
+   * @param {number} [options.padding] - Extra padding if using anchor.
+   * @param {string} [options.colorDefaultBg="#eee"] - Background color in default state.
+   * @param {string} [options.colorDefaultStroke="#999"] - Stroke color in default state.
+   * @param {string} [options.colorDefaultText="#333"] - Text color in default state.
+   * @param {string} [options.colorHoverBg="#222"] - Background color in hover state.
+   * @param {string} [options.colorHoverStroke="#16F529"] - Stroke color in hover state.
+   * @param {string} [options.colorHoverText="#16F529"] - Text color in hover state.
+   * @param {string} [options.colorPressedBg="#111"] - Background color in pressed state.
+   * @param {string} [options.colorPressedStroke="#00aaff"] - Stroke color in pressed state.
+   * @param {string} [options.colorPressedText="#00aaff"] - Text color in pressed state.
+   * @param {...any} rest - Additional properties passed to the superclass.
+   */
+  constructor(game, options = {}) {
+    // Pass options to the GameObject constructor
+    super(game, options);
+    
+    // Extract button-specific config
+    const {
+      x = 0,
+      y = 0,
+      width = 120,
+      height = 40,
+      text = "Button",
+      font = "14px monospace",
+      textColor = "#000",
+      textAlign = "center",
+      textBaseline = "middle",
+      shape = null,
+      label = null,
+      onClick = null,
+      onHover = null,
+      onPressed = null,
+      onRelease = null,
+      padding = 10,
+      colorDefaultBg = "#eee",
+      colorDefaultStroke = "#999",
+      colorDefaultText = "#333",
+      colorHoverBg = "#222",
+      colorHoverStroke = "#16F529",
+      colorHoverText = "#16F529",
+      colorPressedBg = "#111",
+      colorPressedStroke = "#00aaff",
+      colorPressedText = "#00aaff",
+    } = options;
+
+    // Basic position and sizing
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.padding = padding;
+    this.textAlign = textAlign;
+    this.textBaseline = textBaseline;
+    
+    // Initialize the button components
+    this.initColorScheme({
+      colorDefaultBg,
+      colorDefaultStroke,
+      colorDefaultText,
+      colorHoverBg,
+      colorHoverStroke,
+      colorHoverText,
+      colorPressedBg,
+      colorPressedStroke,
+      colorPressedText
+    });
+    
+    this.initBackground(shape);
+    this.initLabel(text, font, textColor, label);
+    this.initGroup();
+    this.initEvents(onClick, onHover, onPressed, onRelease);
+    
+    // Initialize to default state
+    this.setState("default");
+  }
+
+  /**
+   * Initialize the color scheme for different button states
+   * @param {object} colors - Configuration for button colors in different states
+   * @private
+   */
+  initColorScheme(colors) {
+    this.colors = {
+      default: {
+        bg: colors.colorDefaultBg,
+        stroke: colors.colorDefaultStroke,
+        text: colors.colorDefaultText
+      },
+      hover: {
+        bg: colors.colorHoverBg,
+        stroke: colors.colorHoverStroke,
+        text: colors.colorHoverText
+      },
+      pressed: {
+        bg: colors.colorPressedBg,
+        stroke: colors.colorPressedStroke,
+        text: colors.colorPressedText
+      }
+    };
+  }
+
+  /**
+   * Initialize the background shape of the button
+   * @param {Shape|null} shape - Custom shape or null to use default Rectangle
+   * @private
+   */
+  initBackground(shape) {
+    this.bg = shape ?? new Rectangle({
+      width: this.width,
+      height: this.height,
+      color: this.colors.default.bg,
+      stroke: this.colors.default.stroke,
+      lineWidth: 2
+    });
+  }
+
+  /**
+   * Initialize the text label of the button
+   * @param {string} text - Button text
+   * @param {string} font - Text font
+   * @param {string} textColor - Text color
+   * @param {TextShape|null} label - Custom label or null to create a new one
+   * @private
+   */
+  initLabel(text, font, textColor, label) {
+    this.label = label ?? new TextShape(text, {
+      font: font,
+      color: textColor,
+      align: this.textAlign,
+      baseline: this.textBaseline
+    });
+    
+    this.alignText();
+  }
+
+  /**
+   * Update label position based on alignment and baseline settings
+   * @private
+   */
+  alignText() {
+    if (!this.label) return;
+
+    const halfWidth = this.width / 2;
+    const halfHeight = this.height / 2;
+
+    // Horizontal alignment
+    switch (this.textAlign) {
+      case "left":
+        this.label.x = -halfWidth + this.padding;
+        break;
+      case "right":
+        this.label.x = halfWidth - this.padding;
+        break;
+      case "center":
+      default:
+        this.label.x = 0; // Center aligned means x=0 in center-based coords
+        break;
+    }
+
+    // Vertical alignment
+    switch (this.textBaseline) {
+      case "top":
+        this.label.y = -halfHeight + this.padding;
+        break;
+      case "bottom":
+        this.label.y = halfHeight - this.padding;
+        break;
+      case "middle":
+      default:
+        this.label.y = 0; // Middle aligned means y=0 in center-based coords
+        break;
+    }
+  }
+
+  /**
+   * Initialize the group that will contain both background and label
+   * @private
+   */
+  initGroup() {
+    this.group = new Group();
+    this.group.add(this.bg);
+    this.group.add(this.label);
+  }
+
+  /**
+   * Set up event handlers for mouse/touch interactions
+   * @param {Function|null} onClick - Callback to execute when button is clicked
+   * @private
+   */
+  initEvents(onClick, onHover, onPressed, onRelease) {
+    this.interactive = true;
+    this.onHover = onHover;
+    this.onPressed = onPressed;
+    this.onRelease = onRelease;
+    
+    this.on("mouseover", this.setState.bind(this, "hover"));
+    this.on("mouseout", this.setState.bind(this, "default"));
+    this.on("inputdown", this.setState.bind(this, "pressed"));
+    this.on("inputup", () => {
+      // Fire onClick if user was in "pressed" state
+      if (this.state === "pressed" && typeof onClick === "function") {
+        onClick();
+      }
+      // Return to hover state if the pointer is still over the button
+      this.setState("hover");
+    });
+  }
+
+  /**
+   * Set the Button's state and update its visual appearance.
+   * @param {string} state - "default", "hover", or "pressed".
+   */
+  setState(state) {
+    if (this.state === state) return;
+    this.state = state;
+    
+    // Adjust shape & label appearance based on the new state
+    switch (state) {
+      case "default":
+        if (this.game.cursor) {
+          setTimeout(() => {
+            this.game.cursor.activate();
+          }, 0);
+        }
+        this.bg.color = this.colors.default.bg;
+        this.bg.stroke = this.colors.default.stroke;
+        this.label.color = this.colors.default.text;
+        this.game.canvas.style.cursor = "default";
+        this.onRelease?.();
+        break;
+        
+      case "hover":
+        if (this.game.cursor) {
+          this.game.cursor.deactivate();
+        }
+        this.bg.color = this.colors.hover.bg;
+        this.bg.stroke = this.colors.hover.stroke;
+        this.label.color = this.colors.hover.text;
+        this.game.canvas.style.cursor = "pointer";
+        this.onHover?.();
+        break;
+        
+      case "pressed":
+        if (this.game.cursor) {
+          this.game.cursor.deactivate();
+        }
+        this.bg.color = this.colors.pressed.bg;
+        this.bg.stroke = this.colors.pressed.stroke;
+        this.label.color = this.colors.pressed.text;
+        this.game.canvas.style.cursor = "pointer";
+        this.onPressed?.();
+        break;
+    }
+  }
+
+  /**
+   * Update method called each frame
+   * @param {number} dt - Delta time in seconds
+   */
+  update(dt) {
+    super.update(dt);
+    
+    // Check if we need to reposition the label
+    if (this._boundsDirty) {
+      this.alignText();
+    }
+  }
+
+  /**
+   * Get the text of the Button.
+   * @returns {string} The text of the Button.
+   */
+  get text() {
+    return this.label.text;
+  }
+
+  /**
+   * Set the text of the Button.
+   * @param {string} text - The new text for the Button.
+   */
+  set text(text) {
+    this.label.text = text;
+    this._boundsDirty = true;
+  }
+
+  /**
+   * Change text alignment
+   * @param {string} align - New text alignment: "left", "center", or "right"
+   */
+  setTextAlign(align) {
+    this.textAlign = align;
+    this.label.align = align;
+    this._boundsDirty = true;
+  }
+
+  /**
+   * Change text baseline
+   * @param {string} baseline - New text baseline: "top", "middle", or "bottom"
+   */
+  setTextBaseline(baseline) {
+    this.textBaseline = baseline;
+    this.label.baseline = baseline;
+    this._boundsDirty = true;
+  }
+
+  /**
+   * Set the font for the button label
+   * @param {string} font - CSS font string (e.g., "14px Arial")
+   */
+  setFont(font) {
+    this.label.font = font;
+    this._boundsDirty = true;
+  }
+
+  /**
+   * Resize the button and update child elements
+   * @param {number} width - New button width
+   * @param {number} height - New button height
+   */
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    
+    // Update background size
+    this.bg.width = width;
+    this.bg.height = height;
+    
+    // Reposition the label
+    this._boundsDirty = true;
+  }
+
+  /**
+   * Render the Button each frame by drawing the underlying Group.
+   */
+  draw() {
+    super.draw();
+    this.group.render();
+  }
+}

package/src/game/ui/cursor.js

@@ -0,0 +1,93 @@
+import { GameObject } from "../objects/go.js";
+
+/**
+ * Cursor
+ *
+ * A GameObject that replaces the native mouse pointer with a custom shape.
+ * - Provide a normal shape (e.g. small Circle or custom icon).
+ * - Optionally provide a pressed shape to show while the mouse/touch is down.
+ *
+ * Usage:
+ *   const cursor = new Cursor(game, normalShape, pressedShape);
+ *   myScene.add(cursor);
+ */
+export class Cursor extends GameObject {
+  /**
+   * @param {Game} game - The main game instance.
+   * @param {Shape} normalShape - The shape to display when not pressed.
+   * @param {Shape} [pressedShape] - Optional shape to display when pressed.
+   */
+  constructor(game, normalShape, pressedShape = null, options = {}) {
+    super(game, options);
+    /**
+     * Shape shown when the mouse is not pressed.
+     * @type {Shape}
+     */
+    this.normalShape = normalShape;
+    /**
+     * Shape shown when the mouse is pressed.
+     * Fallback to normalShape if not provided.
+     * @type {Shape}
+     */
+    this.pressedShape = pressedShape || normalShape;
+    /**
+     * If the cursor is active.
+     */
+    this.active = false;
+    /**
+     * How far the cursor is offset from the mouse position.
+     */
+    this.offsetX = 0.0;
+    /**
+     * How far the cursor is offset from the mouse position.
+     */
+    this.offsetY = 0.0;
+    /**
+     * Whether the mouse (or touch) is currently pressed.
+     * @type {boolean}
+     */
+    this.isDown = false;
+    // Listen for pointer movements on the entire game
+    this.game.events.on("inputmove", (e) => {
+      this.x = e.x;
+      this.y = e.y;
+    });
+    this.game.events.on("inputdown", () => {
+      this.isDown = true;
+    });
+    this.game.events.on("inputup", () => {
+      this.isDown = false;
+    });
+    this.game.events.on("mouseover", () => {
+      this.visible = false;
+    });
+    this.game.events.on("mouseout", () => {
+      this.visible = true;
+    });
+  }
+
+  activate() {
+    this.active = true;
+    // Hide the native cursor 
+    this.game.canvas.style.cursor = "none";
+  }
+
+  deactivate() {
+    this.active = false;
+    // Show the native cursor
+    this.game.canvas.style.cursor = "default";
+  }
+  /**
+   * Renders whichever shape is appropriate based on mouse pressed state.
+   */
+  draw() {
+    super.draw();
+    //this.logger.log("render cursor", this.normalShape); 
+    if (!this.active) return;
+    // Decide which shape to draw
+    const shape = this.isDown && this.pressedShape ? this.pressedShape : this.normalShape;
+    if (!shape) return;
+    // Draw it
+    shape.render();
+  }
+}

package/src/game/ui/fps.js

@@ -0,0 +1,91 @@
+import { Text } from "../objects";
+
+/**
+ * FPSCounter - A simple text object displaying frames per second
+ * @extends Text
+ */
+export class FPSCounter extends Text {
+  /**
+   * Create an FPS counter
+   * @param {Game} game - The main game instance
+   * @param {Object} [options={}] - Configuration options
+   */
+  constructor(game, options = {}) {
+    // Spread the user options but provide defaults for FPS counter
+    super(game, "0 FPS", {
+      x: 0,
+      y: 0,
+      font: "12px monospace",
+      color: "#0f0", // Default to green
+      align: "center",
+      baseline: "middle",
+      debug:false,
+      ...options, // This will override defaults with user provided values
+    });
+
+    // FPS tracking properties
+    this.fps = 0;
+    this._frames = 0;
+    this._accum = 0;
+  }
+
+  /**
+   * Update the FPS counter
+   * @param {number} dt - Delta time in seconds
+   */
+  update(dt) {
+    const fps = this.game.actualFps;
+    if (!fps) return;
+  
+    this._frames++;
+    this._accum += dt;
+  
+    if (this._accum >= 0.5) {
+      this.fps = Math.round(fps);
+      this.text = `${this.fps} FPS`;
+      this._accum = 0;
+      this._frames = 0;
+    }
+    super.update(dt);
+  }
+
+  /**
+   * Override getBounds to return correct bounding box
+   * @returns {Object} Bounding box with x, y, width, and height
+   */
+  getBounds() {
+    // Use the shape's getTextBounds method if available
+    if (this.shape && this.shape.getTextBounds) {
+      const bounds = this.shape.getTextBounds();
+      
+      // Return bounds with the current object's x and y
+      return {
+        x: bounds.x,
+        y: bounds.y,
+        width: bounds.width,
+        height: bounds.height
+      };
+    }
+    
+    // Fallback to parent implementation
+    return super.getBounds();
+  }
+
+  getDebugBounds() {
+    // Use the shape's getTextBounds method if available
+    if (this.shape && this.shape.getDebugBounds) {
+      const bounds = this.shape.getDebugBounds();
+      
+      // Return bounds with the current object's x and y
+      return {
+        x: bounds.x,
+        y: bounds.y,
+        width: bounds.width,
+        height: bounds.height
+      };
+    }
+    
+    // Fallback to parent implementation
+    return super.getDebugBounds();
+  }
+}

package/src/game/ui/index.js

@@ -0,0 +1,5 @@
+export { Button } from "./button.js";
+export { Cursor } from "./cursor.js";
+export { ToggleButton } from "./togglebutton.js";
+export { Tooltip } from "./tooltip.js";
+export { FPSCounter } from "./fps.js";

package/src/game/ui/togglebutton.js

@@ -0,0 +1,93 @@
+import { Button } from "./button.js";
+
+/**
+ * ToggleButton - A variant of Button with a persistent "toggled" (active) state.
+ *
+ * Usage:
+ *   const myToggle = new ToggleButton(game, {
+ *     text: "Tool 1",
+ *     startToggled: true,  // if you want it initially on
+ *     onToggle: (isOn) => {
+ *       this.logger.log("Tool 1 toggled?", isOn);
+ *     },
+ *     onClick: () => {
+ *       this.logger.log("A normal click as well");
+ *     }
+ *   });
+ */
+export class ToggleButton extends Button {
+  constructor(game, options = {}) {
+    // We'll intercept the user's onClick, so we can handle toggling
+    const userOnClick = options.onClick;
+    
+
+    super(game, {
+      ...options,
+      onClick: () => {
+        // Flip the toggled state
+        this.toggled = !this.toggled;
+
+        // If there's an onToggle callback, call it
+        if (typeof options.onToggle === "function") {
+          options.onToggle(this.toggled);
+        }
+
+        // Also call the user's original onClick if provided
+        if (typeof userOnClick === "function") {
+          userOnClick();
+        }
+
+        // Update our visual style for toggled vs. not
+        this.refreshToggleVisual();
+      },
+    });
+    this.colorActiveBg = options.colorActiveBg || "#444";
+    this.colorActiveStroke = options.colorActiveStroke || "#0f0";
+    this.colorActiveText = options.colorActiveText || "#0f0";
+    // Track toggled state. Default is false unless 'startToggled' is set
+    this.toggled = !!options.startToggled;
+
+    // Apply the initial style according to toggled or not
+    this.refreshToggleVisual();
+  }
+
+  toggle(v) {
+    // Toggle the button state and refresh visuals
+    this.toggled = v;
+    this.refreshToggleVisual();
+  }
+
+  /**
+   * Decide how this ToggleButton looks when toggled vs. not toggled.
+   */
+  refreshToggleVisual() {
+    if (this.toggled) {
+      // E.g. "active" styling
+      this.bg.fillColor = this.colorActiveBg;
+      this.bg.strokeColor = this.colorActiveStroke;
+      this.label.color = this.colorActiveText;
+    } else {
+      // Revert to normal styling
+      this.bg.fillColor = this.colors.default.bg;
+      this.bg.strokeColor = this.colors.default.stroke;
+      this.label.color = this.colors.default.text;
+    }
+  }
+
+  /**
+   * If we want ephemeral states (hover, pressed) to remain visible briefly,
+   * we can let parent setState run, then immediately re-apply toggled style
+   * so we don't lose the "toggled" color. This is optional.
+   */
+  setState(state) {
+    super.setState(state);
+
+    // If we're toggled on, ensure it stays in the toggled visuals
+    // after the parent sets hover/pressed colors.
+    if (this.toggled) {
+      this.bg.fillColor = this.colorActiveBg;
+      this.bg.strokeColor = this.colorActiveStroke;
+      this.label.color = this.colorActiveText;
+    }
+  }
+}