From 5de3797797b55ef048677138df04db67cf0de696 Mon Sep 17 00:00:00 2001
From: log101 <ffrknerdm@gmail.com>
Date: Tue, 16 Jan 2024 17:57:13 +0300
Subject: [PATCH] feat: unlock content based on location

---
 prettierrc.json                  |  18 +++
 public/blue-dot.png              | Bin 0 -> 1065 bytes
 src/components/LockedContent.tsx |  81 +++++++++++++
 src/pages/index.astro            |  78 +++++-------
 src/pages/unlocked.astro         | 198 +++++++++++++++++++++++++++++++
 src/styles/locked-content.css    |  23 ++++
 tsconfig.json                    |   4 +-
 7 files changed, 348 insertions(+), 54 deletions(-)
 create mode 100644 prettierrc.json
 create mode 100644 public/blue-dot.png
 create mode 100644 src/components/LockedContent.tsx
 create mode 100644 src/pages/unlocked.astro
 create mode 100644 src/styles/locked-content.css

diff --git a/prettierrc.json b/prettierrc.json
new file mode 100644
index 0000000..38462e4
--- /dev/null
+++ b/prettierrc.json
@@ -0,0 +1,18 @@
+{
+  "endOfLine": "lf",
+  "printWidth": 120,
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "bracketSameLine": false,
+  "jsxSingleQuote": true,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false
+}
diff --git a/public/blue-dot.png b/public/blue-dot.png
new file mode 100644
index 0000000000000000000000000000000000000000..1856f480960e2326c04b022138b99f738f695dc9
GIT binary patch
literal 1065
zcmV+^1lIeBP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I0000WV@Og>004R=
z004l4008;_004mL004C`008P>0026e000+nl3&F}00009a7bBm000XT000XT0n*)m
z`~Uz0uSrBfR7gv;R!dJ4Q4~I{79SV|1!bc#MkQJ#YD|=fVWA01N;}g|3us*smnLA`
z8zd$YO!PlsGzK&Q`j~1YDY!7W@Ud{Ch;I^MVHBazcBbPw7b>)!I~^Y0WHP<CckXw-
z^Z3rSz*2@QS_IZVd%$8V1&dk;7FYu*>nwow6IAOM93K7(?d_?h9LeA7?b!lCpawh<
zH@L&+L6jTu-H`Fnnh<K5TZ`0!5Z;dmT9#*k_iX`qLdU@!x|jo$4V*nEBgCK+ngS(D
z11FaG4ma~ZdBPJuW)9pD*oAKMtqL$1N8qmDDPwRJ&s79Xdxhmdph_S7th{d3Sn7qr
zgK_twH*<z4pD+bX9;xmXz<$pG`?~7byZVt}+Eb3e#szFwZ&BXtMZnF-q@(x4&5<8d
z!^xx?*Ki~iHIDNaxZY9XV`XKWAHKlR1z<_8$;Wo@<!JLvT$v;=-k3?KlLuR(&4y=r
zLVjq|taIR=5Q#&kD5U4epd1g2C)Ftey#H)WtGF_x*&1XG>VsMVzALW|v2_}_Z@L_f
z<T9s36N421B!i?#9AF!|FU|DE!x01vXjq%M53XPDe$T*X63Qff$0g$oodFQh=Xx?o
zh9KKcj9r>37c^}Mg5Mqd&cN>kM{jXi3t<O<J6OxL472sqc<dz|REh4@Wtzp_-a5p9
zKTk}*X4$UiNda{q{Vj2Uu~ZZ_m7s$Pd>B(b7iX=l^~wxbQBp}(YI?v@#EXnMNk!{e
zr|Ar)L^1<R;rRCr)w#Zy_=vI7h%wfwLI+{8m;z2SR#jEuG8Sct7@y=O7slx0c<dDc
zA2J)`mO)1N%S6l|#vvD$Q)Kr-6VGz{|H^8*EI?bE72VCPx%J*i6Dbn0pgJ|G<7*Gz
zF}Aa~pT6UZQe?hU8I=^WCK)6}qC=@p53~+yHq2f!g0kI?Vd#o}W1#Vb5@WK-(`-?`
z0K(I4bCM}V%DL{I&&uu11O8ZC`SmYlb$*~?{VuyS;5XLl@VU&+C}6;iN(&hjV@PiI
zjdqeaP*-C0s;1&Ne?#lVl8NqA*He}WEXk$Z>|SgTxv&ZqX>mWMdA@eYWSKNtZ_vez
zr`u*Ocg7yW5;7V>pgLc?^Y!kW|Al@Z_@5N!zimo*F{3-uN?B5wQto)8oAQIEceoz!
zTrsdmK5ZUw@lL6G133GRAbY>**i)U7F4Xt$SRQD`SDFPHBX%GL)WqqkB!;~B_OZ6g
jN)cs{LL@!kY6kExl|%Q~*0B<x00000NkvXXu0mjfhd<$u

literal 0
HcmV?d00001

diff --git a/src/components/LockedContent.tsx b/src/components/LockedContent.tsx
new file mode 100644
index 0000000..32818b8
--- /dev/null
+++ b/src/components/LockedContent.tsx
@@ -0,0 +1,81 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import distance from "@/utils/distance";
+
+import { LockClosedIcon, LockOpen1Icon } from "@radix-ui/react-icons";
+import { useEffect, useState } from "react";
+
+import "../styles/locked-content.css";
+
+const LocationButton = () => {
+  const [isLocked, setIsLocked] = useState(true);
+
+  useEffect(() => {
+    setInterval(
+      () =>
+        navigator.geolocation.getCurrentPosition(
+          (position: GeolocationPosition) => {
+            const pos = {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude,
+            };
+
+            const totalDistanceInKM = distance(
+              pos.lat,
+              pos.lng,
+              pos.lat,
+              pos.lng
+            ).toFixed(0);
+
+            if (totalDistanceInKM === "0") {
+              setIsLocked(false);
+            }
+          }
+        ),
+      3000
+    );
+  }, []);
+
+  if (isLocked) {
+    return (
+      <div className="module w-full h-[450px] p-4">
+        <div className="module-inside flex flex-col justify-center items-center gap-2">
+          <div>
+            <Button size={"lg"}>
+              <LockClosedIcon className="mr-2 h-4 w-4" /> İçerik Kilitli
+            </Button>
+          </div>
+
+          <Card className="p-2">
+            <CardContent className="pb-0 text-center">
+              İçeriği görmek için konuma gitmelisin!
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="module w-full h-[450px] p-4">
+        <div className="module-inside flex flex-col justify-center items-center gap-2">
+          <div>
+            <Button size={"lg"} asChild>
+              <a href="/unlocked">
+                <LockOpen1Icon className="mr-2 h-4 w-4" />
+                İçeriğin Kilidi Açıldı
+              </a>
+            </Button>
+          </div>
+
+          <Card className="p-2">
+            <CardContent className="pb-0 text-center">
+              İçeriği görmek için butona bas!
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default LocationButton;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9df5626..9232e47 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,9 +11,9 @@ import {
 } from '@/components/ui/card';
 
 import { CalendarIcon } from '@radix-ui/react-icons';
-import { LockClosedIcon } from '@radix-ui/react-icons';
 
 import '../styles/locked-page.css';
+import LocationButton from '@/components/LockedContent';
 ---
 
 <Layout>
@@ -36,23 +36,10 @@ import '../styles/locked-page.css';
 
     <div id="map" class="w-full h-[450px]"></div>
 
-    <div class="module w-full h-[450px] p-4">
-      <div
-        class="module-inside flex flex-col justify-center items-center gap-2"
-      >
-        <Button>
-          <LockClosedIcon className="mr-2 h-4 w-4" />İçerik Kilitli
-        </Button>
-        <Card className="p-2">
-          <CardContent className="pb-0 text-center">
-            İçeriği görmek için konuma gitmelisin!
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-
-    <Button className="w-full">Paylaş</Button>
+    <LocationButton client:load />
   </main>
+
+  <Button className="w-full">Paylaş</Button>
 </Layout>
 
 <script>
@@ -63,9 +50,26 @@ import '../styles/locked-page.css';
     const { Map } = (await google.maps.importLibrary(
       'maps'
     )) as google.maps.MapsLibrary;
+
+    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
+      'marker'
+    )) as google.maps.MarkerLibrary;
+
     map = new Map(document.getElementById('map') as HTMLElement, {
       center: { lat: -34.397, lng: 150.644 },
       zoom: 8,
+      mapId: 'DEMO_MAP_ID',
+      mapTypeControl: false,
+    });
+
+    const currentLocationIcon = document.createElement('img');
+    currentLocationIcon.src = '/blue-dot.png';
+
+    const currentLocationMarkerView = new AdvancedMarkerElement({
+      map,
+      position: { lat: 37.434, lng: -122.082 },
+      content: currentLocationIcon,
+      title: 'Current Location',
     });
 
     infoWindow = new google.maps.InfoWindow();
@@ -98,17 +102,17 @@ import '../styles/locked-page.css';
               pos.lng,
               mapPos?.lat(),
               mapPos?.lng()
-            );
+            ).toFixed(0);
 
-            locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM.toFixed(
-              0
-            )} km`;
+            currentLocationMarkerView.position = pos;
+
+            locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM} km`;
           },
           () => {
             handleLocationError(true, infoWindow, map.getCenter()!);
           }
         ),
-      5000
+      3000
     );
 
     locationButton.addEventListener('click', () => {
@@ -121,10 +125,8 @@ import '../styles/locked-page.css';
               lng: position.coords.longitude,
             };
 
-            // infoWindow.setPosition(pos);
-            // infoWindow.setContent('Location found.');
-            // infoWindow.open(map);
             map.setCenter(pos);
+            map.setZoom(12);
           },
           () => {
             handleLocationError(true, infoWindow, map.getCenter()!);
@@ -153,29 +155,3 @@ import '../styles/locked-page.css';
 
   initMap();
 </script>
-
-<style>
-  .module {
-    display: grid;
-    place-items: center;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .module::before {
-    content: '';
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background-image: url('/sample-selfie.webp');
-    background-position: center;
-    background-repeat: no-repeat;
-    filter: blur(20px);
-  }
-
-  .module-inside {
-    position: relative;
-  }
-</style>
diff --git a/src/pages/unlocked.astro b/src/pages/unlocked.astro
new file mode 100644
index 0000000..da6a201
--- /dev/null
+++ b/src/pages/unlocked.astro
@@ -0,0 +1,198 @@
+---
+import '@/styles/globals.css';
+import Layout from '../layouts/Layout.astro';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+import { CalendarIcon } from '@radix-ui/react-icons';
+import { LockClosedIcon } from '@radix-ui/react-icons';
+
+import '../styles/locked-page.css';
+---
+
+<Layout>
+  <main class="flex flex-col gap-3 my-4 items-center">
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Ayşe</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p>
+          Senin için bir sürpriz hazırladım, ama önce aşağıdaki konuma gitmen
+          lazım 😘
+        </p>
+      </CardContent>
+      <CardFooter className="gap-2">
+        <CalendarIcon />
+        <p>5 saat önce</p>
+      </CardFooter>
+    </Card>
+
+    <div id="map" class="w-full h-[450px]"></div>
+
+    <div class="module w-full h-[450px] p-4">
+      <div
+        class="module-inside flex flex-col justify-center items-center gap-2"
+      >
+        <Button>
+          <LockClosedIcon className="mr-2 h-4 w-4" />İçerik Kilitli
+        </Button>
+        <Card className="p-2">
+          <CardContent className="pb-0 text-center">
+            İçeriği görmek için konuma gitmelisin!
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+
+    <Button className="w-full">Paylaş</Button>
+  </main>
+</Layout>
+
+<script>
+  import distance from '../utils/distance';
+
+  let map: google.maps.Map, infoWindow: google.maps.InfoWindow;
+  async function initMap(): Promise<void> {
+    const { Map } = (await google.maps.importLibrary(
+      'maps'
+    )) as google.maps.MapsLibrary;
+
+    const { AdvancedMarkerElement } = (await google.maps.importLibrary(
+      'marker'
+    )) as google.maps.MarkerLibrary;
+
+    map = new Map(document.getElementById('map') as HTMLElement, {
+      center: { lat: -34.397, lng: 150.644 },
+      zoom: 8,
+      mapId: 'DEMO_MAP_ID',
+      mapTypeControl: false,
+    });
+
+    const currentLocationIcon = document.createElement('img');
+    currentLocationIcon.src = '/blue-dot.png';
+
+    const currentLocationMarkerView = new AdvancedMarkerElement({
+      map,
+      position: { lat: 37.434, lng: -122.082 },
+      content: currentLocationIcon,
+      title: 'Current Location',
+    });
+
+    infoWindow = new google.maps.InfoWindow();
+
+    const locationButton = document.createElement('button');
+    const locationInfo = document.createElement('button');
+
+    locationButton.textContent = 'Konumuma Git';
+    locationInfo.textContent = 'Mesafe hesaplanıyor...';
+
+    locationButton.classList.add('custom-map-control-button');
+    locationInfo.classList.add('custom-map-control-button');
+
+    map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
+    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(locationInfo);
+
+    setInterval(
+      () =>
+        navigator.geolocation.getCurrentPosition(
+          (position: GeolocationPosition) => {
+            const pos = {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude,
+            };
+
+            const mapPos = map.getCenter();
+
+            const totalDistanceInKM = distance(
+              pos.lat,
+              pos.lng,
+              mapPos?.lat(),
+              mapPos?.lng()
+            ).toFixed(0);
+
+            if (totalDistanceInKM === '0') window.location.assign('/unlocked');
+
+            currentLocationMarkerView.position = pos;
+
+            locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM} km`;
+          },
+          () => {
+            handleLocationError(true, infoWindow, map.getCenter()!);
+          }
+        ),
+      3000
+    );
+
+    locationButton.addEventListener('click', () => {
+      // Try HTML5 geolocation.
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(
+          (position: GeolocationPosition) => {
+            const pos = {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude,
+            };
+
+            map.setCenter(pos);
+            map.setZoom(12);
+          },
+          () => {
+            handleLocationError(true, infoWindow, map.getCenter()!);
+          }
+        );
+      } else {
+        // Browser doesn't support Geolocation
+        handleLocationError(false, infoWindow, map.getCenter()!);
+      }
+    });
+  }
+
+  function handleLocationError(
+    browserHasGeolocation: boolean,
+    infoWindow: google.maps.InfoWindow,
+    pos: google.maps.LatLng
+  ) {
+    infoWindow.setPosition(pos);
+    infoWindow.setContent(
+      browserHasGeolocation
+        ? 'Error: Konumunuz tespit edilemedi.'
+        : 'Error: Tarayıcınız konum tespitini desteklemiyor.'
+    );
+    infoWindow.open(map);
+  }
+
+  initMap();
+</script>
+
+<style>
+  .module {
+    display: grid;
+    place-items: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .module::before {
+    content: '';
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-image: url('/sample-selfie.webp');
+    background-position: center;
+    background-repeat: no-repeat;
+    filter: blur(20px);
+  }
+
+  .module-inside {
+    position: relative;
+  }
+</style>
diff --git a/src/styles/locked-content.css b/src/styles/locked-content.css
new file mode 100644
index 0000000..5b65507
--- /dev/null
+++ b/src/styles/locked-content.css
@@ -0,0 +1,23 @@
+.module {
+  display: grid;
+  place-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.module::before {
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-image: url("/sample-selfie.webp");
+  background-position: center;
+  background-repeat: no-repeat;
+  filter: blur(20px);
+}
+
+.module-inside {
+  position: relative;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 92402b2..c05caa2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,9 +5,7 @@
     "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   }
 }