feat(card): Konfiguration, Geometrie und Bildausschnitt

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/card/geometry.test.ts

@@ -0,0 +1,214 @@
+import { describe, it, expect } from 'vitest';
+import {
+  CARD_H,
+  CARD_W,
+  MARGIN,
+  PREVIEW_RADIUS,
+  WALLET_KEEP_CLEAR,
+  fitBrand,
+  fitNetwork,
+  layoutFor,
+  type Box,
+} from './geometry';
+import type { TemplateId } from './config';
+
+const TEMPLATES: TemplateId[] = ['image', 'minimal', 'classic', 'signature'];
+
+const intersects = (a: Box, b: Box) =>
+  a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
+
+const insideCanvas = (b: Box) =>
+  b.x >= 0 && b.y >= 0 && b.x + b.w <= CARD_W && b.y + b.h <= CARD_H;
+
+// Feste Worst-Case-Boxen der PLATINUM-Zeile (Text 360 px breit)
+const PLATINUM_BOX: Partial<Record<TemplateId, Box>> = {
+  classic: { x: 1120, y: 77, w: 360, h: 58 },
+  signature: { x: 60, y: 182, w: 360, h: 55 },
+};
+const NUMBER_BOX: Box = { x: 157, y: 572, w: 867, h: 78 };
+
+describe('Konstanten', () => {
+  it('Kartenmaße und Rand', () => {
+    expect(CARD_W).toBe(1536);
+    expect(CARD_H).toBe(969);
+    expect(MARGIN).toBe(56);
+    expect(PREVIEW_RADIUS).toBe(57);
+  });
+
+  it('WALLET_KEEP_CLEAR liegt unten links', () => {
+    expect(WALLET_KEEP_CLEAR).toEqual({ x: 0, y: 779, w: 620, h: 190 });
+    expect(WALLET_KEEP_CLEAR.y + WALLET_KEEP_CLEAR.h).toBe(CARD_H);
+  });
+});
+
+describe('fitNetwork', () => {
+  it('Standardbreite 330 × 109 sitzt unten rechts auf dem Rand', () => {
+    const b = fitNetwork(330 / 109, 109);
+    expect(b.x).toBeCloseTo(1150, 1);
+    expect(b.y).toBeCloseTo(804, 1);
+    expect(b.w).toBeCloseTo(330, 1);
+    expect(b.h).toBeCloseTo(109, 1);
+  });
+
+  it('sehr breite Logos werden auf 360 begrenzt', () => {
+    const b = fitNetwork(6, 109);
+    expect(b.w).toBeCloseTo(360, 1);
+    expect(b.h).toBeCloseTo(60, 1);
+    expect(b.x + b.w).toBeCloseTo(1480, 1);
+    expect(b.y + b.h).toBeCloseTo(913, 1);
+  });
+
+  it('reine Symbole dürfen bis 125 px hoch sein', () => {
+    const b = fitNetwork(1, 125);
+    expect(b.w).toBeCloseTo(125, 1);
+    expect(b.h).toBeCloseTo(125, 1);
+    expect(b.x + b.w).toBeCloseTo(1480, 1);
+    expect(b.y + b.h).toBeCloseTo(913, 1);
+  });
+
+  it('Seitenverhältnis bleibt erhalten', () => {
+    for (const aspect of [0.8, 1, 1.5, 3, 6, 10]) {
+      const b = fitNetwork(aspect, 109);
+      expect(b.w / b.h).toBeCloseTo(aspect, 1);
+      expect(b.h).toBeLessThanOrEqual(109 + 1e-9);
+      expect(b.w).toBeLessThanOrEqual(360 + 1e-9);
+    }
+  });
+});
+
+describe('fitBrand', () => {
+  it('quadratisches Logo: 100 × 100 links oben auf dem Rand', () => {
+    expect(fitBrand(1)).toEqual({ x: 56, y: 56, w: 100, h: 100 });
+  });
+
+  it('breites Logo wird auf 360 × 100 begrenzt', () => {
+    const b = fitBrand(3.6);
+    expect(b.x).toBe(56);
+    expect(b.y).toBe(56);
+    expect(b.w).toBeCloseTo(360, 1);
+    expect(b.h).toBeCloseTo(100, 1);
+    expect(b.x + b.w).toBeCloseTo(416, 1);
+    expect(b.y + b.h).toBeCloseTo(156, 1);
+  });
+
+  it('sehr breites Logo ist höchstens 360 breit, Höhe folgt dem Seitenverhältnis', () => {
+    const b = fitBrand(8);
+    expect(b.w).toBeCloseTo(360, 1);
+    expect(b.h).toBeCloseTo(45, 1);
+  });
+
+  it('maxH ist einstellbar', () => {
+    const b = fitBrand(1, 60);
+    expect(b.w).toBeCloseTo(60, 1);
+    expect(b.h).toBeCloseTo(60, 1);
+  });
+});
+
+describe('layoutFor', () => {
+  it('image: kein Netzwerk, keine Marke, keine optionalen Felder', () => {
+    const l = layoutFor('image');
+    expect(l.network).toBe(false);
+    expect(l.brand).toBe(false);
+    expect(Object.keys(l).sort()).toEqual(['brand', 'network']);
+  });
+
+  it('minimal: nur Netzwerk', () => {
+    const l = layoutFor('minimal');
+    expect(l.network).toBe(true);
+    expect(l.brand).toBe(false);
+    expect(Object.keys(l).sort()).toEqual(['brand', 'network']);
+  });
+
+  it('classic: alles', () => {
+    const l = layoutFor('classic');
+    expect(l.network).toBe(true);
+    expect(l.brand).toBe(true);
+    expect(l.platinum).toEqual({ x: 1480, baseline: 123, size: 46, trackingPx: 9, align: 'right' });
+    expect(l.chip).toEqual({
+      x: 157, y: 326, w: 226, h: 205, r: 32,
+      hLines: [383, 429, 474], vLines: [234, 307], padY: [383, 474],
+    });
+    expect(l.contactless).toEqual({
+      path:
+        'M548.75 379.89a98.21 98.21 0 0 1 0 98.21M527.14 390.7a76.61 76.61 0 0 1 0 76.61' +
+        'M506.52 400.61a55.39 55.98 0 0 1 0 55.98M485.89 411.32a35.36 33.39 0 0 1 0 35.36',
+      lineWidth: 11.8,
+      box: { x: 480, y: 374, w: 88, h: 110 },
+    });
+    expect(l.number).toEqual({
+      startX: 157, pitch: 45.6, baseline: 650, size: 72,
+      bulletY: 624, bulletR: 8, text: '•••• •••• •••• 8888',
+    });
+  });
+
+  it('signature: Netzwerk, Marke und PLATINUM links', () => {
+    const l = layoutFor('signature');
+    expect(l.network).toBe(true);
+    expect(l.brand).toBe(true);
+    expect(l.platinum).toEqual({ x: 60, baseline: 226, size: 44, trackingPx: 8, align: 'left' });
+    expect(l.chip).toBeUndefined();
+    expect(l.contactless).toBeUndefined();
+    expect(l.number).toBeUndefined();
+  });
+
+  it('liefert unabhängige Kopien', () => {
+    const a = layoutFor('classic');
+    a.chip!.hLines.push(999);
+    a.number!.text = 'x';
+    const b = layoutFor('classic');
+    expect(b.chip!.hLines).toEqual([383, 429, 474]);
+    expect(b.number!.text).toBe('•••• •••• •••• 8888');
+  });
+
+  it('Kontaktlinien des Chips liegen im Chip', () => {
+    const c = layoutFor('classic').chip!;
+    for (const y of c.hLines) expect(y > c.y && y < c.y + c.h).toBe(true);
+    for (const x of c.vLines) expect(x > c.x && x < c.x + c.w).toBe(true);
+    expect(c.padY[0]).toBe(c.hLines[0]);
+    expect(c.padY[1]).toBe(c.hLines[c.hLines.length - 1]);
+  });
+
+  it('die festen PLATINUM-Boxen passen zu den Layoutwerten', () => {
+    for (const t of ['classic', 'signature'] as const) {
+      const p = layoutFor(t).platinum!;
+      const box = PLATINUM_BOX[t]!;
+      if (p.align === 'right') expect(box.x + box.w).toBe(p.x);
+      else expect(box.x).toBe(p.x);
+      expect(p.baseline > box.y && p.baseline <= box.y + box.h).toBe(true);
+    }
+  });
+
+  it('die Nummernzeile passt in die feste Box', () => {
+    const n = layoutFor('classic').number!;
+    expect(n.startX).toBe(NUMBER_BOX.x);
+    expect(n.baseline).toBe(NUMBER_BOX.y + NUMBER_BOX.h);
+    expect(n.startX + n.text.length * n.pitch).toBeLessThanOrEqual(NUMBER_BOX.x + NUMBER_BOX.w);
+  });
+});
+
+describe.each(TEMPLATES)('Vorlage %s: Wallet-Bereich unten links bleibt frei', (t) => {
+  const l = layoutFor(t);
+  const boxes: Record<string, Box> = {};
+  if (l.chip) boxes.chip = { x: l.chip.x, y: l.chip.y, w: l.chip.w, h: l.chip.h };
+  if (l.contactless) boxes.contactless = l.contactless.box;
+  if (l.number) boxes.number = NUMBER_BOX;
+  if (l.platinum) boxes.platinum = PLATINUM_BOX[t]!;
+  if (l.network) {
+    boxes.networkSymbol = fitNetwork(1, 125);
+    boxes.networkWide = fitNetwork(6, 109);
+  }
+  if (l.brand) boxes.brand = fitBrand(3.6);
+
+  it('hat für jedes Element eine Prüfbox', () => {
+    expect(Object.keys(boxes).length).toBe(
+      { image: 0, minimal: 2, classic: 7, signature: 4 }[t],
+    );
+  });
+
+  for (const [name, box] of Object.entries(boxes)) {
+    it(`${name} liegt im Canvas und schneidet WALLET_KEEP_CLEAR nicht`, () => {
+      expect(insideCanvas(box)).toBe(true);
+      expect(intersects(box, WALLET_KEEP_CLEAR)).toBe(false);
+    });
+  }
+});