@guinetik/gcanvas 1.0.4 → 1.0.5

package/dist/js/tetris/config.js

@@ -0,0 +1,157 @@
+/**
+ * 3D Tetris Configuration
+ * All game constants and settings
+ */
+
+export const CONFIG = {
+    // Grid dimensions
+    grid: {
+        width: 6,   // X axis
+        depth: 6,   // Z axis
+        height: 16, // Y axis (pieces fall down Y)
+    },
+
+    // Timing (in seconds)
+    timing: {
+        fallSpeed: 1.0,          // Seconds per row at level 1
+        lockDelay: 0.5,          // Seconds before piece locks after landing
+        softDropMultiplier: 15,  // Speed multiplier when holding down
+        moveRepeatDelay: 0.15,   // Delay before key repeat starts
+        moveRepeatRate: 0.05,    // Rate of key repeat
+    },
+
+    // Camera settings
+    camera: {
+        perspective: 800,
+        rotationX: 0.4,
+        rotationY: -0.5,
+        inertia: true,
+        friction: 0.95,
+        // Preset camera views for cycling
+        presets: [
+            { name: "Default", rotationX: 0.4, rotationY: -0.5 },
+            { name: "Front", rotationX: 0.3, rotationY: 0 },
+            { name: "Side", rotationX: 0.3, rotationY: -Math.PI / 2 },
+            { name: "Top", rotationX: 1.2, rotationY: 0 },
+            { name: "Isometric", rotationX: 0.6, rotationY: -0.78 },
+        ],
+    },
+
+    // Visual settings (cubeSize is calculated dynamically based on screen)
+    visual: {
+        // These are fractions of min(width, height) for responsive scaling
+        cubeSizeFraction: 0.055,   // Cube size as fraction of screen (bigger = fills more screen)
+        cubeGapFraction: 0.003,    // Gap between cubes
+        wellColor: "#00FF41",      // Terminal green
+        wellLineWidth: 2,
+        ghostAlpha: 0.25,
+        backgroundColor: "#000000",
+
+        // Sticker mode for cubes
+        stickerMode: true,
+        stickerMargin: 0.1,
+        stickerBackgroundColor: "#0A0A0A",
+    },
+
+    // Piece colors (classic Tetris colors)
+    pieceColors: {
+        I: "#00FFFF",  // Cyan
+        O: "#FFFF00",  // Yellow
+        T: "#AA00FF",  // Purple
+        S: "#00FF00",  // Green
+        Z: "#FF0000",  // Red
+        L: "#FFA500",  // Orange
+        J: "#0066FF",  // Blue
+    },
+
+    // Scoring
+    scoring: {
+        single: 100,
+        double: 300,
+        triple: 500,
+        tetris: 800,     // 4 lines at once
+        softDrop: 1,     // Per cell
+        hardDrop: 2,     // Per cell
+    },
+
+    // Leveling
+    leveling: {
+        linesPerLevel: 10,
+        speedMultiplier: 0.85,  // Multiply fall time by this each level
+        maxLevel: 15,
+    },
+
+    // Sound (placeholder for future)
+    sound: {
+        enabled: false,
+        masterVolume: 0.5,
+    },
+};
+
+/**
+ * Tetromino shape definitions
+ * Each shape is a 2D array representing the XZ plane
+ * Pieces fall along the Y axis
+ */
+export const SHAPES = {
+    I: {
+        // Long bar - 4x1
+        matrix: [
+            [1, 1, 1, 1],
+        ],
+        color: CONFIG.pieceColors.I,
+    },
+    O: {
+        // Square - 2x2
+        matrix: [
+            [1, 1],
+            [1, 1],
+        ],
+        color: CONFIG.pieceColors.O,
+    },
+    T: {
+        // T-shape - 3x2
+        matrix: [
+            [1, 1, 1],
+            [0, 1, 0],
+        ],
+        color: CONFIG.pieceColors.T,
+    },
+    S: {
+        // S-shape - 3x2
+        matrix: [
+            [0, 1, 1],
+            [1, 1, 0],
+        ],
+        color: CONFIG.pieceColors.S,
+    },
+    Z: {
+        // Z-shape - 3x2
+        matrix: [
+            [1, 1, 0],
+            [0, 1, 1],
+        ],
+        color: CONFIG.pieceColors.Z,
+    },
+    L: {
+        // L-shape - 2x3
+        matrix: [
+            [1, 0],
+            [1, 0],
+            [1, 1],
+        ],
+        color: CONFIG.pieceColors.L,
+    },
+    J: {
+        // J-shape - 2x3
+        matrix: [
+            [0, 1],
+            [0, 1],
+            [1, 1],
+        ],
+        color: CONFIG.pieceColors.J,
+    },
+};
+
+// List of all piece types for random selection
+export const PIECE_TYPES = Object.keys(SHAPES);

package/dist/js/tetris/grid.js

@@ -0,0 +1,286 @@
+/**
+ * Grid - 3D grid for tracking placed blocks
+ *
+ * Coordinate system:
+ * - X: left to right (0 to width-1)
+ * - Y: top to bottom (0 to height-1, 0 is top)
+ * - Z: front to back (0 to depth-1)
+ */
+
+import { CONFIG } from "./config.js";
+
+/**
+ * Cell data structure
+ * @typedef {Object} Cell
+ * @property {boolean} filled - Whether the cell is occupied
+ * @property {string|null} color - Color of the block, or null if empty
+ */
+
+export class Grid {
+    constructor() {
+        const { width, depth, height } = CONFIG.grid;
+        this.width = width;
+        this.depth = depth;
+        this.height = height;
+
+        // 3D array: cells[x][y][z]
+        this.cells = [];
+
+        this._init();
+    }
+
+    /**
+     * Initialize empty grid
+     * @private
+     */
+    _init() {
+        this.cells = [];
+        for (let x = 0; x < this.width; x++) {
+            this.cells[x] = [];
+            for (let y = 0; y < this.height; y++) {
+                this.cells[x][y] = [];
+                for (let z = 0; z < this.depth; z++) {
+                    this.cells[x][y][z] = { filled: false, color: null };
+                }
+            }
+        }
+    }
+
+    /**
+     * Clear the grid (for game restart)
+     */
+    clear() {
+        this._init();
+    }
+
+    /**
+     * Check if coordinates are within grid bounds
+     * @param {number} x
+     * @param {number} y
+     * @param {number} z
+     * @returns {boolean}
+     */
+    isInBounds(x, y, z) {
+        return (
+            x >= 0 &&
+            x < this.width &&
+            y >= 0 &&
+            y < this.height &&
+            z >= 0 &&
+            z < this.depth
+        );
+    }
+
+    /**
+     * Check if a cell is occupied (or out of bounds)
+     * @param {number} x
+     * @param {number} y
+     * @param {number} z
+     * @returns {boolean}
+     */
+    isOccupied(x, y, z) {
+        // Out of bounds on sides/bottom counts as occupied
+        if (x < 0 || x >= this.width || z < 0 || z >= this.depth) {
+            return true;
+        }
+        // Above grid is not occupied (pieces spawn there)
+        if (y < 0) {
+            return false;
+        }
+        // Below grid counts as occupied (floor)
+        if (y >= this.height) {
+            return true;
+        }
+        return this.cells[x][y][z].filled;
+    }
+
+    /**
+     * Check if a piece can be placed at given positions
+     * @param {Array<{x: number, y: number, z: number}>} positions
+     * @returns {boolean}
+     */
+    canPlace(positions) {
+        for (const pos of positions) {
+            if (this.isOccupied(pos.x, pos.y, pos.z)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    /**
+     * Lock a piece into the grid
+     * @param {Array<{x: number, y: number, z: number}>} positions
+     * @param {string} color
+     */
+    placePiece(positions, color) {
+        for (const pos of positions) {
+            if (this.isInBounds(pos.x, pos.y, pos.z)) {
+                this.cells[pos.x][pos.y][pos.z] = {
+                    filled: true,
+                    color: color,
+                };
+            }
+        }
+    }
+
+    /**
+     * Check for complete layers and clear them
+     * @returns {{clearedCount: number, clearedLayers: number[]}}
+     */
+    checkAndClearLayers() {
+        const clearedLayers = [];
+
+        // Check each layer from bottom to top
+        for (let y = this.height - 1; y >= 0; y--) {
+            if (this._isLayerComplete(y)) {
+                clearedLayers.push(y);
+            }
+        }
+
+        // Clear the layers (from bottom to top to maintain indices)
+        clearedLayers.sort((a, b) => b - a);
+        for (const y of clearedLayers) {
+            this._clearLayer(y);
+        }
+
+        return {
+            clearedCount: clearedLayers.length,
+            clearedLayers: clearedLayers,
+        };
+    }
+
+    /**
+     * Check if a horizontal layer is completely filled
+     * @param {number} y - Layer Y coordinate
+     * @returns {boolean}
+     * @private
+     */
+    _isLayerComplete(y) {
+        for (let x = 0; x < this.width; x++) {
+            for (let z = 0; z < this.depth; z++) {
+                if (!this.cells[x][y][z].filled) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+
+    /**
+     * Clear a layer and drop everything above
+     * @param {number} clearedY - Layer to clear
+     * @private
+     */
+    _clearLayer(clearedY) {
+        // Move all layers above down by one
+        for (let y = clearedY; y > 0; y--) {
+            for (let x = 0; x < this.width; x++) {
+                for (let z = 0; z < this.depth; z++) {
+                    this.cells[x][y][z] = { ...this.cells[x][y - 1][z] };
+                }
+            }
+        }
+
+        // Clear the top layer
+        for (let x = 0; x < this.width; x++) {
+            for (let z = 0; z < this.depth; z++) {
+                this.cells[x][0][z] = { filled: false, color: null };
+            }
+        }
+    }
+
+    /**
+     * Get all filled cells for rendering
+     * @returns {Array<{x: number, y: number, z: number, color: string}>}
+     */
+    getFilledCells() {
+        const filled = [];
+
+        for (let x = 0; x < this.width; x++) {
+            for (let y = 0; y < this.height; y++) {
+                for (let z = 0; z < this.depth; z++) {
+                    const cell = this.cells[x][y][z];
+                    if (cell.filled) {
+                        filled.push({
+                            x: x,
+                            y: y,
+                            z: z,
+                            color: cell.color,
+                        });
+                    }
+                }
+            }
+        }
+
+        return filled;
+    }
+
+    /**
+     * Get the highest filled Y coordinate in each column
+     * Used for efficient ghost piece calculation
+     * @returns {number[][]} 2D array [x][z] of highest filled Y (or height if empty)
+     */
+    getColumnHeights() {
+        const heights = [];
+
+        for (let x = 0; x < this.width; x++) {
+            heights[x] = [];
+            for (let z = 0; z < this.depth; z++) {
+                heights[x][z] = this.height; // Default to bottom
+                for (let y = 0; y < this.height; y++) {
+                    if (this.cells[x][y][z].filled) {
+                        heights[x][z] = y;
+                        break;
+                    }
+                }
+            }
+        }
+
+        return heights;
+    }
+
+    /**
+     * Check if the game is over (blocks above playfield)
+     * @returns {boolean}
+     */
+    isGameOver() {
+        // Check if any blocks are in the top 2 rows
+        for (let x = 0; x < this.width; x++) {
+            for (let z = 0; z < this.depth; z++) {
+                if (this.cells[x][0][z].filled || this.cells[x][1][z].filled) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Calculate where a piece would land (for ghost piece)
+     * @param {TetrisPiece} piece
+     * @returns {number} The Y coordinate where piece would land
+     */
+    calculateLandingY(piece) {
+        let testY = piece.y;
+
+        while (true) {
+            testY++;
+            // Use voxels to calculate positions at testY
+            const positions = piece.voxels.map((v) => ({
+                x: piece.x + v.x,
+                y: testY + v.y,
+                z: piece.z + v.z,
+            }));
+
+            if (!this.canPlace(positions)) {
+                return testY - 1;
+            }
+
+            // Safety check to prevent infinite loop
+            if (testY > this.height + 5) {
+                return piece.y;
+            }
+        }
+    }
+}