@guinetik/gcanvas 1.0.0 → 1.0.2

package/src/game/ui/tooltip.js

@@ -1,11 +1,17 @@
 import { GameObject } from "../objects/go.js";
 import { Rectangle, TextShape, Group } from "../../shapes/index.js";
+import { UI_THEME } from "./theme.js";
 
 /**
  * Tooltip
  *
  * A GameObject that displays text near the cursor when shown.
  * Supports multiline text with automatic word wrapping.
+ * 
+ * Theme: Terminal × Vercel aesthetic
+ * - Dark translucent background
+ * - Subtle green border glow
+ * - Neon green monospace text
  *
  * Usage:
  *   const tooltip = new Tooltip(game, { ... });
@@ -34,10 +40,11 @@ export class Tooltip extends GameObject {
   constructor(game, options = {}) {
     super(game, { ...options, zIndex: 9999 }); // Always on top
 
-    this.font = options.font || "12px monospace";
-    this.textColor = options.textColor || "#fff";
-    this.bgColor = options.bgColor || "rgba(0,0,0,0.85)";
-    this.borderColor = options.borderColor || "rgba(255,255,255,0.3)";
+    // Terminal × Vercel theme defaults
+    this.font = options.font || UI_THEME.fonts.small;
+    this.textColor = options.textColor || UI_THEME.tooltip.text;
+    this.bgColor = options.bgColor || UI_THEME.tooltip.bg;
+    this.borderColor = options.borderColor || UI_THEME.tooltip.border;
     this.padding = options.padding ?? 8;
     this.offsetX = options.offsetX ?? 15;
     this.offsetY = options.offsetY ?? 15;

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);
     }
   };
 }