@guinetik/gcanvas 1.0.1 → 1.0.2

package/src/game/ui/theme.js

@@ -1,121 +1,123 @@
-/***************************************************************
- * theme.js
- *
- * Terminal × Vercel design system for GCanvas UI components.
- * 
- * Aesthetic principles:
- * - Dark translucent backgrounds (depth, layering)
- * - Neon green (#0f0) as primary accent
- * - Monospace typography throughout
- * - Inverted colors on hover for clear feedback
- * - Minimal, clean lines inspired by terminal UIs
- ***************************************************************/
-
-/**
- * Core theme colors and values for UI components.
- * Import this for consistent styling across custom UI elements.
- * 
- * @example
- * ```js
- * import { UI_THEME } from "gcanvas";
- * 
- * const myButton = new Button(game, {
- *   colorDefaultBg: UI_THEME.colors.darkBg,
- *   colorDefaultStroke: UI_THEME.colors.neonGreen,
- *   colorDefaultText: UI_THEME.colors.neonGreen,
- * });
- * ```
- * 
- * @constant {Object}
- */
-export const UI_THEME = {
-  /**
-   * Color palette
-   */
-  colors: {
-    // Primary accent - terminal green
-    neonGreen: "#0f0",
-    terminalGreen: "#16F529",
-    
-    // Secondary accent - cyan
-    cyanAccent: "#0ff",
-    
-    // Backgrounds
-    darkBg: "rgba(0, 0, 0, 0.85)",
-    darkerBg: "rgba(0, 0, 0, 0.92)",
-    hoverBg: "#0f0",
-    pressedBg: "#0c0",
-    activeBg: "rgba(0, 255, 0, 0.15)",
-    
-    // Text
-    lightText: "#0f0",
-    darkText: "#000",
-    dimText: "rgba(0, 255, 0, 0.7)",
-    
-    // Borders
-    subtleBorder: "rgba(0, 255, 0, 0.4)",
-    activeBorder: "#0f0",
-    glowBorder: "rgba(0, 255, 0, 0.5)",
-  },
-  
-  /**
-   * Typography
-   */
-  fonts: {
-    primary: "monospace",
-    small: "11px monospace",
-    medium: "14px monospace",
-    large: "18px monospace",
-    heading: "bold 24px monospace",
-  },
-  
-  /**
-   * Spacing values
-   */
-  spacing: {
-    xs: 4,
-    sm: 8,
-    md: 12,
-    lg: 16,
-    xl: 24,
-  },
-  
-  /**
-   * Pre-configured button color schemes
-   */
-  button: {
-    default: {
-      bg: "rgba(0, 0, 0, 0.85)",
-      stroke: "rgba(0, 255, 0, 0.4)",
-      text: "#0f0",
-    },
-    hover: {
-      bg: "#0f0",
-      stroke: "#0f0",
-      text: "#000",
-    },
-    pressed: {
-      bg: "#0c0",
-      stroke: "#0f0",
-      text: "#000",
-    },
-    active: {
-      bg: "rgba(0, 255, 0, 0.15)",
-      stroke: "#0f0",
-      text: "#0f0",
-    },
-  },
-  
-  /**
-   * Pre-configured tooltip styles
-   */
-  tooltip: {
-    bg: "rgba(0, 0, 0, 0.92)",
-    border: "rgba(0, 255, 0, 0.5)",
-    text: "#0f0",
-  },
-};
-
-export default UI_THEME;
-
-
+/***************************************************************
+ * theme.js
+ *
+ * Terminal × Vercel design system for GCanvas UI components.
+ * 
+ * Aesthetic principles:
+ * - Dark translucent backgrounds (depth, layering)
+ * - Neon green (#0f0) as primary accent
+ * - Monospace typography throughout
+ * - Inverted colors on hover for clear feedback
+ * - Minimal, clean lines inspired by terminal UIs
+ ***************************************************************/
+
+/**
+ * Core theme colors and values for UI components.
+ * Import this for consistent styling across custom UI elements.
+ * 
+ * @example
+ * ```js
+ * import { UI_THEME } from "gcanvas";
+ * 
+ * const myButton = new Button(game, {
+ *   colorDefaultBg: UI_THEME.colors.darkBg,
+ *   colorDefaultStroke: UI_THEME.colors.neonGreen,
+ *   colorDefaultText: UI_THEME.colors.neonGreen,
+ * });
+ * ```
+ * 
+ * @constant {Object}
+ */
+export const UI_THEME = {
+  /**
+   * Color palette
+   */
+  colors: {
+    // Primary accent - terminal green
+    neonGreen: "#0f0",
+    terminalGreen: "#16F529",
+    
+    // Secondary accent - cyan
+    cyanAccent: "#0ff",
+    
+    // Backgrounds
+    darkBg: "rgba(0, 0, 0, 0.85)",
+    darkerBg: "rgba(0, 0, 0, 0.92)",
+    hoverBg: "#0f0",
+    pressedBg: "#0c0",
+    activeBg: "rgba(0, 255, 0, 0.15)",
+    
+    // Text
+    lightText: "#0f0",
+    darkText: "#000",
+    dimText: "rgba(0, 255, 0, 0.7)",
+    
+    // Borders
+    subtleBorder: "rgba(0, 255, 0, 0.4)",
+    activeBorder: "#0f0",
+    glowBorder: "rgba(0, 255, 0, 0.5)",
+  },
+  
+  /**
+   * Typography
+   */
+  fonts: {
+    primary: "monospace",
+    small: "11px monospace",
+    medium: "14px monospace",
+    large: "18px monospace",
+    heading: "bold 24px monospace",
+  },
+  
+  /**
+   * Spacing values
+   */
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+  },
+  
+  /**
+   * Pre-configured button color schemes
+   */
+  button: {
+    default: {
+      bg: "rgba(0, 0, 0, 0.85)",
+      stroke: "rgba(0, 255, 0, 0.4)",
+      text: "#0f0",
+    },
+    hover: {
+      bg: "#0f0",
+      stroke: "#0f0",
+      text: "#000",
+    },
+    pressed: {
+      bg: "#0c0",
+      stroke: "#0f0",
+      text: "#000",
+    },
+    active: {
+      bg: "rgba(0, 255, 0, 0.15)",
+      stroke: "#0f0",
+      text: "#0f0",
+    },
+  },
+  
+  /**
+   * Pre-configured tooltip styles
+   */
+  tooltip: {
+    bg: "rgba(0, 0, 0, 0.92)",
+    border: "rgba(0, 255, 0, 0.5)",
+    text: "#0f0",
+  },
+};
+
+export default UI_THEME;
+
+
+
+

package/src/io/input.js

@@ -1,15 +1,38 @@
 export class Input {
   static init(game) {
+    // Set defaults for last initialized game (backwards compatibility)
     Input.game = game;
     Input.x = 0;
     Input.y = 0;
     Input.down = false;
-    game.events.on("mousedown", Input._onDown);
-    game.events.on("mouseup", Input._onUp);
-    game.events.on("mousemove", Input._onMove);
-    game.events.on("touchstart", Input._onTouchStart);
-    game.events.on("touchend", Input._onTouchEnd);
-    game.events.on("touchmove", Input._onTouchMove);
+
+    // Create bound handlers that know which game they belong to
+    game.events.on("mousedown", (e) => Input._onDown(e, game));
+    game.events.on("mouseup", (e) => Input._onUp(e, game));
+    game.events.on("mousemove", (e) => Input._onMove(e, game));
+    game.events.on("touchstart", (e) => Input._onTouchStart(e, game));
+    game.events.on("touchend", (e) => Input._onTouchEnd(e, game));
+    game.events.on("touchmove", (e) => Input._onTouchMove(e, game));
+  }
+
+  /**
+   * Scales CSS pixel coordinates to canvas internal coordinates.
+   * This handles the case where the canvas is CSS-scaled (display size differs from resolution).
+   * @param {Object} game - The game instance
+   * @param {number} cssX - X coordinate in CSS pixels
+   * @param {number} cssY - Y coordinate in CSS pixels
+   * @returns {{x: number, y: number}} Scaled coordinates in canvas pixels
+   */
+  static _scaleToCanvas(game, cssX, cssY) {
+    const canvas = game.canvas;
+    const rect = canvas.getBoundingClientRect();
+    // Scale from CSS pixels to canvas internal pixels
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    return {
+      x: cssX * scaleX,
+      y: cssY * scaleY
+    };
   }
 
   static _setPosition(x, y) {
@@ -17,54 +40,61 @@ export class Input {
     Input.y = y;
   }
 
-  static _onDown = (e) => {
+  static _onDown(e, game) {
     Input.down = true;
-    Input._setPosition(e.offsetX, e.offsetY);
-    Object.defineProperty(e, "x", { value: e.offsetX, configurable: true });
-    Object.defineProperty(e, "y", { value: e.offsetY, configurable: true });
-    Input.game.events.emit("inputdown", e);
-  };
+    const scaled = Input._scaleToCanvas(game, e.offsetX, e.offsetY);
+    Input._setPosition(scaled.x, scaled.y);
+    Object.defineProperty(e, "x", { value: scaled.x, configurable: true });
+    Object.defineProperty(e, "y", { value: scaled.y, configurable: true });
+    game.events.emit("inputdown", e);
+  }
 
-  static _onUp = (e) => {
+  static _onUp(e, game) {
     Input.down = false;
-    Input._setPosition(e.offsetX, e.offsetY);
-    Object.defineProperty(e, "x", { value: e.offsetX, configurable: true });
-    Object.defineProperty(e, "y", { value: e.offsetY, configurable: true });
-    Input.game.events.emit("inputup", e);
-  };
+    const scaled = Input._scaleToCanvas(game, e.offsetX, e.offsetY);
+    Input._setPosition(scaled.x, scaled.y);
+    Object.defineProperty(e, "x", { value: scaled.x, configurable: true });
+    Object.defineProperty(e, "y", { value: scaled.y, configurable: true });
+    game.events.emit("inputup", e);
+  }
 
-  static _onMove = (e) => {
-    Input._setPosition(e.offsetX, e.offsetY);
-    Object.defineProperty(e, "x", { value: e.offsetX, configurable: true });
-    Object.defineProperty(e, "y", { value: e.offsetY, configurable: true });
-    Input.game.events.emit("inputmove", e);
-  };
+  static _onMove(e, game) {
+    const scaled = Input._scaleToCanvas(game, e.offsetX, e.offsetY);
+    Input._setPosition(scaled.x, scaled.y);
+    Object.defineProperty(e, "x", { value: scaled.x, configurable: true });
+    Object.defineProperty(e, "y", { value: scaled.y, configurable: true });
+    game.events.emit("inputmove", e);
+  }
 
-  static _onTouchStart = (e) => {
+  static _onTouchStart(e, game) {
     const touch = e.touches[0];
-    const rect = Input.game.canvas.getBoundingClientRect();
+    const rect = game.canvas.getBoundingClientRect();
     Input.down = true;
-    const x = touch.clientX - rect.left;
-    const y = touch.clientY - rect.top;
-    Input._setPosition(x, y);
-    Object.defineProperty(e, "x", { value: x, configurable: true });
-    Object.defineProperty(e, "y", { value: y, configurable: true });
-    Input.game.events.emit("inputdown", e);
-  };
+    // Calculate CSS-relative position, then scale to canvas coordinates
+    const cssX = touch.clientX - rect.left;
+    const cssY = touch.clientY - rect.top;
+    const scaled = Input._scaleToCanvas(game, cssX, cssY);
+    Input._setPosition(scaled.x, scaled.y);
+    Object.defineProperty(e, "x", { value: scaled.x, configurable: true });
+    Object.defineProperty(e, "y", { value: scaled.y, configurable: true });
+    game.events.emit("inputdown", e);
+  }
 
-  static _onTouchEnd = (e) => {
+  static _onTouchEnd(e, game) {
     Input.down = false;
-    Input.game.events.emit("inputup", e);
-  };
+    game.events.emit("inputup", e);
+  }
 
-  static _onTouchMove = (e) => {
+  static _onTouchMove(e, game) {
     const touch = e.touches[0];
-    const rect = Input.game.canvas.getBoundingClientRect();
-    const x = touch.clientX - rect.left;
-    const y = touch.clientY - rect.top;
-    Input._setPosition(x, y);
-    Object.defineProperty(e, "x", { value: x, configurable: true });
-    Object.defineProperty(e, "y", { value: y, configurable: true });
-    Input.game.events.emit("inputmove", e);
-  };
+    const rect = game.canvas.getBoundingClientRect();
+    // Calculate CSS-relative position, then scale to canvas coordinates
+    const cssX = touch.clientX - rect.left;
+    const cssY = touch.clientY - rect.top;
+    const scaled = Input._scaleToCanvas(game, cssX, cssY);
+    Input._setPosition(scaled.x, scaled.y);
+    Object.defineProperty(e, "x", { value: scaled.x, configurable: true });
+    Object.defineProperty(e, "y", { value: scaled.y, configurable: true });
+    game.events.emit("inputmove", e);
+  }
 }

package/src/io/mouse.js

@@ -1,5 +1,12 @@
 export class Mouse {
+  // Map of canvas -> game for multi-game support
+  static _gameMap = new Map();
+
   static init(game) {
+    // Store mapping from canvas to game
+    Mouse._gameMap.set(game.canvas, game);
+
+    // Set defaults for last initialized game (backwards compatibility)
     Mouse.game = game;
     Mouse.canvas = game.canvas;
     Mouse.x = 0;
@@ -8,42 +15,59 @@ export class Mouse {
     Mouse.middleDown = false;
     Mouse.rightDown = false;
 
-    Mouse.canvas.addEventListener("mousemove", Mouse._onMove);
-    Mouse.canvas.addEventListener("mousedown", Mouse._onDown);
-    Mouse.canvas.addEventListener("mouseup", Mouse._onUp);
-    Mouse.canvas.addEventListener("click", Mouse._onClick);
-    Mouse.canvas.addEventListener("wheel", Mouse._onWheel);
+    game.canvas.addEventListener("mousemove", Mouse._onMove);
+    game.canvas.addEventListener("mousedown", Mouse._onDown);
+    game.canvas.addEventListener("mouseup", Mouse._onUp);
+    game.canvas.addEventListener("click", Mouse._onClick);
+    game.canvas.addEventListener("wheel", Mouse._onWheel);
+  }
+
+  // Get the game instance for a given event's target canvas
+  static _getGameForEvent(e) {
+    const canvas = e.currentTarget;
+    return Mouse._gameMap.get(canvas) || Mouse.game;
   }
 
-  static _updatePosition(e) {
-    const rect = Mouse.canvas.getBoundingClientRect();
-    Mouse.x = e.clientX - rect.left;
-    Mouse.y = e.clientY - rect.top;
+  static _updatePosition(e, game) {
+    const canvas = game.canvas;
+    const rect = canvas.getBoundingClientRect();
+    // Calculate CSS-relative position
+    const cssX = e.clientX - rect.left;
+    const cssY = e.clientY - rect.top;
+    // Scale to canvas internal coordinates (handles CSS scaling)
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    Mouse.x = cssX * scaleX;
+    Mouse.y = cssY * scaleY;
   }
 
   static _onMove = (e) => {
-    Mouse._updatePosition(e);
-    Mouse.game.events.emit("mousemove", e);
+    const game = Mouse._getGameForEvent(e);
+    Mouse._updatePosition(e, game);
+    game.events.emit("mousemove", e);
   };
 
   static _onDown = (e) => {
-    Mouse._updatePosition(e);
+    const game = Mouse._getGameForEvent(e);
+    Mouse._updatePosition(e, game);
     if (e.button === 0) Mouse.leftDown = true;
     if (e.button === 1) Mouse.middleDown = true;
     if (e.button === 2) Mouse.rightDown = true;
-    Mouse.game.events.emit("mousedown", e);
+    game.events.emit("mousedown", e);
   };
 
   static _onUp = (e) => {
-    Mouse._updatePosition(e);
+    const game = Mouse._getGameForEvent(e);
+    Mouse._updatePosition(e, game);
     if (e.button === 0) Mouse.leftDown = false;
     if (e.button === 1) Mouse.middleDown = false;
     if (e.button === 2) Mouse.rightDown = false;
-    Mouse.game.events.emit("mouseup", e);
+    game.events.emit("mouseup", e);
   };
 
   static _onClick = (e) => {
-    Mouse._updatePosition(e);
+    const game = Mouse._getGameForEvent(e);
+    Mouse._updatePosition(e, game);
     // Emit enhanced event with canvas-relative coordinates
     // Note: e is a MouseEvent, add canvas-relative x/y directly
     e.canvasX = Mouse.x;
@@ -51,11 +75,12 @@ export class Mouse {
     // Also set x/y for convenience (matches expected fluent API)
     Object.defineProperty(e, 'x', { value: Mouse.x, writable: false });
     Object.defineProperty(e, 'y', { value: Mouse.y, writable: false });
-    Mouse.game.events.emit("click", e);
+    game.events.emit("click", e);
   };
 
   static _onWheel = (e) => {
-    Mouse._updatePosition(e);
-    Mouse.game.events.emit("wheel", e);
+    const game = Mouse._getGameForEvent(e);
+    Mouse._updatePosition(e, game);
+    game.events.emit("wheel", e);
   };
 }

package/src/io/touch.js

@@ -1,39 +1,62 @@
 export class Touch {
+  // Map of canvas -> game for multi-game support
+  static _gameMap = new Map();
+
   static init(game) {
+    // Store mapping from canvas to game
+    Touch._gameMap.set(game.canvas, game);
+
+    // Set defaults for last initialized game (backwards compatibility)
     Touch.game = game;
     Touch.canvas = game.canvas;
     Touch.x = 0;
     Touch.y = 0;
     Touch.active = false;
 
-    Touch.canvas.addEventListener("touchstart", Touch._onStart);
-    Touch.canvas.addEventListener("touchend", Touch._onEnd);
-    Touch.canvas.addEventListener("touchmove", Touch._onMove);
+    game.canvas.addEventListener("touchstart", Touch._onStart);
+    game.canvas.addEventListener("touchend", Touch._onEnd);
+    game.canvas.addEventListener("touchmove", Touch._onMove);
+  }
+
+  // Get the game instance for a given event's target canvas
+  static _getGameForEvent(e) {
+    const canvas = e.currentTarget;
+    return Touch._gameMap.get(canvas) || Touch.game;
   }
 
-  static _updatePosition(touch) {
-    const rect = Touch.canvas.getBoundingClientRect();
-    Touch.x = touch.clientX - rect.left;
-    Touch.y = touch.clientY - rect.top;
+  static _updatePosition(touch, game) {
+    const canvas = game.canvas;
+    const rect = canvas.getBoundingClientRect();
+    // Calculate CSS-relative position
+    const cssX = touch.clientX - rect.left;
+    const cssY = touch.clientY - rect.top;
+    // Scale to canvas internal coordinates (handles CSS scaling)
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    Touch.x = cssX * scaleX;
+    Touch.y = cssY * scaleY;
   }
 
   static _onStart = (e) => {
     if (e.touches.length > 0) {
+      const game = Touch._getGameForEvent(e);
       Touch.active = true;
-      Touch._updatePosition(e.touches[0]);
-      Touch.game.events.emit("touchstart", e);
+      Touch._updatePosition(e.touches[0], game);
+      game.events.emit("touchstart", e);
     }
   };
 
   static _onEnd = (e) => {
+    const game = Touch._getGameForEvent(e);
     Touch.active = false;
-    Touch.game.events.emit("touchend", e);
+    game.events.emit("touchend", e);
   };
 
   static _onMove = (e) => {
     if (e.touches.length > 0) {
-      Touch._updatePosition(e.touches[0]);
-      Touch.game.events.emit("touchmove", e);
+      const game = Touch._getGameForEvent(e);
+      Touch._updatePosition(e.touches[0], game);
+      game.events.emit("touchmove", e);
     }
   };
 }