chris/flashCards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make pets react (happy/worried) and polish perch

Browse Source
This commit is contained in:
chris 2025-11-20 11:09:27 -05:00
parent f8f83f2f37
commit 4dab54f821
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app.js
View File

@ -266,6 +266,7 @@
}
castPatronus();
petReact('happy');
feedback.style.color = '#7cff9a';
feedback.innerText = `Expecto Patronum! (+${goldGain} G)`;
@ -886,6 +887,7 @@
resetDementor();
saveData(); updateUI();
game.active = true;
petReact('worried');
}, delayMs);
}
@ -935,6 +937,16 @@
pet.innerText = state.activePetIcon || '🐾';
perch.appendChild(pet);
}
function petReact(mode = 'happy') {
const pet = document.querySelector('#pet-perch .pet-icon');
if (!pet) return;
pet.classList.remove('pet-happy', 'pet-worried');
pet.classList.add(mode === 'happy' ? 'pet-happy' : 'pet-worried');
setTimeout(() => {
pet.classList.remove('pet-happy', 'pet-worried');
}, 600);
}
function saveData() { localStorage.setItem('arithmancyDataV17', JSON.stringify(state)); }
function loadData() {

8
style.css
View File

@ -382,7 +382,7 @@
opacity: 0.4; cursor: not-allowed;
}
#pet-perch {
height: 40px;
height: 48px;
display: flex; justify-content: center; align-items: center;
margin-top: 6px;
}
@ -390,6 +390,7 @@
font-size: 1.8rem;
filter: drop-shadow(0 0 6px rgba(0,0,0,0.3));
animation: petFloat 3s ease-in-out infinite;
transition: transform 0.2s ease;
}
.pet-icon.pet-owl { text-shadow: 0 0 6px rgba(255,255,255,0.5); }
.pet-icon.pet-cat { text-shadow: 0 0 6px rgba(255,182,193,0.5); }
@ -397,6 +398,11 @@
.pet-icon.pet-toad { text-shadow: 0 0 6px rgba(144,238,144,0.6); }
.pet-icon.pet-ferret { text-shadow: 0 0 6px rgba(210,180,140,0.6); }
@keyframes petFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pet-icon.pet-happy { animation: petHop 0.5s ease, petGlow 1.2s ease; }
.pet-icon.pet-worried { animation: petTremble 0.5s ease; }
@keyframes petHop { 0% { transform: translateY(0); } 40% { transform: translateY(-10px); } 70% { transform: translateY(0); } 100% { transform: translateY(-4px); } }
@keyframes petTremble { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes petGlow { from { filter: drop-shadow(0 0 8px rgba(255, 217, 102, 0.7)); } to { filter: drop-shadow(0 0 16px rgba(255, 217, 102, 1)); } }
/* --- MODALS --- */
.modal-overlay {