From 86fce27554b672e7f046615abf8601593f489ee2 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 13:21:25 +0100
Subject: [PATCH] feat: More elements for clock and style change

- Add day of month
- Clock uses maximum canvas size
---
 source/screens/demo/examples/clock.liquid | 33 +++++++++++++++++------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index b0bccd8..ad98667 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -29,10 +29,12 @@ tags:
 		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
 	});
 
-	function drawCircle(seconds, minutes, hours, dayOfWeek, month) {
+	function drawCircle(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
 		const centerX = canvas.width / 2;
 		const centerY = canvas.height / 2;
-		const radius = 128;
+		const lineWidth = 16;
+		const lineGap = 8;
+		const maxSize = canvas.width / 2 - lineWidth;
 
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -47,16 +49,17 @@ tags:
 			ctx.stroke();
 		}
 
-		drawArc(seconds, 60, radius, 'black');
-		drawArc(minutes, 60, radius - 20, 'lightgrey');
+		drawArc(seconds, 60, maxSize, 'black');
+		drawArc(minutes, 60, maxSize - lineWidth - lineGap, 'lightgrey');
 		drawArc(
 			is24HourFormat ? hours : hours % 12,
 			is24HourFormat ? 24 : 12,
-			radius - 40,
+			maxSize - (lineWidth + lineGap) * 2,
 			'white'
 		);
-		drawArc(dayOfWeek, 7, radius - 60, '#fad803');
-		drawArc(month, 12, radius - 80, '#d30a51');
+		drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, '#fad803');
+		drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, '#d30a51');
+		drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, '#273f8b');
 	}
 
 	function updateCircle() {
@@ -65,9 +68,19 @@ tags:
 		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());
 
-		drawCircle(currentSeconds, currentMinutes, currentHours, currentDayOfWeek, currentMonth);
+		drawCircle(
+			currentSeconds,
+			currentMinutes,
+			currentHours,
+			currentDayOfWeek,
+			currentDayOfMonth,
+			currentMonth,
+			daysInCurrentMonth
+		);
 	}
 
 	// TODO: Parameter für Wochenstart ergänzen
@@ -76,6 +89,10 @@ tags:
 		return (weekday === 0) ? 7 : weekday;
 	}
 
+	function daysInMonth(month, year) {
+		return new Date(year, month, 0).getDate();
+	}
+
 	updateCircle();
 	setInterval(updateCircle, 1000);
 </script>