79 lines
No EOL
1.6 KiB
JavaScript
79 lines
No EOL
1.6 KiB
JavaScript
const cards = document.querySelectorAll('div.ficha');
|
|
|
|
for (const card of cards)
|
|
{
|
|
card.addEventListener('click', handleCardClick);
|
|
}
|
|
|
|
const eastereggContainers = document.querySelectorAll('div.ficha:has(.easteregg)');
|
|
|
|
const messageBox = document.getElementById('message-box');
|
|
|
|
let clickCount = 0;
|
|
let lastClickTime = 0;
|
|
const clickThreshold = 800;
|
|
const expandDuration = 5000;
|
|
|
|
let hideTimeoutId = null;
|
|
|
|
function hideEastereggs() {
|
|
for (const div of eastereggContainers)
|
|
{
|
|
div.classList.remove('easteregg-visible');
|
|
div.classList.add('easteregg-hidden');
|
|
}
|
|
}
|
|
|
|
function expandEastereggs() {
|
|
for (const div of eastereggContainers)
|
|
{
|
|
div.classList.add('easteregg-visible');
|
|
div.classList.remove('easteregg-hidden');
|
|
}
|
|
|
|
// Clear any existing timeout and set a new one
|
|
if (hideTimeoutId) {
|
|
clearTimeout(hideTimeoutId);
|
|
}
|
|
|
|
hideTimeoutId = setTimeout(
|
|
() => { hideEastereggs(); },
|
|
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
|
|
);
|
|
|
|
// Determine if the click is 'in a row'
|
|
if (now - lastClickTime < clickThreshold)
|
|
{ clickCount++; }
|
|
else
|
|
{
|
|
clickCount = 1;
|
|
if (element.classList.contains('easteregg-visible'))
|
|
{ hideEastereggs(); }
|
|
}
|
|
|
|
lastClickTime = now;
|
|
|
|
// Check for the 3-click trigger
|
|
if (clickCount >= 3)
|
|
{ expandEastereggs(); }
|
|
}
|
|
|
|
window.onload = () => { hideEastereggs(); } |