76 lines
No EOL
1.7 KiB
JavaScript
76 lines
No EOL
1.7 KiB
JavaScript
const cards = document.querySelectorAll('div.ficha');
|
|
|
|
for (const card of cards)
|
|
{
|
|
card.addEventListener('click', handleCardClick);
|
|
}
|
|
|
|
const content = document.querySelector('div.ficha .easteregg');
|
|
|
|
const messageBox = document.getElementById('message-box');
|
|
|
|
let clickCount = 0;
|
|
let lastClickTime = 0;
|
|
const clickThreshold = 800;
|
|
const expandDuration = 5000;
|
|
|
|
let hideTimeoutId = null;
|
|
|
|
function hideContent() {
|
|
content.classList.remove('easteregg-visible');
|
|
content.classList.add('easteregg-hidden');
|
|
messageBox.textContent = '';
|
|
}
|
|
|
|
function expandContent() {
|
|
// Show content
|
|
content.classList.remove('easteregg-hidden');
|
|
content.classList.add('easteregg-visible');
|
|
messageBox.textContent = 'Secret content unlocked!';
|
|
|
|
// Clear any existing timeout and set a new one
|
|
if (hideTimeoutId) {
|
|
clearTimeout(hideTimeoutId);
|
|
}
|
|
|
|
hideTimeoutId = setTimeout(() => {
|
|
hideContent();
|
|
// Optionally reset the count after the content hides,
|
|
// but we already reset it immediately below.
|
|
}, expandDuration);
|
|
|
|
clickCount = 0;
|
|
}
|
|
|
|
function handleCardClick(event) {
|
|
const now = Date.now();
|
|
|
|
let element = event.target;
|
|
|
|
while (!element.classList.contains("ficha"))
|
|
{ element = element.parentElement }
|
|
|
|
element.classList.add('animate-shake');
|
|
setTimeout(() => {
|
|
element.classList.remove('animate-shake');
|
|
}, 300); // Duration of the shake animation
|
|
|
|
// Determine if the click is 'in a row'
|
|
if (now - lastClickTime < clickThreshold) {
|
|
clickCount++;
|
|
} else {
|
|
clickCount = 1;
|
|
if (content.classList.contains('easteregg-visible')) {
|
|
hideContent();
|
|
}
|
|
}
|
|
|
|
lastClickTime = now;
|
|
|
|
// Check for the 3-click trigger
|
|
if (clickCount >= 3) {
|
|
expandContent();
|
|
}
|
|
}
|
|
|
|
window.onload = () => { hideContent(); } |