Skip to content

Commit

Permalink
restructure 50%
Browse files Browse the repository at this point in the history
  • Loading branch information
@noah-lee
noah-lee committed Jun 13, 2022
1 parent bf01294 commit 4339345
Show file tree
Hide file tree
Showing 10 changed files with 73 additions and 76 deletions.
26 changes: 13 additions & 13 deletions src/components/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { useContext } from "react";
import styled from "styled-components";
import { useContext } from 'react';
import styled from 'styled-components';

import { SettingsContext } from "../contexts/SettingsContext";
import { SettingsContext } from '../contexts/SettingsContext';

import GlobalStyles from "../styles/GlobalStyles";
import Header from "./Header";
import Master from "./Master";
import Oscillator from "./Oscillator";
import Filter from "./Filter";
import Keyboard from "./Keyboard";
import Adsr from "./Adsr";
import Lfo from "./Lfo";
import Effects from "./Effects";
import Tooltips from "./Tooltips";
import GlobalStyles from '../styles/GlobalStyles';
import Header from './Header';
import Master from './Modules/Master/Master';
import Oscillator from './Oscillator';
import Filter from './Filter';
import Keyboard from './Keyboard';
import Adsr from './Modules/Adsr';
import Lfo from './Lfo';
import Effects from './Effects';
import Tooltips from './Tooltips';

function App() {
const { oscAConfig, setOscAConfig, oscBConfig, setOscBConfig } =
Expand Down
12 changes: 6 additions & 6 deletions src/components/Delay.js → src/components/Effects/Delay.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import { useContext } from "react";
import styled from "styled-components";
import { useContext } from 'react';
import styled from 'styled-components';

import { SettingsContext } from "../contexts/SettingsContext";
import { SettingsContext } from '../../contexts/SettingsContext';

// import Toggle from "./Toggle";
import Toggle from "./Controls/Toggle";
import Range from "./Controls/Range";
import Toggle from '../Controls/Toggle';
import Range from '../Controls/Range';

const Delay = () => {
const { delayConfig, setDelayConfig, handleMouseOver, handleMouseLeave } =
useContext(SettingsContext);

// Tooltip
const delayTooltip =
"Delay will repeat the incoming sound at a specific timed interval. Each repeat will be a lower percentage of its initial volume (max 90%). Wet percentage defines the ratio of input sound that will be affected by the effect.";
'Delay will repeat the incoming sound at a specific timed interval. Each repeat will be a lower percentage of its initial volume (max 90%). Wet percentage defines the ratio of input sound that will be affected by the effect.';

return (
<Wrapper
Expand Down
10 changes: 5 additions & 5 deletions src/components/Distortion.js → src/components/Effects/Distortion.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useContext } from "react";
import styled from "styled-components";
import { useContext } from 'react';
import styled from 'styled-components';

import { SettingsContext } from "../contexts/SettingsContext";
import { SettingsContext } from '../../contexts/SettingsContext';

import Toggle from "./Controls/Toggle";
import Range from "./Controls/Range";
import Toggle from '../Controls/Toggle';
import Range from '../Controls/Range';

const Distortion = () => {
const {
Expand Down
17 changes: 9 additions & 8 deletions src/components/Effects.js → src/components/Effects/Effects.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import { useContext } from "react";
import styled from "styled-components";
import { useContext } from 'react';
import styled from 'styled-components';

import { SettingsContext } from "../contexts/SettingsContext";
import { SettingsContext } from '../../contexts/SettingsContext';

import Reverb from "./Reverb";
import Delay from "./Delay";
import Distortion from "./Distortion";
import Reverb from './Reverb';
import Delay from './Delay';
import Distortion from './Distortion';

import { Module } from '../styles/Styled';
import { Module } from '../../styles/Styled';

const Effects = () => {
const { handleMouseOver, handleMouseLeave } = useContext(SettingsContext);

const fxTooltip = "Effects will modify the overall output sound of the synthesizer. Hover over each effect to learn more."
const fxTooltip =
'Effects will modify the overall output sound of the synthesizer. Hover over each effect to learn more.';

return (
<Module>
Expand Down
18 changes: 6 additions & 12 deletions src/components/Reverb.js → src/components/Effects/Reverb.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { useContext } from "react";
import styled from "styled-components";
import { useContext } from 'react';
import styled from 'styled-components';

import { SettingsContext } from "../contexts/SettingsContext";
import { SettingsContext } from '../../contexts/SettingsContext';

import Toggle from "./Controls/Toggle";
import Range from "./Controls/Range";
import Toggle from '../Controls/Toggle';
import Range from '../Controls/Range';

const Reverb = () => {
const { reverbConfig, setReverbConfig, handleMouseOver, handleMouseLeave } =
useContext(SettingsContext);

// Tooltip
const reverbTooltip =
"Reverb will simulate sound being reflected off surfaces and decaying as it is absorbed over time. Decay is the time it takes for the sound to dissipate to silence. Wet percentage defines the ratio of input sound that will be affected by the effect.";
'Reverb will simulate sound being reflected off surfaces and decaying as it is absorbed over time. Decay is the time it takes for the sound to dissipate to silence. Wet percentage defines the ratio of input sound that will be affected by the effect.';

return (
<Wrapper
Expand Down Expand Up @@ -56,10 +56,4 @@ const Wrapper = styled.div`
gap: 8px;
`;

const Container = styled.div`
display: flex;
flex-direction: column;
gap: 8px;
`;

export default Reverb;
1 change: 1 addition & 0 deletions src/components/Effects/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './Effects';
22 changes: 11 additions & 11 deletions src/components/Adsr.js → src/components/Modules/Adsr.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { useContext } from "react";
import styled from "styled-components";
import { useContext } from 'react';
import styled from 'styled-components';

import { SettingsContext } from "../contexts/SettingsContext";
import { SettingsContext } from '../../contexts/SettingsContext';

import AdsrRange from "./Controls/AdsrRange";
import AdsrRange from '../Controls/AdsrRange';

import { Module } from '../styles/Styled';
import { Module } from '../../styles/Styled';

const Adsr = ({ id: adsrId }) => {
// ADSR settings
Expand All @@ -20,16 +20,16 @@ const Adsr = ({ id: adsrId }) => {

// Tooltips
const adsrTooltip =
"The ADSR (Attack, Decay, Sustain and Release) module is a time-based envelope that controls the amplitude of a desired parameter (e.g.: gain, frequency, pitch, etc.).";
const svgTooltip = "Visual representation of the ADSR envelope.";
'The ADSR (Attack, Decay, Sustain and Release) module is a time-based envelope that controls the amplitude of a desired parameter (e.g.: gain, frequency, pitch, etc.).';
const svgTooltip = 'Visual representation of the ADSR envelope.';
const atkTooltip =
"Attack represents the time it takes for the parameter to go from minimum to maximum.";
'Attack represents the time it takes for the parameter to go from minimum to maximum.';
const dcyTooltip =
"Decay represents the time (after attack) it takes for the parameter to go from maximum to sustained level.";
'Decay represents the time (after attack) it takes for the parameter to go from maximum to sustained level.';
const susTooltip =
"Sustain represents the value at which the parameter will stay while the notes are held down; at time attack + decay.";
'Sustain represents the value at which the parameter will stay while the notes are held down; at time attack + decay.';
const rlsTooltip =
"Release represents the time it takes for the parameter to go from sustained level to minimum, after the notes are released.";
'Release represents the time it takes for the parameter to go from sustained level to minimum, after the notes are released.';

return (
<Module>
Expand Down
26 changes: 13 additions & 13 deletions src/components/Master.js → src/components/Modules/Master/Master.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
import { useContext } from "react";
import styled from "styled-components";
import { FaGithubSquare } from "react-icons/fa";
import { useContext } from 'react';
import styled from 'styled-components';
import { FaGithubSquare } from 'react-icons/fa';

import { SettingsContext } from "../contexts/SettingsContext";
import { SettingsContext } from '../../../contexts/SettingsContext';

import MasterPitch from "./Controls/MasterPitch";
import Range from "./Controls/Range";
import Presets from "./Presets";
import MasterPitch from '../../Controls/MasterPitch';
import Range from '../../Controls/Range';
import Presets from './Presets';

import { Module } from "../styles/Styled";
import { Module } from '../../../styles/Styled';

const Master = () => {
const { masterConfig, setMasterConfig, handleMouseOver, handleMouseLeave } =
useContext(SettingsContext);

// Tooltips
const masterTooltip =
"Master module will control the overall volume (gain) and pitch of the synthesizer. You can also select one of the existing presets to help you get started.";
'Master module will control the overall volume (gain) and pitch of the synthesizer. You can also select one of the existing presets to help you get started.';
const masterGainTooltip =
"Master gain controls the overall volume of the synthesizer.";
'Master gain controls the overall volume of the synthesizer.';
const masterPitchTooltip =
"Master pitch will raise or lower the overall pitch by one octave.";
'Master pitch will raise or lower the overall pitch by one octave.';
const presetsTooltip =
"Choose one of the existing synthesizer presets for inspiration.";
'Choose one of the existing synthesizer presets for inspiration.';

return (
<Module>
Expand Down Expand Up @@ -55,7 +55,7 @@ const Master = () => {
own beautiful instruments and soundscapes.
</AccentText>
<TextContainer>
<p>Created by Noah Lee</p>{" "}
<p>Created by Noah Lee</p>{' '}
<AccentLink target="_blank" href="https://github.com/noah-lee/synthle">
<FaGithubSquare size={24} color="var(--color-accent)" />
GitHub
Expand Down
16 changes: 8 additions & 8 deletions src/components/Presets.js → src/components/Modules/Master/Presets.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { useContext, useState } from "react";
import styled from "styled-components";
import { useContext, useState } from 'react';
import styled from 'styled-components';

import { SettingsContext } from "../contexts/SettingsContext";
import { SettingsContext } from '../../../contexts/SettingsContext';

import useDocumentTitle from "../hooks/use-document-title.hook";
import useDocumentTitle from '../../../hooks/use-document-title.hook';

import { presets } from "../data/presets";
import { presets } from '../../../data/presets';

const Presets = ({ tooltip }) => {
const {
Expand All @@ -26,8 +26,8 @@ const Presets = ({ tooltip }) => {

const [preset, setPreset] = useState(null);

const title = preset !== null ? `Synthle - ${preset}` : "Synthle";
useDocumentTitle(title, "Synthle");
const title = preset !== null ? `Synthle - ${preset}` : 'Synthle';
useDocumentTitle(title, 'Synthle');

const handleChange = (ev) => {
const value = ev.target.value;
Expand Down Expand Up @@ -77,7 +77,7 @@ const Select = styled.select`
background-color: var(--color-black);
height: 24px;
min-width: 160px;
font-family: "Roboto Mono";
font-family: 'Roboto Mono';
color: var(--color-white);
`;

Expand Down
1 change: 1 addition & 0 deletions src/components/Modules/Master/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './Master';

0 comments on commit 4339345

Please sign in to comment.