diff --git a/fireworks.js b/fireworks.js new file mode 100644 index 0000000..1767f96 --- /dev/null +++ b/fireworks.js @@ -0,0 +1,130 @@ +import { Particle } from './particles.js'; + +// Fireworks variables +let context; +let fireworks = []; +let particles = []; +let fireworksActive = false; +let canvas; +let body; + +// Canvas setup +function setupCanvas() { + if (!canvas) return; + + context = canvas.getContext('2d'); + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + + // Event to resize canvas when window resizes + window.addEventListener('resize', () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + }); +} + +// Firework class +class Firework { + constructor() { + this.x = Math.random() * canvas.width; + this.y = canvas.height; + this.targetX = Math.random() * canvas.width; + this.targetY = Math.random() * canvas.height / 2; + this.speed = 2 + Math.random() * 3; + this.angle = Math.atan2(this.targetY - this.y, this.targetX - this.x); + this.velocityX = Math.cos(this.angle) * this.speed; + this.velocityY = Math.sin(this.angle) * this.speed; + this.size = 2; + this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; + this.particleCount = 80 + Math.floor(Math.random() * 40); + } + + update() { + this.x += this.velocityX; + this.y += this.velocityY; + + // Check if firework reached its target + if (Math.abs(this.x - this.targetX) < 10 && Math.abs(this.y - this.targetY) < 10) { + this.explode(); + return false; + } + return true; + } + + explode() { + for (let i = 0; i < this.particleCount; i++) { + particles.push(new Particle(this.x, this.y, this.color)); + } + } + + draw() { + context.fillStyle = this.color; + context.beginPath(); + context.arc(this.x, this.y, this.size, 0, Math.PI * 2); + context.fill(); + } +} + +// Animation loop for fireworks +function animateFireworks() { + if (!fireworksActive) return; + + requestAnimationFrame(animateFireworks); + + // Clear canvas with semi-transparent black for trail effect + context.fillStyle = 'rgba(0, 0, 0, 0.1)'; + context.fillRect(0, 0, canvas.width, canvas.height); + + // Random chance to create a new firework + if (fireworks.length < 5 && Math.random() < 0.03) { + fireworks.push(new Firework()); + } + + // Update and draw fireworks + fireworks = fireworks.filter(firework => { + firework.draw(); + return firework.update(); + }); + + // Update and draw particles + particles = particles.filter(particle => { + particle.draw(context); + return particle.update(); + }); +} + +// Start fireworks +function startFireworks() { + if (fireworksActive) return; + + setupCanvas(); + fireworksActive = true; + body.classList.add('fireworks-active'); + canvas.style.display = 'block'; + + // Create initial fireworks + for (let i = 0; i < 3; i++) { + fireworks.push(new Firework()); + } + + animateFireworks(); + console.log("Fireworks started"); +} + +// Reset fireworks +function resetFireworks() { + if (!fireworksActive) return; + + fireworksActive = false; + body.classList.remove('fireworks-active'); + fireworks = []; + particles = []; +} + +// Initialize fireworks with DOM elements +function initFireworks(canvasElement, bodyElement) { + canvas = canvasElement; + body = bodyElement; +} + +export { startFireworks, resetFireworks, initFireworks }; \ No newline at end of file diff --git a/index.html b/index.html index 8ba3a86..9efa3b7 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
-

Contador até a viagem

+

Contador da Viagem

@@ -34,14 +34,14 @@
Segundos
- +

Contando até: 10 de Abril de 2025

- + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..b49eb2d --- /dev/null +++ b/main.js @@ -0,0 +1,94 @@ +import { initFireworks, startFireworks, resetFireworks } from './fireworks.js'; + +// Target date for countdown (YYYY, Month-1, Day, Hour, Minute, Second) +// Default date is set to April 10, 2025 +let targetDate = new Date(2025, 3, 10, 0, 0, 0).getTime(); + +const test = true; + +if (test) { + // Para teste: descomentar a linha abaixo para simular que a data já passou + targetDate = new Date().getTime() - 1000; // 1 segundo no passado +} + +// Elements +const daysElement = document.getElementById('days'); +const hoursElement = document.getElementById('hours'); +const minutesElement = document.getElementById('minutes'); +const secondsElement = document.getElementById('seconds'); +const countdownElement = document.querySelector('.countdown'); +const expiredMessageElement = document.getElementById('expired-message'); +const canvas = document.getElementById('fireworks-canvas'); +const body = document.body; + +// Initialize the fireworks +initFireworks(canvas, body); + +// Update the target date display +document.getElementById('target-date').textContent = new Date(targetDate).toLocaleDateString('pt-BR', { + day: 'numeric', + month: 'long', + year: 'numeric' +}); + +// Update the countdown every second +function updateCountdown() { + // Get the current date and time + const now = new Date().getTime(); + + // Find the distance between now and the target date + const distance = targetDate - now; + + // Check if the target date has passed + if (distance < 0) { + // Hide countdown and show expired message + countdownElement.classList.add('hidden'); + expiredMessageElement.classList.remove('hidden'); + startFireworks(); + return; + } + + // Time calculations for days, hours, minutes and seconds + const days = Math.floor(distance / (1000 * 60 * 60 * 24)); + const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((distance % (1000 * 60)) / 1000); + + // Display the results + daysElement.innerHTML = days.toString().padStart(2, '0'); + hoursElement.innerHTML = hours.toString().padStart(2, '0'); + minutesElement.innerHTML = minutes.toString().padStart(2, '0'); + secondsElement.innerHTML = seconds.toString().padStart(2, '0'); +} + +// Function to change the target date +function changeTargetDate(newDate) { + // You can call this function to change the target date dynamically + targetDate = new Date(newDate).getTime(); + + // Update the target date display + document.getElementById('target-date').textContent = new Date(targetDate).toLocaleDateString('pt-BR', { + day: 'numeric', + month: 'long', + year: 'numeric' + }); + + // Reset the countdown display + countdownElement.classList.remove('hidden'); + expiredMessageElement.classList.add('hidden'); + + // Reset fireworks if active + resetFireworks(); + + // Update the countdown immediately + updateCountdown(); +} + +// Make changeTargetDate available globally +window.changeTargetDate = changeTargetDate; + +// Initial call to set correct values +updateCountdown(); + +// Update the countdown every second +const countdownInterval = setInterval(updateCountdown, 1000); \ No newline at end of file diff --git a/particles.js b/particles.js new file mode 100644 index 0000000..7cc3c99 --- /dev/null +++ b/particles.js @@ -0,0 +1,35 @@ +// Particle class (for explosion) +export class Particle { + constructor(x, y, color) { + this.x = x; + this.y = y; + this.velocityX = (Math.random() - 0.5) * 5; + this.velocityY = (Math.random() - 0.5) * 5; + this.size = Math.random() * 4 + 1; // Tamanho maior para melhor visibilidade + this.color = color; + this.alpha = 1; + this.gravity = 0.05; + this.resistance = 0.92; + } + + update() { + this.velocityX *= this.resistance; + this.velocityY *= this.resistance; + this.velocityY += this.gravity; + + this.x += this.velocityX; + this.y += this.velocityY; + this.alpha -= 0.01; + + return this.alpha > 0; + } + + draw(context) { + context.globalAlpha = this.alpha; + context.fillStyle = this.color; + context.beginPath(); + context.arc(this.x, this.y, this.size, 0, Math.PI * 2); + context.fill(); + context.globalAlpha = 1; + } +} \ No newline at end of file diff --git a/script.js b/script.js deleted file mode 100644 index 4b90bac..0000000 --- a/script.js +++ /dev/null @@ -1,228 +0,0 @@ -// Target date for countdown (YYYY, Month-1, Day, Hour, Minute, Second) -// Default date is set to December 31, 2023 -let targetDate = new Date(2025, 3, 10, 0, 0, 0).getTime(); - -const test = true; - -if (test) { - // Para teste: descomentar a linha abaixo para simular que a data já passou - // targetDate = new Date().getTime() - 1000; // 1 segundo no passado - targetDate = new Date(2025, 2, 10, 0, 0, 0).getTime(); -} - -// Update the target date display -document.getElementById('target-date').textContent = new Date(targetDate).toLocaleDateString('pt-BR', { - day: 'numeric', - month: 'long', - year: 'numeric' -}); - -// Elements -const daysElement = document.getElementById('days'); -const hoursElement = document.getElementById('hours'); -const minutesElement = document.getElementById('minutes'); -const secondsElement = document.getElementById('seconds'); -const countdownElement = document.querySelector('.countdown'); -const expiredMessageElement = document.getElementById('expired-message'); -const canvas = document.getElementById('fireworks-canvas'); -const body = document.body; - -// Fireworks variables -let context; -let fireworks = []; -let particles = []; -let fireworksActive = false; - -// Canvas setup -function setupCanvas() { - if (!canvas) return; - - context = canvas.getContext('2d'); - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - - // Event to resize canvas when window resizes - window.addEventListener('resize', () => { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - }); -} - -// Firework class -class Firework { - constructor() { - this.x = Math.random() * canvas.width; - this.y = canvas.height; - this.targetX = Math.random() * canvas.width; - this.targetY = Math.random() * canvas.height / 2; - this.speed = 2 + Math.random() * 3; - this.angle = Math.atan2(this.targetY - this.y, this.targetX - this.x); - this.velocityX = Math.cos(this.angle) * this.speed; - this.velocityY = Math.sin(this.angle) * this.speed; - this.size = 2; - this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; - this.particleCount = 80 + Math.floor(Math.random() * 40); - } - - update() { - this.x += this.velocityX; - this.y += this.velocityY; - - // Check if firework reached its target - if (Math.abs(this.x - this.targetX) < 10 && Math.abs(this.y - this.targetY) < 10) { - this.explode(); - return false; - } - return true; - } - - explode() { - for (let i = 0; i < this.particleCount; i++) { - particles.push(new Particle(this.x, this.y, this.color)); - } - } - - draw() { - context.fillStyle = this.color; - context.beginPath(); - context.arc(this.x, this.y, this.size, 0, Math.PI * 2); - context.fill(); - } -} - -// Particle class (for explosion) -class Particle { - constructor(x, y, color) { - this.x = x; - this.y = y; - this.velocityX = (Math.random() - 0.5) * 5; - this.velocityY = (Math.random() - 0.5) * 5; - this.size = Math.random() * 3; - this.color = color; - this.alpha = 1; - this.gravity = 0.05; - this.resistance = 0.92; - } - - update() { - this.velocityX *= this.resistance; - this.velocityY *= this.resistance; - this.velocityY += this.gravity; - - this.x += this.velocityX; - this.y += this.velocityY; - this.alpha -= 0.01; - - return this.alpha > 0; - } - - draw() { - context.globalAlpha = this.alpha; - context.fillStyle = this.color; - context.beginPath(); - context.arc(this.x, this.y, this.size, 0, Math.PI * 2); - context.fill(); - context.globalAlpha = 1; - } -} - -// Animation loop for fireworks -function animateFireworks() { - if (!fireworksActive) return; - - requestAnimationFrame(animateFireworks); - - context.fillStyle = 'rgba(0, 0, 0, 0.1)'; - context.fillRect(0, 0, canvas.width, canvas.height); - - // Random chance to create a new firework - if (fireworks.length < 5 && Math.random() < 0.03) { - fireworks.push(new Firework()); - } - - // Update and draw fireworks - fireworks = fireworks.filter(firework => { - firework.draw(); - return firework.update(); - }); - - // Update and draw particles - particles = particles.filter(particle => { - particle.draw(); - return particle.update(); - }); -} - -// Start fireworks -function startFireworks() { - if (fireworksActive) return; - - setupCanvas(); - fireworksActive = true; - body.classList.add('fireworks-active'); - animateFireworks(); -} - -// Update the countdown every second -function updateCountdown() { - // Get the current date and time - const now = new Date().getTime(); - - // Find the distance between now and the target date - const distance = targetDate - now; - - // Check if the target date has passed - if (distance < 0) { - // Hide countdown and show expired message - countdownElement.classList.add('hidden'); - expiredMessageElement.classList.remove('hidden'); - startFireworks(); - return; - } - - // Time calculations for days, hours, minutes and seconds - const days = Math.floor(distance / (1000 * 60 * 60 * 24)); - const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); - const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); - const seconds = Math.floor((distance % (1000 * 60)) / 1000); - - // Display the results - daysElement.innerHTML = days.toString().padStart(2, '0'); - hoursElement.innerHTML = hours.toString().padStart(2, '0'); - minutesElement.innerHTML = minutes.toString().padStart(2, '0'); - secondsElement.innerHTML = seconds.toString().padStart(2, '0'); -} - -// Initial call to set correct values -updateCountdown(); - -// Update the countdown every second -const countdownInterval = setInterval(updateCountdown, 1000); - -// Function to change the target date -function changeTargetDate(newDate) { - // You can call this function to change the target date dynamically - targetDate = new Date(newDate).getTime(); - - // Update the target date display - document.getElementById('target-date').textContent = new Date(targetDate).toLocaleDateString('pt-BR', { - day: 'numeric', - month: 'long', - year: 'numeric' - }); - - // Reset the countdown display - countdownElement.classList.remove('hidden'); - expiredMessageElement.classList.add('hidden'); - - // Reset fireworks if active - if (fireworksActive) { - fireworksActive = false; - body.classList.remove('fireworks-active'); - fireworks = []; - particles = []; - } - - // Update the countdown immediately - updateCountdown(); -} \ No newline at end of file