Add some instruction and pick better cities

ryanisaacg · Aug 15, 2024 · c573e98 · c573e98
1 parent 30833d3
commit c573e98
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 12 deletions.
diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
@@ -38,30 +38,53 @@ function SetCoords({
         alignItems: "center",
       }}
     >
+      <h1> Concerto </h1>
+      <p>
+        Play music in a shared world. Hear other people's note as they reach
+        your location.
+        <br />
+        Use your location, input coordinates, or pick a city to play.
+        <br />
+        Mobile not well supported. Best experienced on desktop.
+      </p>
       <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
         <div style={{ display: "flex", flexDirection: "column" }}>
-          <h3> Your Location </h3>
           <LocationSelector setLocation={setCoords} />
         </div>
         <div style={{ display: "flex", flexDirection: "column" }}>
-          <h3> Pick an arbitrary city </h3>
+          <h3 style={{ textAlign: "center" }}> Pick an arbitrary city </h3>
+          <button onClick={() => setCoords({ lat: 33.89, long: 35.5 })}>
+            Beruit
+          </button>
           <button onClick={() => setCoords({ lat: 40.69, long: -73.98 })}>
             Brooklyn
           </button>
-          <button onClick={() => setCoords({ lat: 40.7, long: -74.04 })}>
-            Jersey City
+          <button onClick={() => setCoords({ lat: 6.52, long: 3.37 })}>
+            Lagos
           </button>
-          <button onClick={() => setCoords({ lat: 48.86, long: 2.35 })}>
-            Paris
+          <button onClick={() => setCoords({ lat: -37.81, long: 144.96 })}>
+            Melbourne
+          </button>
+          <button onClick={() => setCoords({ lat: 19.43, long: -99.13 })}>
+            Mexico City
+          </button>
+          <button onClick={() => setCoords({ lat: -1.2, long: 36.82 })}>
+            Nairobi
           </button>
           <button onClick={() => setCoords({ lat: 28.7, long: 77.1 })}>
             New Delhi
           </button>
-          <button onClick={() => setCoords({ lat: -37.81, long: 144.96 })}>
-            Melbourne
+          <button onClick={() => setCoords({ lat: 48.86, long: 2.35 })}>
+            Paris
+          </button>
+          <button onClick={() => setCoords({ lat: -23.55, long: -46.63 })}>
+            São Paulo
+          </button>
+          <button onClick={() => setCoords({ lat: -33.44, long: -70.66 })}>
+            Santiago
           </button>
-          <button onClick={() => setCoords({ lat: 0, long: 0 })}>
-            Null Island
+          <button onClick={() => setCoords({ lat: 35.67, long: 139.65 })}>
+            Tokyo
           </button>
         </div>
       </div>

diff --git a/frontend/src/location.tsx b/frontend/src/location.tsx
@@ -40,11 +40,12 @@ export function LocationSelector({ setLocation }: LocationSelectorProps) {
 
   return (
     <>
+      <h3 style={{ textAlign: "center" }}> Use Your Location </h3>
       {selectionState === null ? (
         <>
           <button onClick={tryGeolocation}> Use my location </button>
-          Your location will be transmitted alongside any notes you send. It
-          will not be stored anywhere, and is entirely anonymous.
+          Your location will be transmitted anonymously alongside any notes you
+          send. It will not be stored or saved anywhere.
         </>
       ) : selectionState === "waiting" ? (
         <p> Waiting for geolocation... </p>
@@ -66,6 +67,7 @@ function LatLongSelector({ setLocation }: LocationSelectorProps) {
 
   return (
     <>
+      <h3 style={{ textAlign: "center" }}> Enter Coordinates </h3>
       <label for="lat"> Latitude </label>
       <input
         value={lat}