From 88a00113f3ecbbf454f8115f16868730eb07b2d8 Mon Sep 17 00:00:00 2001
From: Aki <please@ignore.pl>
Date: Mon, 4 Nov 2024 17:21:36 +0100
Subject: Added simple controls for ratio customization

---
 index.html | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 4e951be..b845c31 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,14 @@ function update(element, diff) {
 	element.dataset.angle = Number(element.dataset.angle) + diff;
 	element.style.transform = `rotate(${Math.floor(element.dataset.angle)}deg)`;
 }
+function reset() {
+	if (svg) {
+		svg.querySelectorAll(".pointer").forEach((x) => {
+			x.dataset.angle = 0;
+			update(x, 0);
+		});
+	}
+}
 function onmove(event) {
 	if (dragging) {
 		const rect = svg.getBoundingClientRect();
@@ -49,14 +57,20 @@ function onmove(event) {
 		});
 	}
 }
+function change(query, ratio) {
+	svg.querySelector(query).dataset.ratio = ratio;
+}
 </script>
 <svg onload="svg = this" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100">
-<g data-angle="0" data-ratio="27" class="pointer">
+<g id="outer" data-angle="0" data-ratio="27" class="pointer">
 	<path d="M49 50 L80 50 Z"/>
 	<circle onmousedown="start(this.parentNode)" cx="85" cy="50" r="5"/>
 </g>
-<g data-angle="0" data-ratio="26" class="pointer">
+<g id="inner" data-angle="0" data-ratio="26" class="pointer">
 	<path d="M49 50 L70 50 Z"/>
 	<circle onmousedown="start(this.parentNode)" cx="75" cy="50" r="5"/>
 </g>
 </svg>
+<input onchange='change("#outer", this.value)' type="number" value="27" autocomplete="off">
+<input onchange='change("#inner", this.value)' type="number" value="26" autocomplete="off">
+<button onclick="reset()">Reset Position</button>
-- 
cgit v1.1