Skip to content

Commit 2b03ec4

Browse files
niklaswaniklaswa
committed
feat(license-plate): add acrylic plate style support and update translations
1 parent 1bcfac9 commit 2b03ec4

4 files changed

Lines changed: 65 additions & 16 deletions

File tree

‎src/components/LicensePlate.tsx‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,13 @@ interface LicensePlateProps {
2323

2424
// Get styles based on plate style
2525
function getPlateStyles(style: PlateStyle, scale: number) {
26-
const is3D = style !== 'normal';
26+
const is3D = style !== 'normal' && style !== 'acrylic';
27+
const isAcrylic = style === 'acrylic';
2728
const isGlossy = style.includes('glossy');
2829
const isCarbon = style.includes('carbon');
2930
const isBlack = style.includes('black');
3031

31-
const borderColor = '#000';
32+
const borderColor = isAcrylic ? 'transparent' : '#000';
3233

3334
// Text shadow - glossy has inner edge highlights for embossed look
3435
const textShadow = is3D
@@ -48,7 +49,7 @@ function getPlateStyles(style: PlateStyle, scale: number) {
4849
`
4950
: 'none';
5051

51-
return { borderColor, textShadow, is3D, isGlossy, isCarbon, isBlack };
52+
return { borderColor, textShadow, is3D, isAcrylic, isGlossy, isCarbon, isBlack };
5253
}
5354

5455
// Country-specific plate features (visual elements, not colors - those come from config)
@@ -157,7 +158,7 @@ const LicensePlate = forwardRef<HTMLDivElement, LicensePlateProps>(
157158
const standardWidth = baseSize.width * scale;
158159

159160
const isDanishClassic = country === 'DK' && config.danishVariant === 'classic';
160-
const fontSize = country === 'DK' && config.danishPlateType === 'type3' ? 90 * scale : 105 * scale;
161+
const fontSize = country === 'DK' && config.danishPlateType === 'type3' ? 102 * scale : 122 * scale;
161162
const styles = getPlateStyles(plateStyle, scale);
162163
const minCompactWidth = (country === 'DK' ? baseSize.width : calculateCompactWidth(config)) * scale;
163164
const plateWidth = width === 'standard' ? standardWidth : (dynamicPlateWidth || minCompactWidth);
@@ -168,7 +169,8 @@ const LicensePlate = forwardRef<HTMLDivElement, LicensePlateProps>(
168169
const textColor = fontColor;
169170
const plateBgColor = backgroundColor;
170171
const danishBorderColor = '#C8102E';
171-
const plateBorderColor = (country === 'DK' || country === 'B') ? danishBorderColor : (country === 'A' || country === 'HR') ? 'transparent' : styles.borderColor;
172+
// Acrylic border matches background color for seamless look, otherwise use country-specific colors
173+
const plateBorderColor = styles.isAcrylic ? plateBgColor : (country === 'DK' || country === 'B') ? danishBorderColor : (country === 'A' || country === 'HR') ? 'transparent' : styles.borderColor;
172174
const redStripeHeight = 2 * scale;
173175
const hasUkBand = country === 'GB' && (showUKFlag || isEV);
174176
const ukBandWidth = hasUkBand ? 40 * scale : 0; // UK band width when shown
@@ -307,7 +309,7 @@ const LicensePlate = forwardRef<HTMLDivElement, LicensePlateProps>(
307309
textShadow: styles.textShadow,
308310
};
309311

310-
const whiteBorderWidth = (styles.is3D || country === 'FL') ? 0 : 1.5 * scale;
312+
const whiteBorderWidth = (styles.is3D || styles.isAcrylic || country === 'FL') ? 0 : 1.5 * scale;
311313

312314
const formatDanishPlateText = (text: string, applySpacing: boolean = true) => {
313315
const clean = (text || '').toUpperCase().replace(/Q/g, '').replace(/[^A-Z0-9]/g, '').slice(0, 7);
@@ -344,7 +346,7 @@ const LicensePlate = forwardRef<HTMLDivElement, LicensePlateProps>(
344346
style={{
345347
display: 'inline-block',
346348
padding: `${whiteBorderWidth}px`,
347-
backgroundColor: styles.is3D ? 'transparent' : '#fff',
349+
backgroundColor: (styles.is3D || styles.isAcrylic) ? 'transparent' : '#fff',
348350
borderRadius: `${10 * scale}px`,
349351
transform: `
350352
rotateX(${tilt.rotateX}deg)
@@ -826,6 +828,32 @@ const LicensePlate = forwardRef<HTMLDivElement, LicensePlateProps>(
826828
<span style={{ letterSpacing: `${1 * scale}px` }}>{String(seasonalPlate.endMonth).padStart(2, '0')}</span>
827829
</div>
828830
)}
831+
832+
{/* Acrylic shine overlay - covers entire plate */}
833+
{styles.isAcrylic && (
834+
<div
835+
style={{
836+
position: 'absolute',
837+
top: 0,
838+
left: 0,
839+
right: 0,
840+
bottom: 0,
841+
background: `
842+
linear-gradient(
843+
135deg,
844+
rgba(255,255,255,0.4) 0%,
845+
rgba(255,255,255,0.1) 30%,
846+
rgba(255,255,255,0) 50%,
847+
rgba(255,255,255,0.05) 70%,
848+
rgba(255,255,255,0.2) 100%
849+
)
850+
`,
851+
pointerEvents: 'none',
852+
zIndex: 10,
853+
borderRadius: `${6 * scale}px`,
854+
}}
855+
/>
856+
)}
829857
</div>
830858
</div>
831859
</div>
@@ -844,7 +872,7 @@ function getBasePlateSize(config: GermanPlateConfig): { width: number; height: n
844872
? { width: 240, height: 165 } // Type 3/5 square/tall
845873
: { width: 504, height: 120 }; // Type 1 standard Danish size
846874
}
847-
return { width: 520, height: 110 };
875+
return { width: 520, height: 120 };
848876
}
849877

850878
// Calculate minimum width for compact mode

‎src/components/PlateGenerator.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -813,6 +813,7 @@ export default function PlateGenerator() {
813813
className="modern-select"
814814
>
815815
<option value="normal">{t.styleNormal}</option>
816+
<option value="acrylic">{t.styleAcrylic}</option>
816817
<option value="3d-black-glossy">{t.style3DBlack}</option>
817818
<option value="3d-carbon-glossy">{t.style3DCarbon}</option>
818819
<option value="3d-black-matte">{t.style3DBlackMatte}</option>

‎src/i18n/translations.ts‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export interface Translations {
7575

7676
// Plate styles
7777
styleNormal: string;
78+
styleAcrylic: string;
7879
style3DBlack: string;
7980
style3DCarbon: string;
8081
style3DBlackMatte: string;
@@ -144,6 +145,7 @@ const translations: Record<Language, Translations> = {
144145
widthStandard: 'Standard (520mm)',
145146
widthCompact: 'Kompakt',
146147
styleNormal: 'Normal (weiß)',
148+
styleAcrylic: 'Acryl (glänzend)',
147149
style3DBlack: '3D Schwarz glänzend',
148150
style3DCarbon: '3D Carbon glänzend',
149151
style3DBlackMatte: '3D Schwarz matt',
@@ -202,6 +204,7 @@ const translations: Record<Language, Translations> = {
202204
widthStandard: 'Standard (520mm)',
203205
widthCompact: 'Compact',
204206
styleNormal: 'Normal (white)',
207+
styleAcrylic: 'Acrylic (glossy)',
205208
style3DBlack: '3D Black glossy',
206209
style3DCarbon: '3D Carbon glossy',
207210
style3DBlackMatte: '3D Black matte',
@@ -260,6 +263,7 @@ const translations: Record<Language, Translations> = {
260263
widthStandard: 'Standard (520mm)',
261264
widthCompact: 'Compact',
262265
styleNormal: 'Normal (blanc)',
266+
styleAcrylic: 'Acrylique (brillant)',
263267
style3DBlack: '3D Noir brillant',
264268
style3DCarbon: '3D Carbone brillant',
265269
style3DBlackMatte: '3D Noir mat',
@@ -318,6 +322,7 @@ const translations: Record<Language, Translations> = {
318322
widthStandard: 'Estándar (520mm)',
319323
widthCompact: 'Compacto',
320324
styleNormal: 'Normal (blanco)',
325+
styleAcrylic: 'Acrílico (brillante)',
321326
style3DBlack: '3D Negro brillante',
322327
style3DCarbon: '3D Carbono brillante',
323328
style3DBlackMatte: '3D Negro mate',
@@ -376,6 +381,7 @@ const translations: Record<Language, Translations> = {
376381
widthStandard: 'Standard (520mm)',
377382
widthCompact: 'Compatto',
378383
styleNormal: 'Normale (bianco)',
384+
styleAcrylic: 'Acrilico (lucido)',
379385
style3DBlack: '3D Nero lucido',
380386
style3DCarbon: '3D Carbonio lucido',
381387
style3DBlackMatte: '3D Nero opaco',
@@ -434,6 +440,7 @@ const translations: Record<Language, Translations> = {
434440
widthStandard: 'Standaard (520mm)',
435441
widthCompact: 'Compact',
436442
styleNormal: 'Normaal (wit)',
443+
styleAcrylic: 'Acryl (glanzend)',
437444
style3DBlack: '3D Zwart glanzend',
438445
style3DCarbon: '3D Carbon glanzend',
439446
style3DBlackMatte: '3D Zwart mat',
@@ -482,13 +489,6 @@ const translations: Record<Language, Translations> = {
482489
fontColor: 'Kolor czcionki',
483490
backgroundColor: 'Kolor tła',
484491
rightBandText: 'Region/Kod',
485-
danishOptions: 'Dansk skylt',
486-
danishStyle: 'Stil',
487-
danishClassic: 'Klassisk (utan EU-fält)',
488-
danishEuro: 'EU-skylt (med fält)',
489-
danishPlateType: 'Skyltstorlek',
490-
danishType1: 'Typ 1 – 504×120 mm',
491-
danishType3: 'Typ 3/5 – 240×165 mm',
492492
danishOptions: 'Tablica duńska',
493493
danishStyle: 'Styl',
494494
danishClassic: 'Klasyczna (bez paska UE)',
@@ -499,6 +499,7 @@ const translations: Record<Language, Translations> = {
499499
widthStandard: 'Standardowa (520mm)',
500500
widthCompact: 'Kompaktowa',
501501
styleNormal: 'Normalna (biała)',
502+
styleAcrylic: 'Akrylowa (błyszcząca)',
502503
style3DBlack: '3D Czarna błyszcząca',
503504
style3DCarbon: '3D Carbon błyszczący',
504505
style3DBlackMatte: '3D Czarna matowa',
@@ -557,6 +558,7 @@ const translations: Record<Language, Translations> = {
557558
widthStandard: 'Padrão (520mm)',
558559
widthCompact: 'Compacto',
559560
styleNormal: 'Normal (branco)',
561+
styleAcrylic: 'Acrílico (brilhante)',
560562
style3DBlack: '3D Preto brilhante',
561563
style3DCarbon: '3D Carbono brilhante',
562564
style3DBlackMatte: '3D Preto mate',
@@ -605,9 +607,17 @@ const translations: Record<Language, Translations> = {
605607
fontColor: 'Textfärg',
606608
backgroundColor: 'Bakgrundsfärg',
607609
rightBandText: 'Region/Kod',
610+
danishOptions: 'Dansk skylt',
611+
danishStyle: 'Stil',
612+
danishClassic: 'Klassisk (utan EU-fält)',
613+
danishEuro: 'EU-skylt (med fält)',
614+
danishPlateType: 'Skyltstorlek',
615+
danishType1: 'Typ 1 – 504×120 mm',
616+
danishType3: 'Typ 3/5 – 240×165 mm',
608617
widthStandard: 'Standard (520mm)',
609618
widthCompact: 'Kompakt',
610619
styleNormal: 'Normal (vit)',
620+
styleAcrylic: 'Akryl (blank)',
611621
style3DBlack: '3D Svart blank',
612622
style3DCarbon: '3D Kolfiber blank',
613623
style3DBlackMatte: '3D Svart matt',
@@ -666,6 +676,7 @@ const translations: Record<Language, Translations> = {
666676
widthStandard: 'Standardní (520mm)',
667677
widthCompact: 'Kompaktní',
668678
styleNormal: 'Normální (bílá)',
679+
styleAcrylic: 'Akrylát (lesklý)',
669680
style3DBlack: '3D Černá lesklá',
670681
style3DCarbon: '3D Karbon lesklý',
671682
style3DBlackMatte: '3D Černá matná',
@@ -714,9 +725,17 @@ const translations: Record<Language, Translations> = {
714725
fontColor: 'Boja fonta',
715726
backgroundColor: 'Boja pozadine',
716727
rightBandText: 'Regija/kod',
728+
danishOptions: 'Danska pločica',
729+
danishStyle: 'Stil',
730+
danishClassic: 'Klasična (bez EU trake)',
731+
danishEuro: 'Euro (s trakom)',
732+
danishPlateType: 'Veličina pločice',
733+
danishType1: 'Tip 1 – 504×120 mm',
734+
danishType3: 'Tip 3/5 – 240×165 mm',
717735
widthStandard: 'Standard (520mm)',
718736
widthCompact: 'Kompaktno',
719737
styleNormal: 'Normalno (bijelo)',
738+
styleAcrylic: 'Akril (sjajno)',
720739
style3DBlack: '3D crna sjajno',
721740
style3DCarbon: '3D karbonski sjajno',
722741
style3DBlackMatte: '3D crno mat',

‎src/types/plate.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export type PlateWidth = 'compact' | 'standard';
22
export type PlateSuffix = '' | 'E' | 'H'; // E = Elektro, H = Historisch (Oldtimer)
3-
export type PlateStyle = 'normal' | '3d-black-matte' | '3d-black-glossy' | '3d-carbon-matte' | '3d-carbon-glossy';
3+
export type PlateStyle = 'normal' | 'acrylic' | '3d-black-matte' | '3d-black-glossy' | '3d-carbon-matte' | '3d-carbon-glossy';
44
export type PlateType = 'normal' | 'personalized';
55
export type DanishVariant = 'classic' | 'eu'; // Classic white edge vs. Euroband
66
export type DanishPlateType = 'type1' | 'type3'; // Type 1 (504x120) vs. Type 3/5 (240x165)
@@ -13,6 +13,7 @@ export interface SeasonalPlate {
1313

1414
export const PLATE_STYLE_NAMES: Record<PlateStyle, string> = {
1515
'normal': 'Normal (Standard)',
16+
'acrylic': 'Acryl (Glänzend)',
1617
'3d-black-matte': '3D Schwarz Matt',
1718
'3d-black-glossy': '3D Schwarz Glänzend',
1819
'3d-carbon-matte': '3D Carbon Matt',

0 commit comments

Comments
 (0)