diff --git a/src/App.js b/src/App.js index 6eec50c..6141cf4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ import React, { useState } from "react"; import { Grommet, Box } from "grommet"; +import css from "styled-components"; import "./App.css"; import FileIOComponent from "./components/FileIOComponent"; @@ -44,16 +45,16 @@ const theme = { "light": "#000000", }, "text-weak": { - "dark": "#CCCCCC", - "light": "#444444", + dark: "#CCCCCC", + light: "#444444", }, "text-xweak": { - "dark": "#999999", - "light": "#666666", + dark: "#999999", + light: "#666666", }, - "border": { - "dark": "#444444", - "light": "#CCCCCC", + border: { + dark: "#444444", + light: "#CCCCCC", }, "control": "brand", "active-background": "background-contrast", @@ -68,35 +69,66 @@ const theme = { "graph-0": "brand", "graph-1": "status-warning", }, - "font": { - "family": "Fira Mono", + font: { + family: "Fira Mono", }, - "active": { - "background": "active-background", - "color": "active-text", + active: { + background: "active-background", + color: "active-text", }, - "hover": { - "background": "active-background", - "color": "active-text", + hover: { + background: "active-background", + color: "active-text", }, - "selected": { - "background": "selected-background", - "color": "selected-text", + selected: { + background: "selected-background", + color: "selected-text", }, - "focus": { - "outline": { - "size": "0", + focus: { + outline: { + size: "0", }, - "shadow:": { - "size": 0, + shadow: { + size: 0, }, }, }, - "chart": {}, - "diagram": { - "line": {}, + tab: { + background: { + color: "light-1", + }, + color: "dark", + border: undefined, + active: { + background: "brand", + color: "white", + }, + hover: { + background: "brand", + color: "white", + }, + pad: "small", + extend: () => + ` + transition: background 0.5s ease, color 0.5s ease; + border-radius: 4px; + box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5); + `, }, - "meter": {}, + tabs: { + header: { + background: "dark-1", + extend: () => ` + padding: 10px; + `, + }, + background: "light-3", + }, + chart: {}, + diagram: { + line: {}, + }, + meter: {}, }; // converts SYSEX file to the dump format the system uses (and the implementation refers to) diff --git a/src/components/EditorComponent.js b/src/components/EditorComponent.js index 6305901..6b7c223 100644 --- a/src/components/EditorComponent.js +++ b/src/components/EditorComponent.js @@ -1,7 +1,11 @@ -import React, { useEffect, useState } from "react"; -import { Collapsible, Tab, Tabs, Grid, Box } from "grommet"; +import React from "react"; +import { Tab, Tabs, Box } from "grommet"; -import TimbreComponent from "./TimbreComponent"; +import { + TimbreComponent, + VocoderComponent, + EffectsComponent, +} from "./EditorTabComponent"; function EditorComponent(props) { return ( @@ -11,15 +15,46 @@ function EditorComponent(props) { fill direction="column" overflow="hidden"> - + - - + + - - - + + + + + + + + + + + + + + + + diff --git a/src/components/EditorTabComponent.js b/src/components/EditorTabComponent.js new file mode 100644 index 0000000..3acf9b5 --- /dev/null +++ b/src/components/EditorTabComponent.js @@ -0,0 +1,1650 @@ +import React, { useReducer } from "react"; +import { + CheckBox, + Text, + Stack, + Heading, + RangeInput, + Select, + Box, + Grid, +} from "grommet"; + +const reducer = (state, action) => action; + +const LabeledSlider = (props) => ( + + + + {props.label} + + + + props.onChange(e.target.value)} + /> + + +); + +function VCO1(props) { + const [waveform, wfDispatch] = useReducer(reducer, 0); + const [mod, modDispatch] = useReducer(reducer, 0); + return ( + + + + + + + + + + + + + + + + VCO 1 + + + ); +} + +function VCO2(props) { + const [waveform, wfDispatch] = useReducer(reducer, 0); + const [mod, modDispatch] = useReducer(reducer, 0); + return ( + + + + + + + + + + + + + + + + VCO 2 + + + ); +} + +function AudioIn1(props) { + const [gate, setGate] = useReducer(reducer, 0); + const [threshold, setThreshold] = useReducer(reducer, 0); + const [hpf, setHPF] = useReducer(reducer, 0); + const [hpfGate, toggleHPFGate] = useReducer(reducer, true); + + return ( + + + + + + + + + + toggleHPFGate(checked) + } + /> + + + + + + Audio In 1 + + + ); +} + +function Mixer(props) { + const [vol1, setVol1] = useReducer(reducer, 127); + const [vol2, setVol2] = useReducer(reducer, 0); + const [vol3, setVol3] = useReducer(reducer, 0); + + return ( + + + + + + + + + + Mixer + + + ); +} + +function Pitch(props) { + const [uniTune, setUniTune] = useReducer(reducer, 0); + const [tune, setTune] = useReducer(reducer, 0); + const [transpose, setTranspose] = useReducer(reducer, 0); + const [portamento, setPortamento] = useReducer(reducer, 0); + const [bend, setBend] = useReducer(reducer, 0); + const [vInt, setVInt] = useReducer(reducer, 0); + + return ( + + + + + + + + + + + + + + + + Timbre + + + ); +} + +function Filter(props) { + const [filterType, setFilterType] = useReducer(reducer, ""); + const [cutoff, setCutoff] = useReducer(reducer, 0); + const [resonance, setRes] = useReducer(reducer, 0); + const [filterEG, setFilterEG] = useReducer(reducer, 0); + const [filterTrack, setFilterTrack] = useReducer(reducer, 0); + + return ( + + + + setFormantShift(value)} + placeholder="Formant Shift" + /> + + + + + + + + + Filter + + + ); +} + +function FCMod(props) { + const [source, setSource] = useReducer(reducer, ""); + const [intensity, setIntensity] = useReducer(reducer, 0); + + return ( + + + + + setWaveForm(value)} + placeholder="Waveform" + /> + setSrc(value)} + placeholder={`Source ${props.id}`} + /> + setType(value)} + placeholder="Effect" + /> + + + + + + + + + MOD FX + + + ); +} + +function Delay(props) { + const [type, setType] = useReducer(reducer, ""); + const [tempoSync, setTempoSync] = useReducer(reducer, false); + const [delay, setDelay] = useReducer(reducer, 0); + const [syncNote, setSyncNote] = useReducer(reducer, ""); + const [depth, setDepth] = useReducer(reducer, 0); + + return ( + + + + + - - +
+ + {fileInput.current !== null ? text : "Upload a Sysex File"} + + +
); } diff --git a/src/components/TimbreComponent.js b/src/components/TimbreComponent.js deleted file mode 100644 index a4819c6..0000000 --- a/src/components/TimbreComponent.js +++ /dev/null @@ -1,426 +0,0 @@ -import React, { useReducer } from "react"; -import { Text, Stack, Heading, RangeInput, Select, Box, Grid } from "grommet"; - -const reducer = (state, action) => action; - -const LabeledSlider = (props) => ( - - - - {props.label} - - - - props.onChange(e.target.value)} - /> - - -); - -function VCO1(props) { - const [waveform, wfDispatch] = useReducer(reducer, 0); - const [mod, modDispatch] = useReducer(reducer, 0); - return ( - - - - - - - - - - - - - - - - VCO 1 - - - ); -} - -function VCO2(props) { - const [waveform, wfDispatch] = useReducer(reducer, 0); - const [mod, modDispatch] = useReducer(reducer, 0); - return ( - - - - - - - - - - - - - - - - VCO 2 - - - ); -} - -function Mixer(props) { - const [vol1, setVol1] = useReducer(reducer, 127); - const [vol2, setVol2] = useReducer(reducer, 0); - const [vol3, setVol3] = useReducer(reducer, 0); - - return ( - - - - - - - - - - Mixer - - - ); -} - -function Pitch(props) { - const [uniTune, setUniTune] = useReducer(reducer, 0); - const [tune, setTune] = useReducer(reducer, 0); - const [transpose, setTranspose] = useReducer(reducer, 0); - const [portamento, setPortamento] = useReducer(reducer, 0); - const [bend, setBend] = useReducer(reducer, 0); - const [vInt, setVInt] = useReducer(reducer, 0); - - return ( - - - - - - - - - - - - - - - - Timbre/Pitch - - - ); -} - -const TimbreComponent = (props) => ( - - - - - - - - - - - - - - -); - -export default TimbreComponent; diff --git a/src/index.css b/src/index.css index 60318d6..98556d7 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,4 @@ body { - overflow: hidden; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",