Oliver/paraguay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add gamified rank badge system based on posts count

Browse Source
This commit is contained in:
Kato
2026-09-04 19:50:08 +00:00
parent c3a3622c34
commit 118a57ca5f
2 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+9
View File
@@ -86,6 +86,15 @@ a:hover { text-decoration: underline; }
.user-homepage a:hover { text-decoration: underline; }
.user-location { font-size: .85rem; color: #6b7280; margin: 4px 0 0 0; }
.user-description { font-size: .85rem; color: #4b5563; margin: 8px 0 0 0; max-height: 40px; overflow: hidden; text-overflow: ellipsis; }
.user-posts { font-size: .75rem; color: #9ca3af; margin: 6px 0 0 0; }
.rank-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 12px; white-space: nowrap; }
.rank-rookie { background: #f3f4f6; color: #6b7280; }
.rank-beginner { background: #d1fae5; color: #065f46; }
.rank-member { background: #dbeafe; color: #1e40af; }
.rank-contributor { background: #fef3c7; color: #92400e; }
.rank-veteran { background: #ede9fe; color: #5b21b6; }
.rank-expert { background: #fce7f3; color: #9d174d; }
.rank-legend { background: #fef08a; color: #854d0e; }
.wiki-accordion { margin: 24px 0; }
.wiki-topic { margin-bottom: 16px; }
.wiki-topic h4 { font-size: 1.1rem; font-weight: 600; padding: 12px 16px; background: var(--gray1); border-radius: 8px; cursor: pointer; transition: background .2s; }
js/main.js
+16 -1
View File
@@ -244,15 +244,20 @@ async function loadUsers() {
const avatarContent = user.image
? `<img src="${user.image}" alt="${user.username || 'user'}" class="user-avatar-img" />`
: `<span class="user-avatar-text">${(user.username || '').charAt(0).toUpperCase()}</span>`;
const rank = getRank(user.posts || 0);
card.innerHTML = `
<div class="user-avatar">${avatarContent}</div>
<div class="user-info">
<h4>${user.username || 'N/A'}</h4>
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
<h4 style="margin:0">${user.username || 'N/A'}</h4>
<span class="rank-badge rank-${rank.level}">${rank.emoji} ${rank.title}</span>
</div>
<p class="user-company">${user.company || ''}</p>
<p class="user-email">${user.email ? `<a href="mailto:${user.email}">${user.email}</a>` : ''}</p>
<p class="user-homepage">${user.homepage ? `<a href="${user.homepage.startsWith('http') ? '' : 'https://'}${user.homepage}" target="_blank">${user.homepage}</a>` : ''}</p>
<p class="user-location">${user.location || ''}</p>
<p class="user-description">${user.Description || ''}</p>
${user.posts ? `<p class="user-posts">${user.posts} <span class="hide-de">Beiträge</span><span class="hide-en">posts</span></p>` : ''}
</div>
`;
card.addEventListener('click', () => openUserDetailModal(user));
@@ -266,6 +271,16 @@ async function loadUsers() {
}
}
function getRank(posts) {
if (posts >= 500) return { level: 'legend', title: 'Legend', emoji: '👑' };
if (posts >= 200) return { level: 'expert', title: 'Expert', emoji: '🏆' };
if (posts >= 100) return { level: 'veteran', title: 'Veteran', emoji: '💎' };
if (posts >= 50) return { level: 'contributor', title: 'Contributor', emoji: '⭐' };
if (posts >= 30) return { level: 'member', title: 'Member', emoji: '🌳' };
if (posts >= 5) return { level: 'beginner', title: 'Beginner', emoji: '🌿' };
return { level: 'rookie', title: 'Rookie', emoji: '🌱' };
}
function filterUsers(searchTerm) {
const usersContainer = document.getElementById('users-list');
if (!usersContainer) return;