@guinetik/gcanvas 1.0.4 → 1.0.5

package/dist/js/tetris/tetrominos.js

@@ -0,0 +1,280 @@
+/**
+ * Tetromino piece definitions and TetrisPiece class
+ */
+
+import { CONFIG, SHAPES, PIECE_TYPES } from "./config.js";
+
+/**
+ * TetrisPiece - Represents a falling tetromino in 3D space
+ *
+ * Uses a voxel-based representation for true 3D rotation.
+ * Pieces can rotate around X, Y, and Z axes.
+ */
+export class TetrisPiece {
+    /**
+     * Create a new tetromino piece
+     * @param {string} type - Piece type (I, O, T, S, Z, L, J)
+     */
+    constructor(type) {
+        this.type = type;
+        this.color = SHAPES[type].color;
+
+        // Convert 2D matrix to 3D voxels (relative positions)
+        this.voxels = this._matrixToVoxels(SHAPES[type].matrix);
+
+        // Position in grid coordinates
+        // Y = 0 is top of well, Y increases downward
+        this.x = 0;
+        this.y = 0;
+        this.z = 0;
+
+        // Center the piece horizontally in the well
+        this._centerPiece();
+    }
+
+    /**
+     * Convert 2D matrix to 3D voxel array
+     * @param {number[][]} matrix - 2D shape matrix
+     * @returns {Array<{x: number, y: number, z: number}>}
+     * @private
+     */
+    _matrixToVoxels(matrix) {
+        const voxels = [];
+        for (let z = 0; z < matrix.length; z++) {
+            for (let x = 0; x < matrix[z].length; x++) {
+                if (matrix[z][x]) {
+                    voxels.push({ x, y: 0, z }); // y=0 since pieces start flat
+                }
+            }
+        }
+        return voxels;
+    }
+
+    /**
+     * Center the piece at the top of the well
+     * @private
+     */
+    _centerPiece() {
+        const { width, depth } = CONFIG.grid;
+        const bounds = this.getBounds();
+
+        this.x = Math.floor((width - bounds.width) / 2);
+        this.z = Math.floor((depth - bounds.depth) / 2);
+        this.y = 0; // Start at top
+    }
+
+    /**
+     * Get bounding box dimensions of the piece
+     * @returns {{width: number, height: number, depth: number}}
+     */
+    getBounds() {
+        if (this.voxels.length === 0) {
+            return { width: 0, height: 0, depth: 0 };
+        }
+        return {
+            width: Math.max(...this.voxels.map((v) => v.x)) + 1,
+            height: Math.max(...this.voxels.map((v) => v.y)) + 1,
+            depth: Math.max(...this.voxels.map((v) => v.z)) + 1,
+        };
+    }
+
+    /**
+     * Get all world positions occupied by this piece
+     * @returns {Array<{x: number, y: number, z: number}>}
+     */
+    getWorldPositions() {
+        return this.voxels.map((v) => ({
+            x: this.x + v.x,
+            y: this.y + v.y,
+            z: this.z + v.z,
+        }));
+    }
+
+    /**
+     * Move the piece by the given offset
+     * @param {number} dx - X offset
+     * @param {number} dy - Y offset (positive = down)
+     * @param {number} dz - Z offset
+     */
+    move(dx, dy, dz) {
+        this.x += dx;
+        this.y += dy;
+        this.z += dz;
+    }
+
+    /**
+     * Rotate the piece around the specified axis
+     * @param {string} axis - 'x', 'y', or 'z'
+     * @param {number} direction - 1 for clockwise, -1 for counter-clockwise
+     */
+    rotate(axis = "y", direction = 1) {
+        // O piece doesn't rotate
+        if (this.type === "O") return;
+
+        this.voxels = this.voxels.map((v) => {
+            switch (axis) {
+                case "y": // Horizontal rotation (around Y axis)
+                    return direction === 1
+                        ? { x: -v.z, y: v.y, z: v.x }
+                        : { x: v.z, y: v.y, z: -v.x };
+                case "x": // Pitch rotation (around X axis)
+                    return direction === 1
+                        ? { x: v.x, y: -v.z, z: v.y }
+                        : { x: v.x, y: v.z, z: -v.y };
+                case "z": // Roll rotation (around Z axis)
+                    return direction === 1
+                        ? { x: -v.y, y: v.x, z: v.z }
+                        : { x: v.y, y: -v.x, z: v.z };
+                default:
+                    return v;
+            }
+        });
+
+        // Normalize to keep piece grounded (min coords = 0)
+        this._normalizeVoxels();
+    }
+
+    /**
+     * Normalize voxels so minimum x/y/z is 0
+     * This keeps the piece properly bounded after rotation
+     * @private
+     */
+    _normalizeVoxels() {
+        if (this.voxels.length === 0) return;
+
+        const minX = Math.min(...this.voxels.map((v) => v.x));
+        const minY = Math.min(...this.voxels.map((v) => v.y));
+        const minZ = Math.min(...this.voxels.map((v) => v.z));
+
+        this.voxels = this.voxels.map((v) => ({
+            x: v.x - minX,
+            y: v.y - minY,
+            z: v.z - minZ,
+        }));
+    }
+
+    /**
+     * Undo a rotation (for wall kick failure)
+     * @param {string} axis - 'x', 'y', or 'z'
+     * @param {number} direction - Original rotation direction to undo
+     */
+    undoRotate(axis = "y", direction = 1) {
+        this.rotate(axis, -direction);
+    }
+
+    /**
+     * Get the width of the piece (X dimension)
+     * @returns {number}
+     */
+    getWidth() {
+        return this.getBounds().width;
+    }
+
+    /**
+     * Get the depth of the piece (Z dimension)
+     * @returns {number}
+     */
+    getDepth() {
+        return this.getBounds().depth;
+    }
+
+    /**
+     * Clone this piece (for ghost piece calculation)
+     * @returns {TetrisPiece}
+     */
+    clone() {
+        const cloned = new TetrisPiece(this.type);
+        cloned.voxels = this.voxels.map((v) => ({ ...v }));
+        cloned.x = this.x;
+        cloned.y = this.y;
+        cloned.z = this.z;
+        return cloned;
+    }
+}
+
+/**
+ * Bag randomizer for fair piece distribution
+ * Uses the "7-bag" system where each bag contains all 7 pieces
+ */
+class PieceBag {
+    constructor() {
+        this.bag = [];
+        this._refillBag();
+    }
+
+    /**
+     * Refill the bag with all piece types, shuffled
+     * @private
+     */
+    _refillBag() {
+        this.bag = [...PIECE_TYPES];
+        // Fisher-Yates shuffle
+        for (let i = this.bag.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [this.bag[i], this.bag[j]] = [this.bag[j], this.bag[i]];
+        }
+    }
+
+    /**
+     * Get the next piece type from the bag
+     * @returns {string}
+     */
+    next() {
+        if (this.bag.length === 0) {
+            this._refillBag();
+        }
+        return this.bag.pop();
+    }
+
+    /**
+     * Peek at the next piece without removing it
+     * @returns {string}
+     */
+    peek() {
+        if (this.bag.length === 0) {
+            this._refillBag();
+        }
+        return this.bag[this.bag.length - 1];
+    }
+}
+
+// Global piece bag instance
+let pieceBag = null;
+
+/**
+ * Get a random piece using the bag randomizer
+ * @returns {TetrisPiece}
+ */
+export function getRandomPiece() {
+    if (!pieceBag) {
+        pieceBag = new PieceBag();
+    }
+    return new TetrisPiece(pieceBag.next());
+}
+
+/**
+ * Peek at the next piece type without consuming it
+ * @returns {string}
+ */
+export function peekNextPieceType() {
+    if (!pieceBag) {
+        pieceBag = new PieceBag();
+    }
+    return pieceBag.peek();
+}
+
+/**
+ * Reset the piece bag (for game restart)
+ */
+export function resetPieceBag() {
+    pieceBag = new PieceBag();
+}
+
+/**
+ * Create a specific piece type (for preview/testing)
+ * @param {string} type - Piece type
+ * @returns {TetrisPiece}
+ */
+export function createPiece(type) {
+    return new TetrisPiece(type);
+}

package/dist/js/tiles.js

@@ -0,0 +1,312 @@
+import {
+  Game,
+  Scene,
+  TileLayout,
+  HorizontalLayout,
+  Rectangle,
+  ShapeGOFactory,
+  Button,
+  FPSCounter,
+  Painter,
+  Tween,
+  Easing,
+  Position,
+} from "/gcanvas.es.min.js";
+
+// Configuration
+const CONFIG = {
+  tileSize: 50,
+  tileSpacing: 12,
+  tilePadding: 20,
+  initialTiles: 50,
+  maxColumns: 10,
+  uiHeight: 100, // Space reserved for UI at bottom
+};
+
+export class TileDemo extends Scene {
+  constructor(game, options = {}) {
+    super(game, options);
+    this.elapsedTime = this.lastChangeTime = 0;
+  }
+
+  isMobile() {
+    return this.game.width < 600;
+  }
+
+  getResponsiveColumns() {
+    const availableWidth = this.game.width - CONFIG.tilePadding * 2;
+    const tileWithSpacing = CONFIG.tileSize + CONFIG.tileSpacing;
+    const columns = Math.floor(availableWidth / tileWithSpacing);
+    return Math.max(2, Math.min(CONFIG.maxColumns, columns));
+  }
+
+  getViewportDimensions() {
+    const margin = this.isMobile() ? 20 : 40;
+    return {
+      width: this.game.width - margin * 2,
+      height: this.game.height - CONFIG.uiHeight - margin,
+    };
+  }
+
+  init() {
+    const game = this.game;
+    const viewport = this.getViewportDimensions();
+    const columns = this.getResponsiveColumns();
+
+    // 1) Create a scrollable tile grid anchored at center
+    this.grid = new TileLayout(game, {
+      anchor: Position.CENTER,
+      anchorOffsetY: -CONFIG.uiHeight / 2 + 20,
+      columns: columns,
+      spacing: CONFIG.tileSpacing,
+      padding: CONFIG.tilePadding,
+      autoSize: true,
+      debug: true,
+      // Enable scrolling
+      scrollable: true,
+      viewportWidth: viewport.width,
+      viewportHeight: viewport.height,
+    });
+
+    // Add initial tiles
+    for (let i = 0; i < CONFIG.initialTiles; i++) {
+      this.addTile();
+    }
+    this.add(this.grid);
+
+    // 2) Create a HorizontalLayout at bottom-center for UI buttons
+    this.createUI();
+  }
+
+  createUI() {
+    const game = this.game;
+    const isMobile = this.isMobile();
+    const buttonWidth = isMobile ? 70 : 90;
+
+    this.bottomUI = new HorizontalLayout(game, {
+      anchor: Position.BOTTOM_CENTER,
+      anchorOffsetY: -15,
+      spacing: isMobile ? 5 : 10,
+      padding: 10,
+      debug: false,
+      align: "center",
+    });
+    this.add(this.bottomUI);
+
+    // "Add Tile" button
+    this.bottomUI.add(new Button(game, {
+      text: isMobile ? "+" : "Add",
+      width: isMobile ? 40 : buttonWidth,
+      onClick: () => this.addTile(),
+    }));
+
+    // "Remove Tile" button
+    this.bottomUI.add(new Button(game, {
+      text: isMobile ? "-" : "Remove",
+      width: isMobile ? 40 : buttonWidth,
+      onClick: () => this.removeTile(),
+    }));
+
+    // "Add Column" button
+    this.bottomUI.add(new Button(game, {
+      text: isMobile ? "+Col" : "+ Column",
+      width: isMobile ? 50 : buttonWidth,
+      onClick: () => {
+        const maxColumns = this.getResponsiveColumns();
+        if (this.grid.columns < maxColumns) {
+          this.grid.columns++;
+          this.grid.markBoundsDirty();
+        }
+      },
+    }));
+
+    // "Remove Column" button
+    this.bottomUI.add(new Button(game, {
+      text: isMobile ? "-Col" : "- Column",
+      width: isMobile ? 50 : buttonWidth,
+      onClick: () => {
+        this.grid.columns = Math.max(1, this.grid.columns - 1);
+        this.grid.markBoundsDirty();
+      },
+    }));
+
+    // Add 10 tiles button (for quickly testing scroll)
+    this.bottomUI.add(new Button(game, {
+      text: isMobile ? "+10" : "Add 10",
+      width: isMobile ? 45 : buttonWidth,
+      onClick: () => {
+        for (let i = 0; i < 10; i++) this.addTile();
+      },
+    }));
+  }
+
+  addTile() {
+    const rect = new Rectangle({
+      width: CONFIG.tileSize,
+      height: CONFIG.tileSize,
+      color: Painter.colors.randomColorHSL(),
+      strokeColor: "white",
+    });
+    const tileGO = ShapeGOFactory.create(this.game, rect);
+    this.grid.add(tileGO);
+  }
+
+  removeTile() {
+    if (this.grid.children.length > 0) {
+      const last = this.grid.children[this.grid.children.length - 1];
+      this.grid.remove(last);
+    }
+  }
+
+  onResize() {
+    if (!this.grid) return;
+
+    // Update columns based on new width
+    const newColumns = this.getResponsiveColumns();
+    if (this.grid.columns !== newColumns) {
+      this.grid.columns = newColumns;
+    }
+
+    // Update viewport for scrolling
+    const viewport = this.getViewportDimensions();
+    this.grid._viewportWidth = viewport.width;
+    this.grid._viewportHeight = viewport.height;
+
+    this.grid.markBoundsDirty();
+    if (this.bottomUI) {
+      this.bottomUI.markBoundsDirty();
+    }
+  }
+
+  update(dt) {
+    super.update(dt);
+    this.elapsedTime += dt;
+
+    // Only process tiles every N seconds to reduce frequency
+    if (this.elapsedTime - this.lastChangeTime > 0.1) {
+      this.lastChangeTime = this.elapsedTime;
+
+      // Random number of tiles to change (between 1 and 10% of total tiles)
+      const tilesToChange = Math.max(
+        1,
+        Math.floor(this.grid.children.length * (0.1 + Math.random() * 0.1))
+      );
+
+      // Filter out tiles that are already tweening
+      const availableTiles = this.grid.children.filter(
+        (tile) => !tile.isTweening
+      );
+
+      // Shuffle and pick random tiles
+      const shuffled = [...availableTiles].sort(() => 0.5 - Math.random());
+      const selectedTiles = shuffled.slice(
+        0,
+        Math.min(tilesToChange, availableTiles.length)
+      );
+
+      // Start tweening on selected tiles
+      for (const tile of selectedTiles) {
+        tile.isTweening = true;
+        
+        // Store RGB values directly instead of CSS string to avoid parsing issues
+        const rgb = tile.shape.color ? 
+          Painter.colors.parseColorString(tile.shape.color) : 
+          [255, 255, 255]; // Default to white if color is undefined
+        
+        tile.startRGB = rgb;
+        
+        // Generate vibrant random color in RGB directly
+        const hue = Math.floor(Math.random() * 360);
+        const saturation = 80 + Math.floor(Math.random() * 20); // 80-100%
+        const lightness = 50 + Math.floor(Math.random() * 30); // 50-80%
+        const targetRGB = Painter.colors.hslToRgb(hue, saturation, lightness);
+        
+        tile.targetRGB = targetRGB;
+        tile.tweenElapsed = 0;
+        tile.tweenDuration = 0.5 + Math.random() * 0.5; // Random duration between 0.5-1.0 seconds
+      }
+    }
+
+    // Update all tweening tiles
+    for (const tile of this.grid.children) {
+      if (tile.isTweening) {
+        try {
+          // Update elapsed time
+          tile.tweenElapsed += dt;
+          
+          // Calculate progress with proper easing
+          const progress = Math.min(tile.tweenElapsed / tile.tweenDuration, 1.0);
+          const easedProgress = Easing.easeInOutQuad(progress);
+          
+          // Use the stored RGB values directly
+          if (tile.startRGB && tile.targetRGB) {
+            const newRGB = Tween.tweenColor(
+              tile.startRGB,
+              tile.targetRGB,
+              easedProgress
+            );
+            
+            // Convert interpolated RGB values to CSS color string
+            tile.shape.color = Painter.colors.rgbArrayToCSS(newRGB);
+            
+            // Check if tween is complete
+            if (progress >= 1) {
+              tile.isTweening = false;
+              tile.shape.color = Painter.colors.rgbArrayToCSS(tile.targetRGB);
+            }
+          } else {
+            // Color missing, reset the tweening state
+            console.warn("Missing color values for tweening");
+            tile.isTweening = false;
+            
+            // Set a fallback color
+            const fallbackRGB = [
+              Math.floor(Math.random() * 255),
+              Math.floor(Math.random() * 255),
+              Math.floor(Math.random() * 255)
+            ];
+            tile.shape.color = Painter.colors.rgbArrayToCSS(fallbackRGB);
+          }
+        } catch (error) {
+          // Handle any errors in the color transition
+          console.warn("Error during color tweening:", error);
+          tile.isTweening = false;
+          
+          // Set a fallback color
+          const fallbackRGB = [
+            Math.floor(Math.random() * 255),
+            Math.floor(Math.random() * 255),
+            Math.floor(Math.random() * 255)
+          ];
+          tile.shape.color = Painter.colors.rgbArrayToCSS(fallbackRGB);
+        }
+      }
+    }
+  }
+}
+
+//
+export class MyGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "black";
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+    this.tileDemo = new TileDemo(this);
+    this.pipeline.add(this.tileDemo);
+    this.pipeline.add(
+      new FPSCounter(this, {
+        anchor: "bottom-right",
+      })
+    );
+  }
+
+  onResize() {
+    if (this.tileDemo) {
+      this.tileDemo.onResize();
+    }
+  }
+}

package/dist/js/tweendemo.js

@@ -0,0 +1,79 @@
+import {
+  Game,
+  Rectangle,
+  Group,
+  Scene,
+  ShapeGOFactory,
+  TextShape,
+  FPSCounter,
+  Tween,
+  Tweenetik,
+  Easing,
+} from "/gcanvas.es.min.js";
+export class TweenDemo extends Scene {
+  constructor(game, options = {}) {
+    super(game, options);
+    const bg = new Rectangle({ width: 100, height: 100, color: "#0f0" });
+    const frame = new Rectangle({ width: 80, height: 80, color: "#000" });
+    this.label = new TextShape("1%", {
+      font: "18px monospace",
+      color: "#F0F",
+      align: "center",
+      baseline: "middle",
+    });
+    const group = new Group();
+    group.add(bg);
+    group.add(frame);
+    group.add(this.label);
+    group.scaleX = group.scaleY = 2; // add individual scale to this group to test if the outer group scales it too
+    //
+    const wrapper = new Group();
+    wrapper.add(group);
+    //
+    this.box = ShapeGOFactory.create(game, wrapper);
+    this.box.anchor = "center";
+    this.add(this.box);
+    this.growing = false;
+    this.tween();
+  }
+
+  tween() {
+    this.growing = !this.growing;
+    const scale = this.growing ? 2 : 1;
+    const easing = this.growing ? Easing.easeOutElastic : Easing.easeInOutBack;
+    // Tweenetik is a simple tweening library that works with any object
+    Tweenetik.to(
+      this.box, // an object or sprite
+      { scaleX: scale, scaleY: scale }, // the properties & end-values
+      2.0, // duration in seconds
+      easing, // easing function
+      {
+        delay: 0.3,
+        onComplete: () => this.tween(), // restart the tween
+        onUpdate: () => this.updateText(),
+      }
+    );
+  }
+
+  updateText() {
+    this.label.text = `${Math.round(this.box.scaleX * 100)}%`;
+  }
+}
+//
+export class MyGame extends Game {
+  constructor(canvas) {
+    super(canvas);
+    this.backgroundColor = "black";
+    this.enableFluidSize();
+  }
+
+  init() {
+    super.init();
+    this.pipeline.add(new TweenDemo(this, {debug: true, anchor: "center"}));
+    this.pipeline.add(
+      new FPSCounter(this, {
+        anchor: "bottom-right",
+      })
+    );
+  }
+}