feat: Update HippieClock

- Add all rings
- Add 24/12 hour switch
- Options can now be updated
- Add max to updateShape()
- Change attributes for addRing()

source/screens/demo/examples/clock.liquid

@@ -8,7 +8,7 @@ tags:
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
-	<button id="tglFormat" title="Toggle hour display">12-Stunden-Format</button>
+	<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
 	<button id="tglSections" title="Toggle sections">Abschnitte</button>
 </header>
 <main>
@@ -294,7 +294,8 @@ tags:
 			this.element = element;
 			this.date = this.getTime(date);
 			this.options = options || {
-				size: Math.floor(this.getSize().value * 0.9)
+				size: Math.floor(this.getSize().value * 0.9),
+				h24: true
 			};
 			this.parts = this.createContext(['bkg', 'hands']);
 			this.shapes = [];
@@ -303,9 +304,18 @@ tags:
 		}
 
 		init() {
-			// TODO: shapes[] ist zu diesem Zeitpunkt noch leer
+			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
+			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
+			this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
+			this.addRing('dotweek', .7, 32, 7, `rgb(142, 31, 104)`);
+			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
+			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
+			this.addRing('month', .4, 10, 12, `rgb(183, 224, 240)`);
+
 			this.resize();
 			window.addEventListener('resize', () => this.resize());
+
+			console.debug(this);
 		}
 
 		resize() {
@@ -358,8 +368,16 @@ tags:
 
 		update() {
 			const second = this.getTime().second;
+			const minute = this.getTime().minute;
+			const hour = this.getTime().hour;
 
 			this.updateShape('seconds', (second === 0) ? 60 : second);
+			this.updateShape('minutes', (minute === 0) ? 60 : minute);
+			this.updateShape('hours', this.options.h24 ? hour : hour % 12, this.options.h24 ? 24 : 12);
+			this.updateShape('dotweek', this.getTime().dayWeek);
+			this.updateShape('dotmonth', this.getTime().dayMonth, this.getTime().daysMonth);
+			this.updateShape('dotyear', this.getTime().dayYear);
+			this.updateShape('month', this.getTime().month);
 			this.draw();
 		}
 
@@ -409,11 +427,11 @@ tags:
 				second: this.date.getSeconds(),
 				minute: this.date.getMinutes(),
 				hour: this.date.getHours(),
-				dayOfWeek: getNumericWeekday(this.date),
+				dayWeek: this.getNumericWeekday(this.date),
-				dayOfMonth: this.date.getDate(),
+				dayMonth: this.date.getDate(),
-				dayOfYear: getNumericYearDay(this.date),
+				dayYear: this.getNumericYearDay(this.date),
 				month: this.date.getMonth() + 1, // Get current month (0-11)
-				daysInMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
+				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
 			};
 		}
 
@@ -446,31 +464,47 @@ tags:
 			return parts;
 		}
 
-		updateShape(id, value) {
+		updateShape(id, angle, max) {
 			const shape = this.shapes.find(s => s.id === id);
 
 			if (shape) {
-				shape.angle = value;
+				shape.angle = angle;
+				if (max) shape.max = max;
 			}
 		}
 
+		updateOptions(changes) {
+			this.options = {...this.options, ...changes};
+		}
+
 		addCircle(id, center, radius, color = `rgba(0, 0, 0, .1)`) {
 			this.shapes.push({type: 'circle', id, center, radius, color});
 		}
 
-		addRing(id, center, radius, angle, max, color = `rgb(250, 216, 3)`, stroke = 16) {
+		addRing(id, radius, angle, max, color = 'black', center = .5, stroke = 16) {
-			this.shapes.push({type: 'ring', id, center, radius, angle, max, color, stroke});
+			this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke});
 		}
 	}
 
 	const container = document.querySelector('#clock main');
 	const clock = new HippieClock(container);
 	clock.addCircle('base', .5, 1);
-	clock.addRing('seconds', .5, 1, 0, 60);
+	// clock.addRing('seconds', .5, 1, 0, 60);
 	clock.draw();
 
 	setInterval(() => {
 		clock.update();
 	}, 1000);
+
+	document.getElementById('tglFormat').addEventListener('click', () => {
+		if (clock) {
+			clock.updateOptions({h24: !clock.options.h24})
+			document.getElementById('tglFormat').textContent = clock.options.h24 ? '12-Stunden' : '24-Stunden';
+			console.debug(clock);
+		} else {
+			console.log('No clock available');
+		}
+	});
+
 </script>
 {% endblock %}