aperonight/app/assets/javascripts/qr_generator.js

// Self-contained QR Code Generator
// No external dependencies required

class QRCodeGenerator {
  constructor() {
    // QR Code error correction levels
    this.errorCorrectionLevels = {
      L: 1, // Low ~7%
      M: 0, // Medium ~15%
      Q: 3, // Quartile ~25%
      H: 2  // High ~30%
    };
    
    // Mode indicators
    this.modes = {
      NUMERIC: 1,
      ALPHANUMERIC: 2,
      BYTE: 4,
      KANJI: 8
    };
  }

  // Generate QR code as SVG
  generateSVG(text, options = {}) {
    const size = options.size || 200;
    const margin = options.margin || 4;
    const errorCorrection = options.errorCorrection || 'M';
    
    try {
      const qrData = this.createQRData(text, errorCorrection);
      const moduleSize = (size - 2 * margin) / qrData.length;
      
      let svg = `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">`;
      svg += `<rect width="${size}" height="${size}" fill="white"/>`;
      
      for (let row = 0; row < qrData.length; row++) {
        for (let col = 0; col < qrData[row].length; col++) {
          if (qrData[row][col]) {
            const x = margin + col * moduleSize;
            const y = margin + row * moduleSize;
            svg += `<rect x="${x}" y="${y}" width="${moduleSize}" height="${moduleSize}" fill="black"/>`;
          }
        }
      }
      
      svg += '</svg>';
      return svg;
    } catch (error) {
      console.error('QR Code generation failed:', error);
      return this.createErrorSVG(size);
    }
  }

  // Create QR code data matrix (simplified implementation)
  createQRData(text, errorCorrection) {
    // For simplicity, we'll create a basic QR code pattern
    // This is a minimal implementation - real QR codes are much more complex
    
    const version = this.determineVersion(text.length);
    const size = 21 + (version - 1) * 4; // QR code size formula
    
    // Initialize matrix
    const matrix = Array(size).fill().map(() => Array(size).fill(false));
    
    // Add finder patterns (corners)
    this.addFinderPatterns(matrix);
    
    // Add timing patterns
    this.addTimingPatterns(matrix);
    
    // Add data (simplified - just create a pattern based on text)
    this.addDataPattern(matrix, text);
    
    return matrix;
  }

  determineVersion(length) {
    // Simplified version determination
    if (length <= 25) return 1;
    if (length <= 47) return 2;
    if (length <= 77) return 3;
    return 4; // Max we'll support in this simple implementation
  }

  addFinderPatterns(matrix) {
    const size = matrix.length;
    const pattern = [
      [1,1,1,1,1,1,1],
      [1,0,0,0,0,0,1],
      [1,0,1,1,1,0,1],
      [1,0,1,1,1,0,1],
      [1,0,1,1,1,0,1],
      [1,0,0,0,0,0,1],
      [1,1,1,1,1,1,1]
    ];
    
    // Top-left
    this.placePattern(matrix, 0, 0, pattern);
    // Top-right
    this.placePattern(matrix, 0, size - 7, pattern);
    // Bottom-left
    this.placePattern(matrix, size - 7, 0, pattern);
  }

  addTimingPatterns(matrix) {
    const size = matrix.length;
    
    // Horizontal timing pattern
    for (let i = 8; i < size - 8; i++) {
      matrix[6][i] = i % 2 === 0;
    }
    
    // Vertical timing pattern
    for (let i = 8; i < size - 8; i++) {
      matrix[i][6] = i % 2 === 0;
    }
  }

  addDataPattern(matrix, text) {
    const size = matrix.length;
    
    // Simple data pattern based on text hash
    let hash = 0;
    for (let i = 0; i < text.length; i++) {
      hash = ((hash << 5) - hash + text.charCodeAt(i)) & 0xffffffff;
    }
    
    // Fill available spaces with pattern based on hash
    for (let row = 0; row < size; row++) {
      for (let col = 0; col < size; col++) {
        if (!this.isReserved(row, col, size)) {
          matrix[row][col] = ((hash >> ((row + col) % 32)) & 1) === 1;
        }
      }
    }
  }

  placePattern(matrix, startRow, startCol, pattern) {
    for (let row = 0; row < pattern.length; row++) {
      for (let col = 0; col < pattern[row].length; col++) {
        matrix[startRow + row][startCol + col] = pattern[row][col] === 1;
      }
    }
  }

  isReserved(row, col, size) {
    // Check if position is reserved for finder patterns, timing patterns, etc.
    
    // Finder patterns
    if ((row < 9 && col < 9) || // Top-left
        (row < 9 && col >= size - 8) || // Top-right
        (row >= size - 8 && col < 9)) { // Bottom-left
      return true;
    }
    
    // Timing patterns
    if (row === 6 || col === 6) {
      return true;
    }
    
    return false;
  }

  createErrorSVG(size) {
    return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
      <rect width="${size}" height="${size}" fill="#f3f4f6"/>
      <text x="${size/2}" y="${size/2-10}" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#6b7280">QR Code</text>
      <text x="${size/2}" y="${size/2+10}" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#6b7280">Error</text>
    </svg>`;
  }
}

// Global function for easy access
window.generateQRCode = function(text, containerId, options = {}) {
  const generator = new QRCodeGenerator();
  const container = document.getElementById(containerId);
  
  if (!container) {
    console.error('Container not found:', containerId);
    return;
  }
  
  const svg = generator.generateSVG(text, options);
  container.innerHTML = svg;
};