Integrate React and prepare state management for multiple channels and patterns

public/index.css

@@ -0,0 +1,119 @@
+body {
+    margin: 0px;
+}
+
+.shortInput {
+    width: 65px;
+}
+
+.flexInput {
+    width: 100%;
+}
+
+.mdc-text-field {
+    margin-left: 10px;
+}
+
+.effect-panel {
+    display: inline;
+}
+
+.effect-panel-popup {
+    display: flex;
+    flex-flow: column;
+}
+
+#app {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+    width: 100%;
+}
+
+button {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+#playButton {
+    width: 100px;
+}
+
+#effectsMenu {
+    padding: 5px;
+}
+
+table {
+    border: 1px solid black;
+    border-collapse: collapse;
+}
+
+th {
+    border: 1px solid black;
+    width: 50px;
+    overflow: hidden;
+    background-color: #6D858D;
+    color: #FFFFFF;
+}
+
+td {
+    border: 1px solid black;
+    overflow: hidden;
+    color: transparent;
+    text-align: center;
+    min-width: 50px;
+}
+
+td.note-C\#, td.note-D\#, td.note-F\#, td.note-G\#, td.note-A\# {
+    background-color: #2B2197;
+}
+
+td.note-C, td.note-D, td.note-E, td.note-F, td.note-G, td.note-A, td.note-B {
+    background-color: #3B27EE;
+}
+
+td.noteLong {
+    color: inherit;
+}
+
+td.active {
+    background-color: #FFFFC0;
+}
+
+td.playing {
+    background-color: #000000;
+}
+
+td.playingLong {
+    color: #FFFFC0;
+    background-color: #000000;
+}
+
+table td:nth-of-type(4n) {
+    border-right: 3px solid black;
+}
+
+table tr:nth-of-type(12n) {
+    border-bottom: 3px solid white;
+}
+
+#metaWorkspace {
+    background-color: transparent;
+    margin-bottom: 10px;
+}
+
+#patternWorkspace {
+    flex-grow: 1;
+    overflow-y: auto;
+    width: 100%;
+}
+
+table#pattern {
+    width: 100%;
+}
+
+.no-select {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+}