Initial idea for eastereggs

public/javascript/chapa_sigmoide.js

@@ -0,0 +1,76 @@
+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(); }