diff --git a/src/lib/productCard.ts b/src/lib/productCard.ts
index 6622672..835740d 100644
--- a/src/lib/productCard.ts
+++ b/src/lib/productCard.ts
@@ -185,23 +185,28 @@ function renderDualSticker(p: CardProduct): string {
`;
}
-// Biely okraj okolo štítkov predajní ako skupiny (obrys celej skupiny, nie každého štítka zvlášť) – rovnako hrubý
-// ako biela linka okolo pozadia cenovky: 4,5 px pri predvolenej šírke cenovky 130 px, mení sa spolu s cenovkou.
-// Štyri biele tiene bez rozmazania (vľavo, vpravo, hore, dole) za sebou rozšíria tvar skupiny o hrúbku linky.
-function storesOutline(badgeWidth: number): string {
- const t = Math.round(((4.5 * badgeWidth) / 130) * 10) / 10;
- return `filter: drop-shadow(${t}px 0 0 #fff) drop-shadow(-${t}px 0 0 #fff) drop-shadow(0 ${t}px 0 #fff) drop-shadow(0 -${t}px 0 #fff);`;
-}
-
// Štítky predajní (Potraviny / Supermarket / Tempo) pod sebou; výška podľa veľkosti cenovky
-function renderStores(p: CardProduct, mode: RenderMode, tagHeight: number): string {
- const tag = (color: string, file: string, alt: string) =>
- `
)})
`;
- return [
- p.stores?.potraviny ? tag('#e2001a', 'stit_potraviny.png', 'Potraviny') : '',
- p.stores?.supermarket ? tag('#f9890e', 'stit_supermarket.png', 'Supermarket') : '',
- p.stores?.tempo ? tag('#005239', 'stit_tempo.png', 'Tempo') : ''
- ].join('');
+// Biely okraj okolo nich ako skupiny: pod štítkami je biela vrstva z rovnakých štítkov, každý o hrúbku okraja
+// väčší a so zaoblenými rohmi – kde sa štítky dotýkajú, biela splynie, takže linka ide okolo celej skupiny
+// a vonkajšie rohy sú zaoblené (polovica hrúbky linky okolo pozadia cenovky: 2,25 px pri cenovke širokej 130 px).
+function renderStores(p: CardProduct, mode: RenderMode, tagHeight: number, badgeWidth: number): string {
+ const t = Math.round(((2.25 * badgeWidth) / 130) * 10) / 10;
+ const tags = [
+ p.stores?.potraviny ? ['#e2001a', 'stit_potraviny.png', 'Potraviny'] : null,
+ p.stores?.supermarket ? ['#f9890e', 'stit_supermarket.png', 'Supermarket'] : null,
+ p.stores?.tempo ? ['#005239', 'stit_tempo.png', 'Tempo'] : null
+ ].filter((x): x is string[] => !!x);
+ if (!tags.length) return '';
+ const row = ([color, file, alt]: string[], halo: boolean) =>
+ `)})
`;
+ return `
+
${tags.map((x) => row(x, true)).join('')}
+
${tags.map((x) => row(x, false)).join('')}
+
`;
}
// Jednoznačný kľúč vizuálu – pri zmene čohokoľvek, čo ovplyvní obrázok, sa pri exporte vytvorí nový
@@ -323,7 +328,7 @@ function renderVisualPreview(p: CardProduct, ctx: CardContext, key: string): str
const oy = p.imageOffsetY || 0;
const sx = Math.round(p.storesOffsetX ?? DEFAULT_STORES_OFFSET_X);
const sy = Math.round(p.storesOffsetY ?? DEFAULT_STORES_OFFSET_Y);
- const stores = renderStores(p, ctx.mode, p.storesSize ?? DEFAULT_STORES_SIZE);
+ const stores = renderStores(p, ctx.mode, p.storesSize ?? DEFAULT_STORES_SIZE, bw);
// Pravý horný roh viditeľného pozadia cenovky (pri PNG a predvolenej cenovke = roh cenovky)
const bgBox = p.badgeCustomTemplate && !p.customBadgePngUrl ? badgeBackgroundBox(p.badgeCustomTemplate) : null;
const insetTop = bgBox ? Math.round(bgBox.top * bw * bgBox.aspect) : 0;
@@ -341,7 +346,7 @@ function renderVisualPreview(p: CardProduct, ctx: CardContext, key: string): str
.join('')}
${(p.labels || []).map(renderLabel).join('')}
- ${stores ? `
${stores}
` : ''}
+ ${stores ? `
${stores}
` : ''}
${renderBadge(p, ctx, bw)}
`;