finish UI
This commit is contained in:
[poww10s]
Generated
+26
@@ -11203,6 +11203,18 @@
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-redux": {
|
||||
"version": "7.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.1.tgz",
|
||||
"integrity": "sha512-T+VfD/bvgGTUA74iW9d2i5THrDQWbweXP0AVNI8tNd1Rk5ch1rnMiJkDD67ejw7YBKM4+REvcvqRuWJb7BLuEg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.9.0"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz",
|
||||
@@ -11336,6 +11348,15 @@
|
||||
"strip-indent": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"redux": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
|
||||
"integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"symbol-observable": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
|
||||
@@ -12889,6 +12910,11 @@
|
||||
"util.promisify": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"symbol-observable": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
|
||||
"integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
|
||||
},
|
||||
"symbol-tree": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||
|
||||
@@ -13,8 +13,10 @@
|
||||
"node-sass": "^4.14.1",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-redux": "^7.2.1",
|
||||
"react-scripts": "3.4.3",
|
||||
"react-transition-group": "^2.5.1",
|
||||
"redux": "^4.0.5",
|
||||
"styled-components": "^5.2.0"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@@ -1494,6 +1494,83 @@ function Delay(props) {
|
||||
);
|
||||
}
|
||||
|
||||
function EQ(props) {
|
||||
const [lowFreq, setLowFreq] = useReducer(reducer, 40);
|
||||
const [hiFreq, setHiFreq] = useReducer(reducer, 100);
|
||||
const [lowGain, setLowGain] = useReducer(reducer, 0);
|
||||
const [hiGain, setHiGain] = useReducer(reducer, 0);
|
||||
|
||||
return (
|
||||
<Stack fill anchor="top-left" guidingChild="first">
|
||||
<Box
|
||||
background={{ "color": "background" }}
|
||||
elevation="small"
|
||||
round="small"
|
||||
pad="large"
|
||||
gap="medium"
|
||||
fill>
|
||||
<Box
|
||||
align="center"
|
||||
justify="center"
|
||||
fill="horizontal"
|
||||
gap="small"
|
||||
pad={{ "top": "medium" }}>
|
||||
<Box
|
||||
align="center"
|
||||
justify="start"
|
||||
direction="column"
|
||||
fill="horizontal"
|
||||
gap="medium">
|
||||
<LabeledSlider
|
||||
label="Low EQ Freq"
|
||||
min={40}
|
||||
max={100}
|
||||
step={1}
|
||||
value={lowFreq}
|
||||
onChange={setLowFreq}
|
||||
/>
|
||||
<LabeledSlider
|
||||
label="Low EQ Gain"
|
||||
min={-12}
|
||||
max={12}
|
||||
step={1}
|
||||
value={lowGain}
|
||||
onChange={setLowGain}
|
||||
/>
|
||||
<LabeledSlider
|
||||
label="Hi EQ Freq"
|
||||
min={100}
|
||||
max={180}
|
||||
step={1}
|
||||
value={hiFreq}
|
||||
onChange={setHiFreq}
|
||||
/>
|
||||
<LabeledSlider
|
||||
label="Hi EQ Gain"
|
||||
min={-12}
|
||||
max={12}
|
||||
step={1}
|
||||
value={hiGain}
|
||||
onChange={setHiGain}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Heading
|
||||
textAlign="start"
|
||||
size="small"
|
||||
level="2"
|
||||
margin={{ "top": "xsmall", "left": "small" }}>
|
||||
EQ
|
||||
</Heading>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function ArpegA(props) {}
|
||||
|
||||
function ArpegB(props) {}
|
||||
|
||||
function TimbreComponent(props) {
|
||||
return (
|
||||
<Grid
|
||||
@@ -1625,6 +1702,31 @@ function VocoderComponent(props) {
|
||||
}
|
||||
|
||||
function EffectsComponent(props) {
|
||||
return (
|
||||
<Grid
|
||||
rows={["small", "xsmall", "small", "xsmall"]}
|
||||
columns={["small", "small", "small", "small"]}
|
||||
areas={[
|
||||
{ "name": "modFX", "start": [1, 0], "end": [2, 1] },
|
||||
{ "name": "Delay", "start": [0, 2], "end": [1, 3] },
|
||||
{ "name": "EQ", "start": [2, 2], "end": [3, 3] },
|
||||
]}
|
||||
gap="medium"
|
||||
fill="vertical">
|
||||
<Box align="center" justify="center" gridArea="modFX">
|
||||
<ModFX />
|
||||
</Box>
|
||||
<Box align="center" justify="center" gridArea="Delay">
|
||||
<Delay />
|
||||
</Box>
|
||||
<Box align="center" justify="center" gridArea="EQ">
|
||||
<EQ />
|
||||
</Box>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
function ArpeggioComponent(props) {
|
||||
return (
|
||||
<Grid
|
||||
rows={["small", "xsmall", "small", "xsmall"]}
|
||||
@@ -1640,11 +1742,9 @@ function EffectsComponent(props) {
|
||||
</Box>
|
||||
<Box align="center" justify="center" gridArea="Delay">
|
||||
<Delay />
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
function ArpeggioComponent(props) {}
|
||||
|
||||
export { TimbreComponent, VocoderComponent, EffectsComponent };
|
||||
|
||||
+9
-9
@@ -1,14 +1,14 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
import * as serviceWorker from "./serviceWorker";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
// If you want your app to work offline and load faster, you can change
|
||||
|
||||
Reference in New Issue
Block a user