feat: implement professional avatar system with 30 3D realistic avatars inspired by cinema; enhance upload functionality and user experience with instant updates and improved UI components
This commit is contained in:
283
apps/web/src/lib/utils/avatars.ts
Normal file
283
apps/web/src/lib/utils/avatars.ts
Normal file
@@ -0,0 +1,283 @@
|
||||
// Galeria de avatares inspirados em artistas do cinema
|
||||
// Usando DiceBear API com estilos variados para aparência cinematográfica
|
||||
|
||||
export interface Avatar {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
seed: string;
|
||||
style: string;
|
||||
}
|
||||
|
||||
// Avatares inspirados em artistas do cinema (30 avatares estilizados)
|
||||
const cinemaArtistsAvatars = [
|
||||
// 15 Masculinos - Inspirados em grandes atores
|
||||
{
|
||||
id: 'avatar-male-1',
|
||||
name: 'Leonardo DiCaprio',
|
||||
seed: 'Leonardo',
|
||||
style: 'adventurer',
|
||||
bgColor: 'C5CAE9',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-2',
|
||||
name: 'Brad Pitt',
|
||||
seed: 'Bradley',
|
||||
style: 'adventurer',
|
||||
bgColor: 'B2DFDB',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-3',
|
||||
name: 'Tom Hanks',
|
||||
seed: 'Thomas',
|
||||
style: 'adventurer-neutral',
|
||||
bgColor: 'DCEDC8',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-4',
|
||||
name: 'Morgan Freeman',
|
||||
seed: 'Morgan',
|
||||
style: 'adventurer',
|
||||
bgColor: 'F0F4C3',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-5',
|
||||
name: 'Robert De Niro',
|
||||
seed: 'Robert',
|
||||
style: 'adventurer-neutral',
|
||||
bgColor: 'E0E0E0',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-6',
|
||||
name: 'Al Pacino',
|
||||
seed: 'Alfredo',
|
||||
style: 'adventurer',
|
||||
bgColor: 'FFCCBC',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-7',
|
||||
name: 'Johnny Depp',
|
||||
seed: 'John',
|
||||
style: 'adventurer',
|
||||
bgColor: 'D1C4E9',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-8',
|
||||
name: 'Denzel Washington',
|
||||
seed: 'Denzel',
|
||||
style: 'adventurer-neutral',
|
||||
bgColor: 'B3E5FC',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-9',
|
||||
name: 'Will Smith',
|
||||
seed: 'Willard',
|
||||
style: 'adventurer',
|
||||
bgColor: 'FFF9C4',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-10',
|
||||
name: 'Tom Cruise',
|
||||
seed: 'TomC',
|
||||
style: 'adventurer-neutral',
|
||||
bgColor: 'CFD8DC',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-11',
|
||||
name: 'Samuel L Jackson',
|
||||
seed: 'Samuel',
|
||||
style: 'adventurer',
|
||||
bgColor: 'F8BBD0',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-12',
|
||||
name: 'Harrison Ford',
|
||||
seed: 'Harrison',
|
||||
style: 'adventurer-neutral',
|
||||
bgColor: 'C8E6C9',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-13',
|
||||
name: 'Keanu Reeves',
|
||||
seed: 'Keanu',
|
||||
style: 'adventurer',
|
||||
bgColor: 'BBDEFB',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-14',
|
||||
name: 'Matt Damon',
|
||||
seed: 'Matthew',
|
||||
style: 'adventurer-neutral',
|
||||
bgColor: 'FFE0B2',
|
||||
},
|
||||
{
|
||||
id: 'avatar-male-15',
|
||||
name: 'Christian Bale',
|
||||
seed: 'Christian',
|
||||
style: 'adventurer',
|
||||
bgColor: 'E1BEE7',
|
||||
},
|
||||
// 15 Femininos - Inspiradas em grandes atrizes
|
||||
{
|
||||
id: 'avatar-female-1',
|
||||
name: 'Meryl Streep',
|
||||
seed: 'Meryl',
|
||||
style: 'lorelei',
|
||||
bgColor: 'F8BBD0',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-2',
|
||||
name: 'Scarlett Johansson',
|
||||
seed: 'Scarlett',
|
||||
style: 'lorelei',
|
||||
bgColor: 'FFCCBC',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-3',
|
||||
name: 'Jennifer Lawrence',
|
||||
seed: 'Jennifer',
|
||||
style: 'lorelei-neutral',
|
||||
bgColor: 'E1BEE7',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-4',
|
||||
name: 'Angelina Jolie',
|
||||
seed: 'Angelina',
|
||||
style: 'lorelei',
|
||||
bgColor: 'C5CAE9',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-5',
|
||||
name: 'Cate Blanchett',
|
||||
seed: 'Catherine',
|
||||
style: 'lorelei-neutral',
|
||||
bgColor: 'B2DFDB',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-6',
|
||||
name: 'Nicole Kidman',
|
||||
seed: 'Nicole',
|
||||
style: 'lorelei',
|
||||
bgColor: 'DCEDC8',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-7',
|
||||
name: 'Julia Roberts',
|
||||
seed: 'Julia',
|
||||
style: 'lorelei-neutral',
|
||||
bgColor: 'FFF9C4',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-8',
|
||||
name: 'Emma Stone',
|
||||
seed: 'Emma',
|
||||
style: 'lorelei',
|
||||
bgColor: 'CFD8DC',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-9',
|
||||
name: 'Natalie Portman',
|
||||
seed: 'Natalie',
|
||||
style: 'lorelei-neutral',
|
||||
bgColor: 'F0F4C3',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-10',
|
||||
name: 'Charlize Theron',
|
||||
seed: 'Charlize',
|
||||
style: 'lorelei',
|
||||
bgColor: 'E0E0E0',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-11',
|
||||
name: 'Kate Winslet',
|
||||
seed: 'Kate',
|
||||
style: 'lorelei-neutral',
|
||||
bgColor: 'D1C4E9',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-12',
|
||||
name: 'Sandra Bullock',
|
||||
seed: 'Sandra',
|
||||
style: 'lorelei',
|
||||
bgColor: 'B3E5FC',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-13',
|
||||
name: 'Halle Berry',
|
||||
seed: 'Halle',
|
||||
style: 'lorelei-neutral',
|
||||
bgColor: 'C8E6C9',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-14',
|
||||
name: 'Anne Hathaway',
|
||||
seed: 'Anne',
|
||||
style: 'lorelei',
|
||||
bgColor: 'BBDEFB',
|
||||
},
|
||||
{
|
||||
id: 'avatar-female-15',
|
||||
name: 'Amy Adams',
|
||||
seed: 'Amy',
|
||||
style: 'lorelei-neutral',
|
||||
bgColor: 'FFE0B2',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Gera uma galeria de avatares inspirados em artistas do cinema
|
||||
* Usa DiceBear API com estilos cinematográficos
|
||||
* @param count Número de avatares a gerar (padrão: 30)
|
||||
* @returns Array de objetos com id, name, url, seed e style
|
||||
*/
|
||||
export function generateAvatarGallery(count: number = 30): Avatar[] {
|
||||
const avatars: Avatar[] = [];
|
||||
|
||||
for (let i = 0; i < Math.min(count, cinemaArtistsAvatars.length); i++) {
|
||||
const avatar = cinemaArtistsAvatars[i];
|
||||
|
||||
// URL do DiceBear com estilo cinematográfico
|
||||
const url = `https://api.dicebear.com/7.x/${avatar.style}/svg?seed=${encodeURIComponent(avatar.seed)}&backgroundColor=${avatar.bgColor}&radius=50&size=200`;
|
||||
|
||||
avatars.push({
|
||||
id: avatar.id,
|
||||
name: avatar.name,
|
||||
url,
|
||||
seed: avatar.seed,
|
||||
style: avatar.style,
|
||||
});
|
||||
}
|
||||
|
||||
return avatars;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obter URL do avatar por ID
|
||||
* @param avatarId ID do avatar (ex: "avatar-male-1")
|
||||
* @returns URL do avatar ou string vazia se não encontrado
|
||||
*/
|
||||
export function getAvatarUrl(avatarId: string): string {
|
||||
const gallery = generateAvatarGallery();
|
||||
const avatar = gallery.find(a => a.id === avatarId);
|
||||
return avatar?.url || '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Gerar avatar aleatório da galeria
|
||||
* @returns Avatar aleatório
|
||||
*/
|
||||
export function getRandomAvatar(): Avatar {
|
||||
const gallery = generateAvatarGallery();
|
||||
const randomIndex = Math.floor(Math.random() * gallery.length);
|
||||
return gallery[randomIndex];
|
||||
}
|
||||
|
||||
/**
|
||||
* Salvar avatar selecionado (retorna o ID para salvar no backend)
|
||||
* @param avatarId ID do avatar selecionado
|
||||
* @returns ID do avatar
|
||||
*/
|
||||
export function saveAvatarSelection(avatarId: string): string {
|
||||
return avatarId;
|
||||
}
|
||||
Reference in New Issue
Block a user