hippie/source/screens/demo/examples/clock.liquid

---
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>
</main>
{% endblock %}

{% block script %}
{{ block.super -}}
<script>
	// Page script
	const canvas = document.getElementById('clock');
	const ctx = canvas.getContext('2d');

	function drawCircle(seconds, minutes, hours) {
		const centerX = canvas.width / 2;
		const centerY = canvas.height / 2;
		const radius = 128;

		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, 60, radius, 'black');
		drawArc(minutes, 60, radius - 20, 'lightgrey');
		// drawArc(hours % 12, 12, radius - 40, 'white');
		drawArc(hours, 24, radius - 40, 'white');
	}

	function updateCircle() {
		const currentDate = new Date();
		const currentSeconds = currentDate.getSeconds();
		const currentMinutes = currentDate.getMinutes();
		const currentHours = currentDate.getHours();

		drawCircle(currentSeconds, currentMinutes, currentHours);
	}

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