feat: Add day of year to clock

- Add ring for day of year
- New sections
- Move button
- Center clock

source/screens/demo/examples/clock.liquid

@@ -7,14 +7,14 @@ tags:
 {% layout 'hippie/simple.liquid' %}
 
 {% block body %}
+<header class="io pos_fix pin_top pin_right pin_left">
+	<button id="tglFormat">12-Stunden-Format</button>
+</header>
 <main>
 	<div class="wrap">
-		<canvas id="background" width="512" height="512"></canvas>
-		<canvas id="rings" width="512" height="512"></canvas>
+		<canvas id="background" width="768" height="768"></canvas>
+		<canvas id="rings" width="768" height="768"></canvas>
 	</div>
-	<p>
-		<button id="tglFormat">12-Stunden-Format</button>
-	</p>
 </main>
 {% endblock %}
 
@@ -36,16 +36,6 @@ tags:
 	const ringWidth = 16;
 	const ringGap = 8;
 	const maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
-	const sections = [
-		{
-			radius: maxSize - (ringWidth + ringGap),
-			color: `rgba(0, 0, 0, .1)`
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap,
-			color: `rgba(0, 0, 0, .2)`
-		},
-	];
 	const rings = [
 		{
 			radius: maxSize,
@@ -64,12 +54,38 @@ tags:
 			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim()
 		},
 		{
-			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap,
+			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap * 2,
 			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim()
 		},
 		{
-			radius: maxSize - (ringWidth + ringGap) * 5 - ringGap,
+			radius: maxSize - (ringWidth + ringGap) * 5 - ringGap * 3,
 			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim()
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 6 - ringGap * 3,
+			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-purple').trim()
+		}
+	];
+	const sections = [
+		{
+			radius: rings[1].radius,
+			color: `rgba(0, 0, 0, .1)`,
+			width: 72
+		},
+		{
+			radius: rings[3].radius,
+			color: `rgba(0, 0, 0, .2)`,
+			width: ringWidth + ringGap
+		},
+		{
+			radius: rings[4].radius,
+			color: `rgba(0, 0, 0, .3)`,
+			width: ringWidth + ringGap
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 6 - ringGap - ringGap / 2,
+			color: `rgba(0, 0, 0, .4)`,
+			width: ringWidth * 2 + ringGap * 2
 		}
 	];
 	const markerColor = `rgba(0, 0, 0, .2)`;
@@ -100,8 +116,13 @@ tags:
 			width: 3
 		},
 		{
-			amount: 12,
+			amount: 365,
 			radius: rings[5].radius,
+			width: 1
+		},
+		{
+			amount: 12,
+			radius: rings[6].radius,
 			width: 3
 		}
 	];
@@ -111,15 +132,13 @@ tags:
 		document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
 	});
 
-	ctxBkg.lineWidth = 72;
-	ctxBkg.strokeStyle = sections[0].color;
+	sections.forEach((section) => {
+		ctxBkg.strokeStyle = section.color;
+		ctxBkg.lineWidth = section.width;
 		ctxBkg.beginPath();
-	ctxBkg.arc(centerX, centerY, sections[0].radius, 0, 2 * Math.PI);
-	ctxBkg.stroke();
-	ctxBkg.strokeStyle = sections[1].color;
-	ctxBkg.beginPath();
-	ctxBkg.arc(centerX, centerY, sections[1].radius, 0, 2 * Math.PI);
+		ctxBkg.arc(centerX, centerY, section.radius, 0, 2 * Math.PI);
 		ctxBkg.stroke();
+	});
 
 	markers.forEach((marker) => {
 		for (let i = 0; i < marker.amount; i++) {
@@ -150,6 +169,7 @@ tags:
 		const currentHours = currentDate.getHours();
 		const currentDayOfWeek = getNumericWeekday(currentDate);
 		const currentDayOfMonth = currentDate.getDate();
+		const currentDayOfYear = getNumericYearDay(currentDate);
 		currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
 		daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
 
@@ -160,6 +180,7 @@ tags:
 			currentDayOfWeek,
 			currentDayOfMonth,
 			currentMonth,
+			currentDayOfYear,
 			daysInCurrentMonth
 		);
 	}
@@ -170,6 +191,11 @@ tags:
 		return (weekday === 0) ? 7 : weekday;
 	}
 
+	function getNumericYearDay(date) {
+		const start = new Date(date.getFullYear(), 0, 0);
+		return Math.floor((date - start) / 86400000);
+	}
+
 	function daysInMonth(month, year) {
 		return new Date(year, month, 0).getDate();
 	}
@@ -185,7 +211,8 @@ tags:
 		ctxRings.stroke();
 	}
 
-	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
+	// TODO: Array rings nutzen
+	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, dayOfYear, daysInCurrentMonth) {
 		ctxRings.clearRect(0, 0, canvasRings.width, canvasRings.height);
 
 		drawArc(
@@ -208,7 +235,8 @@ tags:
 		);
 		drawArc(dayOfWeek, 7, rings[3].radius, rings[3].color);
 		drawArc(dayOfMonth, daysInCurrentMonth, rings[4].radius, rings[4].color);
-		drawArc(month, 12, rings[5].radius, rings[5].color);
+		drawArc(dayOfYear, 365, rings[5].radius, rings[5].color);
+		drawArc(month, 12, rings[6].radius, rings[6].color);
 	}
 </script>
 {% endblock %}

source/style/modules/_clock.scss

@@ -14,15 +14,18 @@
 
 .body_clock {
 	main {
-		@extend .sec_main_center;
 		display: flex;
 		flex-flow: column nowrap;
+		justify-content: center;
+		align-items: center;
+		height: 100vh;
+		width: 100%;
 	}
 
 	.wrap {
 		position: relative;
-		width: 512px;
-		height: 512px;
+		height: 768px;
+		width: 768px;
 		margin: 0 auto;
 	}