export function renderCodeforces(data, username) { if (!data || !data.profile) { const card = createErrorCard('Codeforces', username, 'Profile data not available'); return card; } const card = createProfileCard('codeforces', 'Codeforces'); const p = data.profile; // Profile Header card.querySelector('.user-info').innerHTML = `
${p.firstName || ''} ${p.lastName || ''}
@${p.handle || ''}
`; // Stats Grid const statsGrid = card.querySelector('.stats-grid'); statsGrid.innerHTML = `
${p.rating || 'N/A'}
Rating
${p.maxRating || 'N/A'}
Max Rating
${p.rank || 'N/A'}
Current Rank
${p.maxRank || 'N/A'}
Max Rank
`; // Country and city if (p.country || p.city) { const locationSection = document.createElement('div'); locationSection.innerHTML = '

Location

'; const locationList = document.createElement('ul'); locationList.className = 'content-list'; if (p.country) { locationList.innerHTML += `
  • Country: ${p.country}
  • `; } if (p.city) { locationList.innerHTML += `
  • City: ${p.city}
  • `; } locationSection.appendChild(locationList); card.querySelector('.profile-body').appendChild(locationSection); } // Recent contests if (data.contests?.length) { const contestsSection = document.createElement('div'); contestsSection.innerHTML = '

    Recent Contests

    '; const contestsList = document.createElement('ul'); contestsList.className = 'content-list'; // Get the 5 most recent contests const recentContests = [...data.contests] .sort((a, b) => b.contestId - a.contestId) .slice(0, 5); recentContests.forEach(contest => { const ratingChange = contest.newRating - contest.oldRating; const changeColor = ratingChange > 0 ? '#43A047' : (ratingChange < 0 ? '#e53935' : '#757575'); const changeSign = ratingChange > 0 ? '+' : ''; contestsList.innerHTML += `
  • ${contest.contestName} ${changeSign}${ratingChange} | Rank: ${contest.rank}
  • `; }); contestsSection.appendChild(contestsList); card.querySelector('.profile-body').appendChild(contestsSection); } // Top problem tags if (data.solved_stats?.top_tags) { const tagsSection = document.createElement('div'); tagsSection.innerHTML = '

    Top Problem Tags

    '; const tagsContainer = document.createElement('div'); tagsContainer.className = 'tags-container'; Object.entries(data.solved_stats.top_tags) .sort((a, b) => b[1] - a[1]) .slice(0, 8) .forEach(([tag, count]) => { tagsContainer.innerHTML += ` ${tag} (${count}) `; }); tagsSection.appendChild(tagsContainer); card.querySelector('.profile-body').appendChild(tagsSection); } // Solved stats if (data.solved_stats) { const solvedSection = document.createElement('div'); solvedSection.innerHTML = `
    ${data.solved_stats.solved_problems || 0}
    Solved
    ${data.solved_stats.total_attempts || 0}
    Attempts
    `; card.querySelector('.profile-body').appendChild(solvedSection); } // Blog posts if (data.blogs?.length) { const blogSection = document.createElement('div'); blogSection.innerHTML = '

    Recent Blog Posts

    '; const blogsList = document.createElement('ul'); blogsList.className = 'content-list'; data.blogs.slice(0, 3).forEach(blog => { blogsList.innerHTML += `
  • ${blog.title}
  • `; }); blogSection.appendChild(blogsList); card.querySelector('.profile-body').appendChild(blogSection); } // Set profile picture const profilePic = card.querySelector('.profile-pic'); profilePic.src = p.avatar || 'https://userpic.codeforces.org/no-avatar.jpg'; profilePic.onerror = () => { profilePic.src = 'https://userpic.codeforces.org/no-avatar.jpg'; }; return card; } function createProfileCard(platform, title) { const card = document.createElement('div'); card.className = `profile-card ${platform}-card`; card.innerHTML = `
    ${title.charAt(0)}

    ${title} Profile

    Profile
    `; return card; } function createErrorCard(platform, username, message) { const card = document.createElement('div'); card.className = `profile-card ${platform}-card`; card.innerHTML = `
    ${platform.charAt(0).toUpperCase()}

    ${platform.charAt(0).toUpperCase() + platform.slice(1)} Profile

    ⚠️
    Error loading ${platform} profile for "${username}": ${message}
    `; return card; }