From ccbe2e2213a16fe7696fab59df67d2d934f04c50 Mon Sep 17 00:00:00 2001
From: log101 <ffrknerdm@gmail.com>
Date: Tue, 16 Jan 2024 18:23:46 +0300
Subject: [PATCH] feat: add target location

---
 public/goal.png            | Bin 0 -> 766 bytes
 src/pages/index.astro      |  39 ++++++--
 src/pages/unlocked.astro   | 198 -------------------------------------
 src/styles/locked-page.css |  31 +++---
 4 files changed, 45 insertions(+), 223 deletions(-)
 create mode 100644 public/goal.png
 delete mode 100644 src/pages/unlocked.astro

diff --git a/public/goal.png b/public/goal.png
new file mode 100644
index 0000000000000000000000000000000000000000..73fa536c1edac9a692e99c50909cda2ac9f58102
GIT binary patch
literal 766
zcmV<a0s;MrP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00001b5ch_0Itp)
z=>Px%xJg7oR7gv;)l2A=RTKsApHfMYWCme_qSwHPGBSm%puz^dh$ylm@Bu-SMDx`k
z><MXQP&9GUB(zKn)E*f0CZmWRMqvaQ%|a@}2r)6wihbe!KkoltL_F}p_c&*-z1P}n
ze-j+%HQ^}Ze}s$iJYK}#qs|{Kz<+%Kf5&rpX&BJ40Q9hi0u2M0gV*sLZmej%3MS)0
zEW;V~Z6MGffV_JcPhn!?d^7Iq0QAnCip7nh<v6|e?8ZgC@&*B{z%vcx09KWlz5Trk
z`T-W;Tr4V(FEML8fD2o;KUDCmik|*PIcADJ$L!)Zt=L^Xfbcz(`#}}ljaRV;({T`Q
z;4tp&XpqN0i^~2s&AB8Nn!nGcehp%rbjFg#<qNn5ALDCW-UpDt>Hk4STZotIeBz7&
z_yE_opw}b!$^Q20pmb7JSLAfrH`s;ya0A|L32keM-PQ#NuT!fN_TeW)^pi{UK>%ms
zH~d(%W`EAbJC}9=vM~py)uElZ66cpL+5aK_txWTL9)50>ev8YRcTOnn(&DFd0k-3o
zy58!e=vKTr&QQAt8}V7ACeA;*`QcamQs84Wc(et1taZ(5Jc$Gjmnr{}%Df-vf|g87
zH3bh~JyteK*J53{dknx$&4I~0{H1FSVFT{PJ9xIl56^M!LzvWj^EPfSdLnkl#MO<)
zPrDSIR2e1PRP#gySXxy@?CuJ6^V>Z718Zuud{v_&{uxt2o@W$D?yo5Ea(`BtYF=~s
z{_@AB);X^g;&phxQS?v!kfOo=YtXQZ29Gz>rEQb_E8_^9*P$qrH$yQMM)V%&xBvkS
zzfa@D=IHmznLDZlbMUk>;3Lhs=U^}H$JTB#!+tmsD>OutVJo8{3H>!_)2Lr&D!2o4
wF|*N?){N28x}P-gE%;&>`Y3=A$&dbg1n}dX83xk=asU7T07*qoM6N<$f^nO3aR2}S

literal 0
HcmV?d00001

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9232e47..55ffcfb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -23,10 +23,7 @@ import LocationButton from '@/components/LockedContent';
         <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>
+        <p>Aşağıdaki konuma gitmen</p>
       </CardContent>
       <CardFooter className="gap-2">
         <CalendarIcon />
@@ -43,6 +40,7 @@ import LocationButton from '@/components/LockedContent';
 </Layout>
 
 <script>
+  // TODO: Move script to a seperate file
   import distance from '../utils/distance';
 
   let map: google.maps.Map, infoWindow: google.maps.InfoWindow;
@@ -65,6 +63,21 @@ import LocationButton from '@/components/LockedContent';
     const currentLocationIcon = document.createElement('img');
     currentLocationIcon.src = '/blue-dot.png';
 
+    const targetLocationIcon = document.createElement('img');
+    targetLocationIcon.src = '/goal.png';
+    targetLocationIcon.height = 32;
+    targetLocationIcon.width = 32;
+
+    const parser = new DOMParser();
+    // A marker with a custom inline SVG.
+    const pinSvgString =
+      '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-goal"><path d="M12 13V2l8 4-8 4"/><path d="M20.55 10.23A9 9 0 1 1 8 4.94"/><path d="M8 10a5 5 0 1 0 8.9 2.02"/></svg>';
+
+    const pinSvg = parser.parseFromString(
+      pinSvgString,
+      'image/svg+xml'
+    ).documentElement;
+
     const currentLocationMarkerView = new AdvancedMarkerElement({
       map,
       position: { lat: 37.434, lng: -122.082 },
@@ -72,6 +85,13 @@ import LocationButton from '@/components/LockedContent';
       title: 'Current Location',
     });
 
+    const targetLocationMarkerView = new AdvancedMarkerElement({
+      map,
+      position: { lat: 37.434, lng: -122.082 },
+      content: pinSvg,
+      title: 'A marker using a custom PNG Image',
+    });
+
     infoWindow = new google.maps.InfoWindow();
 
     const locationButton = document.createElement('button');
@@ -95,17 +115,20 @@ import LocationButton from '@/components/LockedContent';
               lng: position.coords.longitude,
             };
 
-            const mapPos = map.getCenter();
-
             const totalDistanceInKM = distance(
               pos.lat,
               pos.lng,
-              mapPos?.lat(),
-              mapPos?.lng()
+              41.045227057192136,
+              28.98791224002213
             ).toFixed(0);
 
             currentLocationMarkerView.position = pos;
 
+            targetLocationMarkerView.position = {
+              lat: 41.045227057192136,
+              lng: 28.98791224002213,
+            };
+
             locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM} km`;
           },
           () => {
diff --git a/src/pages/unlocked.astro b/src/pages/unlocked.astro
deleted file mode 100644
index da6a201..0000000
--- a/src/pages/unlocked.astro
+++ /dev/null
@@ -1,198 +0,0 @@
----
-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-page.css b/src/styles/locked-page.css
index 925aa9f..82030ce 100644
--- a/src/styles/locked-page.css
+++ b/src/styles/locked-page.css
@@ -1,19 +1,16 @@
 .custom-map-control-button {
-    background-color: #fff;
-    border: 0;
-    border-radius: 2px;
-    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
-    margin: 10px;
-    padding: 0 0.5em;
-    font:
-      400 18px Roboto,
-      Arial,
-      sans-serif;
-    overflow: hidden;
-    height: 40px;
-    cursor: pointer;
-  }
+  background-color: #fff;
+  border: 0;
+  border-radius: 2px;
+  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+  margin: 10px;
+  padding: 0 0.5em;
+  font: 400 18px Roboto, Arial, sans-serif;
+  overflow: hidden;
+  height: 40px;
+  cursor: pointer;
+}
 
-  .custom-map-control-button:hover {
-    background: rgb(235, 235, 235);
-  }
+.custom-map-control-button:hover {
+  background: rgb(235, 235, 235);
+}