diff --git a/src/components/App.js b/src/components/App.js index 812896d..9fc43bb 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -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 } = diff --git a/src/components/Delay.js b/src/components/Effects/Delay.js similarity index 81% rename from src/components/Delay.js rename to src/components/Effects/Delay.js index ef54250..e5f29c0 100644 --- a/src/components/Delay.js +++ b/src/components/Effects/Delay.js @@ -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 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 } = @@ -13,7 +13,7 @@ const Delay = () => { // 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 ( { const { diff --git a/src/components/Effects.js b/src/components/Effects/Effects.js similarity index 60% rename from src/components/Effects.js rename to src/components/Effects/Effects.js index cdb9b37..70d4021 100644 --- a/src/components/Effects.js +++ b/src/components/Effects/Effects.js @@ -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 ( diff --git a/src/components/Reverb.js b/src/components/Effects/Reverb.js similarity index 72% rename from src/components/Reverb.js rename to src/components/Effects/Reverb.js index 4332c4b..85aa77d 100644 --- a/src/components/Reverb.js +++ b/src/components/Effects/Reverb.js @@ -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 Reverb = () => { const { reverbConfig, setReverbConfig, handleMouseOver, handleMouseLeave } = @@ -12,7 +12,7 @@ const Reverb = () => { // 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 ( { // ADSR settings @@ -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 ( diff --git a/src/components/Master.js b/src/components/Modules/Master/Master.js similarity index 71% rename from src/components/Master.js rename to src/components/Modules/Master/Master.js index 6143801..439069a 100644 --- a/src/components/Master.js +++ b/src/components/Modules/Master/Master.js @@ -1,14 +1,14 @@ -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 } = @@ -16,13 +16,13 @@ const Master = () => { // 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 ( @@ -55,7 +55,7 @@ const Master = () => { own beautiful instruments and soundscapes. -

Created by Noah Lee

{" "} +

Created by Noah Lee

{' '} GitHub diff --git a/src/components/Presets.js b/src/components/Modules/Master/Presets.js similarity index 80% rename from src/components/Presets.js rename to src/components/Modules/Master/Presets.js index 0dca201..7d03033 100644 --- a/src/components/Presets.js +++ b/src/components/Modules/Master/Presets.js @@ -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 { @@ -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; @@ -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); `; diff --git a/src/components/Modules/Master/index.js b/src/components/Modules/Master/index.js new file mode 100644 index 0000000..ee2ac59 --- /dev/null +++ b/src/components/Modules/Master/index.js @@ -0,0 +1 @@ +export { default } from './Master';