broadfield-dev/stack-overflow-game

1import { BLOCK_SIZE } from '../constants.js';2 3/**4 * Renders Tetris blocks with different pixel art styles per level5 */6export default class BlockRenderer {7  /**8   * Create a block texture with a specific style9   * @param {Phaser.Scene} scene - The Phaser scene10   * @param {number} color - The color in hex format11   * @param {number} level - Current level (1-10) determines style12   * @param {string} key - Texture key to create13   */14  static createBlockTexture(scene, color, level, key) {15    const graphics = scene.make.graphics({ x: 0, y: 0, add: false });16    17    // Extract RGB components18    const r = (color >> 16) & 0xFF;19    const g = (color >> 8) & 0xFF;20    const b = color & 0xFF;21    22    // Create lighter and darker shades23    const lightColor = Phaser.Display.Color.GetColor(24      Math.min(255, r + 60),25      Math.min(255, g + 60),26      Math.min(255, b + 60)27    );28    const darkColor = Phaser.Display.Color.GetColor(29      Math.max(0, r - 60),30      Math.max(0, g - 60),31      Math.max(0, b - 60)32    );33    34    // Different styles based on level35    const style = (level - 1) % 5; // 5 different styles cycling36    37    switch (style) {38      case 0: // Classic with border39        this.drawClassicBlock(graphics, color, lightColor, darkColor);40        break;41      case 1: // Gradient style42        this.drawGradientBlock(graphics, color, lightColor, darkColor);43        break;44      case 2: // Dotted pattern45        this.drawDottedBlock(graphics, color, lightColor);46        break;47      case 3: // Checkered48        this.drawCheckeredBlock(graphics, color, darkColor);49        break;50      case 4: // Outlined51        this.drawOutlinedBlock(graphics, color, lightColor, darkColor);52        break;53    }54    55    graphics.generateTexture(key, BLOCK_SIZE, BLOCK_SIZE);56    graphics.destroy();57  }58  59  static drawClassicBlock(graphics, color, lightColor, darkColor) {60    // Fill61    graphics.fillStyle(color);62    graphics.fillRect(0, 0, BLOCK_SIZE, BLOCK_SIZE);63    64    // Light edge (top-left)65    graphics.fillStyle(lightColor);66    graphics.fillRect(0, 0, BLOCK_SIZE, 1);67    graphics.fillRect(0, 0, 1, BLOCK_SIZE);68    69    // Dark edge (bottom-right)70    graphics.fillStyle(darkColor);71    graphics.fillRect(0, BLOCK_SIZE - 1, BLOCK_SIZE, 1);72    graphics.fillRect(BLOCK_SIZE - 1, 0, 1, BLOCK_SIZE);73  }74  75  static drawGradientBlock(graphics, color, lightColor, darkColor) {76    // Create gradient effect with horizontal bands77    for (let y = 0; y < BLOCK_SIZE; y++) {78      const ratio = y / BLOCK_SIZE;79      const r = Phaser.Math.Linear((lightColor >> 16) & 0xFF, (darkColor >> 16) & 0xFF, ratio);80      const g = Phaser.Math.Linear((lightColor >> 8) & 0xFF, (darkColor >> 8) & 0xFF, ratio);81      const b = Phaser.Math.Linear(lightColor & 0xFF, darkColor & 0xFF, ratio);82      graphics.fillStyle(Phaser.Display.Color.GetColor(r, g, b));83      graphics.fillRect(0, y, BLOCK_SIZE, 1);84    }85  }86  87  static drawDottedBlock(graphics, color, lightColor) {88    graphics.fillStyle(color);89    graphics.fillRect(0, 0, BLOCK_SIZE, BLOCK_SIZE);90    91    // Add dots92    graphics.fillStyle(lightColor);93    for (let y = 1; y < BLOCK_SIZE; y += 3) {94      for (let x = 1; x < BLOCK_SIZE; x += 3) {95        graphics.fillRect(x, y, 1, 1);96      }97    }98  }99  100  static drawCheckeredBlock(graphics, color, darkColor) {101    for (let y = 0; y < BLOCK_SIZE; y += 2) {102      for (let x = 0; x < BLOCK_SIZE; x += 2) {103        const useMain = (x + y) % 4 === 0;104        graphics.fillStyle(useMain ? color : darkColor);105        graphics.fillRect(x, y, 2, 2);106      }107    }108  }109  110  static drawOutlinedBlock(graphics, color, lightColor, darkColor) {111    // Fill112    graphics.fillStyle(color);113    graphics.fillRect(1, 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2);114    115    // Thick outline116    graphics.fillStyle(darkColor);117    graphics.fillRect(0, 0, BLOCK_SIZE, 1);118    graphics.fillRect(0, 0, 1, BLOCK_SIZE);119    graphics.fillRect(0, BLOCK_SIZE - 1, BLOCK_SIZE, 1);120    graphics.fillRect(BLOCK_SIZE - 1, 0, 1, BLOCK_SIZE);121    122    // Inner highlight123    graphics.fillStyle(lightColor);124    graphics.fillRect(2, 2, BLOCK_SIZE - 4, 1);125    graphics.fillRect(2, 2, 1, BLOCK_SIZE - 4);126  }127}128 129