1 files changed, 21 insertions, 8 deletions

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();
     }