About pop-up

src/App.tsx

@@ -4,16 +4,32 @@ import { MapBox } from './components/Map';
 import { Crosshair } from './components/Crosshair';
 import { LngLatLike } from 'mapbox-gl';
 import { MainMenu } from './components/Menus';
+import { About } from './components/About';
 
 export const App = () => {
 
   const [lnglat, setLngLat] = useState<LngLatLike>({lng: -70.9, lat: 42.35});
   const [aqi, setAQI] = useState();
 
+  const [userHasInteracted, setUserHasInteracted] = useState(false);
+  const [toggleAbout, setToggleAbout] = useState(true);
+
   return (
     <>
       <Header />
-      <MapBox lnglat={lnglat} setLngLat={setLngLat} setAQI={setAQI}/>
+      {toggleAbout && (
+        <About 
+          toggleAbout
+          setToggleAbout={setToggleAbout}
+          setUserHasInteracted={setUserHasInteracted}  
+        />
+      )}
+      <MapBox 
+        lnglat={lnglat} 
+        setLngLat={setLngLat} 
+        setAQI={setAQI} 
+        userHasInteracted={userHasInteracted}
+      />
       <MainMenu lnglat={lnglat} aqi={aqi} />
       <Crosshair />
     </>

src/apis/aqi.tsx

@@ -20,10 +20,10 @@ export async function getAQIValues(lnglat) {
     } else {
         let data = resp.response.data
         let aqiValues = {}
-        aqiValues["o3"] = data.iaqi.h.v
-        aqiValues["humidity"] = data.iaqi.h.v
-        aqiValues["co"] = data.iaqi.co.v
-        aqiValues["pm25"] = data.iaqi.pm25.v
+        aqiValues["o3"] = data.iaqi.so3?.v
+        aqiValues["humidity"] = data.iaqi.h?.v
+        aqiValues["co"] = data.iaqi.co?.v
+        aqiValues["pm25"] = data.iaqi.pm25?.v
         return aqiValues;
     }
 }

src/components/About/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { BasicButton } from "../Buttons";
+import "./style.css";
+
+export const About = ({ toggleAbout, setToggleAbout, setUserHasInteracted }) => {
+
+    const handleClick = () => {
+        setUserHasInteracted(true)
+        setToggleAbout((current) =>(!current))
+    }
+
+    return (
+        <div className="module">
+            <p>Air quality you can hear.</p>
+            <p>Sound Vane leverages utilities from the World Air Quality Index Project. To learn more about the project, make sure to visit their site here: https://aqicn.org/</p>
+            <BasicButton onClick={handleClick} text="Listen" />
+        </div>
+    )
+}

src/components/About/style.css

@@ -0,0 +1,15 @@
+.module {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    z-index: 9;
+    width:100%;
+    max-width: 500px;
+    padding: 1.5rem;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background-color: hsla(0 , 0%, 100% ,0.7);
+    border-radius: 10px;
+    text-align: center;
+}

src/components/Crosshair/index.tsx

@@ -2,6 +2,5 @@ import React from "react";
 import "./style.css";
 
 export const Crosshair = () => {
-    return <div className="crosshair">
-    </div>
+    return <div className="crosshair"></div>
 }

src/components/Crosshair/style.css

@@ -6,7 +6,15 @@
     width: 70px;
     height: 70px;
     border-radius: 100%;
-    border: 3px solid var(--purple);
+    border: 3px dashed var(--purple);
     z-index: 2;
     pointer-events: none;
+    animation:spin 30s linear infinite; 
 }
+
+@keyframes spin { 
+    100% { 
+        -webkit-transform: translate(-50%, -50%) rotateZ(360deg); 
+        transform:translate(-50%, -50%) rotateZ(360deg); 
+    } 
+}

src/components/Map/index.tsx

@@ -5,9 +5,9 @@ import { getAQIValues } from '../../apis/aqi';
 
 mapboxgl.accessToken = process.env.REACT_APP_MAPBOX;
 
-export const MapBox = ({ lnglat, setLngLat, setAQI }) => {
+export const MapBox = ({ lnglat, setLngLat, setAQI, userHasInteracted }) => {
     const mapContainer = useRef(null);
-    const [zoom, setZoom] = useState(9);
+    const [zoom, setZoom] = useState(4);
 
     useEffect(() => {
         const map = new mapboxgl.Map({
@@ -32,9 +32,9 @@ export const MapBox = ({ lnglat, setLngLat, setAQI }) => {
 
     useEffect(() => {
         getAQIValues(lnglat).then((result) => {
-            setAQI(result)
+            userHasInteracted && setAQI(result)
         })
-    }, [lnglat, setAQI]);
+    }, [lnglat, setAQI, userHasInteracted]);
 
     return (
         <div>

src/components/Player/index.tsx

@@ -17,7 +17,7 @@ export const Player = ({lnglat, aqi}) => {
             <>
                 <SheetMusic RelativeAQI={getRelativeAQI(aqi)} />
                 <MetricsAQI aqi={aqi} />
-                <Synth RelativeAQI={getRelativeAQI(aqi)} />
+                <Synth aqi={aqi} RelativeAQI={getRelativeAQI(aqi)} />
             </>
         }
     </div>

src/components/Synth/index.tsx

@@ -1,19 +1,10 @@
 import { useState, useEffect } from "react";
-// import * as Tone from "tone";
-// import { PlayButton } from "../Buttons";
 import "./style.css";
 
-export const Synth = ({RelativeAQI}) => {
+export const Synth = ({aqi, RelativeAQI}) => {
 
     const [isPlaying, setIsPlaying] = useState(false)
 
-    const baseNotes = ["c", "e", "g", "b"];
-    const accidentals = Object.values(RelativeAQI)
-
-    const notes = baseNotes.map((note, index) => (
-      note + "-" + accidentals[index]
-    ))
-
     const playNote = (note) => {
 
         let player = document.createElement('audio');
@@ -25,8 +16,15 @@ export const Synth = ({RelativeAQI}) => {
         })
     }
 
-    const playSequence = () => {
+    const playSequence = (RelativeAQI) => {
+
+      const baseNotes = ["c", "e", "g", "b"];
+      const accidentals = Object.values(RelativeAQI)
 
+      const notes = baseNotes.map((note, index) => (
+        note + "-" + accidentals[index]
+      ))
+
       let i = 0;                
 
       function loop() {         
@@ -45,13 +43,13 @@ export const Synth = ({RelativeAQI}) => {
     }
 
     useEffect(() => {
-
+      
       if (!isPlaying) {
         setIsPlaying(true)
-        playSequence()
+        playSequence(RelativeAQI)
       }
 
-    },[RelativeAQI]);
+    },[aqi]);
 
   return (
     <>