Cleaned up aesthetic and in-code naming conventionsHEADmaster

1 files changed, 17 insertions, 10 deletions

diff --git a/index.html b/index.html
index d653032..ef4bdda 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@ svg {
 	display: block;
 	border: 1px solid black;
 }
-.pointer, .plate {
+.pointer, .segment {
 	transform: none;
 	transform-origin: 50% 50%;
 }
@@ -24,12 +24,13 @@ svg {
 	stroke-width: 1px;
 }
 .pointer circle { fill: transparent; }
-.plate text { font: 5px serif; }
-.plate textPath {
-	dominant-baseline: central;
+.disk.smaller text { font-size: 4px; }
+.disk text { font-size: 5px; }
+.segment textPath {
+	dominant-baseline: middle;
 	text-anchor: middle;
 }
-.plate path { fill: none; }
+.segment path { fill: none; }
 </style>
 <script>
 let dragging = null;
@@ -91,7 +92,7 @@ function newSegment(radius, n, letter, colour) {
 	path.setAttribute("d", `M${center} 0 A${centerRadius} ${centerRadius} 0 0 1 ${center} ${height(radius)}`);
 	path.id = crypto.randomUUID();
 	textPath.setAttribute("href", `#${path.id}`);
-	g.classList.add("plate");
+	g.classList.add("segment");
 	g.appendChild(segment);
 	g.appendChild(path);
 	g.appendChild(text);
@@ -102,18 +103,24 @@ function newSegment(radius, n, letter, colour) {
 	function width(radius) { return Math.cos(Math.PI / n) * radius; }
 	function height(radius) { return Math.sin(Math.PI / n) * radius; }
 }
-function generatePlate(svg, radius, segments, alphabet) {
+function generateDisk(svg, radius, alphabet, klass) {
+	let g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+	g.classList.add("disk");
+	if (klass) g.classList.add(klass);
+	const segments = alphabet.length;
+	const step = 360.0 / segments;
 	const colours = ["#edd", "#ded", "#dde"];
 	for (let i=0; i < segments; i++) {
 		let segment = newSegment(radius, segments, alphabet[i], colours[i%3]);
 		segment.style.transform = `rotate(${i * 360 / segments}deg) translate(50%, 50%)`;
-		svg.prepend(segment);
+		g.appendChild(segment);
 	}
+	svg.prepend(g);
 }
 function init(element) {
 	svg = element;
-	generatePlate(svg, 20, 26, "VWXYZABCDEFGHIJKLMNOPQRSTU");
-	generatePlate(svg, 30, 27, " ABCDEFGHIJKLMNOPQRSTUVWXYZ");
+	generateDisk(svg, 20, "VWXYZABCDEFGHIJKLMNOPQRSTU", "smaller");
+	generateDisk(svg, 30, " ABCDEFGHIJKLMNOPQRSTUVWXYZ");
 }
 </script>
 <svg onload="init(this)" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100">