Replaced synth with mp3s

src/App.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Header } from './components/Header';
 import { MapBox } from './components/Map';
 import { Crosshair } from './components/Crosshair';
 import { LngLatLike } from 'mapbox-gl';
@@ -11,6 +12,7 @@ export const App = () => {
 
   return (
     <>
+      <Header />
       <MapBox lnglat={lnglat} setLngLat={setLngLat} setAQI={setAQI}/>
       <MainMenu lnglat={lnglat} aqi={aqi} />
       <Crosshair />

src/components/Header/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import "./style.css";
+
+export const Header = () => {
+
+    return (
+        <header>
+            <div className="logo">
+                <img src="/logo.svg" alt="" />
+            </div>
+        </header>
+    )
+}

src/components/Header/style.css

@@ -0,0 +1,13 @@
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 5;
+    padding: 20px;
+}
+
+header .logo {
+    width: 170px;
+    margin: 0 auto
+}

src/components/Menus/index.tsx

@@ -43,7 +43,7 @@ export const MainMenu = (props: any) => {
     }
 
     return <div className={isExpanded ? "main-menu main-menu-expand" : "main-menu main-menu-contract"}>
-        <NavBar setIsExpanded={setIsExpanded} isExpanded={isExpanded} updateSelectedPage={updateSelectedPage}/>
+        {/* <NavBar setIsExpanded={setIsExpanded} isExpanded={isExpanded} updateSelectedPage={updateSelectedPage}/> */}
         {isExpanded ? getSelectedPage() : <Player lnglat={props.lnglat} aqi={props.aqi} />}
     </div>
 }

src/components/MetricsAQI/index.tsx

@@ -7,6 +7,6 @@ export const MetricsAQI = (props: any) => {
 
     return <div>
         {Object.entries(props.aqi).map((item, index) => {
-            return <RangeSlider name={item[0]} value={item[1]} />
+            return <RangeSlider key={index} name={item[0]} value={item[1]} />
         })}</div>
 }

src/components/Player/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { getRelativeAQI } from "../../utils/aqi";
 import { SheetMusic } from '../SheetMusic';
 import { Synth } from '../Synth';
+import { MetricsAQI } from '../MetricsAQI';
 import "./style.css";
 
 export const Player = ({lnglat, aqi}) => {
@@ -15,25 +16,8 @@ export const Player = ({lnglat, aqi}) => {
         {aqi && 
             <>
                 <SheetMusic RelativeAQI={getRelativeAQI(aqi)} />
+                <MetricsAQI aqi={aqi} />
                 <Synth RelativeAQI={getRelativeAQI(aqi)} />
-                <div className="flex key">
-                    <div className="keyItem">
-                        <div>CO</div>
-                        <div>{aqi.co}</div>
-                    </div>
-                    <div className="keyItem">
-                        <div>HUMIDITY</div>
-                        <div>{aqi.humidity} hPa</div>
-                    </div>
-                    <div className="keyItem">
-                        <div>O3</div>
-                        <div>{aqi.o3}</div>
-                    </div>
-                    <div className="keyItem">
-                        <div>PARTICLES</div>
-                        <div>{aqi.pm25} PM (2.5)</div>
-                    </div>
-                </div>
             </>
         }
     </div>

src/components/SheetMusic/index.tsx

@@ -17,11 +17,11 @@ export const SheetMusic = ({ RelativeAQI }) => {
     const renderer = new Renderer('output', Renderer.Backends.SVG);
 
     // Configure the rendering context.
-    renderer.resize(350, 200);
+    renderer.resize(350, 150);
     const context = renderer.getContext();
 
     // Create a stave of width 400 at position 10, 40.
-    const stave = new Stave(10, 40, 450);
+    const stave = new Stave(10, 10, 450);
 
     // Add a clef and time signature.
     stave.addClef('treble')
@@ -31,19 +31,33 @@ export const SheetMusic = ({ RelativeAQI }) => {
 
     const accidentals = Object.values(RelativeAQI)
 
+    const formatAccidentals = accidentals.map((accidental) => {
+
+      switch(accidental) {
+        case "SHARP":
+          return "#"
+          break;
+        case "FLAT":
+          return "b"
+          break;
+        default:
+          return "n"
+      }
+    });
+
     // Create the notes
     const notes = [
       // A quarter-note C.
-      new StaveNote({ keys: ["c/4"], duration: "q" }).addModifier(new Accidental(`${accidentals[0]}`)),
+      new StaveNote({ keys: ["c/4"], duration: "q" }).addModifier(new Accidental(formatAccidentals[0])),
 
-      // A quarter-note D.
-      new StaveNote({ keys: ["d/4"], duration: "q" }).addModifier(new Accidental(`${accidentals[1]}`)),
+      // A quarter-note E.
+      new StaveNote({ keys: ["e/4"], duration: "q" }).addModifier(new Accidental(formatAccidentals[1])),
 
-       // A quarter-note D.
-      new StaveNote({ keys: ["e/4"], duration: "q" }).addModifier(new Accidental(`${accidentals[2]}`)),
+       // A quarter-note G.
+      new StaveNote({ keys: ["g/4"], duration: "q" }).addModifier(new Accidental(formatAccidentals[2])),
 
-      // A quarter-note E.
-      new StaveNote({ keys: ["f/4"], duration: "q" }).addModifier(new Accidental(`${accidentals[3]}`)),
+      // A quarter-note B.
+      new StaveNote({ keys: ["b/4"], duration: "q" }).addModifier(new Accidental(formatAccidentals[3])),
 
     ];
 

src/components/Synth/index.tsx

@@ -1,85 +1,61 @@
 import { useState, useEffect } from "react";
-import * as Tone from "tone";
+// import * as Tone from "tone";
 // import { PlayButton } from "../Buttons";
 import "./style.css";
 
 export const Synth = ({RelativeAQI}) => {
 
     const [isPlaying, setIsPlaying] = useState(false)
 
-    const reverb = new Tone.Reverb().toDestination();
-    const synth = new Tone.PolySynth(Tone.FMSynth).chain(reverb).toDestination();
-    const chord = ["C", "D", "E", "F"];
+    const baseNotes = ["c", "e", "g", "b"];
+    const accidentals = Object.values(RelativeAQI)
 
-    const AQIvalues = Object.values(RelativeAQI);
-
-    const modifiers = AQIvalues.map(PitchToNotation)
-
-    function PitchToNotation(num) {
-      switch (num) {
-        case "#": return "#4"
-        case "b": return "b4"
-        default: return "4"
-      }
+    const notes = baseNotes.map((note, index) => (
+      note + "-" + accidentals[index]
+    ))
+
+    const playNote = (note) => {
+
+        let player = document.createElement('audio');
+        player.controls = false;
+        player.src = `audio/${note}.mp3`;
+        player.play()
+        player.addEventListener('ended',function(){
+          player.remove()
+        })
     }
 
-    const newChord = chord.map(myCalc)
-
-    function myCalc(num, index) {
-      return num + modifiers[index] ;
-    }
+    const playSequence = () => {
 
-    let index = 0;
+      let i = 0;                
 
-    synth.set({
-      "harmonicity": 0,
-      "modulationIndex": 1,
-      "oscillator" : {
-          "type": "sine"
-      },
-      "envelope": {
-          "attack": 0.007,
-          "decay": 1,
-          "sustain": 0.5,
-          "release": 0.007
+      function loop() {         
+        setTimeout(function() {   
+          playNote(notes[i])
+          i++;                    
+          if (i < notes.length) {           
+            loop();             
+          } else {
+            setIsPlaying(false)
+          }                       
+        }, 1000)
       }
-    });
 
-    const synthPart = new Tone.Sequence(
-      function(time, note) {
-        index++;
-        if (index > newChord.length){
-          synthPart.stop();
-          synth.triggerAttackRelease(newChord, "1n", time, 0.75);
-        } else {
-          synth.triggerAttackRelease(note, "2n", time, 1);
-        }
-      },
-      newChord,
-      "2n"
-    );
-
-
+      loop();   
+    }
+
     useEffect(() => {
 
       if (!isPlaying) {
         setIsPlaying(true)
-        synthPart.start();
-        Tone.Transport.start();
-
-        setTimeout(() => {
-          setIsPlaying(false)
-        }, 5000);
+        playSequence()
       }
 
     },[RelativeAQI]);
 
-
-
   return (
     <>
-    {/* <button className="button" onClick={playSynth}>click me</button> */}
-    {/* <PlayButton onClick={playSynth} text="click me" /> */}
+      <div id="audio"></div>
     </>
   );
 

src/constants/aqi.tsx

@@ -1,8 +1,8 @@
 
 /* Pitch */
-export const FLAT="b"
-export const SHARP="#"
-export const NATURAL="n"
+export const FLAT="FLAT"
+export const SHARP="SHARP"
+export const NATURAL="NATURAL"
 
 /* AQIs */
 export const HUMIDITY="humidity"