add tooltips

noah-lee · May 11, 2022 · 6760dac · 6760dac
1 parent cacbdf9
commit 6760dac
Show file tree

Hide file tree

Showing 29 changed files with 451 additions and 107 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -30,7 +30,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Synthle</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/assets/synthle_icon.svg b/src/assets/synthle_icon.svg
diff --git a/src/components/Adsr.js b/src/components/Adsr.js
@@ -3,22 +3,44 @@ import styled from "styled-components";
 
 import { SettingsContext } from "../contexts/SettingsContext";
 
-import AdsrRange from "./Controls/AdsrRange"
+import AdsrRange from "./Controls/AdsrRange";
 
 const Adsr = ({ id: adsrId }) => {
   // ADSR settings
-  const { adsrConfig, setAdsrConfig } = useContext(SettingsContext);
+  const { adsrConfig, setAdsrConfig, handleMouseOver, handleMouseLeave } =
+    useContext(SettingsContext);
 
   // ADSR SVG
   const atkSvgPos = (adsrConfig[adsrId].attack / 5) * 100;
   const dcySvgPos = (adsrConfig[adsrId].decay / 5) * 100;
   const susSvgPos = adsrConfig[adsrId].sustain * 50;
   const rlsSvgPos = (adsrConfig[adsrId].release / 5) * 100;
 
+  // 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.";
+  const atkTooltip =
+    "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.";
+  const susTooltip =
+    "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.";
+
   return (
     <Wrapper>
-      <h2>ADSR {adsrId.charAt(4)}</h2>
-      <SvgContainer>
+      <h2
+        onMouseOver={() => handleMouseOver(adsrTooltip)}
+        onMouseLeave={handleMouseLeave}
+      >
+        ADSR {adsrId.charAt(4)}
+      </h2>
+      <SvgContainer
+        onMouseOver={() => handleMouseOver(svgTooltip)}
+        onMouseLeave={handleMouseLeave}
+      >
         <AdsrSvg>
           <polygon
             points={`${atkSvgPos},30 ${atkSvgPos + dcySvgPos},${
@@ -37,6 +59,7 @@ const Adsr = ({ id: adsrId }) => {
           type="time"
           min={0.01}
           max={5}
+          tooltip={atkTooltip}
         />
         <AdsrRange
           state={adsrConfig}
@@ -47,6 +70,7 @@ const Adsr = ({ id: adsrId }) => {
           type="time"
           min={0.01}
           max={5}
+          tooltip={dcyTooltip}
         />
       </Container>
       <Container>
@@ -59,6 +83,7 @@ const Adsr = ({ id: adsrId }) => {
           type="percentage"
           min={0}
           max={1}
+          tooltip={susTooltip}
         />
         <AdsrRange
           state={adsrConfig}
@@ -69,6 +94,7 @@ const Adsr = ({ id: adsrId }) => {
           type="time"
           min={0.01}
           max={5}
+          tooltip={rlsTooltip}
         />
       </Container>
     </Wrapper>

diff --git a/src/components/App.js b/src/components/App.js
@@ -46,15 +46,6 @@ const Wrapper = styled.div`
   margin: 0 32px;
 `;
 
-const Main = styled.main`
-  flex: 1;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-`;
-
 const Controls = styled.div`
   max-width: 1144px;
   display: flex;

diff --git a/src/components/Controls/AdsrRange.js b/src/components/Controls/AdsrRange.js
@@ -1,6 +1,9 @@
+import { useContext } from "react";
 import styled from "styled-components";
 
-import { linToLog, logToLin, valueToGain } from "../../utils/conversion";
+import { SettingsContext } from "../../contexts/SettingsContext";
+
+import { linToLog, logToLin } from "../../utils/conversion";
 
 import {
   HSliderContainer,
@@ -10,7 +13,19 @@ import {
   HSliderText,
 } from "../../styles/Styled";
 
-const Range = ({ state, setState, adsrId, parameter, name, type, min, max }) => {
+const Range = ({
+  state,
+  setState,
+  adsrId,
+  parameter,
+  name,
+  type,
+  min,
+  max,
+  tooltip,
+}) => {
+  const { handleMouseOver, handleMouseLeave } = useContext(SettingsContext);
+
   const value =
     type === "time"
       ? logToLin(state[adsrId][parameter], min, max)
@@ -30,7 +45,10 @@ const Range = ({ state, setState, adsrId, parameter, name, type, min, max }) =>
   };
 
   return (
-    <Wrapper>
+    <Wrapper
+      onMouseOver={() => handleMouseOver(tooltip)}
+      onMouseLeave={handleMouseLeave}
+    >
       <p>{name}</p>
       <HSliderContainer>
         <HSliderTrack />
@@ -47,7 +65,9 @@ const Range = ({ state, setState, adsrId, parameter, name, type, min, max }) =>
           <HSliderText>{state[adsrId][parameter].toFixed(1)} s</HSliderText>
         )}
         {type === "percentage" && (
-          <HSliderText>{(state[adsrId][parameter] * 100 / max).toFixed()} %</HSliderText>
+          <HSliderText>
+            {((state[adsrId][parameter] * 100) / max).toFixed()} %
+          </HSliderText>
         )}
       </HSliderContainer>
     </Wrapper>

diff --git a/src/components/Controls/AdsrToggle.js b/src/components/Controls/AdsrToggle.js
@@ -5,8 +5,9 @@ import { SettingsContext } from "../../contexts/SettingsContext";
 
 import { Button } from "../../styles/Styled";
 
-const AdsrSelect = ({ state, setState }) => {
-  const { adsrConfig } = useContext(SettingsContext);
+const AdsrSelect = ({ state, setState, tooltip }) => {
+  const { adsrConfig, handleMouseOver, handleMouseLeave } =
+    useContext(SettingsContext);
 
   const adsrs = Object.keys(adsrConfig);
 
@@ -23,7 +24,10 @@ const AdsrSelect = ({ state, setState }) => {
   };
 
   return (
-    <Wrapper>
+    <Wrapper
+      onMouseOver={() => handleMouseOver(tooltip)}
+      onMouseLeave={handleMouseLeave}
+    >
       <p>ADSR</p>
       {adsrs.map((adsr) => (
         <StyledButton

diff --git a/src/components/Controls/FilterType.js b/src/components/Controls/FilterType.js
@@ -1,11 +1,16 @@
+import { useContext } from "react";
 import styled from "styled-components";
 
+import { SettingsContext } from "../../contexts/SettingsContext";
+
 import { ReactComponent as Lowpass } from "../../assets/lowpass.svg";
 import { ReactComponent as Highpass } from "../../assets/highpass.svg";
 
 import { EmptyButton } from "../../styles/Styled";
 
-const FilterTypeSelect = ({ state, setState }) => {
+const FilterTypeSelect = ({ state, setState, tooltip }) => {
+  const { handleMouseOver, handleMouseLeave } = useContext(SettingsContext);
+
   const handleClick = (ev) => {
     ev.stopPropagation();
     const name = ev.target.name;
@@ -16,7 +21,10 @@ const FilterTypeSelect = ({ state, setState }) => {
   };
 
   return (
-    <Wrapper>
+    <Wrapper
+      onMouseOver={() => handleMouseOver(tooltip)}
+      onMouseLeave={handleMouseLeave}
+    >
       <WaveformContainer>
         <StyledEmptyButton name="lowpass" onClick={handleClick}>
           <TextContainer>
@@ -27,21 +35,27 @@ const FilterTypeSelect = ({ state, setState }) => {
             width={32}
             height={32}
             pointerEvents="none"
-            fill={state.type === "lowpass" ? "var(--color-accent)"
-            : "var(--color-black)"}
+            fill={
+              state.type === "lowpass"
+                ? "var(--color-accent)"
+                : "var(--color-black)"
+            }
           />
         </StyledEmptyButton>
         <StyledEmptyButton name="highpass" onClick={handleClick}>
-        <TextContainer>
+          <TextContainer>
             <Text>High</Text>
             <Text>Pass</Text>
           </TextContainer>
           <Highpass
             width={32}
             height={32}
             pointerEvents="none"
-            fill={state.type === "highpass" ? "var(--color-accent)"
-            : "var(--color-black)"}
+            fill={
+              state.type === "highpass"
+                ? "var(--color-accent)"
+                : "var(--color-black)"
+            }
           />
         </StyledEmptyButton>
       </WaveformContainer>

diff --git a/src/components/Controls/MasterPitch.js b/src/components/Controls/MasterPitch.js
@@ -1,9 +1,13 @@
-import { useEffect } from "react";
+import { useEffect, useContext } from "react";
 import styled from "styled-components";
 
+import { SettingsContext } from "../../contexts/SettingsContext";
+
 import { Button } from "../../styles/Styled";
 
-const MasterPitch = ({ state, setState }) => {
+const MasterPitch = ({ state, setState, tooltip }) => {
+  const { handleMouseOver, handleMouseLeave } = useContext(SettingsContext);
+
   const handleClick = (action) => {
     if (action === "pitch-down") {
       setState((prevState) => ({
@@ -35,7 +39,10 @@ const MasterPitch = ({ state, setState }) => {
   });
 
   return (
-    <Wrapper>
+    <Wrapper
+      onMouseOver={() => handleMouseOver(tooltip)}
+      onMouseLeave={handleMouseLeave}
+    >
       <p>Pitch</p>
       <Button onClick={() => handleClick("pitch-down")}>-</Button>
       <Text>{state.pitch}</Text>

diff --git a/src/components/Controls/Pitch.js b/src/components/Controls/Pitch.js
@@ -1,8 +1,13 @@
+import { useContext } from "react";
 import styled from "styled-components";
 
+import { SettingsContext } from "../../contexts/SettingsContext";
+
 import { Button } from "../../styles/Styled";
 
-const PitchSelect = ({ state, setState }) => {
+const PitchSelect = ({ state, setState, tooltip }) => {
+  const { handleMouseOver, handleMouseLeave } = useContext(SettingsContext);
+
   const handleClick = (action) => {
     if (action === "pitch-down") {
       setState((prevState) => ({
@@ -18,7 +23,10 @@ const PitchSelect = ({ state, setState }) => {
   };
 
   return (
-    <Wrapper>
+    <Wrapper
+      onMouseOver={() => handleMouseOver(tooltip)}
+      onMouseLeave={handleMouseLeave}
+    >
       <p>Pitch</p>
       <Button onClick={() => handleClick("pitch-down")}>-</Button>
       <Text>{state.pitch}</Text>

diff --git a/src/components/Controls/Range.js b/src/components/Controls/Range.js
@@ -1,5 +1,8 @@
+import { useContext } from "react";
 import styled from "styled-components";
 
+import { SettingsContext } from "../../contexts/SettingsContext";
+
 import { linToLog, logToLin, valueToGain } from "../../utils/conversion";
 
 import {
@@ -10,7 +13,18 @@ import {
   HSliderText,
 } from "../../styles/Styled";
 
-const Range = ({ state, setState, parameter, name, type, min, max }) => {
+const Range = ({
+  state,
+  setState,
+  parameter,
+  name,
+  type,
+  min,
+  max,
+  tooltip,
+}) => {
+  const { handleMouseOver, handleMouseLeave } = useContext(SettingsContext);
+
   const value =
     type === "frequency" || type === "time"
       ? logToLin(state[parameter], min, max)
@@ -32,7 +46,10 @@ const Range = ({ state, setState, parameter, name, type, min, max }) => {
   };
 
   return (
-    <Wrapper>
+    <Wrapper
+      onMouseOver={() => handleMouseOver(tooltip)}
+      onMouseLeave={handleMouseLeave}
+    >
       <p>{name}</p>
       <HSliderContainer>
         <HSliderTrack />

diff --git a/src/components/Controls/Toggle.js b/src/components/Controls/Toggle.js
@@ -1,8 +1,13 @@
+import { useContext } from "react";
 import styled from "styled-components";
 
+import { SettingsContext } from "../../contexts/SettingsContext";
+
 import { Button } from "../../styles/Styled";
 
-const LfoToggle = ({ state, setState, parameter, name }) => {
+const LfoToggle = ({ state, setState, parameter, name, tooltip }) => {
+  const { handleMouseOver, handleMouseLeave } = useContext(SettingsContext);
+
   const style = {
     backgroundColor: "var(--color-accent)",
   };
@@ -15,7 +20,12 @@ const LfoToggle = ({ state, setState, parameter, name }) => {
   };
 
   return (
-    <StyledButton onClick={handleClick} style={state[parameter] ? style : {}}>
+    <StyledButton
+      onClick={handleClick}
+      style={state[parameter] ? style : {}}
+      onMouseOver={() => handleMouseOver(tooltip)}
+      onMouseLeave={handleMouseLeave}
+    >
       {name}
     </StyledButton>
   );