contador-da-viagem/script.js

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