@guinetik/gcanvas 1.0.0 → 1.0.1

package/src/game/systems/index.js

@@ -0,0 +1,11 @@
+/**
+ * Game Systems Module
+ *
+ * Higher-level systems that integrate multiple components
+ * for complex simulations and behaviors.
+ *
+ * @module game/systems
+ */
+
+export { FluidSystem } from "./FluidSystem.js";
+

package/src/game/ui/button.js

@@ -4,10 +4,16 @@
  * 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.
+ * 
+ * Theme: Terminal × Vercel aesthetic
+ * - Dark transparent backgrounds
+ * - Neon green accents (#0f0)
+ * - Inverted colors on hover
  ***************************************************************/
 
 import { Group, Rectangle, TextShape, Shape } from "../../shapes";
 import { GameObject } from "../objects/go";
+import { UI_THEME } from "./theme.js";
 
 /**
  * Button - A clickable UI element as a GameObject.
@@ -56,15 +62,15 @@ export class Button extends GameObject {
    * @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 {string} [options.colorDefaultBg="rgba(0,0,0,0.85)"] - Background color in default state.
+   * @param {string} [options.colorDefaultStroke="rgba(0,255,0,0.4)"] - Stroke color in default state.
+   * @param {string} [options.colorDefaultText="#0f0"] - Text color in default state.
+   * @param {string} [options.colorHoverBg="#0f0"] - Background color in hover state (inverted).
+   * @param {string} [options.colorHoverStroke="#0f0"] - Stroke color in hover state.
+   * @param {string} [options.colorHoverText="#000"] - Text color in hover state (inverted).
+   * @param {string} [options.colorPressedBg="#0c0"] - Background color in pressed state.
+   * @param {string} [options.colorPressedStroke="#0f0"] - Stroke color in pressed state.
+   * @param {string} [options.colorPressedText="#000"] - Text color in pressed state.
    * @param {...any} rest - Additional properties passed to the superclass.
    */
   constructor(game, options = {}) {
@@ -89,15 +95,16 @@ export class Button extends GameObject {
       onPressed = null,
       onRelease = null,
       padding = 10,
-      colorDefaultBg = "#eee",
-      colorDefaultStroke = "#999",
-      colorDefaultText = "#333",
-      colorHoverBg = "#222",
-      colorHoverStroke = "#16F529",
-      colorHoverText = "#16F529",
-      colorPressedBg = "#111",
-      colorPressedStroke = "#00aaff",
-      colorPressedText = "#00aaff",
+      // Terminal × Vercel theme: dark bg, green accents, inverted hover
+      colorDefaultBg = UI_THEME.button.default.bg,
+      colorDefaultStroke = UI_THEME.button.default.stroke,
+      colorDefaultText = UI_THEME.button.default.text,
+      colorHoverBg = UI_THEME.button.hover.bg,
+      colorHoverStroke = UI_THEME.button.hover.stroke,
+      colorHoverText = UI_THEME.button.hover.text,
+      colorPressedBg = UI_THEME.button.pressed.bg,
+      colorPressedStroke = UI_THEME.button.pressed.stroke,
+      colorPressedText = UI_THEME.button.pressed.text,
     } = options;
 
     // Basic position and sizing
@@ -386,6 +393,20 @@ export class Button extends GameObject {
     this._boundsDirty = true;
   }
 
+  /**
+   * Get the bounding box of this Button for hit testing.
+   * Required for the event system to work properly.
+   * @returns {{x: number, y: number, width: number, height: number}} Bounds object
+   */
+  getBounds() {
+    return {
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height,
+    };
+  }
+
   /**
    * Render the Button each frame by drawing the underlying Group.
    */

package/src/game/ui/cursor.js

@@ -6,6 +6,20 @@ import { GameObject } from "../objects/go.js";
  * 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.
+ * 
+ * Theme: Terminal × Vercel aesthetic
+ * For best results, use shapes with terminal green (#0f0) outlines:
+ * 
+ * ```js
+ * const normalCursor = new Circle(0, 0, 8, {
+ *   stroke: "#0f0",
+ *   lineWidth: 2
+ * });
+ * const pressedCursor = new Circle(0, 0, 6, {
+ *   fill: "#0f0"
+ * });
+ * const cursor = new Cursor(game, normalCursor, pressedCursor);
+ * ```
  *
  * Usage:
  *   const cursor = new Cursor(game, normalShape, pressedShape);

package/src/game/ui/fps.js

@@ -1,7 +1,13 @@
 import { Text } from "../objects";
+import { UI_THEME } from "./theme.js";
 
 /**
  * FPSCounter - A simple text object displaying frames per second
+ * 
+ * Theme: Terminal × Vercel aesthetic
+ * - Neon green monospace text
+ * - Subtle flicker effect on update
+ * 
  * @extends Text
  */
 export class FPSCounter extends Text {
@@ -9,17 +15,19 @@ export class FPSCounter extends Text {
    * Create an FPS counter
    * @param {Game} game - The main game instance
    * @param {Object} [options={}] - Configuration options
+   * @param {string} [options.color="#0f0"] - Text color (default: terminal green)
+   * @param {string} [options.font="11px monospace"] - Font style
    */
   constructor(game, options = {}) {
-    // Spread the user options but provide defaults for FPS counter
+    // Terminal × Vercel theme: green monospace text
     super(game, "0 FPS", {
       x: 0,
       y: 0,
-      font: "12px monospace",
-      color: "#0f0", // Default to green
+      font: UI_THEME.fonts.small,
+      color: UI_THEME.colors.neonGreen,
       align: "center",
       baseline: "middle",
-      debug:false,
+      debug: false,
       ...options, // This will override defaults with user provided values
     });
 

package/src/game/ui/index.js

@@ -3,3 +3,5 @@ export { Cursor } from "./cursor.js";
 export { ToggleButton } from "./togglebutton.js";
 export { Tooltip } from "./tooltip.js";
 export { FPSCounter } from "./fps.js";
+export { Stepper } from "./stepper.js";
+export { UI_THEME } from "./theme.js";