Refactor createEid function to enhance lantern and star generation logic [skip ci]

This commit is contained in:
CodeDevMLH
2026-02-26 02:54:47 +01:00
parent e3ea4fa599
commit 9b6d48a5fe

View File

@@ -38,35 +38,44 @@ observer.observe(document.body, {
function createEid(container) { function createEid(container) {
for (let i = 0; i < 25; i++) { const starCount = 20;
const symbol = document.createElement('div'); const lanternCount = Math.floor(Math.random() * 3) + 4; // 4 to 6 lanterns
symbol.className = 'eid-symbol';
const isLantern = Math.random() > 0.8;
if (isLantern) {
symbol.classList.add('lantern-rope');
symbol.style.left = `${Math.random() * 90 + 5}%`;
symbol.style.animationDelay = `${Math.random() * -4}s`;
const ropeLen = 15 + Math.random() * 15; // 15vh to 30vh
symbol.style.height = `${ropeLen}vh`;
const lanternSpan = document.createElement('span'); // Create evenly spaced lanterns
lanternSpan.className = 'lantern-emoji'; const segmentWidth = 100 / lanternCount;
lanternSpan.textContent = '🏮'; for (let i = 0; i < lanternCount; i++) {
symbol.appendChild(lanternSpan); const symbol = document.createElement('div');
} else { symbol.className = 'eid-symbol lantern-rope';
symbol.textContent = eidSymbols[Math.floor(Math.random() * eidSymbols.length)];
symbol.classList.add('floating-star'); // Base position within segment, with slight random jitter
symbol.style.left = `${Math.random() * 100}%`; const baseLeft = (i * segmentWidth) + (segmentWidth * 0.2);
symbol.style.top = `${Math.random() * 100}%`; const jitter = Math.random() * (segmentWidth * 0.6);
symbol.style.animationDelay = `${Math.random() * -5}s`; symbol.style.left = `${baseLeft + jitter}%`;
}
symbol.style.animationDelay = `${Math.random() * -4}s`;
const ropeLen = 15 + Math.random() * 15; // 15vh to 30vh
symbol.style.height = `${ropeLen}vh`;
const lanternSpan = document.createElement('span');
lanternSpan.className = 'lantern-emoji';
lanternSpan.textContent = '🏮';
symbol.appendChild(lanternSpan);
container.appendChild(symbol);
}
// Create random floating stars
for (let i = 0; i < starCount; i++) {
const symbol = document.createElement('div');
symbol.className = 'eid-symbol floating-star';
symbol.textContent = eidSymbols[Math.floor(Math.random() * eidSymbols.length)];
symbol.style.left = `${Math.random() * 100}%`;
symbol.style.top = `${Math.random() * 100}%`;
symbol.style.animationDelay = `${Math.random() * -5}s`;
symbol.addEventListener('animationiteration', () => { symbol.addEventListener('animationiteration', () => {
if (!isLantern) { symbol.style.left = `${Math.random() * 90 + 5}%`;
symbol.style.left = `${Math.random() * 90 + 5}%`; symbol.style.top = `${Math.random() * 100}%`;
symbol.style.top = `${Math.random() * 100}%`;
}
}); });
container.appendChild(symbol); container.appendChild(symbol);