From 56633b364e314f404aed938b67c942952349b442 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 10:50:43 +0100
Subject: [PATCH] feat: Remove legacy clock version

---
 source/screens/demo/examples/clock.liquid | 277 +---------------------
 source/style/modules/_clock.scss          |  15 --
 2 files changed, 3 insertions(+), 289 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 84c1f63..776c5d2 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -11,284 +11,13 @@ tags:
 	<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
 	<button id="tglSections" title="Toggle sections">Abschnitte</button>
 </header>
-<main>
-	<div class="wrap">
-		<canvas id="background" width="768" height="768"></canvas>
-		<canvas id="rings" width="768" height="768"></canvas>
-	</div>
-</main>
+<main></main>
 {% endblock %}
 
 {% block script %}
 <script>
-	const canvasBkg = document.getElementById('background');
-	const ctxBkg = canvasBkg.getContext('2d');
-	const canvasRings = document.getElementById('rings');
-	const ctxRings = canvasRings.getContext('2d');
-	const wrap = document.querySelector('.wrap');
-
-	let is24HourFormat = true;
-	let drawSections = false;
-	let currentDate = new Date();
-	let currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
-	let daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
-
-	const outerMargin = 8;
-	const ringWidth = 16;
-	const ringGap = 8;
-	let centerX = canvasRings.width / 2;
-	let centerY = canvasRings.height / 2;
-	let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
-	const rings = [
-		{
-			radius: maxSize,
-			color: 'black'
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap),
-			color: 'lightgrey'
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 2,
-			color: 'white'
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 3 - ringGap,
-			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim()
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap * 2,
-			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim()
-		},
-		{
-			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 groups = [
-		{
-			radius: rings[1].radius,
-			color: `rgba(0, 0, 0, .05)`,
-			width: 72
-		},
-		{
-			radius: rings[3].radius,
-			color: `rgba(0, 0, 0, .1)`,
-			width: ringWidth + ringGap
-		},
-		{
-			radius: rings[4].radius,
-			color: `rgba(0, 0, 0, .15)`,
-			width: ringWidth + ringGap
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 6 - ringGap - ringGap / 2,
-			color: `rgba(0, 0, 0, .2)`,
-			width: ringWidth * 2 + ringGap * 2
-		}
-	];
-	const sectionMarkerColor = `rgba(0, 0, 0, .2)`;
-	let sections = [
-		{
-			amount: 60,
-			radius: maxSize,
-			width: 1
-		},
-		{
-			amount: 60,
-			radius: rings[1].radius,
-			width: 1
-		},
-		{
-			amount: is24HourFormat ? 24 : 12,
-			radius: rings[2].radius,
-			width: 3
-		},
-		{
-			amount: 7,
-			radius: rings[3].radius,
-			width: 5
-		},
-		{
-			amount: daysInCurrentMonth,
-			radius: rings[4].radius,
-			width: 3
-		},
-		{
-			amount: 365,
-			radius: rings[5].radius,
-			width: 1
-		},
-		{
-			amount: 12,
-			radius: rings[6].radius,
-			width: 3
-		}
-	];
-
-	document.getElementById('tglFormat').addEventListener('click', () => {
-		is24HourFormat = !is24HourFormat;
-		document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
-		sections[2].amount = is24HourFormat ? 24 : 12;
-		drawBackground();
-	});
-
-	document.getElementById('tglSections').addEventListener('click', () => {
-		drawSections = !drawSections;
-		drawBackground();
-	});
-
-	// FIXME: Konstanten mit maxSize werden nicht verändert
-	window.addEventListener('resize', resizeClock);
-
-	resizeClock();
-	// TODO: TimeDisplay nutzen, ev. erweitern oder ähnliche Umsetzung anwenden
-	setInterval(updateRings, 1000);
-
-	function updateRings() {
-		currentDate = new Date();
-		const currentSeconds = currentDate.getSeconds();
-		const currentMinutes = currentDate.getMinutes();
-		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());
-
-		drawRings(
-			currentSeconds,
-			currentMinutes,
-			currentHours,
-			currentDayOfWeek,
-			currentDayOfMonth,
-			currentMonth,
-			currentDayOfYear,
-			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 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();
-	}
-
-	function drawArc(value, maxValue, radius, strokeStyle) {
-		const startAngle = -0.5 * Math.PI; // Start at the top
-		const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
-
-		ctxRings.lineWidth = 16;
-		ctxRings.strokeStyle = strokeStyle;
-		ctxRings.beginPath();
-		ctxRings.arc(centerX, centerY, radius, startAngle, endAngle, false);
-		ctxRings.stroke();
-	}
-
-	// TODO: Array rings nutzen
-	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, dayOfYear, daysInCurrentMonth) {
-		ctxRings.clearRect(0, 0, canvasRings.width, canvasRings.height);
-
-		drawArc(
-			(seconds === 0) ? 60 : seconds,
-			60,
-			rings[0].radius,
-			rings[0].color
-		);
-		drawArc(
-			(minutes === 0) ? 60 : minutes,
-			60,
-			rings[1].radius,
-			rings[1].color
-		);
-		drawArc(
-			// is24HourFormat ? ((hours === 0) ? 24 : hours) : hours % 12,
-			is24HourFormat ? hours : hours % 12,
-			is24HourFormat ? 24 : 12,
-			rings[2].radius,
-			rings[2].color
-		);
-		drawArc(dayOfWeek, 7, rings[3].radius, rings[3].color);
-		drawArc(dayOfMonth, daysInCurrentMonth, rings[4].radius, rings[4].color);
-		drawArc(dayOfYear, 365, rings[5].radius, rings[5].color);
-		drawArc(month, 12, rings[6].radius, rings[6].color);
-	}
-
-	function drawBackground() {
-		ctxBkg.clearRect(0, 0, canvasBkg.width, canvasBkg.height);
-
-		groups.forEach((section) => {
-			ctxBkg.strokeStyle = section.color;
-			ctxBkg.lineWidth = section.width;
-			ctxBkg.beginPath();
-			ctxBkg.arc(centerX, centerY, section.radius, 0, 2 * Math.PI);
-			ctxBkg.stroke();
-		});
-
-		if (drawSections) {
-			sections.forEach((marker) => {
-				for (let i = 0; i < marker.amount; i++) {
-					const angle = (i * (360 / marker.amount) - 90) * (Math.PI / 180); // -90 to start at top
-					const outerRadius = marker.radius + ringWidth / 2;
-					const outerX = centerX + outerRadius * Math.cos(angle);
-					const outerY = centerY + outerRadius * Math.sin(angle);
-					const innerRadius = marker.radius - ringWidth / 2;
-					const innerX = centerX + innerRadius * Math.cos(angle);
-					const innerY = centerY + innerRadius * Math.sin(angle);
-
-					ctxBkg.strokeStyle = sectionMarkerColor;
-					ctxBkg.lineWidth = marker.width;
-					ctxBkg.beginPath();
-					ctxBkg.moveTo(outerX, outerY);
-					ctxBkg.lineTo(innerX, innerY);
-					ctxBkg.stroke();
-				}
-			});
-		}
-	}
-
-	function resizeClock() {
-		const height = window.innerHeight;
-		const width = window.innerWidth;
-		const windowDimension = {
-			value: Math.min(height, width),
-			smaller: height < width ? 'height' : 'width'
-		};
-		const clockSize = Math.floor(windowDimension.value * 0.9);
-
-		canvasBkg.style.width = clockSize + 'px';
-		canvasBkg.style.height = clockSize + 'px';
-		canvasRings.style.width = clockSize + 'px';
-		canvasRings.style.height = clockSize + 'px';
-		canvasBkg.width = clockSize;
-		canvasBkg.height = clockSize;
-		canvasRings.width = clockSize;
-		canvasRings.height = clockSize;
-
-		centerX = canvasRings.width / 2;
-		centerY = canvasRings.height / 2;
-		maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
-
-		wrap.style.width = clockSize + 'px';
-		wrap.style.height = clockSize + 'px';
-
-		drawBackground();
-		updateRings();
-	}
-
+	// TODO: Kalenderwoche ergänzen
+	// TODO: Mondphase ergänzen
 	class HippieClock {
 		constructor(element, date, options) {
 			this.element = element;
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 4674e4b..bcc3e9a 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -22,19 +22,4 @@
 		width: 100%;
 		overflow: hidden;
 	}
-
-	.wrap {
-		display: none;
-		position: relative;
-
-		canvas {
-			position: absolute;
-			top: 0;
-			left: 0;
-		}
-	}
-
-	p {
-		text-align: center;
-	}
 }
\ No newline at end of file