Dateien nach "frontend" hochladen

frontend/generate-icons.mjs

@@ -1,101 +1,33 @@
-import { writeFileSync, mkdirSync } from 'fs';
+import { createCanvas } from 'canvas';
+import { writeFileSync } from 'fs';
 
-mkdirSync('./public', { recursive: true });
+function generateIcon(size) {
+  const canvas = createCanvas(size, size);
+  const ctx = canvas.getContext('2d');
+  const r = size * 0.22;
 
-function crc32(buf) {
+  const grad = ctx.createLinearGradient(0, 0, size, size);
-  const table = new Uint32Array(256);
+  grad.addColorStop(0, '#4ecdc4');
-  for (let n = 0; n < 256; n++) {
+  grad.addColorStop(1, '#ff6b9d');
-    let c = n;
+  ctx.beginPath();
-    for (let k = 0; k < 8; k++) c = (c & 1) ? (0xedb88320 ^ (c >>> 1)) : (c >>> 1);
+  ctx.moveTo(r, 0); ctx.lineTo(size - r, 0);
-    table[n] = c;
+  ctx.quadraticCurveTo(size, 0, size, r);
-  }
+  ctx.lineTo(size, size - r);
-  let crc = 0xffffffff;
+  ctx.quadraticCurveTo(size, size, size - r, size);
-  for (const b of buf) crc = (table[(crc ^ b) & 0xff] ^ (crc >>> 8));
+  ctx.lineTo(r, size); ctx.quadraticCurveTo(0, size, 0, size - r);
-  return ((crc ^ 0xffffffff) >>> 0);
+  ctx.lineTo(0, r); ctx.quadraticCurveTo(0, 0, r, 0);
+  ctx.closePath();
+  ctx.fillStyle = grad;
+  ctx.fill();
+
+  ctx.fillStyle = '#0d0d0f';
+  ctx.textAlign = 'center';
+  ctx.font = `bold ${size * 0.52}px serif`;
+  ctx.fillText('⚒', size / 2, size * 0.72);
+
+  return canvas.toBuffer('image/png');
 }
 
-function chunk(type, data) {
+writeFileSync('public/icon-192.png', generateIcon(192));
-  const t = Buffer.from(type, 'ascii');
+writeFileSync('public/icon-512.png', generateIcon(512));
-  const len = Buffer.allocUnsafe(4);
+console.log('Icons generated.');
-  len.writeUInt32BE(data.length, 0);
-  const crcInput = Buffer.concat([t, data]);
-  const crcBuf = Buffer.allocUnsafe(4);
-  crcBuf.writeUInt32BE(crc32(crcInput), 0);
-  return Buffer.concat([len, t, data, crcBuf]);
-}
-
-function deflateStore(raw) {
-  // zlib header (deflate, no compression)
-  const header = Buffer.from([0x78, 0x01]);
-  const blocks = [];
-  const SIZE = 32768;
-  for (let i = 0; i < raw.length; i += SIZE) {
-    const slice = raw.slice(i, i + SIZE);
-    const last = (i + SIZE >= raw.length) ? 1 : 0;
-    const h = Buffer.allocUnsafe(5);
-    h[0] = last;
-    h.writeUInt16LE(slice.length, 1);
-    h.writeUInt16LE((~slice.length) & 0xffff, 3);
-    blocks.push(h, slice);
-  }
-  // Adler-32
-  let s1 = 1, s2 = 0;
-  for (const b of raw) {
-    s1 = (s1 + b) % 65521;
-    s2 = (s2 + s1) % 65521;
-  }
-  const adler = Buffer.allocUnsafe(4);
-  adler.writeUInt32BE(((s2 << 16) | s1) >>> 0, 0);
-  return Buffer.concat([header, ...blocks, adler]);
-}
-
-function makePNG(size) {
-  const cx = size / 2, cy = size / 2;
-  const outerR = size * 0.42, innerR = size * 0.30;
-
-  // IHDR
-  const ihdr = Buffer.allocUnsafe(13);
-  ihdr.writeUInt32BE(size, 0);
-  ihdr.writeUInt32BE(size, 4);
-  ihdr[8] = 8;  // bit depth
-  ihdr[9] = 2;  // RGB
-  ihdr[10] = ihdr[11] = ihdr[12] = 0;
-
-  // Raw pixel data (filter byte 0 per row)
-  const rows = [];
-  for (let y = 0; y < size; y++) {
-    const row = Buffer.allocUnsafe(1 + size * 3);
-    row[0] = 0; // filter none
-    for (let x = 0; x < size; x++) {
-      const dx = x - cx, dy = y - cy;
-      const d = Math.sqrt(dx * dx + dy * dy);
-      let r, g, b;
-      if (d < innerR) {
-        r = 0x4e; g = 0xcd; b = 0xc4; // teal
-      } else if (d < outerR) {
-        r = 0x1e; g = 0x6a; b = 0x65; // dark teal ring
-      } else {
-        r = 0x0d; g = 0x0d; b = 0x0f; // background
-      }
-      row[1 + x * 3] = r;
-      row[2 + x * 3] = g;
-      row[3 + x * 3] = b;
-    }
-    rows.push(row);
-  }
-
-  const raw = Buffer.concat(rows);
-  const idat = deflateStore(raw);
-
-  const sig = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
-  return Buffer.concat([
-    sig,
-    chunk('IHDR', ihdr),
-    chunk('IDAT', idat),
-    chunk('IEND', Buffer.alloc(0)),
-  ]);
-}
-
-writeFileSync('./public/icon-192.png', makePNG(192));
-writeFileSync('./public/icon-512.png', makePNG(512));
-console.log('✅ Icons generiert: icon-192.png + icon-512.png');