1159cl/js/clock.js

document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.querySelector('.analog-clock');
    const ctx = canvas.getContext('2d');
    const digitalClock = document.querySelector('.digital-clock .time');
    const timezoneToggle = document.getElementsByClassName('toggle-timezone')[0];

    const pixelSize = 2; // Size of each "pixel"

    // Color variables
    const clockFaceColor = '#b8c1e0';
    const clockFaceBackgroundColor = 'transparent'; // Make background transparent
    const hourHandColor = '#0c8d53';
    const minuteHandColor = '#72f3b9';
    const secondHandColor = '#14eb8a';
    const hourMarkerColor = '#7182c1';

    let canvasWidth, canvasHeight;
    let centerX, centerY, radius;

    let timezoneOffset = -3; // Initially set to CL (UTC-3)

    // Resize canvas to fill 100% of its container
    function resizeCanvas() {
        canvasWidth = canvas.clientWidth;
        canvasHeight = canvas.clientHeight;

        // Instead of setting canvas width and height in JavaScript, rely on CSS
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;

        centerX = canvas.width / 2;
        centerY = canvas.height / 2;
        radius = (Math.min(canvas.width, canvas.height) / 2) - pixelSize * 2;

        drawClock(); // Redraw clock after resizing
    }

    // Event listener for window resize
    window.addEventListener('resize', resizeCanvas);

    // Toggle between UTC and CL time zones
    timezoneToggle.addEventListener('change', function() {
        if (this.checked) {
            timezoneOffset = 0; // UTC
        } else {
            timezoneOffset = -3; // Santiago, Chile (UTC-3)
        }
    });

    function drawClock() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // No need to fill background, keep it transparent
        drawClockFace();
        drawClockHands();
        updateDigitalClock();
    }

    function drawClockFace() {
        // Draw clock face using pixel art circle
        ctx.fillStyle = clockFaceColor;
        drawCircle(centerX, centerY, radius);

        // Draw hour markers
        ctx.fillStyle = hourMarkerColor;
        for (let hour = 0; hour < 12; hour++) {
            const angle = (Math.PI / 6) * hour - Math.PI / 2;
            const x1 = centerX + Math.cos(angle) * (radius - pixelSize * 5);
            const y1 = centerY + Math.sin(angle) * (radius - pixelSize * 5);
            const x2 = centerX + Math.cos(angle) * radius;
            const y2 = centerY + Math.sin(angle) * radius;

            drawLine(x1, y1, x2, y2);
        }
    }

    function drawCircle(x0, y0, radius) {
        x0 = Math.round(x0 / pixelSize) * pixelSize;
        y0 = Math.round(y0 / pixelSize) * pixelSize;
        radius = Math.round(radius / pixelSize) * pixelSize;

        let x = 0;
        let y = radius;
        let d = 1 - radius;

        while (x <= y) {
            drawCirclePoints(x0, y0, x, y);
            x += pixelSize;
            if (d < 0) {
                d += 2 * x + pixelSize;
            } else {
                y -= pixelSize;
                d += 2 * (x - y) + pixelSize;
            }
        }
    }

    function drawCirclePoints(x0, y0, x, y) {
        drawPixel(x0 + x, y0 + y);
        drawPixel(x0 - x, y0 + y);
        drawPixel(x0 + x, y0 - y);
        drawPixel(x0 - x, y0 - y);
        drawPixel(x0 + y, y0 + x);
        drawPixel(x0 - y, y0 + x);
        drawPixel(x0 + y, y0 - x);
        drawPixel(x0 - y, y0 - x);
    }

    function drawClockHands() {
        const now = new Date();
        // Adjust time according to timezoneOffset
        const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
        const localTime = new Date(utc + (timezoneOffset * 3600000));

        const hours = localTime.getHours() % 12;
        const minutes = localTime.getMinutes();
        const seconds = localTime.getSeconds();

        // Calculate angles
        const hourAngle = ((Math.PI / 6) * hours) + ((Math.PI / 360) * minutes) - Math.PI / 2;
        const minuteAngle = ((Math.PI / 30) * minutes) - Math.PI / 2;
        const secondAngle = ((Math.PI / 30) * seconds) - Math.PI / 2;

        // Draw hour hand
        ctx.fillStyle = hourHandColor;
        drawHand(hourAngle, radius * 0.5);

        // Draw minute hand
        ctx.fillStyle = minuteHandColor;
        drawHand(minuteAngle, radius * 0.8);

        // Draw second hand
        ctx.fillStyle = secondHandColor;
        drawHand(secondAngle, radius * 0.9);
    }

    function drawHand(angle, length) {
        const x1 = centerX;
        const y1 = centerY;
        const x2 = centerX + Math.cos(angle) * length;
        const y2 = centerY + Math.sin(angle) * length;

        drawLine(x1, y1, x2, y2);
    }

    function drawLine(x0, y0, x1, y1) {
        x0 = Math.round(x0 / pixelSize) * pixelSize;
        y0 = Math.round(y0 / pixelSize) * pixelSize;
        x1 = Math.round(x1 / pixelSize) * pixelSize;
        y1 = Math.round(y1 / pixelSize) * pixelSize;

        const dx = Math.abs(x1 - x0);
        const dy = -Math.abs(y1 - y0);

        const sx = (x0 < x1) ? pixelSize : -pixelSize;
        const sy = (y0 < y1) ? pixelSize : -pixelSize;

        let err = dx + dy;

        while (true) {
            drawPixel(x0, y0);

            if (x0 === x1 && y0 === y1) break;

            const e2 = 2 * err;
            if (e2 >= dy) {
                err += dy;
                x0 += sx;
            }
            if (e2 <= dx) {
                err += dx;
                y0 += sy;
            }
        }
    }

    function drawPixel(x, y) {
        ctx.fillRect(x - (pixelSize / 2), y - (pixelSize / 2), pixelSize, pixelSize);
    }

    function updateDigitalClock() {
        const now = new Date();
        const utc = now.getTime() + (now.getTimezoneOffset() * 60000);
        const localTime = new Date(utc + (timezoneOffset * 3600000));

        const hours = String(localTime.getHours()).padStart(2, '0');
        const minutes = String(localTime.getMinutes()).padStart(2, '0');
        const seconds = String(localTime.getSeconds()).padStart(2, '0');

        digitalClock.textContent = `${hours}:${minutes}:${seconds}`;
    }

    // Initial setup
    resizeCanvas();
    setInterval(drawClock, 1000);
    drawClock(); // Initial call to display clock immediately
});