Add alphabets onto the plates

1 files changed, 30 insertions, 16 deletions

diff --git a/index.html b/index.html
index 31a4240..0e78684 100644
--- a/index.html
+++ b/index.html
@@ -12,17 +12,17 @@ svg {
 	transform: none;
 	transform-origin: 50% 50%;
 }
-.pointer .plate path {
-	stroke: none;
-	stroke-width: none;
-}
 .pointer path, .pointer circle {
 	stroke: black;
 	stroke-width: 1px;
 }
-.pointer circle {
-	fill: transparent;
+.pointer circle { fill: transparent; }
+.plate text { font: 5px serif; }
+.plate textPath {
+	dominant-baseline: central;
+	text-anchor: middle;
 }
+.plate path { fill: none; }
 </style>
 <script>
 let dragging = null;
@@ -62,37 +62,51 @@ function onmove(event) {
 function change(query, ratio) {
 	svg.querySelector(query).dataset.ratio = ratio;
 }
-function newSegment(radius, n) {
-	let g = document.createElementNS("http://www.w3.org/2000/svg", "g");
-	let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-	const outerRadius = radius + 10;
+function newSegment(radius, n, letter, colour) {
+	const ns = "http://www.w3.org/2000/svg";
+	let g = document.createElementNS(ns, "g");
+	let segment = document.createElementNS(ns, "path");
+	let path = document.createElementNS(ns, "path");
+	let text = document.createElementNS(ns, "text");
+	let textPath = document.createElementNS(ns, "textPath");
+	const thickness = 10;
+	const outerRadius = radius + thickness;
 	const left = width(radius);
 	const right = width(outerRadius);
-	path.setAttribute("d", `M${left} ${-height(radius)}
+	segment.setAttribute("d", `M${left} ${-height(radius)}
 		A${radius} ${radius} 0 0 1 ${left} ${height(radius)}
 		L${right} ${height(outerRadius)}
 		A${outerRadius} ${outerRadius} 0 0 0 ${right} ${-height(outerRadius)}
 		Z`);
+	segment.style.fill = colour;
+	const centerRadius = radius + thickness/2;
+	const center = width(centerRadius);
+	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.appendChild(segment);
 	g.appendChild(path);
+	g.appendChild(text);
+	text.appendChild(textPath);
+	textPath.appendChild(document.createTextNode(letter));
 	return g;
 
 	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) {
+function generatePlate(svg, radius, segments, alphabet) {
 	const colours = ["#edd", "#ded", "#dde"];
 	for (let i=0; i < segments; i++) {
-		let segment = newSegment(radius, segments);
+		let segment = newSegment(radius, segments, alphabet[i], colours[i%3]);
 		segment.style.transform = `rotate(${i * 360 / segments}deg) translate(50%, 50%)`;
-		segment.style.fill = colours[i%3];
 		svg.prepend(segment);
 	}
 }
 function init(element) {
 	svg = element;
-	generatePlate(svg, 20, 26);
-	generatePlate(svg, 30, 27);
+	generatePlate(svg, 20, 26, "VWXYZABCDEFGHIJKLMNOPQRSTU");
+	generatePlate(svg, 30, 27, " ABCDEFGHIJKLMNOPQRSTUVWXYZ");
 }
 </script>
 <svg onload="init(this)" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100">