Achivement System

This commit is contained in:
2025-09-05 17:56:23 +02:00
parent a78a8dc3ce
commit 61d5ef2e6f
11 changed files with 2195 additions and 7 deletions

View File

@@ -17,7 +17,7 @@ async function initDashboard() {
if (error) {
console.error('Error checking authentication:', error);
// Temporarily show dashboard for testing
currentUser = { id: 'test-user', email: 'admin@speedrun-arena.com' };
currentUser = { id: '9966cffd-2088-423c-b852-0ca7996cda97', email: 'admin@speedrun-arena.com' };
displayUserInfo({ email: 'admin@speedrun-arena.com' });
showDashboard();
// Check times section
@@ -38,7 +38,7 @@ async function initDashboard() {
displayUserInfo(session.user);
} else {
// Fallback if no user data
currentUser = { id: 'test-user', email: 'admin@speedrun-arena.com' };
currentUser = { id: '9966cffd-2088-423c-b852-0ca7996cda97', email: 'admin@speedrun-arena.com' };
displayUserInfo({ email: 'admin@speedrun-arena.com' });
}
showDashboard();
@@ -132,7 +132,7 @@ async function checkLinkStatusAndLoadTimes() {
try {
// Check if user has a linked player
const response = await fetch(`/api/user-player/${currentUser.id}`);
const response = await fetch(`/api/v1/public/user-player/${currentUser.id}`);
if (response.ok) {
const result = await response.json();
@@ -363,7 +363,13 @@ async function loadUserTimesSection(playerData) {
try {
const response = await fetch(`/api/v1/public/user-times/${currentUser.id}`);
const times = await response.json();
const result = await response.json();
if (!response.ok) {
throw new Error(result.message || 'Failed to load times');
}
const times = result.data || result;
// Update stats
updateTimesStats(times, playerData);
@@ -376,6 +382,9 @@ async function loadUserTimesSection(playerData) {
document.getElementById('timesNotLinked').style.display = 'none';
document.getElementById('timesDisplay').style.display = 'block';
// Initialize achievements for this player
initializeAchievements(playerData.id);
} catch (error) {
console.error('Error loading user times:', error);
showTimesNotLinked();
@@ -577,6 +586,251 @@ function showMessage(containerId, message, type) {
}
// Initialize when DOM is loaded
// ==================== ACHIEVEMENT FUNCTIONS ====================
// Global variables for achievements
let currentPlayerId = null;
let allAchievements = [];
let playerAchievements = [];
let currentAchievementCategory = 'all';
// Load achievements for the current player
async function loadPlayerAchievements() {
if (!currentPlayerId) {
showAchievementsNotAvailable();
return;
}
try {
// Show loading state
document.getElementById('achievementsLoading').style.display = 'block';
document.getElementById('achievementStats').style.display = 'none';
document.getElementById('achievementCategories').style.display = 'none';
document.getElementById('achievementsNotAvailable').style.display = 'none';
// Load player achievements
const response = await fetch(`/api/achievements/player/${currentPlayerId}`);
if (!response.ok) {
throw new Error('Failed to load achievements');
}
const result = await response.json();
playerAchievements = result.data;
// Load achievement statistics
await loadAchievementStats();
// Show achievements
displayAchievementStats();
displayAchievements();
// Hide loading state
document.getElementById('achievementsLoading').style.display = 'none';
document.getElementById('achievementStats').style.display = 'flex';
document.getElementById('achievementCategories').style.display = 'block';
} catch (error) {
console.error('Error loading achievements:', error);
document.getElementById('achievementsLoading').style.display = 'none';
showAchievementsNotAvailable();
}
}
// Load achievement statistics
async function loadAchievementStats() {
try {
const response = await fetch(`/api/achievements/player/${currentPlayerId}/stats`);
if (response.ok) {
const result = await response.json();
window.achievementStats = result.data;
}
} catch (error) {
console.error('Error loading achievement stats:', error);
}
}
// Display achievement statistics
function displayAchievementStats() {
if (!window.achievementStats) return;
const stats = window.achievementStats;
document.getElementById('totalPoints').textContent = stats.total_points;
document.getElementById('completedAchievements').textContent = `${stats.completed_achievements}/${stats.total_achievements}`;
document.getElementById('achievementsToday').textContent = stats.achievements_today;
document.getElementById('completionPercentage').textContent = `${stats.completion_percentage}%`;
}
// Display achievements in grid
function displayAchievements() {
const achievementsGrid = document.getElementById('achievementsGrid');
if (playerAchievements.length === 0) {
achievementsGrid.innerHTML = `
<div class="no-achievements">
<div class="no-achievements-icon">🏆</div>
<h3>Noch keine Achievements</h3>
<p>Starte deine ersten Läufe, um Achievements zu sammeln!</p>
</div>
`;
return;
}
// Filter achievements by category
let filteredAchievements = playerAchievements;
if (currentAchievementCategory !== 'all') {
filteredAchievements = playerAchievements.filter(achievement =>
achievement.category === currentAchievementCategory
);
}
// Generate achievement cards
const achievementCards = filteredAchievements.map(achievement => {
const isCompleted = achievement.is_completed;
const progress = achievement.progress || 0;
const earnedAt = achievement.earned_at;
let progressText = '';
if (isCompleted) {
progressText = earnedAt ?
`Erreicht am ${new Date(earnedAt).toLocaleDateString('de-DE')}` :
'Abgeschlossen';
} else if (progress > 0) {
// Show progress for incomplete achievements
const conditionValue = getAchievementConditionValue(achievement.name);
if (conditionValue) {
progressText = `${progress}/${conditionValue}`;
}
}
return `
<div class="achievement-card ${isCompleted ? 'completed' : 'incomplete'}"
onclick="showAchievementDetails('${achievement.id}')">
<div class="achievement-icon">${achievement.icon}</div>
<div class="achievement-content">
<h4 class="achievement-name">${achievement.name}</h4>
<p class="achievement-description">${achievement.description}</p>
<div class="achievement-meta">
<span class="achievement-points">+${achievement.points} Punkte</span>
${progressText ? `<span class="achievement-progress">${progressText}</span>` : ''}
</div>
</div>
<div class="achievement-status">
${isCompleted ? '✅' : '⏳'}
</div>
</div>
`;
}).join('');
achievementsGrid.innerHTML = achievementCards;
}
// Get achievement condition value for progress display
function getAchievementConditionValue(achievementName) {
const conditionMap = {
'Erste Schritte': 1,
'Durchhalter': 3,
'Fleißig': 5,
'Besessen': 10,
'Regelmäßig': 5,
'Stammgast': 10,
'Treue': 20,
'Veteran': 50,
'Fortschritt': 5,
'Durchbruch': 10,
'Transformation': 15,
'Perfektionist': 20
};
return conditionMap[achievementName] || null;
}
// Show achievement category
function showAchievementCategory(category) {
currentAchievementCategory = category;
// Update active tab
document.querySelectorAll('.category-tab').forEach(tab => {
tab.classList.remove('active');
});
document.querySelector(`[data-category="${category}"]`).classList.add('active');
// Display filtered achievements
displayAchievements();
}
// Show achievement details (placeholder for future modal)
function showAchievementDetails(achievementId) {
const achievement = playerAchievements.find(a => a.id === achievementId);
if (achievement) {
console.log('Achievement details:', achievement);
// TODO: Implement achievement details modal
}
}
// Show achievements not available state
function showAchievementsNotAvailable() {
document.getElementById('achievementsLoading').style.display = 'none';
document.getElementById('achievementStats').style.display = 'none';
document.getElementById('achievementCategories').style.display = 'none';
document.getElementById('achievementsNotAvailable').style.display = 'block';
}
// Check achievements for current player
async function checkPlayerAchievements() {
if (!currentPlayerId) return;
try {
const response = await fetch(`/api/achievements/check/${currentPlayerId}`, {
method: 'POST'
});
if (response.ok) {
const result = await response.json();
if (result.data.count > 0) {
// Show notification for new achievements
showAchievementNotification(result.data.new_achievements);
// Reload achievements
await loadPlayerAchievements();
}
}
} catch (error) {
console.error('Error checking achievements:', error);
}
}
// Show achievement notification
function showAchievementNotification(newAchievements) {
// Create notification element
const notification = document.createElement('div');
notification.className = 'achievement-notification';
notification.innerHTML = `
<div class="notification-content">
<div class="notification-icon">🏆</div>
<div class="notification-text">
<h4>Neue Achievements erreicht!</h4>
<p>Du hast ${newAchievements.length} neue Achievement${newAchievements.length > 1 ? 's' : ''} erhalten!</p>
</div>
<button class="notification-close" onclick="this.parentElement.parentElement.remove()">×</button>
</div>
`;
// Add to page
document.body.appendChild(notification);
// Auto-remove after 5 seconds
setTimeout(() => {
if (notification.parentElement) {
notification.remove();
}
}, 5000);
}
// Initialize achievements when player is loaded
function initializeAchievements(playerId) {
currentPlayerId = playerId;
loadPlayerAchievements();
}
document.addEventListener('DOMContentLoaded', function() {
// Add cookie settings button functionality
const cookieSettingsBtn = document.getElementById('cookie-settings-footer');