#${index + 1}
${item.flag}
${item.name} ${item.isPlayer ? '(You)' : ''}
${item.score.toLocaleString()}
`).join('');
}
// Skin Management
function applySkin(skinName) {
const skin = skins[skinName];
if (!skin) return;
// Remove all skin classes
Object.values(skins).forEach(s => {
elements.cookieVisual.classList.remove(s.class);
});
// Add new skin class
elements.cookieVisual.classList.add(skin.class);
game.currentSkin = skinName;
localStorage.setItem('currentSkin', skinName);
// Update UI selection
document.querySelectorAll('.skin-btn').forEach(btn => {
btn.classList.remove('ring-4', 'ring-amber-400', 'scale-110');
if (btn.dataset.skin === skinName) {
btn.classList.add('ring-4', 'ring-amber-400', 'scale-110');
}
});
}
function unlockSkin(skinName, cost) {
if (game.personalScore >= cost && !game.unlockedSkins.includes(skinName)) {
game.personalScore -= cost;
game.unlockedSkins.push(skinName);
localStorage.setItem('personalScore', game.personalScore);
localStorage.setItem('unlockedSkins', JSON.stringify(game.unlockedSkins));
applySkin(skinName);
updateUI();
checkSkinsAvailability();
// Celebration
createParticles(5);
}
}
function checkSkinsAvailability() {
document.querySelectorAll('.skin-btn').forEach(btn => {
const skin = btn.dataset.skin;
const cost = parseInt(btn.dataset.cost) || 0;
if (game.unlockedSkins.includes(skin)) {
btn.classList.remove('locked', 'opacity-50', 'border-gray-600');
btn.classList.add('unlocked', 'border-amber-500');
const lockOverlay = btn.querySelector('.absolute.inset-0.bg-black\\/60');
if (lockOverlay) lockOverlay.remove();
if (skin === game.currentSkin) {
btn.classList.add('ring-4', 'ring-amber-400', 'scale-110');
}
} else {
// Check if affordable
if (game.personalScore >= cost) {
btn.classList.add('border-amber-500', 'cursor-pointer');
btn.classList.remove('border-gray-600', 'opacity-50');
btn.classList.add('opacity-80');
}
}
});
}
// Event Listeners
function setupEventListeners() {
// Cookie click
elements.cookieBtn.addEventListener('click', handleCookieClick);
elements.cookieBtn.addEventListener('touchstart', (e) => {
e.preventDefault();
handleCookieClick(e);
}, { passive: false });
// Feed destroyer
elements.feedDestroyerBtn.addEventListener('click', feedDestroyer);
// Dismiss reset modal
elements.dismissReset.addEventListener('click', () => {
elements.resetModal.classList.add('hidden');
});
// Skin selection
document.querySelectorAll('.skin-btn').forEach(btn => {
btn.addEventListener('click', () => {
const skin = btn.dataset.skin;
const cost = parseInt(btn.dataset.cost) || 0;
if (game.unlockedSkins.includes(skin)) {
applySkin(skin);
} else if (game.personalScore >= cost) {
unlockSkin(skin, cost);
} else {
btn.classList.add('animate-shake');
setTimeout(() => btn.classList.remove('animate-shake'), 500);
}
});
});
}
// UI Updates
function updateUI() {
elements.personalScore.textContent = game.personalScore.toLocaleString();
elements.globalScore.textContent = game.globalScore.toLocaleString();
elements.destroyerHunger.style.width = game.destroyerHunger + '%';
elements.hungerPercent.textContent = game.destroyerHunger + '%';
// Color code hunger bar
if (game.destroyerHunger > 50) {
elements.destroyerHunger.className = 'h-full bg-gradient-to-r from-green-600 to-green-500 transition-all duration-500';
} else if (game.destroyerHunger > 25) {
elements.destroyerHunger.className = 'h-full bg-gradient-to-r from-yellow-600 to-yellow-500 transition-all duration-500';
} else {
elements.destroyerHunger.className = 'h-full bg-gradient-to-r from-red-600 to-red-500 transition-all duration-500 animate-pulse';
}
// Update feed button state
if (game.personalScore < 10) {
elements.feedDestroyerBtn.classList.add('opacity-50', 'cursor-not-allowed');
} else {
elements.feedDestroyerBtn.classList.remove('opacity-50', 'cursor-not-allowed');
}
}
// Start game
init();
// Simulate other countries contributing (atmosphere)
setInterval(() => {
if (Math.random() > 0.6 && game.globalScore > 0) {
// Random country adds cookies
const randomCountry = countries[Math.floor(Math.random() * countries.length)].code;
const gain = Math.floor(Math.random() * 10) + 1;
game.globalScore += gain;
game.countryScores[randomCountry] = (game.countryScores[randomCountry] || 0) + gain;
localStorage.setItem('globalCookieScore', game.globalScore);
localStorage.setItem('countryScores', JSON.stringify(game.countryScores));
elements.globalScore.textContent = game.globalScore.toLocaleString();
updateLeaderboard();
}
}, 5000);