src/utils/BlockRenderer.js

import { BLOCK_SIZE } from '../constants.js';

/**
 * Renders Tetris blocks with different pixel art styles per level
 */
export default class BlockRenderer {
  /**
   * Create a block texture with a specific style
   * @param {Phaser.Scene} scene - The Phaser scene
   * @param {number} color - The color in hex format
   * @param {number} level - Current level (1-10) determines style
   * @param {string} key - Texture key to create
   */
  static createBlockTexture(scene, color, level, key) {
    const graphics = scene.make.graphics({ x: 0, y: 0, add: false });
    
    // Extract RGB components
    const r = (color >> 16) & 0xFF;
    const g = (color >> 8) & 0xFF;
    const b = color & 0xFF;
    
    // Create lighter and darker shades
    const lightColor = Phaser.Display.Color.GetColor(
      Math.min(255, r + 60),
      Math.min(255, g + 60),
      Math.min(255, b + 60)
    );
    const darkColor = Phaser.Display.Color.GetColor(
      Math.max(0, r - 60),
      Math.max(0, g - 60),
      Math.max(0, b - 60)
    );
    
    // Different styles based on level
    const style = (level - 1) % 5; // 5 different styles cycling
    
    switch (style) {
      case 0: // Classic with border
        this.drawClassicBlock(graphics, color, lightColor, darkColor);
        break;
      case 1: // Gradient style
        this.drawGradientBlock(graphics, color, lightColor, darkColor);
        break;
      case 2: // Dotted pattern
        this.drawDottedBlock(graphics, color, lightColor);
        break;
      case 3: // Checkered
        this.drawCheckeredBlock(graphics, color, darkColor);
        break;
      case 4: // Outlined
        this.drawOutlinedBlock(graphics, color, lightColor, darkColor);
        break;
    }
    
    graphics.generateTexture(key, BLOCK_SIZE, BLOCK_SIZE);
    graphics.destroy();
  }
  
  static drawClassicBlock(graphics, color, lightColor, darkColor) {
    // Fill
    graphics.fillStyle(color);
    graphics.fillRect(0, 0, BLOCK_SIZE, BLOCK_SIZE);
    
    // Light edge (top-left)
    graphics.fillStyle(lightColor);
    graphics.fillRect(0, 0, BLOCK_SIZE, 1);
    graphics.fillRect(0, 0, 1, BLOCK_SIZE);
    
    // Dark edge (bottom-right)
    graphics.fillStyle(darkColor);
    graphics.fillRect(0, BLOCK_SIZE - 1, BLOCK_SIZE, 1);
    graphics.fillRect(BLOCK_SIZE - 1, 0, 1, BLOCK_SIZE);
  }
  
  static drawGradientBlock(graphics, color, lightColor, darkColor) {
    // Create gradient effect with horizontal bands
    for (let y = 0; y < BLOCK_SIZE; y++) {
      const ratio = y / BLOCK_SIZE;
      const r = Phaser.Math.Linear((lightColor >> 16) & 0xFF, (darkColor >> 16) & 0xFF, ratio);
      const g = Phaser.Math.Linear((lightColor >> 8) & 0xFF, (darkColor >> 8) & 0xFF, ratio);
      const b = Phaser.Math.Linear(lightColor & 0xFF, darkColor & 0xFF, ratio);
      graphics.fillStyle(Phaser.Display.Color.GetColor(r, g, b));
      graphics.fillRect(0, y, BLOCK_SIZE, 1);
    }
  }
  
  static drawDottedBlock(graphics, color, lightColor) {
    graphics.fillStyle(color);
    graphics.fillRect(0, 0, BLOCK_SIZE, BLOCK_SIZE);
    
    // Add dots
    graphics.fillStyle(lightColor);
    for (let y = 1; y < BLOCK_SIZE; y += 3) {
      for (let x = 1; x < BLOCK_SIZE; x += 3) {
        graphics.fillRect(x, y, 1, 1);
      }
    }
  }
  
  static drawCheckeredBlock(graphics, color, darkColor) {
    for (let y = 0; y < BLOCK_SIZE; y += 2) {
      for (let x = 0; x < BLOCK_SIZE; x += 2) {
        const useMain = (x + y) % 4 === 0;
        graphics.fillStyle(useMain ? color : darkColor);
        graphics.fillRect(x, y, 2, 2);
      }
    }
  }
  
  static drawOutlinedBlock(graphics, color, lightColor, darkColor) {
    // Fill
    graphics.fillStyle(color);
    graphics.fillRect(1, 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2);
    
    // Thick outline
    graphics.fillStyle(darkColor);
    graphics.fillRect(0, 0, BLOCK_SIZE, 1);
    graphics.fillRect(0, 0, 1, BLOCK_SIZE);
    graphics.fillRect(0, BLOCK_SIZE - 1, BLOCK_SIZE, 1);
    graphics.fillRect(BLOCK_SIZE - 1, 0, 1, BLOCK_SIZE);
    
    // Inner highlight
    graphics.fillStyle(lightColor);
    graphics.fillRect(2, 2, BLOCK_SIZE - 4, 1);
    graphics.fillRect(2, 2, 1, BLOCK_SIZE - 4);
  }
}