From 99d74475a64498d294b694dd780f7c38e0c096ac Mon Sep 17 00:00:00 2001
From: reimu <development@reimu.ws>
Date: Wed, 4 Oct 2023 20:24:44 -0500
Subject: [PATCH] Add a box that automatically shifts notes up or down octaves
 if they're out of range

---
 src/index.html |  4 ++++
 src/main.ts    | 22 ++++++++++++++--------
 src/style.css  |  2 +-
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/index.html b/src/index.html
index 10a9bda..62a9bf9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,6 +14,10 @@
 					Halfsteps to shift by
 					<input id="shift" type="number" value="0" />
 				</label>
+				<label>
+					Autoshift if outside of range
+					<input id="autoshift" type="checkbox" />
+				</label>
 				<span id="error"> </span>
 			</section>
 			<section id="notes">
diff --git a/src/main.ts b/src/main.ts
index 9e7c17f..063f203 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -68,6 +68,7 @@ const inputEle = document.getElementById("input") as HTMLTextAreaElement;
 const stepsEle = document.getElementById("shift") as HTMLInputElement;
 const outputEle = document.getElementById("output") as HTMLOutputElement;
 const errorEle = document.getElementById("error") as HTMLSpanElement;
+const autoshiftEle = document.getElementById("autoshift") as HTMLInputElement;
 
 function t(notes: string, steps: number): string {
 	// TODO: handle extended keys
@@ -81,16 +82,21 @@ function t(notes: string, steps: number): string {
 						`detected invalid key: ${key}` +
 							`, at position: ${i};${notes.slice(i - 5, i + 5)}`
 					);
-				else
-					return key; // probably a non-note symbol
-			const newPos = pos + steps;
+				else return key; // probably a non-note symbol
+			let newPos = pos + steps;
 			if (newPos < 0 || newPos >= keys.length) {
-				throw new Error(
-					`detected key outside of range: ${key}` +
-						`, at position: ${i};${notes.slice(i - 5, i + 5)}`
-				);
+				if (!autoshiftEle.checked)
+					throw new Error(
+						`detected key outside of range: ${key}` +
+							`, at position: ${i};${notes.slice(i - 5, i + 5)}`
+					);
+				else {
+					while (newPos < 0 || newPos >= keys.length) {
+						newPos += 16 * (steps > 0 ? -1 : 1);
+					}
+				}
 			}
-			return keys[pos + steps];
+			return keys[newPos];
 		})
 		.join("");
 
diff --git a/src/style.css b/src/style.css
index 0e08eb7..fe5433d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -16,7 +16,7 @@ section {
 }
 
 .notes {
-	width: 50%;
+	flex: 50%;
 }
 
 #toolbar {