feat: add target location

src/pages/index.astro

@@ -23,10 +23,7 @@ import LocationButton from '@/components/LockedContent';
         <CardTitle>Ayşe</CardTitle>
       </CardHeader>
       <CardContent>
-        <p>
+        <p>Aşağıdaki konuma gitmen</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 />
@@ -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(),
+              41.045227057192136,
-              mapPos?.lng()
+              28.98791224002213
             ).toFixed(0);
 
             currentLocationMarkerView.position = pos;
 
+            targetLocationMarkerView.position = {
+              lat: 41.045227057192136,
+              lng: 28.98791224002213,
+            };
+
             locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM} km`;
           },
           () => {

src/pages/unlocked.astro

@@ -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>

src/styles/locked-page.css

@@ -1,19 +1,16 @@
 .custom-map-control-button {
-    background-color: #fff;
+  background-color: #fff;
-    border: 0;
+  border: 0;
-    border-radius: 2px;
+  border-radius: 2px;
-    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
-    margin: 10px;
+  margin: 10px;
-    padding: 0 0.5em;
+  padding: 0 0.5em;
-    font:
+  font: 400 18px Roboto, Arial, sans-serif;
-      400 18px Roboto,
+  overflow: hidden;
-      Arial,
+  height: 40px;
-      sans-serif;
+  cursor: pointer;
-    overflow: hidden;
+}
-    height: 40px;
-    cursor: pointer;
-  }
 
-  .custom-map-control-button:hover {
+.custom-map-control-button:hover {
-    background: rgb(235, 235, 235);
+  background: rgb(235, 235, 235);
-  }
+}