feat: sound options

Author: Oskar Widmark

src/App.tsx

@@ -1,6 +1,12 @@
 import React, { MouseEvent } from 'react';
 import './App.css';
-import { SelectChangeEvent, Tab, Tabs } from '@mui/material';
+import {
+  SelectChangeEvent,
+  Slider,
+  Tab,
+  Tabs,
+  Typography,
+} from '@mui/material';
 import {
   SortValue,
   SortName,
@@ -25,21 +31,25 @@ import {
   RAINBOW_BACKGROUND_COLOR,
   INIT_STATE,
   INIT_SETTINGS,
+  SOUND_TYPE_OPTIONS,
 } from './constants';
 import { SortAppBar } from './AppBar';
 import { CanvasController } from './canvas-controller';
 import { Colors } from './Colors';
 import { ColumnSlider } from './ColumnSlider';
 import { Options } from './Options';
-import { ResetPresetSelect } from './ResetPresetSelect';
-import { SortingAlgorithmSelect } from './SortingAlgorithmSelect';
 import { TimeSlider } from './TimeSlider';
 import { Audiotrack, BarChart, Palette } from '@mui/icons-material';
 import { TabPanel } from './TabPanel';
+import { NonCustomOscillatorType } from 'tone/build/esm/source/oscillator/OscillatorInterface';
+import { TitledSelect } from './TitledSelect';
 
 type Props = {
   playSound: (params: { frequency: number; duration?: string }) => void;
   stopSounds: () => void;
+  soundType: NonCustomOscillatorType;
+  setSoundType: (type: NonCustomOscillatorType) => void;
+  setVolume: (volume: number) => void;
 };
 
 class App extends React.Component<Props> {
@@ -68,6 +78,8 @@ class App extends React.Component<Props> {
       columnColor2: string;
       backgroundColor: string;
       highlightColor: string;
+      soundType: NonCustomOscillatorType;
+      soundVolume: number;
     };
   };
   canvasController: CanvasController;
@@ -109,6 +121,9 @@ class App extends React.Component<Props> {
       this.state.settings.columnColor2,
       this.state.settings.highlightColor,
     );
+
+    this.props.setVolume(this.state.settings.soundVolume);
+    this.props.setSoundType(this.state.settings.soundType);
   }
 
   setSettings = (
@@ -288,13 +303,13 @@ class App extends React.Component<Props> {
     this.setState({ areSettingsOpen: false });
   };
 
-  chooseSortAlg = (event: SelectChangeEvent<SortName>) => {
+  chooseSortAlg = (event: SelectChangeEvent<string>) => {
     this.stopSorting();
 
     this.setSettings({ chosenSortAlg: event.target.value as SortName });
   };
 
-  chooseResetPreset = (event: SelectChangeEvent<ResetPreset>) => {
+  chooseResetPreset = (event: SelectChangeEvent<string>) => {
     this.setSettings({ resetPreset: event.target.value as ResetPreset });
   };
 
@@ -418,6 +433,18 @@ class App extends React.Component<Props> {
     });
   };
 
+  setSoundType = (event: SelectChangeEvent<string>) => {
+    const soundType = event.target.value as NonCustomOscillatorType;
+    this.props.setSoundType(soundType);
+    this.setSettings({ soundType });
+  };
+
+  setVolume = (_: unknown, value: number | number[]) => {
+    const volume = value instanceof Array ? value[0] : value;
+    this.props.setVolume(volume);
+    this.setSettings({ soundVolume: volume });
+  };
+
   render() {
     return (
       <div
@@ -470,9 +497,11 @@ class App extends React.Component<Props> {
               <Tab icon={<Audiotrack />} sx={{ minWidth: 0 }} />
             </Tabs>
             <TabPanel value={this.state.tabIndex} index={0}>
-              <SortingAlgorithmSelect
-                chosenSortAlg={this.state.settings.chosenSortAlg}
-                chooseSortAlg={this.chooseSortAlg}
+              <TitledSelect
+                title="Sorting Algorithm"
+                value={this.state.settings.chosenSortAlg}
+                onChange={this.chooseSortAlg}
+                options={Object.values(SortName)}
               />
               <Options
                 chosenSortAlg={this.state.settings.chosenSortAlg}
@@ -495,9 +524,11 @@ class App extends React.Component<Props> {
                 time={this.state.settings.compareTime}
                 changeTime={this.changeCompareTime}
               />
-              <ResetPresetSelect
-                resetPreset={this.state.settings.resetPreset}
-                chooseResetPreset={this.chooseResetPreset}
+              <TitledSelect
+                title="Reset Preset"
+                value={this.state.settings.resetPreset}
+                onChange={this.chooseResetPreset}
+                options={Object.values(ResetPreset)}
               />
             </TabPanel>
             <TabPanel value={this.state.tabIndex} index={1}>
@@ -514,7 +545,34 @@ class App extends React.Component<Props> {
                 setHighlightColor={this.setHighlightColor}
               />
             </TabPanel>
-            <TabPanel value={this.state.tabIndex} index={2}></TabPanel>
+            <TabPanel value={this.state.tabIndex} index={2}>
+              <TitledSelect
+                title="Sound type"
+                value={this.props.soundType}
+                onChange={this.setSoundType}
+                options={SOUND_TYPE_OPTIONS}
+              />
+              <div>
+                <Typography
+                  align="left"
+                  variant="subtitle1"
+                  color="textSecondary"
+                >
+                  Volume
+                </Typography>
+                <div className="col-slider">
+                  <Slider
+                    defaultValue={this.state.settings.soundVolume}
+                    aria-labelledby="discrete-slider"
+                    valueLabelDisplay="auto"
+                    min={0}
+                    step={1}
+                    max={100}
+                    onChangeCommitted={this.setVolume}
+                  />
+                </div>
+              </div>
+            </TabPanel>
           </SideDrawer>
         </div>
       </div>

src/AppWithSound.tsx

@@ -1,11 +1,28 @@
 import React from 'react';
 import App from './App';
 import { useSoundPlayer } from './useSoundPlayer';
+import { NonCustomOscillatorType } from 'tone/build/esm/source/oscillator/OscillatorInterface';
+import { gainToDb } from 'tone';
+import { DEFAULT_SOUND_TYPE, DEFAULT_SOUND_VOLUME } from './constants';
 
 export function AppWithSound(): React.ReactElement {
+  const [soundType, setSoundType] =
+    React.useState<NonCustomOscillatorType>(DEFAULT_SOUND_TYPE);
+
+  const [volume, setVolume] = React.useState(DEFAULT_SOUND_VOLUME);
+
   const { play, stop } = useSoundPlayer({
-    type: 'triangle',
+    type: soundType,
+    volume: gainToDb(volume / 100), // Convert volume percentage to decibels
   });
 
-  return <App playSound={play} stopSounds={stop} />;
+  return (
+    <App
+      playSound={play}
+      stopSounds={stop}
+      soundType={soundType}
+      setSoundType={setSoundType}
+      setVolume={setVolume}
+    />
+  );
 }

src/Colors.tsx

@@ -1,12 +1,6 @@
-import {
-  FormControl,
-  Typography,
-  Stack,
-  TextField,
-  MenuItem,
-  Grid2,
-} from '@mui/material';
+import { FormControl, Stack, TextField, Grid2 } from '@mui/material';
 import { ColorPreset } from './types';
+import { TitledSelect } from './TitledSelect';
 
 export function Colors(props: {
   colorPreset: ColorPreset;
@@ -36,30 +30,13 @@ export function Colors(props: {
   return (
     <div className="select-wrapper">
       <FormControl component="fieldset">
-        <Typography
-          align="left"
-          variant="subtitle1"
-          color="textSecondary"
-          gutterBottom
-        >
-          Colors
-        </Typography>
         <Stack direction="column" spacing={2} alignItems="left">
-          <TextField
+          <TitledSelect
+            title="Sort Algorithm"
             value={colorPreset}
-            label="Preset"
-            size="small"
-            select
             onChange={(e) => setColorPreset(e.target.value as ColorPreset)}
-          >
-            {Object.values(ColorPreset).map((v) => (
-              <MenuItem value={v} key={v}>
-                <Typography align="left" variant="body2" color="textSecondary">
-                  {v}
-                </Typography>
-              </MenuItem>
-            ))}
-          </TextField>
+            options={Object.values(ColorPreset)}
+          />
           {(colorPreset === ColorPreset.Custom ||
             colorPreset === ColorPreset.CustomGradient) && (
             <Grid2 container spacing={2}>

src/ResetPresetSelect.tsx

@@ -1,18 +1,22 @@
 import {
-  SelectChangeEvent,
   FormControl,
   Typography,
   Select,
   MenuItem,
+  SelectChangeEvent,
 } from '@mui/material';
-import { SortName } from './types';
-
-export function SortingAlgorithmSelect(props: {
-  chosenSortAlg: SortName;
-  chooseSortAlg: (event: SelectChangeEvent<SortName>) => void;
-}) {
-  const { chosenSortAlg, chooseSortAlg } = props;
 
+export const TitledSelect = ({
+  title,
+  value,
+  onChange,
+  options,
+}: {
+  title: string;
+  value: string;
+  onChange: (event: SelectChangeEvent<string>) => void;
+  options: string[];
+}) => {
   return (
     <div className="select-wrapper">
       <FormControl component="fieldset">
@@ -22,18 +26,18 @@ export function SortingAlgorithmSelect(props: {
           color="textSecondary"
           gutterBottom
         >
-          Sorting Algorithm
+          {title}
         </Typography>
-        <Select value={chosenSortAlg} onChange={chooseSortAlg} size="small">
-          {Object.values(SortName).map((v) => (
+        <Select value={value} onChange={onChange} size="small">
+          {options.map((v) => (
             <MenuItem value={v} key={v}>
               <Typography align="left" variant="body2" color="textSecondary">
-                {v}
+                {v.charAt(0).toUpperCase() + v.slice(1)}
               </Typography>
             </MenuItem>
           ))}
         </Select>
       </FormControl>
     </div>
   );
-}
+};

src/SortingAlgorithmSelect.tsx src/TitledSelect.tsxsrc/SortingAlgorithmSelect.tsx renamed to src/TitledSelect.tsx

@@ -1,3 +1,4 @@
+import { NonCustomOscillatorType } from 'tone/build/esm/source/oscillator/OscillatorInterface';
 import { AlgorithmOptions, ColorPreset, ResetPreset, SortName } from './types';
 
 export const INIT_SWAP_TIME = 1;
@@ -14,6 +15,15 @@ export const DEFAULT_ALGORITHM_OPTIONS: AlgorithmOptions = {
   base: 4,
   shrinkFactor: 1.3,
 };
+export const DEFAULT_SOUND_VOLUME = 50;
+export const DEFAULT_SOUND_TYPE = 'triangle';
+export const SOUND_TYPE_OPTIONS = [
+  'sine',
+  'square',
+  'triangle',
+  'sawtooth',
+] as NonCustomOscillatorType[];
+
 export const INIT_STATE = {
   isSorting: false,
   areSettingsOpen: false,
@@ -36,4 +46,6 @@ export const INIT_SETTINGS = {
   columnColor2: DEFAULT_COLUMN_COLOR_2,
   backgroundColor: DEFAULT_BACKGROUND_COLOR,
   highlightColor: DEFAULT_HIGHLIGHT_COLOR,
+  soundVolume: DEFAULT_SOUND_VOLUME,
+  soundType: DEFAULT_SOUND_TYPE,
 };