switch to @chromatone coloring system

src/core/CoreSettings.ts

@@ -11,4 +11,19 @@ export const coreSettings: Record<string, ConfigurationSection> = {
       },
     },
   },
+  appearance: {
+    title: 'Appearance',
+    properties: {
+      'appearance.colorMode': {
+        type: 'string',
+        default: 'chromatone',
+        markdownDescription: 'The color mode to use.',
+        enum: ['chromatone', 'classic'],
+        markdownEnumDescriptions: [
+          'Use the Chromatone system for pitch coloring (see: chromatone.center).',
+          'Use the classic pitch coloring where the color red corresponds to the note C.',
+        ],
+      },
+    },
+  },
 }

src/core/NoteHueConnector.tsx

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react'
+import { useConfiguration } from './AppConfigurationHooks'
+
+export interface NoteHueConnector {
+  note: number
+  children: (hue: number) => ReactNode
+}
+
+export function NoteHueConnector(props: NoteHueConnector) {
+  const config = useConfiguration('appearance.colorMode')
+  const shift = config.value === 'classic' ? 0 : 3
+  const hue = (((props.note + shift) * 360) / 12) % 360
+  return <>{props.children(hue)}</>
+}

src/drum-pad/DrumPad.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { TouchAbsorber } from '../core/TouchAbsorber'
 import { DrumButtonMapping } from './DrumButtonMapping'
+import { NoteHueConnector } from '../core/NoteHueConnector'
 
 export class DrumPadContents extends React.PureComponent {
   render() {

src/isomorphic-keyboard/IsomorphicKeyboard.jsx

@@ -4,6 +4,7 @@ import { createSelector } from 'reselect'
 import { observer } from 'mobx-react'
 import styled from 'react-emotion'
 import { TouchAbsorber } from '../core/TouchAbsorber'
+import { NoteHueConnector } from '../core/NoteHueConnector'
 
 const IsomorphicKeyboardCircle = styled('div')`
   position: absolute;
@@ -209,6 +210,7 @@ const Circle = observer(
       const { size, noteValue, left, top } = this.props
       const transpose = this.props.store.transpose
       const trueNoteValue = transpose + noteValue
+      const opacity = this.isTouched.get() ? 1 : 0
       return (
         <div
           data-key={this.props['data-key']}
@@ -220,19 +222,25 @@ const Circle = observer(
             height: size,
           }}
         >
-          <IsomorphicKeyboardCircle
-            style={{
-              borderColor: `hsl(${(trueNoteValue % 12) * 30},50%,72%)`,
-            }}
-          />
-          <IsomorphicKeyboardCircle
-            className="is-active"
-            style={{
-              borderColor: 'white',
-              background: `hsl(${(trueNoteValue % 12) * 30},50%,72%)`,
-              opacity: this.isTouched.get() ? 1 : 0,
-            }}
-          />
+          <NoteHueConnector note={trueNoteValue}>
+            {(hue) => (
+              <>
+                <IsomorphicKeyboardCircle
+                  style={{
+                    borderColor: `hsl(${hue},50%,72%)`,
+                  }}
+                />
+                <IsomorphicKeyboardCircle
+                  className="is-active"
+                  style={{
+                    borderColor: 'white',
+                    background: `hsl(${hue},50%,72%)`,
+                    opacity,
+                  }}
+                />
+              </>
+            )}
+          </NoteHueConnector>
         </div>
       )
     }

src/piano-keyboard/PianoKeyboard.jsx

@@ -4,6 +4,7 @@ import React from 'react'
 import { computed } from 'mobx'
 import { observer } from 'mobx-react'
 import { TouchAbsorber } from '../core/TouchAbsorber'
+import { NoteHueConnector } from '../core/NoteHueConnector'
 
 const PianoKeyboardWrapper = styled('div')`
   position: absolute;
@@ -171,18 +172,22 @@ const Key = observer(
     render() {
       const active = this.isTouched.get()
       const transpose = this.props.store.transpose
-      const trueNoteValue = transpose + this.props.noteValue + 3
+      const trueNoteValue = transpose + this.props.noteValue
       return (
         <PianoKeyboardKey>
           <div className={this.props.keyColor} ref={this.props.refKey} />
-          <div
-            className={this.props.keyColor + ' is-active'}
-            style={{
-              opacity: active ? 1 : 0,
-              background: `hsl(${(trueNoteValue % 12) * 30},100%,90%)`,
-              transition: active ? '' : '0.3s opacity',
-            }}
-          />
+          <NoteHueConnector note={trueNoteValue}>
+            {(hue) => (
+              <div
+                className={this.props.keyColor + ' is-active'}
+                style={{
+                  opacity: active ? 1 : 0,
+                  background: `hsl(${hue},100%,90%)`,
+                  transition: active ? '' : '0.3s opacity',
+                }}
+              />
+            )}
+          </NoteHueConnector>
         </PianoKeyboardKey>
       )
     }