myroom-react/src/utils/avatarUtils.ts

React component wrapper for MyRoom 3D scene

import { AvatarConfig, Gender } from '../types';

// Default avatar parts data structure
export const availablePartsData = {
  male: {
    fixedParts: {
      body: '/models/male/male_body/male_body.glb'
    },
    selectableParts: {
      hair: [
        { name: 'Hair 1', fileName: 'male_hair_001.glb' },
        { name: 'Hair 2', fileName: 'male_hair_002.glb' },
        { name: 'Hair 3', fileName: 'male_hair_003.glb' },
        { name: 'Hair 4', fileName: 'male_hair_004.glb' },
        { name: 'Hair 5', fileName: 'male_hair_005.glb' }
      ],
      top: [
        { name: 'Top 1', fileName: 'male_top_001.glb' },
        { name: 'Top 2', fileName: 'male_top_002.glb' }
      ],
      bottom: [
        { name: 'Bottom 1', fileName: 'male_bottom_001.glb' }
      ],
      shoes: [
        { name: 'Shoes 1', fileName: 'male_shoes_001.glb' },
        { name: 'Shoes 2', fileName: 'male_shoes_002.glb' },
        { name: 'Shoes 3', fileName: 'male_shoes_003.glb' }
      ],
      accessory: [
        { name: 'Accessory 1', fileName: 'male_acc_001.glb' },
        { name: 'Accessory 2', fileName: 'male_acc_002.glb' }
      ],
      fullset: [
        { name: 'Fullset 1', fileName: 'male_fullset_001.glb' },
        { name: 'Fullset 2', fileName: 'male_fullset_002.glb' },
        { name: 'Fullset 3', fileName: 'male_fullset_003.glb' },
        { name: 'Fullset 4', fileName: 'male_fullset_004.glb' },
        { name: 'Fullset 5', fileName: 'male_fullset_005.glb' }
      ]
    },
    defaultColors: {
      hair: '#8B4513',
      top: '#4A90E2',
      bottom: '#2C3E50',
      shoes: '#34495E',
      accessory: '#E74C3C'
    }
  },
  female: {
    fixedParts: {
      body: '/models/female/female_body/female_body.glb'
    },
    selectableParts: {
      hair: [
        { name: 'Hair 1', fileName: 'female_hair_001.glb' },
        { name: 'Hair 2', fileName: 'female_hair_002.glb' }
      ],
      top: [
        { name: 'Top 1', fileName: 'female_top_001.glb' },
        { name: 'Top 2', fileName: 'female_top_002.glb' }
      ],
      bottom: [
        { name: 'Bottom 1', fileName: 'female_bottom_001.glb' },
        { name: 'Bottom 2', fileName: 'female_bottom_002.glb' }
      ],
      shoes: [
        { name: 'Shoes 1', fileName: 'female_shoes_001.glb' }
      ],
      accessory: [
        { name: 'Accessory 1', fileName: 'female_acc_001.glb' },
        { name: 'Accessory 2', fileName: 'female_acc_002.glb' },
        { name: 'Accessory 3', fileName: 'female_acc_003.glb' }
      ],
      fullset: [
        { name: 'Fullset 1', fileName: 'female_fullset_001.glb' },
        { name: 'Fullset 2', fileName: 'female_fullset_002.glb' },
        { name: 'Fullset 3', fileName: 'female_fullset_003.glb' },
        { name: 'Fullset 4', fileName: 'female_fullset_004.glb' },
        { name: 'Fullset 5', fileName: 'female_fullset_005.glb' }
      ]
    },
    defaultColors: {
      hair: '#D4AF37',
      top: '#FF6B6B',
      bottom: '#4ECDC4',
      shoes: '#45B7D1',
      accessory: '#FFA07A'
    }
  }
};

/**
 * Get default avatar configuration for a specific gender
 */
export function getDefaultConfigForGender(gender: Gender): AvatarConfig {
  const genderData = availablePartsData[gender];
  
  // Get first available parts for each category
  const parts = {
    body: genderData.fixedParts.body,
    hair: genderData.selectableParts.hair[0]?.fileName 
      ? `/models/${gender}/${gender}_hair/${genderData.selectableParts.hair[0].fileName}`
      : null,
    top: genderData.selectableParts.top[0]?.fileName
      ? `/models/${gender}/${gender}_top/${genderData.selectableParts.top[0].fileName}`
      : null,
    bottom: genderData.selectableParts.bottom?.[0]?.fileName
      ? `/models/${gender}/${gender}_bottom/${genderData.selectableParts.bottom[0].fileName}`
      : null,
    shoes: genderData.selectableParts.shoes?.[0]?.fileName
      ? `/models/${gender}/${gender}_shoes/${genderData.selectableParts.shoes[0].fileName}`
      : null,
    accessory: genderData.selectableParts.accessory?.[0]?.fileName
      ? `/models/${gender}/${gender}_acc/${genderData.selectableParts.accessory[0].fileName}`
      : null
  };

  return {
    gender,
    parts,
    colors: { ...genderData.defaultColors }
  };
}

/**
 * Get available parts for a specific gender and part type
 */
export function getAvailableParts(gender: Gender, partType: string) {
  return availablePartsData[gender].selectableParts[partType as keyof typeof availablePartsData[typeof gender]['selectableParts']] || [];
}

/**
 * Get default colors for a specific gender
 */
export function getDefaultColorsForGender(gender: Gender) {
  return { ...availablePartsData[gender].defaultColors };
}