fix preset selectsv2

1 files changed, 27 insertions, 37 deletions

diff --git a/pattern.js b/pattern.js
index 731139f..6b15fac 100644
--- a/pattern.js
+++ b/pattern.js
@@ -1,12 +1,25 @@
 const panel = document.querySelector('aside.pattern');
 
-const preset = panel.querySelector('.control--preset');
+const preset = panel.querySelector('.control--preset select');
 const patternLength = document.getElementById('pattern-len');
 const steps = panel.querySelector('.steps');
 
 let length = 12;
 let pattern = [0, 2, 4, 5, 7, 9, 11];
 
+const PRESETS = {
+  'major-7': [0, 2, 4, 5, 7, 9, 11],
+  'minor-7': [0, 2, 3, 5, 7, 8, 10],
+  'minor-harm-7': [0, 2, 3, 5, 7, 8, 11],
+  'minor-mel-7': [0, 2, 3, 5, 7, 9, 11],
+  'minor-hung-7': [0, 2, 3, 6, 7, 8, 11],
+  'penta': [0, 2, 4, 7, 9],
+  'major-3': [0, 4, 7],
+  'major-3+': [0, 4, 8],
+  'minor-3': [0, 3, 7],
+  'minor-3-': [0, 3, 6],
+};
+
 const update = () => {
   while (steps.childElementCount > length) {
     steps.lastElementChild.remove();
@@ -21,6 +34,13 @@ const update = () => {
   Array.from(steps.children).forEach((toggle, i) => {
     toggle.checked = pattern.includes(i);
   });
+
+  updatePreset();
+};
+
+const updatePreset = () => {
+  const presetName = Object.keys(PRESETS).find(k => PRESETS[k].join(',') === pattern.join(','));
+  preset.value = presetName ?? 'custom';
 };
 
 patternLength.onchange = () => {
@@ -34,48 +54,18 @@ steps.onchange = () => {
   Array.from(steps.children).forEach((toggle, i) => {
     if (toggle.checked) pattern.push(i);
   });
+  updatePreset();
 };
 
 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;
+  const nextPattern = PRESETS[preset.value];
+  if (nextPattern) {
+    pattern = nextPattern.slice();
+    update();
   }
-  update();
-  preset.value = value;
 };
 preset.value = 'major-7';
-preset.onchange({ target: preset });
+preset.onchange();
 
 export const getLength = () => length;
 export const getSteps = () => pattern;