feat: Changes to HippieClock

- Make some methods private
- Add wrap element to parts
- Change color of sections
- Fix resize by changing styles of wrap element

source/screens/demo/examples/clock.liquid

@@ -30,7 +30,7 @@ tags:
 				h24: true,
 				sections: true
 			};
-			this.parts = this.createContext(['bkg', 'hands']);
+			this.parts = this.#createContext(['background', 'hands']);
 			this.shapes = [];
 
 			this.init();
@@ -56,8 +56,16 @@ tags:
 
 		resize() {
 			this.parts.forEach(part => {
+				this.updateOptions({size: Math.floor(this.getSize().value * 0.9)})
+
+				if (part.name === 'wrap') {
+					part.element.style.height = this.options.size + 'px';
+					part.element.style.width = this.options.size + 'px';
+				}
+
 				part.element.width = part.element.offsetWidth;
 				part.element.height = part.element.offsetHeight;
+
 				this.draw();
 			});
 		}
@@ -65,7 +73,7 @@ tags:
 		draw() {
 			// TODO: Nur geänderte Teile löschen
 			this.parts.forEach(part => {
-				part.context.clearRect(0, 0, part.element.width, part.element.height);
+				part.context?.clearRect(0, 0, part.element.width, part.element.height);
 			});
 
 			let ctx = undefined;
@@ -73,14 +81,14 @@ tags:
 			this.shapes
 				.filter(item => item.type === 'circle')
 				.forEach((shape) => {
-					const radius = this.toPixelSize(shape.radius) / 2;
+					const radius = this.#toPixelSize(shape.radius) / 2;
 					ctx = this.parts[0].context;
 
 					ctx.fillStyle = shape.color;
 					ctx.beginPath();
 					ctx.arc(
-						this.toPixelX(shape.center),
+						this.#toPixelX(shape.center),
-						this.toPixelY(shape.center),
+						this.#toPixelY(shape.center),
 						radius,
 						0,
 						Math.PI * 2
@@ -92,18 +100,18 @@ tags:
 				.filter(item => item.type === 'ring')
 				.forEach((shape) => {
 					if (this.options.sections) {
-						const outerRadius = this.toPixelSize(shape.radius) / 2;
+						const outerRadius = this.#toPixelSize(shape.radius) / 2;
-						const innerRadius = this.toPixelSize(shape.radius) / 2 - shape.stroke;
+						const innerRadius = this.#toPixelSize(shape.radius) / 2 - shape.stroke;
 						ctx = this.parts[0].context;
 
 						for (let i = 0; i < shape.max; i++) {
 							const angle = (i * (360 / shape.max) - 90) * (Math.PI / 180); // -90 to start at top
-							const outerX = this.toPixelX(shape.center) + outerRadius * Math.cos(angle);
+							const outerX = this.#toPixelX(shape.center) + outerRadius * Math.cos(angle);
-							const outerY = this.toPixelY(shape.center) + outerRadius * Math.sin(angle);
+							const outerY = this.#toPixelY(shape.center) + outerRadius * Math.sin(angle);
-							const innerX = this.toPixelX(shape.center) + innerRadius * Math.cos(angle);
+							const innerX = this.#toPixelX(shape.center) + innerRadius * Math.cos(angle);
-							const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle);
+							const innerY = this.#toPixelY(shape.center) + innerRadius * Math.sin(angle);
 
-							ctx.strokeStyle = 'black';
+							ctx.strokeStyle = `rgba(0, 0, 0, .25)`;
 							ctx.lineWidth = mapRange(shape.max, 7, 72, .1, 5, true, true);
 							ctx.beginPath();
 							ctx.moveTo(outerX, outerY);
@@ -112,7 +120,7 @@ tags:
 						}
 					}
 
-					const radius = this.toPixelSize(shape.radius) / 2 - shape.stroke / 2;
+					const radius = this.#toPixelSize(shape.radius) / 2 - shape.stroke / 2;
 					const start = -0.5 * Math.PI; // Start at the top
 					const angle = start + (2 * Math.PI * (shape.angle / shape.max));
 					ctx = this.parts[1].context;
@@ -121,8 +129,8 @@ tags:
 					ctx.lineWidth = shape.stroke;
 					ctx.beginPath();
 					ctx.arc(
-						this.toPixelX(shape.center),
+						this.#toPixelX(shape.center),
-						this.toPixelY(shape.center),
+						this.#toPixelY(shape.center),
 						radius,
 						start,
 						angle
@@ -149,15 +157,15 @@ tags:
 			this.draw();
 		}
 
-		toPixelX(number) {
+		#toPixelX(number) {
 			return number * this.parts[0].element.width;
 		}
 
-		toPixelY(number) {
+		#toPixelY(number) {
 			return number * this.parts[0].element.height;
 		}
 
-		toPixelSize(number) {
+		#toPixelSize(number) {
 			return number * Math.min(this.parts[0].element.width, this.parts[0].element.height);
 		}
 
@@ -278,7 +286,7 @@ tags:
 			};
 		}
 
-		createContext(names) {
+		#createContext(names) {
 			let parts = [];
 			const wrap = document.createElement('div');
 
@@ -298,11 +306,11 @@ tags:
 				canvas.width = canvas.offsetWidth;
 
 				wrap.appendChild(canvas);
-
 				parts.push({name: name, element: canvas, context: canvas.getContext('2d')});
 			});
 
 			this.element.appendChild(wrap);
+			parts.push({name: 'wrap', element: wrap});
 
 			return parts;
 		}
@@ -347,7 +355,7 @@ tags:
 	// TODO: Aktionen gehören quasi zu HippieClock
 	document.getElementById('tglFormat').addEventListener('click', () => {
 		if (clock) {
-			clock.updateOptions({h24: !clock.options.h24})
+			clock.updateOptions({h24: !clock.options.h24});
 			document.getElementById('tglFormat').textContent = clock.options.h24 ? '12-Stunden' : '24-Stunden';
 		} else {
 			console.log('No clock available');
@@ -356,7 +364,7 @@ tags:
 
 	document.getElementById('tglSections').addEventListener('click', () => {
 		if (clock) {
-			clock.updateOptions({sections: !clock.options.sections})
+			clock.updateOptions({sections: !clock.options.sections});
 		} else {
 			console.log('No clock available');
 		}