website refactor
This commit is contained in:
@@ -8,190 +8,39 @@ import { faker } from '@faker-js/faker';
|
||||
*/
|
||||
export class MediaGenerationService {
|
||||
/**
|
||||
* Generates a deterministic SVG avatar for a driver
|
||||
*/
|
||||
generateDriverAvatar(driverId: string): string {
|
||||
faker.seed(this.hashCode(driverId));
|
||||
|
||||
const firstName = faker.person.firstName();
|
||||
const lastName = faker.person.lastName();
|
||||
const initials = ((firstName?.[0] || 'D') + (lastName?.[0] || 'R')).toUpperCase();
|
||||
|
||||
const primaryColor = faker.color.rgb({ format: 'hex' });
|
||||
const secondaryColor = faker.color.rgb({ format: 'hex' });
|
||||
|
||||
const patterns = ['gradient', 'stripes', 'circles', 'diamond'];
|
||||
const pattern = faker.helpers.arrayElement(patterns);
|
||||
|
||||
let patternSvg = '';
|
||||
switch (pattern) {
|
||||
case 'gradient':
|
||||
patternSvg = `
|
||||
<defs>
|
||||
<linearGradient id="grad-${driverId}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:${primaryColor};stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:${secondaryColor};stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="100" height="100" rx="50" fill="url(#grad-${driverId})"/>
|
||||
`;
|
||||
break;
|
||||
case 'stripes':
|
||||
patternSvg = `
|
||||
<rect width="100" height="100" rx="50" fill="${primaryColor}"/>
|
||||
<rect x="0" y="0" width="50" height="100" rx="50" fill="${secondaryColor}" opacity="0.3"/>
|
||||
`;
|
||||
break;
|
||||
case 'circles':
|
||||
patternSvg = `
|
||||
<rect width="100" height="100" rx="50" fill="${primaryColor}"/>
|
||||
<circle cx="30" cy="30" r="15" fill="${secondaryColor}" opacity="0.4"/>
|
||||
<circle cx="70" cy="70" r="10" fill="${secondaryColor}" opacity="0.4"/>
|
||||
`;
|
||||
break;
|
||||
case 'diamond':
|
||||
patternSvg = `
|
||||
<rect width="100" height="100" rx="50" fill="${primaryColor}"/>
|
||||
<path d="M50 20 L80 50 L50 80 L20 50 Z" fill="${secondaryColor}" opacity="0.3"/>
|
||||
`;
|
||||
break;
|
||||
}
|
||||
|
||||
return `
|
||||
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
${patternSvg}
|
||||
<text x="50" y="58" font-family="Arial, sans-serif" font-size="36" font-weight="bold" fill="white" text-anchor="middle" letter-spacing="2">${initials}</text>
|
||||
</svg>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a deterministic SVG logo for a team
|
||||
* Now includes team name initials for better branding
|
||||
* Generates a deterministic logo URL for a team
|
||||
* Uses a real placeholder image service for high-quality racing logos.
|
||||
*/
|
||||
generateTeamLogo(teamId: string): string {
|
||||
faker.seed(this.hashCode(teamId));
|
||||
|
||||
const primaryColor = faker.color.rgb({ format: 'hex' });
|
||||
const secondaryColor = faker.color.rgb({ format: 'hex' });
|
||||
|
||||
// Generate deterministic initials from seeded faker data
|
||||
// This creates consistent initials for the same teamId
|
||||
const adjective = faker.company.buzzAdjective();
|
||||
const noun = faker.company.catchPhraseNoun();
|
||||
const initials = ((adjective?.[0] || 'T') + (noun?.[0] || 'M')).toUpperCase();
|
||||
|
||||
const shapes = ['circle', 'square', 'triangle', 'hexagon'];
|
||||
const shape = faker.helpers.arrayElement(shapes);
|
||||
|
||||
let shapeSvg = '';
|
||||
switch (shape) {
|
||||
case 'circle':
|
||||
shapeSvg = `<circle cx="20" cy="16" r="10" fill="${primaryColor}" opacity="0.8"/>`;
|
||||
break;
|
||||
case 'square':
|
||||
shapeSvg = `<rect x="10" y="6" width="20" height="20" rx="4" fill="${primaryColor}" opacity="0.8"/>`;
|
||||
break;
|
||||
case 'triangle':
|
||||
shapeSvg = `<path d="M20 6 L30 26 L10 26 Z" fill="${primaryColor}" opacity="0.8"/>`;
|
||||
break;
|
||||
case 'hexagon':
|
||||
shapeSvg = `<path d="M20 6 L28 10 L28 22 L20 26 L12 22 L12 10 Z" fill="${primaryColor}" opacity="0.8"/>`;
|
||||
break;
|
||||
}
|
||||
|
||||
return `
|
||||
<svg width="120" height="40" viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grad-${teamId}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:${primaryColor};stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:${secondaryColor};stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="120" height="40" rx="8" fill="#1e293b"/>
|
||||
${shapeSvg}
|
||||
<rect x="40" y="12" width="4" height="16" rx="1" fill="${secondaryColor}" opacity="0.6"/>
|
||||
<rect x="48" y="8" width="4" height="24" rx="1" fill="${primaryColor}" opacity="0.8"/>
|
||||
<rect x="56" y="12" width="4" height="16" rx="1" fill="${secondaryColor}" opacity="0.6"/>
|
||||
<text x="85" y="24" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="white" text-anchor="middle">${initials}</text>
|
||||
</svg>
|
||||
`;
|
||||
return `https://picsum.photos/seed/${teamId}/200/200`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a deterministic SVG logo for a league
|
||||
* Updated to use the same faker style as team logos for consistency
|
||||
* Generates a deterministic logo URL for a league
|
||||
* Uses a real placeholder image service for high-quality league logos.
|
||||
*/
|
||||
generateLeagueLogo(leagueId: string): string {
|
||||
faker.seed(this.hashCode(leagueId));
|
||||
|
||||
const primaryColor = faker.color.rgb({ format: 'hex' });
|
||||
const secondaryColor = faker.color.rgb({ format: 'hex' });
|
||||
|
||||
// Generate deterministic initials from seeded faker data
|
||||
// This creates consistent initials for the same leagueId
|
||||
const adjective = faker.company.buzzAdjective();
|
||||
const noun = faker.company.catchPhraseNoun();
|
||||
const initials = ((adjective?.[0] || 'L') + (noun?.[0] || 'G')).toUpperCase();
|
||||
|
||||
const shapes = ['circle', 'square', 'triangle', 'hexagon'];
|
||||
const shape = faker.helpers.arrayElement(shapes);
|
||||
|
||||
let shapeSvg = '';
|
||||
switch (shape) {
|
||||
case 'circle':
|
||||
shapeSvg = `<circle cx="20" cy="16" r="10" fill="${primaryColor}" opacity="0.8"/>`;
|
||||
break;
|
||||
case 'square':
|
||||
shapeSvg = `<rect x="10" y="6" width="20" height="20" rx="4" fill="${primaryColor}" opacity="0.8"/>`;
|
||||
break;
|
||||
case 'triangle':
|
||||
shapeSvg = `<path d="M20 6 L30 26 L10 26 Z" fill="${primaryColor}" opacity="0.8"/>`;
|
||||
break;
|
||||
case 'hexagon':
|
||||
shapeSvg = `<path d="M20 6 L28 10 L28 22 L20 26 L12 22 L12 10 Z" fill="${primaryColor}" opacity="0.8"/>`;
|
||||
break;
|
||||
}
|
||||
|
||||
return `
|
||||
<svg width="120" height="40" viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grad-${leagueId}" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:${primaryColor};stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:${secondaryColor};stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="120" height="40" rx="8" fill="#1e293b"/>
|
||||
${shapeSvg}
|
||||
<rect x="40" y="12" width="4" height="16" rx="1" fill="${secondaryColor}" opacity="0.6"/>
|
||||
<rect x="48" y="8" width="4" height="24" rx="1" fill="${primaryColor}" opacity="0.8"/>
|
||||
<rect x="56" y="12" width="4" height="16" rx="1" fill="${secondaryColor}" opacity="0.6"/>
|
||||
<text x="85" y="24" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="white" text-anchor="middle">${initials}</text>
|
||||
</svg>
|
||||
`;
|
||||
return `https://picsum.photos/seed/l-${leagueId}/200/200`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a deterministic SVG cover for a league
|
||||
* Generates a deterministic avatar URL for a driver
|
||||
* Uses a real placeholder image service for high-quality driver avatars.
|
||||
*/
|
||||
generateDriverAvatar(driverId: string): string {
|
||||
faker.seed(this.hashCode(driverId));
|
||||
return `https://i.pravatar.cc/150?u=${driverId}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a deterministic cover URL for a league
|
||||
* Uses a real placeholder image service for high-quality league covers.
|
||||
*/
|
||||
generateLeagueCover(leagueId: string): string {
|
||||
faker.seed(this.hashCode(leagueId));
|
||||
|
||||
const primaryColor = faker.color.rgb({ format: 'hex' });
|
||||
const secondaryColor = faker.color.rgb({ format: 'hex' });
|
||||
|
||||
return `
|
||||
<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grad-${leagueId}" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:${primaryColor};stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:${secondaryColor};stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="200" fill="url(#grad-${leagueId})"/>
|
||||
<rect width="800" height="200" fill="black" opacity="0.2"/>
|
||||
</svg>
|
||||
`;
|
||||
return `https://picsum.photos/seed/c-${leagueId}/800/200`;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user