play-life/play-life-web/generate-icons.cjs

// Скрипт для генерации базовых PWA иконок
// Требует: npm install sharp

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const publicDir = path.join(__dirname, 'public');

// Создаем SVG шаблон для обычной иконки (со скругленными углами)
const createIconSVG = (size) => `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#4f46e5;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" rx="20" fill="url(#grad)"/>
  <text x="50" y="70" font-family="Arial, sans-serif" font-size="60" font-weight="bold" fill="white" text-anchor="middle">P</text>
</svg>
`;

// Создаем SVG шаблон для maskable иконки (без скругления, контент в безопасной зоне 80%)
const createMaskableIconSVG = (size) => `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#4f46e5;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="100" height="100" fill="url(#grad)"/>
  <text x="50" y="66" font-family="Arial, sans-serif" font-size="48" font-weight="bold" fill="white" text-anchor="middle">P</text>
</svg>
`;

async function generateIcons() {
  // Создаем базовые SVG
  const baseSVG = createIconSVG(512);
  const svgBuffer = Buffer.from(baseSVG);
  
  const maskableSVG = createMaskableIconSVG(512);
  const maskableSvgBuffer = Buffer.from(maskableSVG);

  // Генерируем иконки разных размеров
  const sizes = [
    { name: 'favicon.ico', size: 32 },
    { name: 'apple-touch-icon.png', size: 180 },
    { name: 'pwa-192x192.png', size: 192 },
    { name: 'pwa-512x512.png', size: 512 },
    { name: 'pwa-maskable-192x192.png', size: 192, maskable: true },
    { name: 'pwa-maskable-512x512.png', size: 512, maskable: true }
  ];

  for (const icon of sizes) {
    // Для maskable иконок используем специальный SVG с контентом в безопасной зоне
    const sourceBuffer = icon.maskable ? maskableSvgBuffer : svgBuffer;
    const image = sharp(sourceBuffer).resize(icon.size, icon.size);

    const outputPath = path.join(publicDir, icon.name);
    await image.png().toFile(outputPath);
    console.log(`✓ Создана иконка: ${icon.name} (${icon.size}x${icon.size})`);
  }

  console.log('\n✓ Все иконки успешно созданы!');
}

// Проверяем наличие sharp
try {
  require('sharp');
  generateIcons().catch(console.error);
} catch (e) {
  console.log('Для генерации иконок необходимо установить sharp:');
  console.log('npm install sharp --save-dev');
  console.log('\nИли создайте иконки вручную используя онлайн генераторы:');
  console.log('- https://realfavicongenerator.net/');
  console.log('- https://www.pwabuilder.com/imageGenerator');
}