show index-in-pattern

5 files changed, 39 insertions, 15 deletions

diff --git a/index.html b/index.html
index 17fa2f1..6ada1a8 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
   </main>
   <aside class="pattern controls">
     <div class="control control--preset">
-      <label for="pattern-preset">preset</label>
+      <label for="pattern-preset">pattern</label>
       <select id="pattern-preset">
         <option value="custom">(custom)</option>
         <optgroup label="scales">
@@ -30,10 +30,9 @@
           <option value="minor-3-">diminished</option>
         </optgroup>
       </select>
-      </label>
     </div>
     <div class="control">
-      <label for="pattern-len">(semi)tones</label>
+      <label for="pattern-len">octave size</label>
       <input id="pattern-len" type="number" min="4" value="12" />
     </div>
     <div class="steps">
@@ -100,7 +99,7 @@
     </svg>
     <div class="controls">
       <div class="control control--preset">
-        <label for="layout-preset">preset</label>
+        <label for="layout-preset">layout</label>
         <select id="layout-preset">
           <option value="wicki-hayden">Wicki/Hayden</option>
           <option value="janko">Jankó</option>
@@ -108,7 +107,6 @@
           <option value="gerhard">Gerhard</option>
           <option value="custom">(custom)</option>
         </select>
-        </label>
       </div>
       <div class="control control--axis">
         <label for="step-1">up</label>
diff --git a/layout.js b/layout.js
index 297d7bc..31edf7b 100644
--- a/layout.js
+++ b/layout.js
@@ -48,7 +48,7 @@ const updateValues = () => {
     }
   });
 
-  const presetName = Object.keys(PRESETS).find(k => completeState(PRESETS[k]).join(',') === full.join(','));
+  const presetName = Object.keys(PRESETS).find(k => completeState(PRESETS[k]).sort().join(',') === full.sort().join(','));
   preset.value = presetName ?? 'custom';
 
   updateFocus();
diff --git a/main.js b/main.js
index 9bf6823..4ebd1f5 100644
--- a/main.js
+++ b/main.js
@@ -103,9 +103,6 @@ const draw = () => {
   bg.font = `${size*0.5}px sans-serif`;
   bg.textAlign = 'center';
   bg.textBaseline = 'middle';
-
-  bg.strokeStyle = '#ff0000';
-  bg.strokeWidth = 5;
   
   const rot = layout.getRot();
   const [qq, rr] = layout.getSteps();
@@ -124,16 +121,32 @@ const draw = () => {
       const note = q*qq + r*rr;
       let step = note % length;
       step = (step + length) % length;
+      const oct = Math.floor(note / length);
+      const stepIndex = steps.indexOf(note);
       
-      if (steps.includes(note)) {
-        bg.fillStyle = '#eeeeee';
-        hexagon(bg);
+      hexagon(bg);
+      if (stepIndex > -1) {
+        bg.fillStyle = '#bae3f5';
         bg.fill();
+
+        bg.beginPath();
+        bg.arc(0, 0, size*0.65, 0, Math.PI*2);
       }
-      
+
+      const c = (1 - Math.abs(oct)/10) * 255;
+      bg.fillStyle = `rgb(${c},${c},${c})`;
+      bg.fill();
+
       bg.rotate(-rot);
       bg.fillStyle = '#303336';
-      bg.fillText(step, 0, 0);
+      if (stepIndex > -1) {
+        bg.fillText(step, 0, -size*0.3);
+
+        bg.fillStyle = '#505557';
+        bg.fillText(`(${stepIndex})`, 0, size*0.3);
+      } else {
+        bg.fillText(step, 0, 0);
+      }
 
       bg.restore();
     }
diff --git a/pattern.js b/pattern.js
index 6b15fac..14ad005 100644
--- a/pattern.js
+++ b/pattern.js
@@ -45,6 +45,7 @@ const updatePreset = () => {
 
 patternLength.onchange = () => {
   length = +patternLength.value;
+  if (!length || length < 4) length = 4;
   pattern = pattern.filter(n => n < length);
   update();
 };
diff --git a/style.css b/style.css
index 84425d5..3d00049 100644
--- a/style.css
+++ b/style.css
@@ -33,6 +33,16 @@ aside.pattern {
   top: 0;
 }
 
+aside.pattern .steps {
+  display: flex;
+  justify-content: space-between;
+}
+
+aside.pattern .steps input {
+  margin: 0.04rem;
+}
+
+
 aside.layout {
   bottom: 0;
 
@@ -66,7 +76,6 @@ aside.layout > svg {
   width: 6rem;
 }
 
-
 .control--preset {
   padding-bottom: 0.5rem;
   border-bottom: 1px solid #b9bdc1;
@@ -77,6 +86,9 @@ aside.layout > svg {
   flex: 1;
 }
 
+.control--preset label:first-child {
+  font-weight: bold;
+}
 
 .control--axis label:first-child {
   flex: 1;