From 5943ad50105977e5ea1bc48f47c243050d4bc5e1 Mon Sep 17 00:00:00 2001 From: jonlucasoffice <93656097+jonlucasoffice@users.noreply.github.com> Date: Fri, 27 Jan 2023 11:19:59 +0100 Subject: [PATCH] About pop-up --- src/App.tsx | 18 +++++++++++++++++- src/apis/aqi.tsx | 8 ++++---- src/components/About/index.tsx | 19 +++++++++++++++++++ src/components/About/style.css | 15 +++++++++++++++ src/components/Crosshair/index.tsx | 3 +-- src/components/Crosshair/style.css | 10 +++++++++- src/components/Map/index.tsx | 8 ++++---- src/components/Player/index.tsx | 2 +- src/components/Synth/index.tsx | 26 ++++++++++++-------------- 9 files changed, 82 insertions(+), 27 deletions(-) create mode 100644 src/components/About/index.tsx create mode 100644 src/components/About/style.css diff --git a/src/App.tsx b/src/App.tsx index 03c5c7f..9cf1b2f 100644 --- a/src/App.tsx +++ b/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({lng: -70.9, lat: 42.35}); const [aqi, setAQI] = useState(); + const [userHasInteracted, setUserHasInteracted] = useState(false); + const [toggleAbout, setToggleAbout] = useState(true); + return ( <>
- + {toggleAbout && ( + + )} + diff --git a/src/apis/aqi.tsx b/src/apis/aqi.tsx index bccf511..367c80d 100644 --- a/src/apis/aqi.tsx +++ b/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; } } \ No newline at end of file diff --git a/src/components/About/index.tsx b/src/components/About/index.tsx new file mode 100644 index 0000000..aa9b5a6 --- /dev/null +++ b/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 ( +
+

Air quality you can hear.

+

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/

+ +
+ ) +} \ No newline at end of file diff --git a/src/components/About/style.css b/src/components/About/style.css new file mode 100644 index 0000000..b16812b --- /dev/null +++ b/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; +} diff --git a/src/components/Crosshair/index.tsx b/src/components/Crosshair/index.tsx index ca88e47..31798be 100644 --- a/src/components/Crosshair/index.tsx +++ b/src/components/Crosshair/index.tsx @@ -2,6 +2,5 @@ import React from "react"; import "./style.css"; export const Crosshair = () => { - return
-
+ return
} \ No newline at end of file diff --git a/src/components/Crosshair/style.css b/src/components/Crosshair/style.css index 7624f18..c3aef42 100644 --- a/src/components/Crosshair/style.css +++ b/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); + } +} \ No newline at end of file diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx index 562d464..717b3a0 100644 --- a/src/components/Map/index.tsx +++ b/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 (
diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx index 27b74cd..75ba634 100644 --- a/src/components/Player/index.tsx +++ b/src/components/Player/index.tsx @@ -17,7 +17,7 @@ export const Player = ({lnglat, aqi}) => { <> - + }
diff --git a/src/components/Synth/index.tsx b/src/components/Synth/index.tsx index 5e726d1..139ad53 100644 --- a/src/components/Synth/index.tsx +++ b/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 ( <>