---
title: Clock
tags:
- demoExample
---
{% assign pageBase = "../../" -%}
{% assign bodyClass = "body_clock" -%}
{% layout "hippie/full.liquid" %}

{% block body %}
<main>
	<canvas id="clock" width="512" height="512"></canvas>
	<p>
		<button id="tglFormat">12-Stunden-Format</button>
	</p>
</main>
{% endblock %}

{% block script %}
{{ block.super -}}
<script>
	// Page script
	const canvas = document.getElementById('clock');
	const ctx = canvas.getContext('2d');
	let is24HourFormat = true;
	const colorDayOfWeek = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim();
	const colorDayOfMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim();
	const colorMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim();

	document.getElementById('tglFormat').addEventListener('click', () => {
		is24HourFormat = !is24HourFormat;
		document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
	});

	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
		const centerX = canvas.width / 2;
		const centerY = canvas.height / 2;
		const lineWidth = 16;
		const lineGap = 8;
		const maxSize = canvas.width / 2 - lineWidth;

		ctx.clearRect(0, 0, canvas.width, canvas.height);

		function drawArc(value, maxValue, radius, strokeStyle) {
			const startAngle = -0.5 * Math.PI; // Start at the top
			const endAngle = startAngle + (2 * Math.PI * (value / maxValue));

			ctx.beginPath();
			ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
			ctx.lineWidth = 16;
			ctx.strokeStyle = strokeStyle;
			ctx.stroke();
		}

		drawArc(
			(seconds === 0) ? 60 : seconds,
			60,
			maxSize,
			'black'
		);
		drawArc(
			(minutes === 0) ? 60 : minutes,
			60,
			maxSize - lineWidth - lineGap,
			'lightgrey'
		);
		drawArc(
			is24HourFormat ? hours : hours % 12,
			is24HourFormat ? 24 : 12,
			maxSize - (lineWidth + lineGap) * 2,
			'white'
		);
		drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, colorDayOfWeek);
		drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, colorDayOfMonth);
		drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
	}

	function updateRings() {
		const currentDate = new Date();
		const currentSeconds = currentDate.getSeconds();
		const currentMinutes = currentDate.getMinutes();
		const currentHours = currentDate.getHours();
		const currentDayOfWeek = getNumericWeekday(currentDate);
		const currentDayOfMonth = currentDate.getDate();
		const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
		const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());

		drawRings(
			currentSeconds,
			currentMinutes,
			currentHours,
			currentDayOfWeek,
			currentDayOfMonth,
			currentMonth,
			daysInCurrentMonth
		);
	}

	// TODO: Parameter für Wochenstart ergänzen
	function getNumericWeekday(date) {
		const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
		return (weekday === 0) ? 7 : weekday;
	}

	function daysInMonth(month, year) {
		return new Date(year, month, 0).getDate();
	}

	updateRings();
	setInterval(updateRings, 1000);
</script>
{% endblock %}