Cleanup to get ready for v0.2 release

package.json

@@ -44,6 +44,7 @@
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
     "robotjs": "git+https://github.com/octalmage/robotjs.git#master",
+    "smooth-scroll-into-view-if-needed": "^1.1.28",
     "webmidi": "^2.5.1"
   },
   "build": {

roadmap.txt → roadmap.md

@@ -1,19 +1,20 @@
-
 Current "roadmap" of upcoming changes
 
-v0.1 release
-- checkbox to turn off sending notes (for practicing without it playing)
-- checkbox to turn off auto octave swap
+v0.2
 
-v0.2 release
+- key switches for octaves (when in not auto octave mode)
 - buttons for manually shifting the internal octave
-- keymap selector
+- keymap selector with a few options
+
+v0.3
+
 - Better ui for configuring note->key map
 
 future ideas
+
 - UI that shows a piano and keypresses
 - Automatically play through a song
 - Mac build
 - Send different note ranges to different game clients?
--- Like if multiboxing multiple instruments
--- May be against terms of service :(
+  -- Like if multiboxing multiple instruments
+  -- May be against terms of service :(

src/react/App.module.css

@@ -4,6 +4,7 @@
 
 .app {
   height: 100vh;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;

src/react/components/InstrumentSelector.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default InstrumentSelector;
+
+function InstrumentSelector(props) {
+  return <div>Instrument: The Minstrel</div>;
+}

src/react/components/MIDIMessageDisplay.js

@@ -0,0 +1,31 @@
+import React, { useEffect, useRef } from 'react';
+import scrollIntoView from 'smooth-scroll-into-view-if-needed';
+
+import { useKeySender } from '../hooks/useKeySender';
+
+import styles from './MIDIMessageDisplay.module.css';
+
+export default MIDIMessageDisplay;
+
+function MIDIMessageDisplay(props) {
+  const { sentMessages } = useKeySender();
+  const messagesEndRef = useRef(null);
+
+  const scrollToBottom = () => {
+    scrollIntoView(messagesEndRef.current);
+  };
+
+  useEffect(scrollToBottom, [sentMessages]);
+
+  return (
+    <div className={styles.MIDIMessageDisplay}>
+      <h3 className={styles.header}>Messages</h3>
+      <div className={styles.messages}>
+        {sentMessages.map((message, i) => (
+          <div key={i}>{message}</div>
+        ))}
+        <div key="endDiv" ref={messagesEndRef} />
+      </div>
+    </div>
+  );
+}

src/react/components/MIDIMessageDisplay.module.css

@@ -0,0 +1,16 @@
+.MIDIMessageDisplay {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.header {
+  flex: 0;
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  width: 100%;
+}

src/react/components/PianoDisplay.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useKeySender } from '../hooks/useKeySender';
+
+export default PianoDisplay;
+
+function PianoDisplay(props) {
+  const { octave } = useKeySender();
+  return <div>Octave {octave}</div>;
+}

src/react/hooks/useKeySender.js

@@ -51,6 +51,8 @@ const keyMap = {
 // TODO: Move to config since the sweet spot may be different per game/person?
 const MULTIPLE_OCTAVE_SHIFT_DELAY = 75;
 
+const MESSAGE_LIMIT = 100;
+
 function KeySenderProvider(props) {
   const { children } = props;
   const { isLoading: configIsLoading, config } = useConfig();
@@ -211,7 +213,10 @@ function KeySenderProvider(props) {
   function _addMessage(message) {
     setState((curr) => ({
       ...curr,
-      sentMessages: [message, ...curr.sentMessages].slice(0, 10),
+      sentMessages: [...curr.sentMessages, message].slice(
+        curr.sentMessages.length - MESSAGE_LIMIT,
+        MESSAGE_LIMIT
+      ),
     }));
   }
 

src/react/scenes/MainContent/index.js

@@ -1,9 +1,12 @@
 import React from 'react';
 
-import MIDIDisplay from '../../components/MIDIDisplay';
-import MIDIControls from '../../components/MIDIControls';
 import { useConfig } from '../../hooks/useConfig';
 
+import MIDIControls from '../../components/MIDIControls';
+import InstrumentSelector from '../../components/InstrumentSelector';
+import PianoDisplay from '../../components/PianoDisplay';
+import MIDIMessageDisplay from '../../components/MIDIMessageDisplay';
+
 import styles from './styles.module.css';
 
 export default MainContent;
@@ -18,10 +21,15 @@ function MainContent() {
       </header>
       <div className={styles.appContent}>
         <div className={styles.leftContent}>
-          Input used for testing key press <input />
+          <InstrumentSelector />
+          <PianoDisplay />
+          <div>
+            Input used for testing key press <input />
+          </div>
         </div>
+
         <div className={styles.rightContent}>
-          <MIDIDisplay />
+          <MIDIMessageDisplay />
         </div>
       </div>
       <footer className={styles.appFooter}>

src/react/scenes/MainContent/styles.module.css

@@ -9,14 +9,19 @@
   width: 100%;
   flex: 1;
   display: flex;
+  overflow: hidden;
 }
 
 .leftContent {
+  flex: 1;
   padding: 1rem;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .rightContent {
+  flex: 0 0 300px;
   padding: 1rem;
   margin-left: 1rem;
   height: 100%;