1159cl/js/clock.js
Mario1159 5b6b79892c
Some checks failed
Release / test (push) Failing after 51s
Release / push-docker-image (push) Has been skipped
2024 new version
2024-12-06 20:38:18 -03:00

199 lines
6.4 KiB
JavaScript

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