/*******************************************
* gamification.js
*******************************************/
// DOM references for gamification popup
const gamificationPopup = document.getElementById("gamificationPopup");
const gamificationPopupContent = document.getElementById("gamificationPopupContent");
const gamificationMessage = document.getElementById("gamificationMessage");
const streakDots = document.getElementById("streakDots");
const closeGamificationPopupBtn = document.getElementById("closeGamificationPopupBtn");
// Close button on popup
closeGamificationPopupBtn.addEventListener("click", () => {
gamificationPopup.style.display = "none";
});
// Close if user clicks outside
window.addEventListener("click", (event) => {
if (event.target === gamificationPopup) {
gamificationPopup.style.display = "none";
}
});
/**
* Handle user login streak and popups
*/
window.handleGamification = function(username) {
const streakKey = `pt_user_streak_${username}`;
const today = new Date().toDateString();
let streakData = JSON.parse(localStorage.getItem(streakKey)) || { streak: 0, lastLogin: null };
let streak = streakData.streak;
let lastLogin = streakData.lastLogin;
if (lastLogin) {
const lastLoginDate = new Date(lastLogin);
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
if (lastLoginDate.toDateString() === yesterday.toDateString()) {
// consecutive day
streak += 1;
} else if (lastLoginDate.toDateString() === today) {
// same day, do nothing
} else {
// missed a day => reset
streak = 1;
showResetPopup();
streakData.streak = streak;
streakData.lastLogin = today;
localStorage.setItem(streakKey, JSON.stringify(streakData));
return;
}
} else {
// first login
streak = 1;
}
streakData.streak = streak;
streakData.lastLogin = today;
localStorage.setItem(streakKey, JSON.stringify(streakData));
const prizeInfo = getNextPrizeInfo(streak);
if (prizeInfo) {
// Show the streak popup
showStreakPopup(streak, prizeInfo.daysLeft, prizeInfo.prizeAmount);
}
};
// Figure out next prize milestone
window.getNextPrizeInfo = function(streak) {
const prizes = [
{ days: 7, amount: 2500 },
{ days: 14, amount: 5000 },
{ days: 30, amount: 10000 }
];
if (streak < 7) {
return { daysLeft: 7 - streak, prizeAmount: 2500 };
} else if (streak === 7) {
return { daysLeft: 14 - streak, prizeAmount: 5000 };
} else if (streak === 14) {
return { daysLeft: 30 - streak, prizeAmount: 10000 };
} else {
// After 30-day milestone, repeat every 30 days for the same 10000
const extraMonths = Math.floor((streak - 30) / 30);
const nextPrizeDay = 30 + (extraMonths + 1) * 30;
return { daysLeft: nextPrizeDay - streak, prizeAmount: 10000 };
}
};
window.showStreakPopup = function(streak, daysLeft, prizeAmount) {
gamificationMessage.textContent = `You are ${daysLeft} day(s) away from your next prize of $${prizeAmount.toLocaleString()}. Keep it up! 🎉`;
generateStreakDots(streak);
gamificationPopup.style.display = "block";
};
window.showResetPopup = function() {
gamificationMessage.textContent = `Oops! You missed a day and your streak has been reset. 😞 Start again to earn prizes!`;
generateStreakDots(1);
gamificationPopup.style.display = "block";
};
// Generate the dots for the streak
window.generateStreakDots = function(streak) {
streakDots.innerHTML = "";
for (let i = 1; i <= streak; i++) {
const dot = document.createElement("div");
dot.classList.add("streak-dot", "completed");
streakDots.appendChild(dot);
}
if (streak > 0) {
// Add a "current" pulsing dot for the next day
const currentDot = document.createElement("div");
currentDot.classList.add("streak-dot", "current");
streakDots.appendChild(currentDot);
}
};