add basic pattern highlighting

1 files changed, 81 insertions, 0 deletions

diff --git a/pattern.js b/pattern.js
new file mode 100644
index 0000000..731139f
--- /dev/null
+++ b/pattern.js
@@ -0,0 +1,81 @@
+const panel = document.querySelector('aside.pattern');
+
+const preset = panel.querySelector('.control--preset');
+const patternLength = document.getElementById('pattern-len');
+const steps = panel.querySelector('.steps');
+
+let length = 12;
+let pattern = [0, 2, 4, 5, 7, 9, 11];
+
+const update = () => {
+  while (steps.childElementCount > length) {
+    steps.lastElementChild.remove();
+  }
+
+  while (steps.childElementCount < length) {
+    const input = document.createElement('input');
+    input.type = 'checkbox';
+    steps.append(input);
+  }
+
+  Array.from(steps.children).forEach((toggle, i) => {
+    toggle.checked = pattern.includes(i);
+  });
+};
+
+patternLength.onchange = () => {
+  length = +patternLength.value;
+  pattern = pattern.filter(n => n < length);
+  update();
+};
+
+steps.onchange = () => {
+  pattern = [];
+  Array.from(steps.children).forEach((toggle, i) => {
+    if (toggle.checked) pattern.push(i);
+  });
+};
+
+preset.onchange = (e) => {
+  const value = e.target.value;
+  switch (value) {
+    case 'custom': return;
+    case 'major-7':
+      pattern = [0, 2, 4, 5, 7, 9, 11];
+      break;
+    case 'minor-7':
+      pattern = [0, 2, 3, 5, 7, 8, 10];
+      break;
+    case 'minor-harm-7':
+      pattern = [0, 2, 3, 5, 7, 8, 11];
+      break;
+    case 'minor-mel-7':
+      pattern = [0, 2, 3, 5, 7, 9, 11];
+      break;
+    case 'minor-hung-7':
+      pattern = [0, 2, 3, 6, 7, 8, 11];
+      break;
+    case 'penta':
+      pattern = [0, 2, 4, 7, 9];
+      break;
+    case 'major-3':
+      pattern = [0, 4, 7];
+      break;
+    case 'major-3+':
+      pattern = [0, 4, 8];
+      break;
+    case 'minor-3':
+      pattern = [0, 3, 7];
+      break;
+    case 'minor-3-':
+      pattern = [0, 3, 6];
+      break;
+  }
+  update();
+  preset.value = value;
+};
+preset.value = 'major-7';
+preset.onchange({ target: preset });
+
+export const getLength = () => length;
+export const getSteps = () => pattern;