Improve key offsets

Refer to URL in comment for details.

src/components/Keyboard.stories.tsx

@@ -48,8 +48,8 @@ const Base = styled('div')({
   width: '100%',
   height: '100%',
   position: 'relative',
-  '--natural-key-color': '#eee',
-  '--accidental-key-color': '#333',
+  '--natural-key-color': '#e3e3e5',
+  '--accidental-key-color': '#35313b',
 })
 
 const N1 = styled('div')`width: 100%; height: 100%; position: relative;`
@@ -206,6 +206,8 @@ const N18 = styled('div')`
   position: relative;
   width: 100%;
   height: 100%;
+  border-radius: 0 0 1px 1px;
+  overflow: hidden;
 `
 
 const B1 = styled('div')`
@@ -300,7 +302,7 @@ width: 100%;
 const B12 = styled('div')`
 width: 100%;
         height: 100%;
-        padding: 3px 3px 7px 3px;
+        padding: 3px 3px 7px 2px;
         box-sizing: border-box;
         position: absolute;
         top: 0;

src/components/Keyboard.tsx

@@ -97,7 +97,7 @@ const Keyboard: React.FC<Props> = ({
     natural: NaturalKey = DefaultNaturalKey,
     accidental: AccidentalKey = DefaultAccidentalKey,
   } = {},
-  height = 64,
+  height = 80,
 }) => {
   const [keys, setKeys, ] = React.useState<number[]>([])
 

src/services/constants/keyOffsets.ts

@@ -20,17 +20,33 @@
 
  */
 
+// export default [
+//   0, // C
+//   3 / 7 / 5, // C#
+//   1 / 7, // D
+//   3 / 7 / 5 * 3, // D#
+//   2 / 7, // E
+//   3 / 7, // F
+//   (3 / 7) + (4 / 7 / 7), // F#
+//   4 / 7, // G
+//   (3 / 7) + (4 / 7 / 7 * 3), // G#
+//   5 / 7, // A
+//   (3 / 7) + (4 / 7 / 7 * 5), // A#
+//   6 / 7, // B
+// ]
+
+// http://datagenetics.com/blog/may32016/index.html
 export default [
   0, // C
-  3 / 7 / 5, // C#
+  525 / 5880, // C#
   1 / 7, // D
-  3 / 7 / 5 * 3, // D#
+  (525 + 490 * 2) / 5880, // D#
   2 / 7, // E
   3 / 7, // F
-  (3 / 7) + (4 / 7 / 7), // F#
+  (525 + 490 * 3 + 525 + 455) / 5880, // F#
   4 / 7, // G
-  (3 / 7) + (4 / 7 / 7 * 3), // G#
+  (525 + 490 * 5 + 525 + 455) / 5880, // G#
   5 / 7, // A
-  (3 / 7) + (4 / 7 / 7 * 5), // A#
+  (525 + 490 * 7 + 525 + 455) / 5880, // A#
   6 / 7, // B
 ]