Merge pull request #1 from nezz0746/feat/fog-style-layer

feat: add fog style layer to map
nezz0746 · Nov 13, 2023 · d45c716 · d45c716
2 parents 3c22904 + 9d950e2
commit d45c716
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 207 deletions.
diff --git a/apps/web/components/Map/GeohashLayer.tsx b/apps/web/components/Map/GeohashLayer.tsx
@@ -11,7 +11,7 @@ const GeohashLayer = () => {
     type: "fill",
     paint: {
       "fill-color": "black",
-      "fill-opacity": 0.2,
+      "fill-opacity": 0.4,
       "fill-outline-color": "black",
     },
   };

diff --git a/apps/web/components/Map/Map.tsx b/apps/web/components/Map/Map.tsx
@@ -1,31 +1,36 @@
-import Map from "react-map-gl";
+import Map, { MapProvider } from "react-map-gl";
 import { commonLocations } from "@/services/constants";
 import GeohashLayer from "./GeohashLayer";
 import AccountMarker from "./AccountMarker";
+import ZoomEffects from "./ZoomEffects";
 
 const token = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;
 
 const AppMap = () => {
   return (
-    <Map
-      mapboxAccessToken={token}
-      projection={{ name: "globe" }}
-      initialViewState={commonLocations.paris}
-      style={{
-        width: "100%",
-        height: "100%",
-      }}
-      interactiveLayerIds={["data"]}
-      mapStyle="mapbox://styles/nezz0746/closnc6ke00qa01nz5uvf7yad"
-    >
-      <div className="bg-white flex flex-row gap-2 items-center p-2 absolute top-[6px] left-[6px] border">
-        <p className="font-display font-bold tracking-tight text-xl">
-          Ensemble
-        </p>
-      </div>
-      <AccountMarker />
-      <GeohashLayer />
-    </Map>
+    <MapProvider>
+      <Map
+        id="mainMap"
+        mapboxAccessToken={token}
+        projection={{ name: "globe" }}
+        initialViewState={commonLocations.paris}
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+        interactiveLayerIds={["data"]}
+        mapStyle="mapbox://styles/nezz0746/closnc6ke00qa01nz5uvf7yad"
+      >
+        <div className="bg-white flex flex-row gap-2 items-center p-2 absolute top-3 left-3 border">
+          <p className="font-display font-bold tracking-tight text-xl">
+            Ensemble
+          </p>
+        </div>
+        <AccountMarker />
+        <GeohashLayer />
+        <ZoomEffects />
+      </Map>
+    </MapProvider>
   );
 };
 

diff --git a/apps/web/components/Map/ZoomEffects.tsx b/apps/web/components/Map/ZoomEffects.tsx
@@ -0,0 +1,31 @@
+import { usePosition } from "@/hooks/usePosition";
+import { useEffect } from "react";
+import { useMap } from "react-map-gl";
+
+const ZoomEffects = () => {
+  const precisionToZoom: Record<number, number> = {
+    2: 4,
+    3: 7,
+    4: 9,
+    5: 12,
+    6: 14,
+  };
+
+  const {
+    position: { precision, latitude, longitude },
+  } = usePosition();
+  const { mainMap } = useMap();
+
+  useEffect(() => {
+    if (precision) {
+      mainMap?.flyTo({
+        center: [longitude, latitude],
+        zoom: precisionToZoom[precision],
+      });
+    }
+  }, [precision]);
+
+  return null;
+};
+
+export default ZoomEffects;
diff --git a/apps/web/components/SidePannel.tsx b/apps/web/components/SidePannel.tsx
@@ -1,47 +1,65 @@
 import { usePosition } from "@/hooks/usePosition";
 import ConnectButton from "./ConnectButton";
+import classNames from "classnames";
 
 const SidePannel = () => {
   const { position, setPrecision } = usePosition();
+
   return (
     <>
       <div>
         <p className="text-lg font-bold">
           <ConnectButton />
         </p>
       </div>
-      <div className="flex flex-col gap-4">
-        <div className="flex flex-row items-center justify-between font-display">
-          <p>Geohash</p>
-          <p>{position.geohash}</p>
-        </div>
-        <div className="font-display flex flex-row justify-between gap-4">
-          <p>Precision</p>
-          <div className="flex-grow ml-10">
-            <input
-              type="range"
-              min={2}
-              max={6}
-              value={position.precision}
-              onChange={(e) => {
-                setPrecision(parseInt(e.target.value));
-              }}
-              className="range range-xs"
-              step={1}
-            />
-            <div className="w-full flex justify-between text-xs px-2">
-              <span>2</span>
-              <span>3</span>
-              <span>4</span>
-              <span>5</span>
-              <span>6</span>
+      <div className="flex flex-col justify-between h-full pt-4">
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-row items-center justify-between font-display">
+            <p>Geohash</p>
+            <p>{position.geohash}</p>
+          </div>
+          <div className="font-display flex flex-row justify-between gap-4">
+            <p>Precision</p>
+            <div className="flex-grow ml-10">
+              <input
+                type="range"
+                min={2}
+                max={6}
+                value={position.precision}
+                onChange={(e) => {
+                  setPrecision(parseInt(e.target.value));
+                }}
+                className={classNames("range range-xs", {
+                  "range-success": position.precision < 5,
+                  "range-warning": position.precision >= 5,
+                })}
+                step={1}
+              />
+              <div className="w-full flex justify-between text-xs px-2">
+                <span>2</span>
+                <span>3</span>
+                <span>4</span>
+                <span>5</span>
+                <span>6</span>
+              </div>
             </div>
           </div>
         </div>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-row justify-center items-center text-center">
+            {position.precision >= 5 && (
+              <p className="text-sm text-warning font-display">
+                Warning: you&apos;re about to mint your location with high
+                precision. Make sure you use a public account you&apos;re
+                confortable sharing precise location with.
+              </p>
+            )}
+          </div>
 
-        <button className="btn btn-outline cursor-not-allowed w-full rounded-none">
-          <p className="font-display">Move</p>
-        </button>
+          <button className="btn btn-outline cursor-not-allowed w-full rounded-none">
+            <p className="font-display">Move</p>
+          </button>
+        </div>
       </div>
     </>
   );

diff --git a/apps/web/hooks/usePosition.ts b/apps/web/hooks/usePosition.ts
@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import { produce } from "immer";
-import { commonLocations } from "@/services/constants";
-import { Feature, Polygon, bboxPolygon } from "@turf/turf";
+import { commonLocations, globeFeature } from "@/services/constants";
+import { Feature, Polygon, bboxPolygon, difference } from "@turf/turf";
 import ngeohash from "ngeohash";
 
 export type Positon = {
@@ -26,7 +26,7 @@ export const usePosition = create<PositionStore>((set) => ({
   position: {
     latitude: commonLocations.paris.latitude,
     longitude: commonLocations.paris.longitude,
-    precision: 6,
+    precision: 2,
     geohash: "",
     feature: {
       type: "Feature",
@@ -47,7 +47,10 @@ export const usePosition = create<PositionStore>((set) => ({
         );
         state.position.geohash = new_hash;
         state.position.precision = precision;
-        state.position.feature = bboxPolygon(ngeohash.decode_bbox(new_hash));
+        state.position.feature = difference(
+          globeFeature,
+          bboxPolygon(ngeohash.decode_bbox(new_hash))
+        );
       })
     );
   },
@@ -62,7 +65,10 @@ export const usePosition = create<PositionStore>((set) => ({
         state.position.latitude = latitude;
         state.position.longitude = longitude;
         state.position.geohash = new_hash;
-        state.position.feature = bboxPolygon(ngeohash.decode_bbox(new_hash));
+        state.position.feature = difference(
+          globeFeature,
+          bboxPolygon(ngeohash.decode_bbox(new_hash))
+        );
       })
     );
   },

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -13,7 +13,6 @@
     "@rainbow-me/rainbowkit": "^1.1.3",
     "@turf/turf": "^6.5.0",
     "classnames": "^2.3.1",
-    "daisyui": "^2.15.2",
     "ethers": "^5.6.8",
     "immer": "^10.0.3",
     "mapbox-gl": "^2.15.0",
@@ -36,6 +35,7 @@
     "@typescript-eslint/parser": "^6.10.0",
     "@wagmi/cli": "^1.5.2",
     "autoprefixer": "^10.4.7",
+    "daisyui": "^4.0.1",
     "eslint": "8.17.0",
     "eslint-config-next": "12.1.6",
     "json-loader": "^0.5.7",

diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
@@ -12,7 +12,7 @@ const Home: NextPage = () => {
       <div className="h-full flex-grow overflow-hidden border shadow-lg">
         <AppMap />
       </div>
-      <div className="h-full flex flex-col justify-between w-96 p-2 overflow-hidden border shadow-lg">
+      <div className="h-full flex flex-col justify-between w-96 p-4 overflow-hidden border shadow-lg">
         <SidePannel />
       </div>
     </div>

diff --git a/apps/web/services/constants.ts b/apps/web/services/constants.ts
@@ -1,17 +1,36 @@
+import { Feature, Polygon } from "@turf/turf";
+
 export const commonLocations = {
   toulouse: {
     longitude: 1.444209,
     latitude: 43.604652,
-    zoom: 12,
+    zoom: 0,
   },
   paris: {
     longitude: 2.3488,
     latitude: 48.8534,
-    zoom: 12,
+    zoom: 2,
   },
   lille: {
     longitude: 3.057256,
     latitude: 50.631813,
-    zoom: 12,
+    zoom: 0,
+  },
+};
+
+export const globeFeature: Feature<Polygon> = {
+  type: "Feature",
+  properties: {},
+  geometry: {
+    type: "Polygon",
+    coordinates: [
+      [
+        [-180.0, 90.0],
+        [180.0, 90.0],
+        [180.0, -90.0],
+        [-180.0, -90.0],
+        [-180.0, 90.0],
+      ],
+    ],
   },
 };