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(); }